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" xmlns:exsl="" xmlns:msxsl="urn:schemas-microsoft-com:xslt">3 <head>4 <style>5 @font-face {6 font-family: 'open_sansbold';7 src: url('../fonts/opensans-bold-webfont.eot');8 src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),9 url('../fonts/opensans-bold-webfont.woff2') format('woff2'),10 url('../fonts/opensans-bold-webfont.woff') format('woff'),11 url('../fonts/opensans-bold-webfont.ttf') format('truetype'),12 url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');13 font-weight: normal;14 font-style: normal;15 16}17 18@font-face {19 font-family: 'open_sanslight';20 src: url('../fonts/opensans-light-webfont.eot');21 src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),22 url('../fonts/opensans-light-webfont.woff2') format('woff2'),23 url('../fonts/opensans-light-webfont.woff') format('woff'),24 url('../fonts/opensans-light-webfont.ttf') format('truetype'),25 url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');26 font-weight: normal;27 font-style: normal;28 29}30 31@font-face {32 font-family: 'open_sansregular';33 src: url('../fonts/opensans-regular-webfont.eot');34 src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),35 url('../fonts/opensans-regular-webfont.woff2') format('woff2'),36 url('../fonts/opensans-regular-webfont.woff') format('woff'),37 url('../fonts/opensans-regular-webfont.ttf') format('truetype'),38 url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');39 font-weight: normal;40 font-style: normal;41 42}43 44/* The following fixes font rendering in Chrome, which is a bit rubbish - it's a webkit browser, so the media queries target Chrome */45 46@media screen and (-webkit-min-device-pixel-ratio:0) {47 @font-face {48 font-family: 'open_sansbold';49 src: url('../fonts/opensans-bold-webfont.svg') format('svg');50 }51}52 53@media screen and (-webkit-min-device-pixel-ratio:0) {54 @font-face {55 font-family: 'open_sanslight';56 src: url('../fonts/opensans-light-webfont.svg') format('svg');57 }58}59@media screen and (-webkit-min-device-pixel-ratio:0) {60 @font-face {61 font-family: 'open_sansregular';62 src: url('../fonts/opensans-regular-webfont.svg') format('svg');63 }64}65 66 67@font-face {68 font-family: 'icomoon';69 src:url('../fonts/icomoon.eot?ovuclt');70 src:url('../fonts/icomoon.eot?#iefixovuclt') format('embedded-opentype'),71 url('../fonts/icomoon.woff?ovuclt') format('woff'),72 url('../fonts/icomoon.ttf?ovuclt') format('truetype'),73 url('../fonts/icomoon.svg?ovuclt#icomoon') format('svg');74 font-weight: normal !important;75 font-style: normal !important;76}77 78[class^="icon-"], [class*=" icon-"] {79 font-family: 'icomoon';80 speak: none;81 font-style: normal;82 font-weight: normal;83 font-variant: normal;84 text-transform: none;85 line-height: 1;86 vertical-align: middle;87 -webkit-font-smoothing: antialiased;88 -moz-osx-font-smoothing: grayscale;89}90 91html {92 box-sizing: border-box;93 font-size: 10px; 94 overflow-x: hidden;95 width: 100%;96}97body {98 padding: 0;99 margin: 0;100 background-color: #ffffff;101 font-family: 'open_sansregular', Arial, Helvetica, sans-serif;102 font-weight: 400;103 letter-spacing: 0.03em;104 color: #535353;105}106 107*, *:before, *:after {108 box-sizing: inherit;109}110 111 112/* Text */113h1, h2, h3, h4, h5 {114 clear: left;115 font-family: 'open_sansbold', Arial, Helvetica, sans-serif;116 font-weight: normal;117}118h1 {119 font-size: 2.5em;120 font-weight: normal;121 line-height: 1;122 margin: 0 0 0.75em 0;123}124h1:last-child {125 margin: 0;126}127h1 b {128 font-family: 'open_sansbold', Arial, Helvetica, sans-serif;129}130h2 {131 line-height: 1;132 font-size: 2em;133 margin: 1.25em 0 0.75em;134}135h3 {136 font-size: 1.6em;137 line-height: 1.4;138 margin: 1em 0 0.5em;139}140h4 {141 font-size: 1.4em;142 font-weight: normal;143}144h5 {145 font-size: 1.3em;146 margin: 0.5em 0;147}148.small {149 font-size: 75%;150 font-weight: normal;151}152.main ul, .main ol {153 font-size: 1.3em;154 line-height: 1.5;155 padding-left: 1.3em;156}157.main dl {158 font-size: 1.3em;159 line-height: 1.5;160}161.main dd,162.main dt {163 display: inline-block;164 margin-left: 0;165 vertical-align: top;166}167.main dt {168 font-weight: bold;169 width: 30%;170}171.main dd {172 width: 70%;173}174.main li {175 margin-left: 1em;176}177.header p {178 font-size: 1.2em;179 margin-bottom: 0;180}181.slides p {182 font-size: 1.3em;183 line-height: 1.5;184}185.main p {186 font-size: 1.3em;187 line-height: 1.5;188 margin-top: 0;189}190p.intro {191 font-size: 1.7em;192}193p.intro:last-child {194 margin: 0;195}196.footer p {197 font-size: 1.1em;198}199.footer ul {200 font-size: 1.1em;201}202 203hr {204 background-color: #ddd;205 border: 0;206 color: #ddd;207 height: 1px;208 margin: 1.5em 0;209}210 211/* General table styling */212table {213 border-collapse: collapse;214 border-bottom: 1px solid #dddddd;215}216th {217 font-family: 'open_sansbold', Arial, Helvetica, sans-serif;218 font-size: 1.4em;219 font-weight: normal;220}221td,222th {223 border-top: 1px solid #dddddd;224 font-size: 1.3em;225 padding: 1em 1em 1em 0;226 text-align: left;227}228td:last-child,229th:last-child {230 padding-right: 0;231}232 233/* Text styling */234.error,235.alert {236 color: #e41713;237}238 239/* Links */240a {241 color: #535353;242 font-weight: normal;243 text-decoration: none;244 font-size: inherit;245 text-decoration: underline;246 /* Add a fade in, where supported */247 -webkit-transition: all 0.3s ease-in-out;248 -moz-transition: all 0.3s ease-in-out;249 -ms-transition: all 0.3s ease-in-out;250 -o-transition: all 0.3s ease-in-out;251 transition: all 0.3s ease-in-out;252}253h1 a, h2 a, h3 a, h4 a, h5 a {254 font-family: inherit;255 font-weight: inherit;256 text-decoration: none;257}258h3 a {259 color: #535353;260}261a:hover {262 color: #e41713;263}264a:hover p {265 color: #535353;266}267a.more {268 float: right;269 font-family: 'open_sansbold', Arial, Helvetica, sans-serif;270 font-size: 1.4em;271 text-decoration: none;272 text-transform: uppercase;273}274.home a.more {275 bottom: 0.8em;276 float: none;277 position: absolute;278 right: 1em;279}280a.more .icon-arrow-right2 {281 vertical-align: text-bottom;282}283.main p a {284 text-decoration: underline;285}286.link-icon {287 display: inline-block;288 font-size: 1.5em;289 margin: 0 0 1em 0;290}291 292* :focus {293 outline: 0;294}295 296/* Images */297img {298 border: 0;299 -ms-interpolation-mode: bicubic;300}301 302.image-left {303 float: left;304 padding: 0 1.2em 1.2em 0;305}306 307.image-right {308 float: right;309 padding: 0 0 1.2em 1.2em;310}311 312/* Helpers */313.block {314 display: block;315}316.right {317 float: right;318}319 320/* Header */321.header {322 width: 100%;323 overflow: hidden; /* clears floated content */324}325.header .container {326 overflow: hidden; /* clears floated content */327 width: 96em;328}329.header .logo {330 float: left;331 height: 6.3em;332 margin-top: 3em;333 overflow: hidden;334 position: relative;335 width: 50%;336}337.header .logo a {338 display: block;339}340.header .logo span {341 display: block;342 font-family: 'open_sanslight', Arial, Helvetica, sans-serif;343 font-size: 1.3em;344 margin-top: 0.5em;345 color: #1f1f1f;346}347.header .search-nav {348 float: right;349 padding: 1.5em 0;350 width: 50%;351}352.header .search-nav a {353 text-decoration: none;354}355.header .header__search {356 overflow: hidden;357 border: 0;358 margin-bottom: 0.75em;359 position: relative;360 text-align: right;361}362.header .header__search input[type="text"],363.header .header__search input[type="search"] {364 border-color: #1f1f1f;365 border-style: solid;366 border-width: 1px;367 display: inline-block;368 font-family: Arial, Helvetica, sans-serif;369 font-size: 1.4em;370 margin-bottom: 0;371 padding: 0.3em 3em 0.3em 0.75em;372}373.header .header__search button[type="submit"] {374 border: 0;375 background-color: #1f1f1f;376 color: #fff;377 cursor: pointer;378 display: inline-block;379 font-size: 1em;380 height: 2.7em;381 padding: 0;382 position: absolute;383 right: 0;384 top: 0;385 width: 2.7em;386}387.header .header__search button[type="submit"] .icon-search {388 font-size: 1.3em;389}390.header .header__basket {391 color: #1f1f1f;392 font-size: 1.3em;393 margin-bottom: 0;394 text-align: right;395 width: 100%;396}397.header .header__basket .icon-cart {398 margin-right: 0.5em;399}400.main {401 overflow: hidden; /* Clears floated content */402 padding-top: 2em;403}404.container {405 clear: both;406 margin: 0 auto;407 width: 100.4em;408}409.footer {410 background-color: #dddddd;411 margin-top: 2em;412 overflow: hidden;413 padding-bottom: 1.5em;414 padding-top: 1.5em;415 width: 100%;416}417.footer .container {418 width: 96em;419}420p.footer-legal {421 color: #999;422}423.footer-nav { 424 border-bottom: 1px dotted #1f1f1f;425}426.footer-nav__item {427 display: inline-block;428 vertical-align: top;429 width: 25%;430}431.footer-nav__item--popular {432 width: 50%;433}434.footer-nav ul {435 list-style-type: none;436 padding: 0;437}438.footer-nav__item--popular ul {439 display: inline-block;440 vertical-align: top;441 width: 50%;442}443.footer-nav li {444 font-size: 1.1em;445}446.footer-nav a {447 text-decoration: none;448}449.social-icons li {450 display: inline-block;451}452.social-icons a {453 border-radius: 4px;454 display: block;455 height: 0;456 margin-right: 1em;457 overflow: hidden;458 padding-top: 30px;459 width: 30px;460}461.social-icons__twitter a {462 background-image: url('../img/logo-twitter.png');463}464.social-icons__facebook a {465 background-image: url('../img/logo-facebook.png');466}467 468/* Navigation */469.global-nav {470 background-color: #1f1f1f;471 position: relative;472 width: 100%;473}474.global-nav__container {475 margin: 0 auto;476 width: 99em;477}478.global-nav:after {479 display: table;480 content: "";481 clear: both;482}483.global-nav ul {484 list-style-type: none;485 padding: 0;486 margin: 0;487}488.global-nav li {489 display: inline-block;490 padding: 0;491 position: relative;492 text-transform: uppercase;493 letter-spacing: 0.05em;494 /* Add a fade in to the bottom border, where supported */495 -webkit-transition: all 0.3s ease-in-out;496 -moz-transition: all 0.3s ease-in-out;497 -ms-transition: all 0.3s ease-in-out;498 -o-transition: all 0.3s ease-in-out;499 transition: all 0.3s ease-in-out;500}501.global-nav a {502 background-color: #1f1f1f;503 border-left: 1px solid #1f1f1f;504 display: block;505 font-family: 'open_sansregular', Arial, Helvetica, sans-serif;506 font-weight: normal;507 margin-top: 0.4em;508 padding: 0.6em 1em 0.8em;509 color: #fff;510 text-decoration: none;511 font-size: 1.2em;512 /* Add a colour transition to the text, where supported */513 -webkit-transition: all 0.2s ease-in-out;514 -moz-transition: all 0.2s ease-in-out;515 -ms-transition: all 0.2s ease-in-out;516 -o-transition: all 0.2s ease-in-out;517 transition: all 0.2s ease-in-out;518}519.global-nav a.active {520 color: #fff;521 position: relative;522}523.global-nav a.active:after {524 bottom: 0;525 left: 50%;526 border: solid transparent;527 content: " ";528 height: 0;529 width: 0;530 position: absolute;531 pointer-events: none;532 border-color: rgba(255, 255, 255, 0);533 border-bottom-color: #ffffff;534 border-width: 6px;535 margin-left: -6px;536}537.global-nav li:hover > a {538 background-color: #fff;539 color: #e41713;540}541.global-nav .sub-nav {542 background-color: #fff;543 border-color: #1f1f1f;544 border-style: solid;545 border-width: 0 1px 1px 1px;546 min-width: 20em;547 opacity: 0;548 padding: 1em 0;549 position: absolute;550 text-align: center;551 visibility: hidden;552 z-index: 100;553 /* Add a fade in, where supported */554 -webkit-transition: opacity 0.2s ease-in-out;555 -moz-transition: opacity 0.2s ease-in-out;556 -ms-transition: opacity 0.2s ease-in-out;557 -o-transition: opacity 0.2s ease-in-out;558 transition: opacity 0.2s ease-in-out;559}560.global-nav .sub-nav li {561 border: 0;562 display: block;563 font-size: 1.1em;564 font-weight: 400;565 text-align: left;566 text-transform: none;567 white-space: nowrap;568}569.global-nav .sub-nav img {570 display: block;571 height: auto;572 margin-bottom: 0.25em;573 width: 100%;574}575.global-nav .sub-nav a {576 background-color: #fff;577 border: 0;578 color: #535353;579 font-weight: 400;580 margin-top: 0;581 padding: 0.5em 1em;582}583.global-nav .sub-nav a:hover,584.global-nav .sub-nav a:active {585 color: #e41713;586}587.global-nav li:hover .sub-nav {588 visibility: visible;589 opacity: 1;590}591 592.secondary-nav {593 padding-bottom: 1.3em;594 text-align: right;595}596.secondary-nav ul {597 display: inline-block;598 font-size: 1.2em;599 margin: 0; 600 padding: 0;601}602.secondary-nav li {603 display: inline;604}605.secondary-nav li:after {606 color: #1f1f1f;607 content: '\0020''â¢''\0020';608}609.secondary-nav li:last-child:after {610 content: '';611}612.secondary-nav li a {613 color: #1f1f1f;614}615.secondary-nav li a:hover {616 color: #e41713;617}618 619.breadcrumb {620 font-size: 1em;621 list-style-type: none;622 margin: 1em 0 2em;623 padding: 0 2.2em;624}625.breadcrumb li {626 font-size: 1.2em;627 display: inline;628 padding-right: 0.5em;629}630.breadcrumb li:after {631 content: '//';632 padding-left: 1em;633}634.breadcrumb li:last-child:after {635 display: none;636 content: '';637}638.breadcrumb a {639 font-weight: 400;640 text-decoration: none;641}642 643/* Grids and layouts */644.grid {645 border-collapse: separate;646 border-spacing: 2.2em;647 display: table;648 width: auto;649}650.grid__group {651 display: table-row-group;652}653.grid-full {654 display: table-row-group;655}656/* Grid item */657.grid__item {658 display: table-cell;659 overflow: hidden;660 position: relative;661 height: 100%;662 border: 1px solid #ddd;663 vertical-align: top;664 padding: 1em;665}666.grid__item h3 {667 margin-top: 0;668}669.grid__item .more {670 max-width: 20.5em;671 position: absolute;672 bottom: 1em;673 right: 1em;674}675.grid__item .information p:first-child {676 margin-top: 0;677}678.grid__item .information p:last-child {679 margin-bottom: 0;680}681.full-width {682 overflow: hidden;683 padding: 0 2.2em;684}685.auto-width {686 width: auto;687}688.columns {689 overflow: hidden; 690}691.two-thirds-width {692 width: 66.6666%;693 float: left;694}695.one-third-width {696 width: 33.3333%;697 float: left;698}699 700/* Home */701.grid__item.home {702 padding: 0em;703 width: 33.333%;704}705.grid_item_home_text {706 padding: 1em 1em 3em 1em;707}708.grid_item_home_text div.information p a {709 text-decoration: none;710}711 712/* Category */713.grid__item.category {714 padding-bottom: 0em;715 width: 50%;716}717.grid__item.category a {718 text-decoration: none;719}720.category img,721.category__info {722 display: inline-block;723 vertical-align: text-top;724}725.category img {726 max-width: 40%;727 padding-right: 1.2em;728}729.category__info {730 width: 60%;731}732.category .more {733 font-family: 'open_sansbold', Arial, Helvetica, sans-serif;734 font-size: 1.4em;735 line-height: 1em;736}737.category .more .icon-arrow-right2 {738 font-size: 1.3em;739 margin-left: 0.4em;740 vertical-align: text-top;741}742 743/* Products landing */744.grid__item.product {745 padding-bottom: 3em;746 width: 22.4em;747}748.product a {749 display: block;750 text-decoration: none;751}752.product img {753 display: block;754 margin: 1.5em auto;755}756.grid__item h4 {757 color: #727272;758 margin-top: 0;759}760.price {761 bottom: 0.8em;762 font-size: 1.4em;763 position: absolute;764 right: 1em;765}766.price em {767 font-size: 1.2em;768 font-weight: bold;769 color: #e41713;770 font-style: normal;771}772.price .icon {773 margin-right: 0.4em;774}775.saving {776 font-size: 1.2em;777 margin-bottom: 1em;778}779.saving em {780 font-size: 1.2em;781 color: #b61515;782 font-style: normal;783}784.has-ribbon h3 {785 width: 70%;786}787.ribbon-wrapper {788 width: 85px;789 height: 88px;790 overflow: hidden;791 position: absolute;792 top: -3px;793 right: -3px;794}795 796.ribbon {797 -o-transform: rotate(45deg);798 -webkit-transform: rotate(45deg);799 -moz-transform: rotate(45deg);800 background-color: #e41713;801 left: -5px;802 position: relative;803 padding: 7px 0;804 text-align: center;805 top: 15px;806 width: 120px;807 color: #fff;808 font-size: 15px;809}810 811.ribbon:before, .ribbon:after {812 color: #e41713;813 content: "";814 border-top: 3px solid #e41713; 815 border-left: 3px solid transparent;816 border-right: 3px solid transparent;817 position:absolute;818 bottom: -3px;819}820 821.ribbon:before {822 left: 0;823}824.ribbon:after {825 right: 0;826}827 828 829/* Product detail */830.product-header {831 margin-bottom: 2.2em;832 width: 100%;833}834.product-header h1 {835 width: 78%;836}837.product-detail h3 {838 margin-bottom: 1em;839}840.product-header .gallery-buttons {841 width: 20%;842 float: right;843 text-align: right;844}845.product-details {846 background-color: #fff;847 margin-top: 2.2em;848 overflow: hidden;849 position: relative;850}851.product-details p:first-child {852 margin-top: 0;853}854.product-text {855 font-size: 1.4em;856}857.product-text ul {858 font-size: inherit;859}860.product-text .button {861 font-size: 1.2em;862}863.product-images {864 float: left;865 margin-bottom: 2.2em;866 overflow: hidden;867 width: 47em;868}869.main-image img {870 display: block;871 margin-bottom: 2em;872}873.product-images .thumbnails {874 background-color: #ddd;875 float: left;876 margin-right: 2.1em;877 overflow: hidden;878 position: absolute;879 width: 94px;880 left:0;881 top:0;882}883.product-images .thumbnails ul {884 background-color: #fff;885 margin-bottom: 0;886 margin-top: 0;887 padding-left: 0;888}889.product-images .thumbnails li {890 margin-left: 0;891}892.product-images a {893 display: block;894}895.product-images .main-image {896 margin-left: 11.5em;897}898.slider {899 height: 24em;900 margin: 0;901 overflow: hidden;902}903 904.thumbnails .lSSlideOuter {905 padding: 32px 0;906}907.thumbnails .lSAction > a {908 position: absolute;909 text-decoration: none;910}911.thumbnails .lSAction > a:after {912 display: inline-block;913 font-family: icomoon;914 font-size: 2em;915 margin-left: -0.5em;916 left: 50%;917 position: absolute;918}919.thumbnails .lSAction > .lSPrev,920.thumbnails .lSAction > .lSNext {921 background-color: #ddd;922}923.thumbnails .lSAction > .lSPrev:hover,924.thumbnails .lSAction > .lSNext:hover {925 background-color: #535353;926 color: #ddd;927}928.thumbnails .lSAction > .lSNext:after {929 content: "\e932";930 top: 0.25em;931}932.thumbnails .lSAction > .lSPrev:after {933 content: "\e930";934 top: 0.25em;935}936.thumb-image {937 background-color: #ddd;938 display: block;939 height: 94px;940 margin-bottom: 10px;941 padding-left: 1px;942 padding-top: 1px;943 width: 94px;944}945.thumb-image a {946 background-color: #fff;947 border: 6px solid #fff;948 display: block;949 height: 92px;950 overflow: hidden;951 position: relative;952 width: 92px;953}954.thumb-image:last-child {955 margin-bottom: 0;956 margin-right: 0;957}958.thumb-image img {959 display: block;960}961.thumb-image__youtube {962 left: 50%;963 margin-left: -62px;964 margin-top: -49px;965 position: absolute;966 top: 50%;967}968.thumb-image .icon-video-camera {969 display: block;970 font-size: 3em;971 left: 50%;972 margin-left: -0.5em;973 margin-top: -0.5em;974 position: absolute;975 top: 50%;976 text-shadow:977 -1px -1px 0 #fff,978 1px -1px 0 #fff,979 -1px 1px 0 #fff,980 1px 1px 0 #fff; 981}982.thumb-image.youtube .icon-video-camera {983 color: rgba(5,5,5,0.9);984}985.price-range {986 font-weight: bold;987 font-size: 2.4em;988}989.buying-info {990 border: 1px solid #ddd;991 display: inline-block;992 float: left;993 margin-left: 2.1em;994 margin-bottom: 2.2em;995 padding: 2em;996 width: 46.9em;997}998.buying-info table {999 width: 100%;1000}1001.buying-info .how-to {1002 margin-bottom: 0;1003 margin-top: 2em;1004}1005.product-info {1006 clear: left; /* to clear content floated before it */1007}1008 1009/* Gallery */1010.open-gallery {1011 cursor: pointer;1012}1013.open-video-overlay {1014 cursor: pointer;1015}1016.gallery-buttons a {1017 margin: 0 0.25em;1018}1019.gallery-image-list {1020 display: none;1021}1022 1023/* Video */1024.flash-video,1025.youtube-video,1026.wmp-video {1027 display: none;1028}1029 1030.player-container {1031 background-color: #000;1032}1033 1034.youtube-video {1035 height: 420px;1036 width: 760px;1037}1038 1039.in-page-video {1040 overflow: hidden;1041 position: relative;1042 width: 100%;1043}1044.in-page-video iframe {1045 position: absolute;1046}1047.in-page-video .overlay-link {1048 display: block;1049 height: 0;1050 padding-top: 33.3333%;1051 position: relative;1052 width: 100%;1053}1054 1055/* Info box */1056.info {1057 display: table-cell;1058 position: relative;1059 height: 100%;1060 width: 31em;1061 border: 1px solid #ddd;1062 vertical-align: top;1063 padding: 1.5em 1.5em 3em;1064}1065.info h3 {1066 margin-top: 0;1067}1068 1069/* Content next to an aside */1070.article {1071 width: 63em;1072}1073 1074/* Spare lamps box */1075.aside {1076 float: right;1077 margin-bottom: 2em;1078 margin-left: 2.5em;1079 position: relative;1080 width: 30.5em;1081}1082.aside h3 {1083 margin-top: 0;1084}1085.aside p:last-child {1086 margin-bottom: 0;1087}1088.aside > div:last-child {1089 margin-bottom: 0;1090}1091 1092/* Box */1093.box {1094 border: 1px solid #ddd;1095 margin-bottom: 2em;1096 padding: 1.5em;1097}1098.box--bold {1099 border-color: #555;1100}1101.aside .box {1102 overflow: hidden;1103}1104.aside .important-box {1105 border: 1px solid #ff6a00;1106}1107 1108/* Price table */1109.price-info {1110 margin: 1.5em 0;1111 border-collapse: collapse;1112 width: 17em;1113}1114.price-info td {1115 padding: 0.25em;1116 width: 50%;1117 vertical-align: middle;1118}1119.rrp-label,1120.price-label,1121.saving-label {1122 text-align: right;1123}1124.rrp-label,1125.rrp-amount {1126 text-decoration: line-through;1127}1128.price-label {1129 font-size: 1.7em;1130 line-height: 1.9em;1131}1132.price-label .icon {1133 margin-right: 0.2em;1134}1135.price-amount {1136 font-size: 1.7em;1137 font-weight: 700;1138}1139.saving-label {1140 font-size: 1.2em;1141}1142.saving-amount {1143 font-size: 1.4em;1144}1145 1146/* Shopping basket table */1147.basket {1148 margin-bottom: 2em;1149 width: 100%;1150}1151.basket th,1152.basket td {1153 padding: 0.5em;1154 text-align: center;1155}1156.basket th:first-child,1157.basket td:first-child {1158 text-align: left;1159}1160.basket td {1161 white-space: no-wrap;1162}1163.basket th {1164 background-color: #ddd;1165}1166.basket-even {1167 background-color: #eee;1168}1169.basket .amount {1170 text-align: right;1171}1172.basket .description {1173 text-align: left;1174}1175.basket tfoot {1176 border-top: 1px solid #ddd;1177}1178.basket tfoot td {1179 border: 0;1180}1181.basket tfoot td:first-child {1182 font-weight: bold;1183 text-align: right;1184}1185.basket .total-amount {1186 color: #e41713;1187 text-align: right;1188}1189.basket tfoot tr:last-child {1190 font-size: 1.308em;1191 font-weight: bold;1192}1193.basket .add-remove {1194 display: inline-block;1195 text-align: left;1196 width: 2.8em;1197}1198.basket a {1199 display: inline-block;1200 line-height: 1.2em;