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.8k
1<!DOCTYPE html>2<html class="csstransforms csstransforms3d csstransitions">3 <!--<![endif]-->4 <head>5 <style>6 /*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */7 8.fancybox-wrap,9.fancybox-skin,10.fancybox-outer,11.fancybox-inner,12.fancybox-image,13.fancybox-wrap iframe,14.fancybox-wrap object,15.fancybox-nav,16.fancybox-nav span,17.fancybox-tmp18{19 padding: 0;20 margin: 0;21 border: 0;22 outline: none;23 vertical-align: top;24}25 26.fancybox-wrap {27 position: absolute;28 top: 0;29 left: 0;30 z-index: 8020;31}32 33.fancybox-skin {34 position: relative;35 background: transparent;36 color: #444;37 text-shadow: none;38 -webkit-border-radius: 4px;39 -moz-border-radius: 4px;40 border-radius: 4px;41}42 43.fancybox-opened {44 z-index: 8030;45}46 47.fancybox-outer, .fancybox-inner {48 position: relative;49}50 51.fancybox-inner {52 overflow: hidden;53}54 55.fancybox-type-iframe .fancybox-inner {56 -webkit-overflow-scrolling: touch;57}58 59.fancybox-error {60 color: #444;61 font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;62 margin: 0;63 padding: 15px;64 white-space: nowrap;65}66 67.fancybox-image, .fancybox-iframe {68 display: block;69 width: 100%;70 height: 100%;71}72 73.fancybox-image {74 max-width: 100%;75 max-height: 100%;76}77 78.fancybox-close, .fancybox-prev span, .fancybox-next span {79 background-repeat: no-repeat;80 background-position: 0 0;81 background-size: 22px 22px;82 display: block;83 height: 22px;84 overflow: hidden;85 text-indent: -999px;86 width: 22px;87}88 89#fancybox-loading {90 background-image: url("");91 position: fixed;92 top: 50%;93 left: 50%;94 margin-top: -11px;95 margin-left: -11px;96 background-position: 0 0;97 opacity: 1;98 cursor: pointer;99 z-index: 8060;100 width: 23px;101 height: 23px;102}103 104.fancybox-close {105 background-image: url("");106 position: absolute;107 top: 15px;108 right: -32px;109 width: 36px;110 height: 36px;111 cursor: pointer;112 z-index: 8040;113}114 115.lt-ie9 .fancybox-close {116 background: url("") 0 0 no-repeat;117}118 119.fancybox-nav {120 position: absolute;121 top: 0;122 width: 40%;123 height: 100%;124 cursor: pointer;125 text-decoration: none;126 background: transparent url(""); /* helps IE */127 -webkit-tap-highlight-color: rgba(0,0,0,0);128 z-index: 8040;129}130 131.fancybox-prev {132 left: 0;133}134 135.fancybox-next {136 right: 0;137}138 139.fancybox-nav span {140 position: absolute;141 top: 50%;142 width: 22px;143 height: 22px;144 margin-top: -11px;145 cursor: pointer;146 z-index: 8040;147 visibility: hidden;148}149 150.fancybox-prev span {151 background-image: url("");152 left: 16px;153}154 155.lt-ie9 .fancybox-prev span {156 background: url("") 0 0 no-repeat;157}158 159 160.fancybox-next span {161 background-image: url("");162 right: 16px;163}164 165.lt-ie9 .fancybox-next span {166 background: url("") 0 0 no-repeat;167}168 169.fancybox-nav:hover span {170 visibility: visible;171}172 173.fancybox-tmp {174 position: absolute;175 top: -99999px;176 left: -99999px;177 visibility: hidden;178 max-width: 99999px;179 max-height: 99999px;180 overflow: visible !important;181}182 183/* Overlay helper */184 185.fancybox-lock {186 overflow: hidden;187}188 189.fancybox-overlay {190 position: absolute;191 top: 0;192 left: 0;193 overflow: hidden;194 display: none;195 z-index: 8010;196 background: url("");197}198 199.fancybox-overlay-fixed {200 position: fixed;201 bottom: 0;202 right: 0;203}204 205.fancybox-lock .fancybox-overlay {206 overflow: auto;207 overflow-y: scroll;208}209 210/* Title helper */211 212.fancybox-title {213 visibility: hidden;214 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;215 position: relative;216 text-shadow: none;217 z-index: 8050;218}219 220.fancybox-opened .fancybox-title {221 visibility: visible;222}223 224.fancybox-title-float-wrap {225 position: absolute;226 bottom: 0;227 right: 50%;228 margin-bottom: -35px;229 z-index: 8050;230 text-align: center;231}232 233.fancybox-title-float-wrap .child {234 display: inline-block;235 margin-right: -100%;236 padding: 2px 20px;237 background: transparent; /* Fallback for web browsers that doesn't support RGBa */238 background: rgba(0, 0, 0, 0.8);239 -webkit-border-radius: 15px;240 -moz-border-radius: 15px;241 border-radius: 15px;242 text-shadow: 0 1px 2px #222;243 color: #FFF;244 font-weight: bold;245 line-height: 24px;246 white-space: nowrap;247}248 249.fancybox-title-outside-wrap {250 position: relative;251 margin-top: 10px;252 color: #fff;253}254 255.fancybox-title-inside-wrap {256 padding-top: 10px;257}258 259.fancybox-title-over-wrap {260 position: absolute;261 bottom: 0;262 left: 0;263 color: #fff;264 padding: 10px;265 background: #000;266 background: rgba(0, 0, 0, .8);267}268/**** Isotope Filtering ****/269 270 271.isotope-item {272 z-index: 2;273}274 275.isotope-hidden.isotope-item {276 pointer-events: none;277 z-index: 1;278}279 280/**** Isotope CSS3 transitions ****/281 282.isotope,283.isotope .isotope-item {284 -webkit-transition-duration: 0.8s;285 -moz-transition-duration: 0.8s;286 -ms-transition-duration: 0.8s;287 -o-transition-duration: 0.8s;288 transition-duration: 0.8s;289}290 291.isotope {292 -webkit-transition-property: height, width;293 -moz-transition-property: height, width;294 -ms-transition-property: height, width;295 -o-transition-property: height, width;296 transition-property: height, width;297}298 299.isotope .isotope-item {300 -webkit-transition-property: -webkit-transform, opacity;301 -moz-transition-property: -moz-transform, opacity;302 -ms-transition-property: -ms-transform, opacity;303 -o-transition-property: -o-transform, opacity;304 transition-property: transform, opacity;305}306 307/**** disabling Isotope CSS3 transitions ****/308 309.isotope.no-transition,310.isotope.no-transition .isotope-item,311.isotope .isotope-item.no-transition {312 -webkit-transition-duration: 0s;313 -moz-transition-duration: 0s;314 -ms-transition-duration: 0s;315 -o-transition-duration: 0s;316 transition-duration: 0s;317}318html, body, div, span, applet, object, iframe,319h1, h2, h3, h4, h5, h6, p, blockquote, pre,320a, abbr, acronym, address, big, cite, code,321del, dfn, em, img, ins, kbd, q, s, samp,322small, strike, strong, sub, sup, tt, var,323b, u, i, center,324dl, dt, dd, ol, ul, li,325fieldset, form, label, legend,326table, caption, tbody, tfoot, thead, tr, th, td,327article, aside, canvas, details, embed,328figure, figcaption, footer, header, hgroup,329menu, nav, output, ruby, section, summary,330time, mark, audio, video {331 margin: 0;332 padding: 0;333 border: 0;334 font: inherit;335 font-size: 100%;336 vertical-align: baseline;337}338 339html {340 line-height: 1;341}342 343ol, ul {344 list-style: none;345}346 347table {348 border-collapse: collapse;349 border-spacing: 0;350}351 352caption, th, td {353 text-align: left;354 font-weight: normal;355 vertical-align: middle;356}357 358q, blockquote {359 quotes: none;360}361q:before, q:after, blockquote:before, blockquote:after {362 content: "";363 content: none;364}365 366a img {367 border: none;368}369 370article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {371 display: block;372}373 374/* @group responsive breakpoints */375/* @end */376.loaded a, .loaded .main .button, .main .loaded .button, .loaded aside form.search label, aside form.search .loaded label, .loaded .overlay .products_list .product .product_info, .overlay .products_list .product .loaded .product_info {377 -webkit-transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;378 -moz-transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;379 -o-transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;380 transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;381}382 383aside nav .cart, .main, .main header, .products_list, .page.cart form > ul .col1,384.page.cart form > ul .col2, form.contact li {385 zoom: 1;386}387aside nav .cart:after, .main:after, .main header:after, .products_list:after, .page.cart form > ul .col1:after,388.page.cart form > ul .col2:after, form.contact li:after {389 display: block;390 visibility: hidden;391 height: 0;392 clear: both;393 content: ".";394}395 396@-webkit-keyframes spin {397 0% {398 -webkit-transform: rotate(0deg);399 -moz-transform: rotate(0deg);400 -ms-transform: rotate(0deg);401 -o-transform: rotate(0deg);402 transform: rotate(0deg);403 }404 405 100% {406 -webkit-transform: rotate(360deg);407 -moz-transform: rotate(360deg);408 -ms-transform: rotate(360deg);409 -o-transform: rotate(360deg);410 transform: rotate(360deg);411 }412}413 414@-moz-keyframes spin {415 0% {416 -webkit-transform: rotate(0deg);417 -moz-transform: rotate(0deg);418 -ms-transform: rotate(0deg);419 -o-transform: rotate(0deg);420 transform: rotate(0deg);421 }422 423 100% {424 -webkit-transform: rotate(360deg);425 -moz-transform: rotate(360deg);426 -ms-transform: rotate(360deg);427 -o-transform: rotate(360deg);428 transform: rotate(360deg);429 }430}431 432@-o-keyframes spin {433 0% {434 -webkit-transform: rotate(0deg);435 -moz-transform: rotate(0deg);436 -ms-transform: rotate(0deg);437 -o-transform: rotate(0deg);438 transform: rotate(0deg);439 }440 441 100% {442 -webkit-transform: rotate(360deg);443 -moz-transform: rotate(360deg);444 -ms-transform: rotate(360deg);445 -o-transform: rotate(360deg);446 transform: rotate(360deg);447 }448}449 450@keyframes spin {451 0% {452 -webkit-transform: rotate(0deg);453 -moz-transform: rotate(0deg);454 -ms-transform: rotate(0deg);455 -o-transform: rotate(0deg);456 transform: rotate(0deg);457 }458 459 100% {460 -webkit-transform: rotate(360deg);461 -moz-transform: rotate(360deg);462 -ms-transform: rotate(360deg);463 -o-transform: rotate(360deg);464 transform: rotate(360deg);465 }466}467 468/* @group base */469* {470 -webkit-box-sizing: border-box;471 -moz-box-sizing: border-box;472 box-sizing: border-box;473 -webkit-font-smoothing: antialiased;474}475 476body,477html {478 height: 100%;479 min-height: 100%;480 min-width: 200px;481}482 483body {484 background-color: #ffffff;485 background-image: url("") ;486 background-repeat: repeat;487 color: #3d3d3d;488 font-family: "Courier New", Courier, monospace;489 font-size: 62.5%;490 text-rendering: optimizeLegibility;491 -webkit-font-smoothing: subpixel-antialiased !important;492}493@media screen and (max-width: 765px) {494 body {495 background-color: #ffffff;496 overflow-x: hidden;497 }498}499body.working {500 cursor: progress !important;501}502 503.wrapper {504 height: 100%;505 min-height: 100%;506 position: relative;507}508@media screen and (min-width: 765px) {509 .wrapper:after {510 background: transparent;511 content: "";512 display: none ;513 height: 100%;514 left: 0;515 min-height: 100%;516 position: fixed;517 top: 0;518 width: 209px;519 z-index: 1;520 }521}522@media screen and (min-width: 765px) and (max-width: 765px) {523 .wrapper:after {524 display: none;525 }526}527 528::selection {529 background-color: #FFFFFF;530}531 532::-moz-selection {533 background-color: #FFFFFF;534}535 536a {537 text-decoration: none;538}539 540h1,541h2,542h3,543h4,544h5,545h6 {546 color: #737373;547 font-family: "Courier New", Courier, monospace;548 font-weight: 400;549 margin-bottom: 30px;550}551 552h1 {553 font-size: 21px;554 line-height: 1.3em;555}556 557h2 {558 font-size: 18px;559}560 561h3 {562 font-size: 16px;563}564 565h4 {566 font-size: 14px;567}568 569h5 {570 font-size: 12px;571}572 573h6 {574 font-size: 11px;575}576 577p {578 margin-bottom: 15px;579}580 581sup,582sub {583 font-size: 0.6em;584 vertical-align: text-top;585}586 587sub {588 vertical-align: text-bottom;589}590 591pre code,592code {593 font-family: "Courier New", Courier, Monospace !important;594 font-weight: 700;595}596 597blockquote {598 width: auto;599 font-style: italic;600 margin: 15px;601 padding: 10px;602}603blockquote:before, blockquote:after {604 display: inline;605 content: "\201C";606 font-size: 1.2em;607}608blockquote:after {609 content: "\201D";610}611 612small {613 display: block;614 font-size: 1.1em;615 font-weight: 400;616 margin-bottom: 15px;617}618 619i,620em {621 font-style: italic;622}623 624blockquote p {625 display: inline;626}627 628b,629strong {630 font-weight: 700;631}632 633hr {634 border-bottom-color: #ffdab2;635 border-bottom-style: solid;636 border-bottom-width: 1px;637 height: 1px;638 margin: 15px 0;639 width: 100%;640}641 642/* @end */643/* @group forms */644.main .button {645 background-color: #e87903;646 -webkit-border-radius: 3px;647 -moz-border-radius: 3px;648 -ms-border-radius: 3px;649 -o-border-radius: 3px;650 border-radius: 3px;651 border: none;652 color: #ffffff !important;653 cursor: pointer;654 font-family: Courier New;655 font-size: 11px;656 font-weight: 700;657 display: -moz-inline-stack;658 display: inline-block;659 vertical-align: middle;660 *vertical-align: auto;661 zoom: 1;662 *display: inline;663 padding: 11px 20px;664}665.main .button:hover {666 background-color: #ab5800;667 color: #ffffff;668}669 670input[type=text],671textarea {672 background: white;673 border: 1px solid #bfbfbf;674 -webkit-border-radius: 3px;675 -moz-border-radius: 3px;676 -ms-border-radius: 3px;677 -o-border-radius: 3px;678 border-radius: 3px;679 font-family: Courier New;680 height: 32px;681 padding: 6px 10px;682 outline: none;683}684input[type=text]:focus,685textarea:focus {686 -webkit-box-shadow: 0 0 5px #737373 inset;687 -moz-box-shadow: 0 0 5px #737373 inset;688 box-shadow: 0 0 5px #737373 inset;689}690@media screen and (max-width: 765px) {691 input[type=text],692 textarea {693 height: 40px;694 }695}696 697textarea {698 padding: 10px;699}700 701/* @end */702/* @group errors */703.errors {704 background-color: #FFFFFF;705 -webkit-border-radius: 3px;706 -moz-border-radius: 3px;707 -ms-border-radius: 3px;708 -o-border-radius: 3px;709 border-radius: 3px;710 color: #ffffff;711 margin-bottom: 30px;712}713@media screen and (max-width: 765px) {714 .errors {715 margin: 16px 0;716 }717}718.errors li {719 font-size: 11px;720 font-weight: 700;721 height: auto !important;722 line-height: 1.3em;723 padding: 15px !important;724}725 726/* @end */727/* @group standalone pages (maintenance, checkout, etc) */728.standalone {729 height: auto;730 margin: 0 auto;731 max-width: 300px;732 padding-top: 120px;733 text-align: center;734}735.standalone h2 {736 margin-bottom: 10px;737}738 739/* @end */740/* @group responsive utility classes */741.mobile_only {742 display: none;743}744@media screen and (max-width: 765px) {745 .mobile_only {746 display: block;747 }748}749 750.not_mobile {751 display: block;752}753@media screen and (max-width: 765px) {754 .not_mobile {755 display: none;756 }757}758 759/* @end */760/* @group sidebar */761aside {762 background-color: transparent;763 float: left;764 height: 100%;765 padding: 57px 30px 0;766 position: fixed ;767 -webkit-transform: translateZ(0);768 -moz-transform: translateZ(0);769 -ms-transform: translateZ(0);770 -o-transform: translateZ(0);771 transform: translateZ(0);772 width: 209px;773 z-index: 100;774}775@media screen and (max-width: 765px) {776 aside {777 border-right-color: #ffdab2;778 border-right-style: solid;779 border-right-width: 1px;780 min-height: 100%;781 padding: 0 32px;782 position: absolute;783 width: 272px;784 z-index: 1;785 }786}787aside > div {788 min-height: 100% ;789 margin-bottom: -94px;790}791@media screen and (max-width: 765px) {792 aside > div {793 margin-bottom: 0;794 min-height: 0;795 }796}797aside > div:after {798 content: "";799 display: block;800 height: 94px;801}802@media screen and (max-width: 765px) {803 aside > div:after {804 display: none;805 }806}807aside a {808 color: #454545;809}810aside a:hover, aside a.current {811 color: #ff9c33;812}813aside header {814 margin-bottom: 35px;815 overflow: hidden;816 width: 150px;817}818@media screen and (max-width: 765px) {819 aside header {820 margin: 14px 0;821 width: 100%;822 }823}824aside header .logo {825 display: block;826 font-size: 2.4em;827 font-weight: 700;828 line-height: 1.2em;829 word-wrap: break-word;830}831@media screen and (max-width: 765px) {832 aside header .logo {833 font-size: 16px;834 }835}836aside form.search {837 color: #454545;838 cursor: pointer;839 height: 20px;840 padding: 3px 0 5px;841 position: relative;842}843@media screen and (max-width: 765px) {844 aside form.search {845 height: 28px;846 padding-top: 5px;847 }848}849aside form.search:hover label {850 color: #ff9c33;851}852aside form.search.focus label {853 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);854 opacity: 0;855}856aside form.search label {857 cursor: pointer;858 display: block;859 font-size: 11px;860 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);861 opacity: 1;862 position: absolute;863 top: 4px;864 z-index: 1;865}866@media screen and (max-width: 765px) {867 aside form.search label {868 font-size: 14px;869 top: 6px;870 }871}872aside form.search input[type=text] {873 border: none;874 background: transparent;875 color: #e87903;876 cursor: pointer;877 font-family: "Courier New", Courier, monospace;878 height: auto;879 outline: 0;880 margin: 0;881 padding: 0;882 position: relative;883 width: 100%;884 z-index: 2;885}886aside form.search input[type=text]:focus {887 -webkit-box-shadow: none;888 -moz-box-shadow: none;889 box-shadow: none;890}891aside nav section {892 border-top-color: #ffdab2;893 border-top-style: solid;894 border-top-width: 1px;895 padding: 10px 0;896}897@media screen and (max-width: 765px) {898 aside nav section {899 padding: 11px 0 6px;900 }901}902@media screen and (max-width: 765px) {903 aside nav .cart {904 height: 30px;905 }906}907aside nav .cart b {908 float: left;909}910aside nav .cart span {911 border-left-color: #ffdab2;912 border-left-style: solid;913 border-left-width: 1px;914 float: right;915 font-size: 11px;916 font-weight: normal;917 display: -moz-inline-stack;918 display: inline-block;919 vertical-align: middle;920 *vertical-align: auto;921 zoom: 1;922 *display: inline;923 margin-left: 8px;924 padding-left: 8px;925}926@media screen and (max-width: 765px) {927 aside nav .cart span {928 font-size: 14px;929 }930}931aside nav .cart span .currency_sign {932 border: none;933 display: inline;934 float: left;935 margin: 0;936 padding: 0;937}938aside nav .cart span:last-child {939 border-left: none;940}941aside nav .title,942aside nav .title a {943 color: #454545;944 font-size: 12px;945 font-weight: bold;946 line-height: 1.9em;947 margin-bottom: 0;948}949@media screen and (max-width: 765px) {950 aside nav .title,951 aside nav .title a {952 font-size: 14px;953 }954}955aside nav .title a:hover, aside nav .title a.current {956 color: #ff9c33;957}958aside nav li {959 line-height: 1.9em;960}961aside nav a {962 display: block;963 font-size: 11px;964 line-height: 20px;965}966@media screen and (max-width: 765px) {967 aside nav a {968 font-size: 14px;969 line-height: 29px;970 }971}972aside footer {973 height: 94px;974 padding: 40px 0 30px;975}976aside footer cite a {977 background: url(https://assets.bigcartel.com/theme_assets/3/1.5.17/images/bc_badge.png) no-repeat;978 -webkit-background-size: 100% 100%;979 -moz-background-size: 100% 100%;980 -o-background-size: 100% 100%;981 background-size: 100% 100%;982 display: block;983 float: left;984 text-indent: 100%;985 overflow: hidden;986 white-space: nowrap;987 width: 79px;988 height: 24px;989}990 991/* @end */992/* @group main */993.main {994 overflow: hidden;995 padding: 60px 0;996 width: 100%;997}998@media screen and (max-width: 765px) {999 .main {1000 background-color: #ffffff;1001 background-image: url(https://assets.bigcartel.com/theme_images/23692547/Light03.jpg) ;1002 background-repeat: repeat;1003 border-left-color: #ffdab2;1004 border-left-style: solid;1005 border-left-width: 1px;1006 -webkit-box-sizing: content-box;1007 -moz-box-sizing: content-box;1008 box-sizing: content-box;1009 left: 0;1010 min-height: 100%;1011 padding: 0;1012 position: relative;1013 -webkit-transition: all 0.25s ease-out;1014 -moz-transition: all 0.25s ease-out;1015 -o-transition: all 0.25s ease-out;1016 transition: all 0.25s ease-out;1017 -webkit-transform: translateX(-1px);1018 -moz-transform: translateX(-1px);1019 -ms-transform: translateX(-1px);1020 -o-transform: translateX(-1px);1021 transform: translateX(-1px);1022 width: 100%;1023 z-index: 2;1024 }1025 .show_menu .main {1026 -webkit-transform: translateX(271px);1027 -moz-transform: translateX(271px);1028 -ms-transform: translateX(271px);1029 -o-transform: translateX(271px);1030 transform: translateX(271px);1031 }1032}1033.main a,1034.main a:visited {1035 color: #e87903;1036}1037.main a:hover,1038.main a:visited:hover {1039 color: #ab5800;1040}1041.main header {1042 background-color: transparent;1043 border-bottom-color: #ffdab2;1044 border-bottom-style: solid;1045 border-bottom-width: 1px;1046 display: none;1047 height: 48px;1048 position: relative;1049 text-align: center;1050 width: 100%;1051}1052@media screen and (max-width: 765px) {1053 .main header {1054 display: block;1055 }1056}1057.main header .logo {1058 color: #454545;1059 font-size: 16px;1060 font-weight: 700;1061 left: 50%;1062 line-height: 48px;1063 margin-left: -35%;1064 overflow: hidden;1065 padding: 0;1066 position: absolute;1067 text-align: center;1068 text-overflow: ellipsis;1069 white-space: nowrap;1070 width: 70%;1071}1072.main header .cart {1073 background: #454545;1074 -webkit-border-radius: 16px;1075 -moz-border-radius: 16px;1076 -ms-border-radius: 16px;1077 -o-border-radius: 16px;1078 border-radius: 16px;1079 color: #ffffff;1080 display: block;1081 float: right;1082 font-size: 10px;1083 font-weight: bold;1084 height: 24px;1085 line-height: 24px;1086 margin: 12px 16px;1087 padding: 0;1088 text-align: center;1089 width: 24px;1090}1091.main header .menu {1092 display: block;1093 float: left;1094 height: 48px;1095 overflow: hidden;1096 position: relative;1097 text-indent: -9999px;1098 width: 48px;1099}1100.main header .menu b,1101.main header .menu b:before,1102.main header .menu b:after {1103 background: #454545;1104 display: block;1105 height: 2px;1106 left: 50%;1107 margin: -1px 0 0 -6px;1108 position: absolute;1109 top: 50%;1110 width: 12px;1111}1112.main header .menu b:before,1113.main header .menu b:after {1114 content: "";1115}1116.main header .menu b:before {1117 top: -3px;1118}1119.main header .menu b:after {1120 top: 5px;1121}1122.main .page {1123 margin: 0 60px 0 260px;1124 min-width: 500px;1125 width: auto;1126}1127@media screen and (max-width: 1023px) {1128 .main .page {1129 min-width: 0;1130 }1131}1132@media screen and (max-width: 765px) {1133 .main .page {1134 margin: 0;1135 }1136}1137.main h1 {1138 height: 60px;1139 margin: 0;1140}1141@media screen and (max-width: 765px) {1142 .main h1 {1143 font-size: 16px;1144 height: auto;1145 margin-bottom: 0;1146 padding: 13px 32px 0;1147 }1148}1149.main .alert {1150 font-size: 12px;1151}1152@media screen and (max-width: 765px) {1153 .main .alert.noproducts {1154 padding: 20px 32px;1155 }1156}1157 1158/* @end */1159.page.home {1160 margin-right: 16px;1161 padding-top: 60px;1162}1163@media screen and (max-width: 765px) {1164 .page.home {1165 margin-right: 0;1166 padding-top: 0;1167 }1168}1169 1170.page.products {1171 margin-right: 16px;1172}1173@media screen and (max-width: 765px) {1174 .page.products {1175 margin-right: 0;1176 }1177 .page.products h1 {1178 padding-top: 23px;1179 }1180}1181 1182@media screen and (max-width: 765px) {1183 .products_list {1184 padding: 32px;1185 }1186}1187@media screen and (max-width: 480px) {1188 .products_list {1189 padding: 32px 0 0;1190 }1191}1192.products_list .product,1193.products_list .product img {1194 max-width: 210px ;1195}1196@media screen and (max-width: 480px) {1197 .products_list .product,1198 .products_list .product img {1199 max-width: 100%;1200 }