SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /*6* Skeleton V1.27* Copyright 2011, Dave Gamache8* www.getskeleton.com9* Free to use under the MIT license.10* http://www.opensource.org/licenses/mit-license.php11* 6/20/201212*/13 14 15/* Table of Content16==================================================17 #Reset & Basics18 #Basic Styles19 #Site Styles20 #Typography21 #Links22 #Lists23 #Images24 #Buttons25 #Forms26 #Misc */27 28 29/* #Reset & Basics (Inspired by E. Meyers)30================================================== */31 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {32 margin: 0;33 padding: 0;34 border: 0;35 font-size: 100%;36 font: inherit;37 vertical-align: baseline; }38 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {39 display: block; }40 body {41 line-height: 1; }42 ol, ul {43 list-style: none; }44 blockquote, q {45 quotes: none; }46 blockquote:before, blockquote:after,47 q:before, q:after {48 content: '';49 content: none; }50 table {51 border-collapse: collapse;52 border-spacing: 0; }53 54 55/* #Basic Styles56================================================== */57 body {58 background: #fff;59 font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;60 color: #444;61 -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */62 -webkit-text-size-adjust: 100%;63 }64 65 66/* #Typography67================================================== */68 h1, h2, h3, h4, h5, h6 {69 color: #181818;70 font-family: "Georgia", "Times New Roman", serif;71 font-weight: normal; }72 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }73 h1 { font-size: 46px; line-height: 50px; margin: 14px 0;}74 h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }75 h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }76 h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }77 h5 { font-size: 17px; line-height: 24px; }78 h6 { font-size: 14px; line-height: 21px; }79 .subheader { color: #777; }80 81 p { margin: 5px 5px 15px 5px; }82 p img { margin: 0; }83 p.lead { font-size: 21px; line-height: 27px; color: #777; }84 85 em { font-style: italic; }86 strong { font-weight: bold; color: #333; }87 small { font-size: 80%; }88 89/* Blockquotes */90 blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }91 blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }92 blockquote cite { display: block; font-size: 12px; color: #555; }93 blockquote cite:before { content: "\2014 \0020"; }94 blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }95 96 hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 5px 0; height: 0; }97 98 99/* #Links100================================================== */101 a, a:visited { color: #333; text-decoration: none; outline: 0; }102 a:hover, a:focus { color: #000; }103 p a, p a:visited { line-height: inherit; }104 105 106/* #Lists107================================================== */108 ul, ol { margin-bottom: 20px; }109 ul { list-style: none outside; }110 ol { list-style: decimal; }111 ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }112 ul.square { list-style: square outside; }113 ul.circle { list-style: circle outside; }114 ul.disc { list-style: disc outside; }115 ul ul, ul ol,116 ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }117 ul ul li, ul ol li,118 ol ol li, ol ul li { margin-bottom: 6px; }119 li { line-height: 18px; margin-bottom: 12px; }120 ul.large li { line-height: 21px; }121 li p { line-height: 21px; }122 123/* #Images124================================================== */125 126 img.scale-with-grid {127 max-width: 100%;128 height: auto; }129 130 131/* #Buttons132================================================== */133 134 .button,135 button,136 input[type="submit"],137 input[type="reset"],138 input[type="button"] {139 background: #eee; /* Old browsers */140 background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */141 background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */142 background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */143 background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */144 background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */145 background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */146 border: 1px solid #aaa;147 border-top: 1px solid #ccc;148 border-left: 1px solid #ccc;149 -moz-border-radius: 3px;150 -webkit-border-radius: 3px;151 border-radius: 3px;152 color: #444;153 display: inline-block;154 font-size: 11px;155 font-weight: bold;156 text-decoration: none;157 text-shadow: 0 1px rgba(255, 255, 255, .75);158 cursor: pointer;159 margin-bottom: 20px;160 line-height: normal;161 padding: 8px 10px;162 font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }163 164 .button:hover,165 button:hover,166 input[type="submit"]:hover,167 input[type="reset"]:hover,168 input[type="button"]:hover {169 color: #222;170 background: #ddd; /* Old browsers */171 background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */172 background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */173 background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */174 background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */175 background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */176 background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */177 border: 1px solid #888;178 border-top: 1px solid #aaa;179 border-left: 1px solid #aaa; }180 181 .button:active,182 button:active,183 input[type="submit"]:active,184 input[type="reset"]:active,185 input[type="button"]:active {186 border: 1px solid #666;187 background: #ccc; /* Old browsers */188 background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */189 background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */190 background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */191 background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */192 background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */193 background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }194 195 .button.full-width,196 button.full-width,197 input[type="submit"].full-width,198 input[type="reset"].full-width,199 input[type="button"].full-width {200 width: 100%;201 padding-left: 0 !important;202 padding-right: 0 !important;203 text-align: center; }204 205 /* Fix for odd Mozilla border & padding issues */206 button::-moz-focus-inner,207 input::-moz-focus-inner {208 border: 0;209 padding: 0;210 }211 212 213/* #Forms214================================================== */215 216 form {217 margin-bottom: 20px; }218 fieldset {219 margin-bottom: 20px; }220 input[type="text"],221 input[type="password"],222 input[type="email"],223 textarea,224 select {225 border: 1px solid #ccc;226 padding: 6px 4px;227 outline: none;228 -moz-border-radius: 2px;229 -webkit-border-radius: 2px;230 border-radius: 2px;231 font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;232 color: #777;233 margin: 0;234 width: 210px;235 max-width: 100%;236 display: block;237 margin-bottom: 20px;238 background: #fff; }239 select {240 padding: 0; }241 input[type="text"]:focus,242 input[type="password"]:focus,243 input[type="email"]:focus,244 textarea:focus {245 border: 1px solid #aaa;246 color: #444;247 -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);248 -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);249 box-shadow: 0 0 3px rgba(0,0,0,.2); }250 textarea {251 min-height: 60px; }252 label,253 legend {254 display: block;255 font-weight: bold;256 font-size: 13px; }257 select {258 width: 220px; }259 input[type="checkbox"] {260 display: inline; }261 label span,262 legend span {263 font-weight: normal;264 font-size: 13px;265 color: #444; }266 267/* #Misc268================================================== */269 .remove-bottom { margin-bottom: 0 !important; }270 .half-bottom { margin-bottom: 10px !important; }271 .add-bottom { margin-bottom: 20px !important; }272 273 274 275 276 277/*278* Skeleton V1.2279* Copyright 2011, Dave Gamache280* www.getskeleton.com281* Free to use under the MIT license.282* http://www.opensource.org/licenses/mit-license.php283* 6/20/2012284*/285 286 287/* Table of Contents288==================================================289 #Base 960 Grid290 #Tablet (Portrait)291 #Mobile (Portrait)292 #Mobile (Landscape)293 #Clearing */294 295 296 297/* #Base 960 Grid298================================================== */299 300 .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }301 .container .column,302 .container .columns { float: left; display: inline; margin: 0 10px 10px; }303 .row { margin-bottom: 20px; }304 305 .container .columns.first {306 margin-top: 50px;307 }308 309 /* Nested Column Classes */310 .column.alpha, .columns.alpha { margin-left: 0; }311 .column.omega, .columns.omega { margin-right: 0; }312 313 /* Base Grid */314 .container .one.column,315 .container .one.columns { width: 40px; }316 .container .two.columns { width: 100px; }317 .container .three.columns { width: 160px; }318 .container .four.columns { width: 220px; }319 .container .five.columns { width: 280px; }320 .container .six.columns { width: 340px; }321 .container .seven.columns { width: 400px; }322 .container .eight.columns { width: 460px; }323 .container .nine.columns { width: 520px; }324 .container .ten.columns { width: 580px; }325 .container .eleven.columns { width: 640px; }326 .container .twelve.columns { width: 700px; }327 .container .thirteen.columns { width: 760px; }328 .container .fourteen.columns { width: 820px; }329 .container .fifteen.columns { width: 880px; }330 .container .sixteen.columns { width: 940px; }331 332 .container .one-third.column { width: 300px; }333 .container .two-thirds.column { width: 620px; }334 335 /* Offsets */336 .container .offset-by-one { padding-left: 60px; }337 .container .offset-by-two { padding-left: 120px; }338 .container .offset-by-three { padding-left: 180px; }339 .container .offset-by-four { padding-left: 240px; }340 .container .offset-by-five { padding-left: 300px; }341 .container .offset-by-six { padding-left: 360px; }342 .container .offset-by-seven { padding-left: 420px; }343 .container .offset-by-eight { padding-left: 480px; }344 .container .offset-by-nine { padding-left: 540px; }345 .container .offset-by-ten { padding-left: 600px; }346 .container .offset-by-eleven { padding-left: 660px; }347 .container .offset-by-twelve { padding-left: 720px; }348 .container .offset-by-thirteen { padding-left: 780px; }349 .container .offset-by-fourteen { padding-left: 840px; }350 .container .offset-by-fifteen { padding-left: 900px; }351 352 353 354/* #Tablet (Portrait)355================================================== */356 357 /* Note: Design for a width of 768px */358 359 @media only screen and (min-width: 768px) and (max-width: 959px) {360 .container { width: 768px; }361 .container .column,362 .container .columns { margin: 0 10px 10px; }363 .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }364 .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }365 .alpha.omega { margin-left: 0; margin-right: 0; }366 367 .container .one.column,368 .container .one.columns { width: 28px; }369 .container .two.columns { width: 76px; }370 .container .three.columns { width: 124px; }371 .container .four.columns { width: 172px; }372 .container .five.columns { width: 220px; }373 .container .six.columns { width: 268px; }374 .container .seven.columns { width: 316px; }375 .container .eight.columns { width: 364px; }376 .container .nine.columns { width: 412px; }377 .container .ten.columns { width: 460px; }378 .container .eleven.columns { width: 508px; }379 .container .twelve.columns { width: 556px; }380 .container .thirteen.columns { width: 604px; }381 .container .fourteen.columns { width: 652px; }382 .container .fifteen.columns { width: 700px; }383 .container .sixteen.columns { width: 748px; }384 385 .container .one-third.column { width: 236px; }386 .container .two-thirds.column { width: 492px; }387 388 /* Offsets */389 .container .offset-by-one { padding-left: 48px; }390 .container .offset-by-two { padding-left: 96px; }391 .container .offset-by-three { padding-left: 144px; }392 .container .offset-by-four { padding-left: 192px; }393 .container .offset-by-five { padding-left: 240px; }394 .container .offset-by-six { padding-left: 288px; }395 .container .offset-by-seven { padding-left: 336px; }396 .container .offset-by-eight { padding-left: 384px; }397 .container .offset-by-nine { padding-left: 432px; }398 .container .offset-by-ten { padding-left: 480px; }399 .container .offset-by-eleven { padding-left: 528px; }400 .container .offset-by-twelve { padding-left: 576px; }401 .container .offset-by-thirteen { padding-left: 624px; }402 .container .offset-by-fourteen { padding-left: 672px; }403 .container .offset-by-fifteen { padding-left: 720px; }404 }405 406 407/* #Mobile (Portrait)408================================================== */409 410 /* Note: Design for a width of 320px */411 412 @media only screen and (max-width: 767px) {413 .container { width: 300px; }414 .container .columns,415 .container .column { margin: 0 0 10px; }416 417 .container .columns.first {418 margin-top: 70px;419 }420 421 .container .one.column,422 .container .one.columns,423 .container .two.columns,424 .container .three.columns,425 .container .four.columns,426 .container .five.columns,427 .container .six.columns,428 .container .seven.columns,429 .container .eight.columns,430 .container .nine.columns,431 .container .ten.columns,432 .container .eleven.columns,433 .container .twelve.columns,434 .container .thirteen.columns,435 .container .fourteen.columns,436 .container .fifteen.columns,437 .container .sixteen.columns,438 .container .one-third.column,439 .container .two-thirds.column { width: 300px; }440 441 /* Offsets */442 .container .offset-by-one,443 .container .offset-by-two,444 .container .offset-by-three,445 .container .offset-by-four,446 .container .offset-by-five,447 .container .offset-by-six,448 .container .offset-by-seven,449 .container .offset-by-eight,450 .container .offset-by-nine,451 .container .offset-by-ten,452 .container .offset-by-eleven,453 .container .offset-by-twelve,454 .container .offset-by-thirteen,455 .container .offset-by-fourteen,456 .container .offset-by-fifteen { padding-left: 0; }457 458 }459 460 461/* #Mobile (Landscape)462================================================== */463 464 /* Note: Design for a width of 480px */465 466 @media only screen and (min-width: 480px) and (max-width: 767px) {467 .container { width: 420px; }468 .container .columns,469 .container .column { margin: 0 0 10px; }470 471 .container .one.column,472 .container .one.columns,473 .container .two.columns,474 .container .three.columns,475 .container .four.columns,476 .container .five.columns,477 .container .six.columns,478 .container .seven.columns,479 .container .eight.columns,480 .container .nine.columns,481 .container .ten.columns,482 .container .eleven.columns,483 .container .twelve.columns,484 .container .thirteen.columns,485 .container .fourteen.columns,486 .container .fifteen.columns,487 .container .sixteen.columns,488 .container .one-third.column,489 .container .two-thirds.column { width: 420px; }490 }491 492 493/* #Clearing494================================================== */495 496 /* Self Clearing Goodness */497 .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }498 499 /* Use clearfix class on parent to clear nested columns,500 or wrap each row of columns in a <div class="row"> */501 .clearfix:before,502 .clearfix:after,503 .row:before,504 .row:after {505 content: '\0020';506 display: block;507 overflow: hidden;508 visibility: hidden;509 width: 0;510 height: 0; }511 .row:after,512 .clearfix:after {513 clear: both; }514 .row,515 .clearfix {516 zoom: 1; }517 518 /* You can also use a <br class="clear" /> to clear columns */519 .clear {520 clear: both;521 display: block;522 overflow: hidden;523 visibility: hidden;524 width: 0;525 height: 0;526 }527 528 529 530/*531* Skeleton V1.2532* Copyright 2011, Dave Gamache533* www.getskeleton.com534* Free to use under the MIT license.535* http://www.opensource.org/licenses/mit-license.php536* 6/20/2012537*/538 539/* Table of Content540==================================================541 #Site Styles542 #Page Styles543 #Media Queries544 #Font-Face */545 546/* #Site Styles547================================================== */548body {549 background: #F0F0F0;550}551.container {552 background: #FFF url('../images/container-bg.gif') repeat-x;553}554.container h1 {555 text-indent: -9999px;556 background: url('../images/logo-bg.gif') repeat-x;557 float: left;558 margin: 0;559 padding: 0;560}561.container h1 a {562 display: block;563 background: url('../images/logo.gif') no-repeat;564 height: 165px;565 width: 240px;566}567#content h1 {568 font-weight: bold;569 color: #83AB52;570 font-size: 20px;571 text-indent: 0;572 float: none;573 background: none;574}575#content ul {576 list-style: outside;577 margin-left: 30px;578}579#content a {580 color: #83AB52;581}582#content a:hover {583 color: #000;584}585.columns strong {586 margin: 5px;587 font-weight: bold;588 color: #83AB52;589 font-size: 18px;590}591ul.topnav {592 list-style: none;593 padding: 0; 594 margin: 35px 0 0;595 float: left;596 background: #FFF;597}598ul.topnav li {599 float: left;600 margin: 0; 601 padding: 0;602 position: relative;603 /*height: 130px;604 overflow: hidden;*/605}606ul.topnav li a {607 padding: 90px 0 22px;608 color: #83AB53;609 display: block;610 text-decoration: none;611 float: left;612 font-weight: bold;613 width: 120px;614 text-align: center;615 border-right: 1px solid #AAA;616 font-size: 18px;617}618ul.topnav li a.current {619 background: #EBEBEB;620 color: #333;621}622ul.topnav li a:hover{623 background: #83AB53;624 color: #FFF;625}626ul.topnav li:hover > a {627 background: #83AB53 url('../images/nav-arrow.gif') center bottom no-repeat;628 color: #FFF;629}630ul.topnav li ul.subnav {631 list-style: none;632 position: absolute;633 left: -10px; top: 130px;634 background: #a4d568;635 margin: 0;636 padding: 10px 0;637 display: none;638 float: left;639}640ul.topnav li ul.subnav li {641 margin: 0;642 padding: 0;643 clear: both;644}645ul.topnav li ul.subnav li a {646 display: block;647 width: 150px;648 /*line-height: 30px;*/649 text-align: left;650 padding: 7px 0 7px 15px;651 color: #FFF;652 margin: 0;653 border: 0;654}655ul.topnav li ul.subnav li a:hover {656 color: #5D7D3A;657 background: #a4d568;658}659#search {660 width: 210px;661 height: 130px;662 margin: 35px 0 0;663 float: left;664 background: #FFF;665}666#search #search-form {667 margin: 20px 10px;668}669#search .search-box {670 width: 145px;671 height: 29px;672 background: #eaeaea;673 border: 0;674 border-top: 6px solid #322E2D;675 float: left;676 margin: 0;677 padding: 0 0 0 10px;678 border-radius: 0;679 font-weight: bold;680 font-size: 14px;681}682#search .search-box:focus {683 background: #eaeaea;684 border: 0;685 border-top: 6px solid #322E2D;686 float: left;687 margin: 0;688 padding: 0 0 0 10px;689 border-radius: 0;690 box-shadow: none;691}692#search .search-button {693 background: url('../images/search-button.gif') no-repeat;694 width: 35px;695 height: 35px;696 text-indent: -9999px;697 margin: 0;698 padding: 0;699 border: 0;700 border-radius: 0;701 float: left;702}703#search .address {704 font-size: 13px;705 font-weight: bold;706 margin: 65px 0 0 13px;707 line-height: 17px;708}709#mobile-menu {710 display: none;711}712#content {713 margin: 30px 15px 0;714 font-size: 14px;715}716.species {717 float: left;718 margin: 0 20px 20px 0;719 text-align: center;720}721#featured-tree {722 height: 283px;723 overflow: hidden;724}725#newsletter {726 width: 278px;727 height: 223px;728 padding: 10px;729 background: #F0F0F0;730}731#newsletter p {732 padding: 15px 15px 0;733 margin: 0;734}735.button-link a {736 background: #83ab53;737 color: #FFF;738 width: 100px;739 padding: 5px 10px;740 text-align: center;741 border: 1px solid #333;742}743.button-link a:hover {744 color: #333;745}746#content strong, #content b {747 font-weight: bold;748 color: #83AB52;749 font-size: 18px;750}751#content #sitemap li {752 font-size: 13px;753}754ul.footer {755 list-style: none;756 padding: 0; 757 margin: 0;758 background: #FFF;759}760ul.footer li {761 float: left;762 margin: 5px 10px 0; 763 padding: 0;764 position: relative;765}766ul.footer li a {767 color: #83AB52;768}769ul.footer li a:hover {770 color: #000;771}772.one-third img {773 width: 298px;774}775input[type="text"], input[type="password"], input[type="email"], textarea, select {776 width: 300px;777}778/* #Page Styles779================================================== */780 781/* #Media Queries782================================================== */783 784/* Smaller than standard 960 (devices and browsers) */785@media only screen and (max-width: 959px) {}786 787/* Tablet Portrait size to standard 960 (devices and browsers) */788@media only screen and (min-width: 768px) and (max-width: 959px) {789 ul.topnav li a {790 width: 80px;791 font-size: 16px;792 }793 794 #search {795 width: 180px;796 height: 130px;797 margin: 35px 0 0;798 float: left;799 background: #FFF;800 }801 #search #search-form {802 margin: 20px 10px;803 }804 #search .search-box {805 width: 115px;806 }807 808 .one-third img {809 width: 234px;810 }811 h1 { font-size: 35px; line-height: 40px; margin: 10px 0; }812 h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }813 h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }814 h4 { font-size: 17px; line-height: 24px; }815 h5 { font-size: 14px; line-height: 21px; }816 h6 { font-size: 12px; line-height: 18px; }817 818 input[type="text"], input[type="password"], input[type="email"], textarea, select {819 width: 400px;820 }821}822 823/* All Mobile Sizes (devices and browser) */824@media only screen and (max-width: 767px) {}825 826/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */827@media only screen and (min-width: 480px) and (max-width: 767px) {828 829 .container h1 a {830 display: block;831 height: 165px;832 width: 240px;833 }834 835 #search {836 width: 180px;837 height: 130px;838 margin: 35px 0 0;839 float: left;840 background: #FFF;841 }842 843 #search #search-form {844 margin: 20px 10px;845 }846 #search .search-box {847 width: 115px;848 }849 .one-third img {850 width: 418px;851 }852 .topnav {853 display: none;854 }855 #mobile-menu {856 float: none;857 width: 418px;858 padding: 5px;859 display: inline-block;860 margin: 10px 0;861 }862 h1 { font-size: 28px; line-height: 34px; margin: 8px 0; }863 h2 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }864 h3 { font-size: 17px; line-height: 24px; }865 h4 { font-size: 14px; line-height: 21px; }866 h5 { font-size: 12px; line-height: 18px; }867 h6 { font-size: 12px; line-height: 18px; }868 869 input[type="text"], input[type="password"], input[type="email"], textarea, select {870 width: 400px;871 }872}873 874/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */875@media only screen and (max-width: 479px) {876 .one-third img {877 width: 298px;878 }879 .topnav {880 display: none;881 }882 .container h1 a {883 display: block;884 height: 165px;885 width: 298px;886 background-position: center top;887 }888 #search {889 width: 298px;890 height: 55px;891 margin: 0;892 float: left;893 background: #FFF;894 }895 896 #search #search-form {897 margin: 10px;898 }899 #search .search-box {900 width: 233px;901 }902 #search .address {903 font-size: 13px;904 font-weight: bold;905 margin: 90px 0 0 13px;906 line-height: 17px;907 }908 #mobile-menu {909 float: none;910 width: 280px;911 padding: 5px;912 display: inline-block;913 margin: 0 10px 15px;914 }915 h1 { font-size: 23px; line-height: 34px; margin: 8px 0; }916 h2 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }917 h3 { font-size: 17px; line-height: 24px; }918 h4 { font-size: 14px; line-height: 21px; }919 h5 { font-size: 12px; line-height: 18px; }920 h6 { font-size: 12px; line-height: 18px; }921 922 input[type="text"], input[type="password"], input[type="email"], textarea, select {923 width: 260px;924 }925 #content img {926 width: 270px;927 height: auto;928 margin-bottom: 10px;929 }930}931 932/* #Font-Face933================================================== */934/* This is the proper syntax for an @font-face file935 Just create a "fonts" folder at the root,936 copy your FontName into code below and remove937 comment brackets */938 939/* @font-face {940 font-family: 'FontName';941 src: url('../fonts/FontName.eot');942 src: url('../fonts/FontName.eot?iefix') format('eot'),943 url('../fonts/FontName.woff') format('woff'),944 url('../fonts/FontName.ttf') format('truetype'),945 url('../fonts/FontName.svg#webfontZam02nTh') format('svg');946 font-weight: normal;947 font-style: normal; }948*/949 </style>950 <!-- Basic Page Needs951 ================================================== -->952 <meta charset="utf-8">953 <title>954 The North Harbour Big Tree Company - Trees -955 </title>956 <meta content name="description">957 <meta content name="author">958 <!-- Mobile Specific Metas959 ================================================== -->960 <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">961 <!-- CSS962 ================================================== -->963 <!--[if lt IE 9]>964 965 <![endif]-->966 <!-- Favicons967 ================================================== -->968 </head>969 <body>970 <!-- Primary Page Layout971 ================================================== -->972 <!-- Delete everything in this .container and get started on your own site! -->973 <div class="container">974 <div class="sixteen columns">975 <h1>976 <a>977 North Harbour Big Tree Company978 </a>979 </h1>980 <ul class="topnav">981 <li>982 <a>983 Home984 </a>985 </li>986 <li>987 <a class="current">988 Trees989 </a>990 <ul class="subnav">991 <li>992 <a>993 Deciduous994 </a>995 </li>996 <li>997 <a>998 Evergreen999 </a>1000 </li>1001 <li>1002 <a>1003 Fruit1004 </a>1005 </li>1006 <li>1007 <a>1008 Native1009 </a>1010 </li>1011 </ul>1012 </li>1013 <li>1014 <a>1015 Services1016 </a>1017 </li>1018 <li>1019 <a>1020 Contact1021 </a>1022 </li>1023 </ul>1024 <div id="search">1025 <form action="search.php" id="search-form" method="get">1026 <input class="search-box" name="keyword" onfocus="if (this.value == 'Tree Search') {this.value=''}" onsubmit="if(this.value == 'Tree Search') { this.value=''}" type="text" value="Tree Search">1027 <input class="search-button disabled" disabled="true" type="submit">1028 </form>1029 <p class="address">1030 774 Dairy Flat Highway,1031 <br>1032 Albany,1033 <br>1034 AUCKLAND.1035 <br>1036 Tel: (09) 415 73731037 </p>1038 </div>1039 <select id="mobile-menu">1040 <option value>1041 Site Navigation1042 </option>1043 <option value="">1044 Home1045 </option>1046 <option value="">1047 Trees1048 </option>1049 <optgroup label="Species">1050 <option value="">1051 Deciduous1052 </option>1053 <option value="">1054 Evergreen1055 </option>1056 <option value="">1057 Fruit1058 </option>1059 <option value="">1060 Native1061 </option>1062 </optgroup>1063 <option value="">1064 Services1065 </option>1066 <option value="">1067 Contact1068 </option>1069 </select>1070 </div>1071 <div class="sixteen columns first">1072 <div id="content">1073 <img align="right" alt="Griselinia Littoralis Broadway Mint (Kapuka) - Griselinia Littoralis Broadway Mint" border="0" height="400" src="rick.jpg" title="Griselinia Littoralis Broadway Mint (Kapuka) - Griselinia Littoralis Broadway Mint" width="300">1074 <p>1075 <strong>1076 GRISELINIA LITTORALIS BROADWAY MINT (KAPUKA)1077 </strong>1078 - Evergreen1079 </p>1080 <p>1081 <i>1082 GRISELINIA LITTORALIS BROADWAY MINT1083 </i>1084 </p>1085 <p>1086 AVAILABILITY :1087 <span class="textRed">1088 Available1089 </span>1090 </p>1091 <p>1092 SUITABILITY: Coastal conditions1093 </p>1094 <p>1095 PRICE 1: 45L @ $120.00 (1 - 1.2m)1096 </p>1097 <p>1098 PRICE 2: PB150 @ $275.00 (1.6-1.8m)1099 </p>1100 <p>1101 Shiny broad leaves.1102 <br>1103 Grows 3mx2m.1104 <br>1105 </p>1106 <p>1107 <a>1108 Back1109 </a>1110 </p>1111 </div>1112 </div>1113 <div class="sixteen columns">1114 <hr>1115 <ul class="footer">1116 <li>1117 <a>1118 Home1119 </a>1120 </li>1121 <li>1122 <a>1123 Trees1124 </a>1125 </li>1126 <li>1127 <a>1128 Services1129 </a>1130 </li>1131 <li>1132 <a>1133 Contact1134 </a>1135 </li>1136 </ul>1137 </div>1138 <div class="sixteen columns">1139 <hr>1140 Website text and photos © 2023 North Harbour Big Tree Company.1141 <span style="float: right;">1142 Website developed by1143 <a target="_blank">1144 W3 design1145 </a>1146 </span>1147 </div>1148 </div>1149 <!-- container -->1150 <!-- End Document1151================================================== -->1152 </body>1153</html>1154