Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!Doctype html> <html> <head> <title> test html </title> <h1>My Patio Garden</h1> <link rel="stylesheet" type="text/css" href="css/testCSS.css"> </head> <body> <div class="loginuserid"> <label for="userid">Username</label> <input type="text" value="" name="userid" id="userid" maxlength="10" size="16" tabindex="1" pattern="\d*"> </div> <div class="loginpassword"> <label for="password">Password</label> <input type="password" name="password" id="password" maxlength="32" size="16" autocomplete="OFF" tabindex="2"> </div> <button type="submit" name="logonBtn" id="logonBtn" value="logonBtn" tabindex="3">Log on</button> <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1" tabindex="4"> <label for="tab1">Getting Started</label> <div id="tab-content1" class="tab-content animated fadeIn"> <p>Here's how you can get started!<br>Plant a vegetable!!!!</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">Vegetables</label> <div id="tab-content2" class="tab-content animated fadeIn"><table> <tr> <td><a href="#avocado"><p>Avocado</p></a><img src="images/Artichoke.png" height="100" width =100></td> <td><a href="#broccoli"><p>Broccoli</p></a><img src="" height="100" width =100></td> <td><a href="#celery"><p>Celery</p></a><img src="" height="100" width =100></td> <td><a href="#cucumber"><p>Cucumber</p></a><img src="" height="100" width =100></td> </tr> <tr> <td><a href="#ginger"><p>Ginger</p></a><img src="" height="100" width =100></td> <td><a href="#horseradish"><p>Horseradish</p></a><img src="" height="100" width =100></td> <td><a href="#lettuce"><p>Lettuce</p></a><img src="" height="100" width =100></td> <td><a href="#leek"><p>Leek</p></a><img src="" height="100" width =100></td> </tr> <tr> <td><a href="#onion"><p>Onion</p></a><img src="" height="100" width =100></td> <td><a href="#potato"><p>Potato</p></a><img src="" height="100" width =100></td> <td><a href="#turnip"><p>Turnip</p></a><img src="" height="100" width =100></td> <td><a href="#wasabi"><p>Wasabi</p></a><img src="" height="100" width =100></td> </tr> </table> <p>Name:</p> <p><input type="text" name="name" value="Your name"></p> <p>Password:</p> <p><input type="password" name="name" value=""></p> <p>Okay</p> <p><input type="submit" name="" value="Login"></p> <h2 id="avocado">Avocado</h2> <h2 id="broccoli">Broccoli</h2> <h2 id="celery">Celery</h2> <h2 id="cucumber">Cucumber</h2> <h2 id="ginger">Ginger</h2> <h2 id="horseradish">Horseradish</h2> <h2 id="lettuce">Lettuce</h2> <h2 id="leek">Leek</h2> <h2 id="onion">Onion</h2> <h2 id="potato">Potato</h2> <h2 id="turnip">Turnip</h2> <h2 id="wasabi">Wasabi</h2> </div> </li> <li> <input type="radio" name="tabs" id="tab3"> <label for="tab3">tab 3</label> <div id="tab-content3" class="tab-content animated fadeIn"> <p>Tab content 3</p> </div> </li> </ul> </body> </html>
a, h1, h2, p { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: #92CD00; } body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #E5E4D7;/*linen color*/ text-align: center; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .tabs input[type=radio] { position: absolute; top: -9999px; left: -9999px; } .tabs { width: 100%; float: none; list-style: none; position: relative; padding: 0; margin: 75px auto; } .tabs li{ float: left; } .tabs label { display: block; padding: 10px 20px; border-radius: 2px 2px 0 0; color: #08C; font-size: 24px; font-weight: normal; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; /*font-family: 'Lily Script One', helveti;*/ background: #E5E4D7;/*linen color*/ cursor: pointer; position: relative; top: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: rgba(255, 207, 121, 0.5); top: 0; } [id^=tab]:checked + label { background: #2C6700; color: white; top: 0; } [id^=tab]:checked ~ [id^=tab-content] { display: block; } .tab-content{ z-index: 2; display: none; text-align: left; width: 100%; font-size: 20px; line-height: 140%; padding-top: 10px; background: #E5E4D7;/*linen color*/ padding: 15px; color: white; position: absolute; top: 53px; left: 0; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; } div.loginuserid{padding-left:0px;} div.loginpassword{padding-left:5px;}
/* Write JavaScript here */