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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="" xmlns:dc="" xmlns:dcterms="">3 <head>4 <style>5 /**6 * Defaults and Resets7 */8html, body {margin: 0; padding: 0; background: #7d862d;}9 10body {font-family: Georgia, "Times New Roman", Serif; font-size: 15px; line-height: 24px; color: #363532;}11 12form {margin: 0; padding: 0;}13 14img {border: 0;}15 16td {vertical-align: top;}17 18p {margin: 0 0 20px 0;}19 20:focus {outline: 0;}21 22a {color: #81432a;}23a:hover {color: #f3c26e;}24 25h1 {margin: 0 0 20px 0; font-size: 22px; font-weight: normal; line-height: normal;}26h2 {margin: 0 0 20px 0; font-size: 18px; font-weight: normal; line-height: normal; color: #545b20;}27h2.five {margin: 10px 0 5px 0; font-size: 18px; font-weight: normal; line-height: normal; color: #545b20;}28h3 {font-family: Georgia, "Times New Roman", Serif; margin: 0 0 5px 0; font-size: 15px; line-height: 24px; font-weight: bold; color: #363532;}29 30/**31 * General32 */33.clearBoth, .clear {clear: both; height: 0px; font-size: 1px; line-height: 0px; display: block;}34 35.quote {margin: 30px 0 0 0; padding: 0 0 30px 0; font-size: 16px; font-style: italic; text-align: center; line-height: 22px; color: #545b20;}36.homeContact {margin-top: 6px; font-size: 16px; font-style: italic; text-align: center; line-height: 22px; color: #545b20;}37 38.column {float: left; width: 285px; padding: 0 20px 0 0;}39 40div.rule {margin: 30px 0; background: #d8c7a5; font-size: 1px; line-height: 1px; height: 1px; border-bottom: solid 1px #f3e8d2;}41 42img.right {float: right; margin: 0 0 15px 10px;}43img.left {float: left; margin: 0 15px 10px 0;}44 45div.features {margin: 0 0 20px 0; width: 617px; font-size: 16px; line-height: 22px; background: url(../images/layout/bg-features.jpg) repeat-y;}46div.features > div {background: url(../images/layout/bg-features-top.jpg) no-repeat;}47div.features > div > div {padding: 0 0 20px 20px; background: url(../images/layout/bg-features-bottom.jpg) no-repeat left bottom;}48div.features h4 {margin: 0 0 10px 0; font-size: 15px; font-weight: normal; line-height: 60px; color: #594e45; text-transform: uppercase;}49div.features .feature {float: left; width: 224px; margin: 0 25px; padding: 6px 5px 0 7px; background: url(../images/layout/bg-feature-drop-shadow.gif) no-repeat;}50div.features .feature img {display: block; padding: 0 0 5px 0;}51div.features .feature a {text-decoration: underline;}52div.features p {margin: 0 0 10px 0;}53div.features a:hover {color: #000;}54div.features .column {width: 265px;}55div.features ul.bullets {font-size: 15px;}56 57div.featuresLight {background-position: -618px 0;}58div.featuresLight > div {background-position: -618px 0;}59div.featuresLight > div > div {background-position: -618px bottom;}60 61div.featuresGreen {background-position: -1236px 0;}62div.featuresGreen > div {background-position: -1236px 0;}63div.featuresGreen > div > div {background-position: -1236px bottom;}64 65div.featuresWhite {background-position: -1854px 0;}66div.featuresWhite > div {background-position: -1854px 0;}67div.featuresWhite > div > div {background-position: -1854px bottom;}68 69div.featuresMission .content {margin-top: -10px; min-height: 209px; padding: 10px 0 0 160px; background: url(../images/tree.gif) no-repeat;}70div.featuresMission a {text-decoration: underline;}71 72div.featuresTestimonial .content {margin-top: -10px; min-height: 209px; padding: 10px 10px 0 10px; font-size: 14px;}73div.featuresTestimonial a {text-decoration: underline;}74 75div.featuresForms .content {font-size: 14px; line-height: 30px; margin-top: -10px; min-height: 209px; padding: 10px 0 0 160px; background: url(../images/tree.gif) no-repeat;}76div.featuresForms a {text-decoration: underline;}77 78div.featuresProducts {font-size: 15px; line-height: 17px;}79div.featuresProducts .feature {width: 174px; margin: 0 20px 0 0px; padding: 0 0 0 2px; background-image: url(../images/layout/bg-feature-drop-shadow-product.gif);}80div.featuresProducts .feature a {color: #363532; text-decoration: none;}81 82div.featuresProductLogos > div > div {padding: 25px 0 25px 20px;}83 84/**85 * Lists86 */87ul.inline {margin: 0; padding: 0; list-style-type: none;}88ul.inline li {display: inline;}89 90ul.list {margin: 0 0 20px 0; padding: 0; list-style-type: none;}91ul.bullets {margin: 0 0 20px 20px; padding: 0; list-style-type: circle;}92 93ul.green {font-size: 16px; font-style: italic; line-height: 22px; color: #545b20;}94 95div.photoList .row {padding: 0 0 20px 0;}96div.photoList .photo {float: left; width: 160px; padding: 10px 20px 0 0;}97div.photoList .content {float: left; width: 439px;}98 99/**100 * Layout101 */102#master {background: url(../images/layout/bg.jpg) repeat center top;}103 104#headerWrapper {background: url(../images/layout/bg-header-wrapper.gif) repeat-x center top;}105 106#header {position: relative; margin: auto; padding: 0 55px; width: 949px; height: 95px; background: url(../images/layout/bg-header.jpg) no-repeat;}107#header .logo {position: absolute; top: 0px; left: 0px;}108#header .tagline {position: absolute; top: 0px; left: 0px;}109#header a {text-decoration: none;}110#header ul {margin: 0; padding: 0; list-style-type: none;}111#header ul li {float: left;}112#header ul.nav {font-family: Georgia, "Times New Roman", Serif; font-size: 12px; line-height: 30px; text-transform: uppercase; position: absolute; top: 0; right: 55px;}113#header ul.nav li {padding: 0 25px;}114#header ul.nav li a {color: #fdeed2;}115#header ul.nav li a:hover {color: #000;}116#header ul.nav li.facebook {margin: 5px 0 0 0; padding-left: 5px;}117#header ul.nav li.facebook a {display: block; width: 24px; height: 24px; background: url(../images/layout/facebook-24x24.png) no-repeat; font-size: 1px; line-height: 1px; text-indent: -10000px;}118#header ul.secondaryNav {padding: 10px 0 0 0; line-height: normal; position: absolute; top: 30px; left: 55px;}119#header ul.secondaryNav li {padding: 0 12px;}120#header ul.secondaryNav li a {color: #0e0e0e;}121#header ul.secondaryNav li a:hover {color: #545b20;}122 123#bodyWrapper {margin: auto; width: 949px; padding: 0 55px; background: url(../images/layout/bg-body.jpg) repeat-y;}124#body {background: url(../images/layout/bg-body-leaves.jpg) no-repeat;}125 126#sidebar {float: left; width: 260px;}127#sidebar .logo {position: relative; top: -27px; left: 10px; display: block; width: 233px;}128#sidebar .subnav {margin: 0 0 25px 0; padding: 0; list-style-type: none; font-family: Arial, Verdana, Sans-Serif; font-size: 14px; line-height: 18px;}129#sidebar .subnav li {padding: 5px 40px 5px 50px;}130#sidebar .subnav li a {color: #81432a; text-decoration: none;}131#sidebar .subnav li a:hover {color: #545b20;}132#sidebar .subnav li.on {background: url(../images/layout/bg-subnav.png) repeat-y;}133#sidebar .storeAddress {width: 139px; height: 134px; margin: 60px 0 0 25px; padding: 30px 0 0 30px; line-height: 22px; background: url(../images/layout/bg-store-address-trans.png) no-repeat;}134#sidebar .action {width: 145px; height: 134px; margin: 10px 0 0 30px; padding: 18px 10px 6px 15px; text-align: center; line-height: 22px; background: url(../images/layout/bg-store-address-trans.png) no-repeat;}135 136#content {float: left; width: 619px; padding: 0 45px 20px 25px;}137#content .breadcrumbs {margin: 0 0 20px 0; padding: 5px 0 0 0; list-style-type: none; font-family: Arial, Verdana, Sans-Serif; font-size: 10px; line-height: normal; color: #594e45; text-transform: uppercase; position: relative; left: -5px;}138#content .breadcrumbs li {display: inline;}139#content .breadcrumbs li a {color: #594e45; padding: 0 5px; text-decoration: none;}140#content .breadcrumbs li a:hover {color: #545b20;}141#content img.title {display: block; margin: 0 0 20px 0;}142#content .contact {background: url(../images/layout/bg-features.jpg) repeat-y; background-position: -1854px 0; margin: 20px 100px 20px 100px; padding: 10px; font-family: Arial, Verdana, Sans-Serif; font-size: 17px; line-height: 26px; color: #594e45; text-align: center; border: solid 1px #8c9545;}143 144#footerWrapper {background: #7d862d url(../images/layout/bg-footer-wrapper.gif) repeat-x center top;}145 146#footer {margin: auto; width: 1059px; padding: 20px 0; background: url(../images/layout/bg-footer.jpg) no-repeat; text-align: center;}147#footer ul {margin: 0; padding: 0 0 10px 0; list-style-type: none;}148#footer ul li {display: inline;}149#footer ul.nav {font-family: Georgia, "Times New Roman", Serif; font-size: 12px; line-height: normal; text-transform: uppercase;}150#footer ul.nav li {padding: 0 15px;}151#footer ul.nav li a {color: #68702d; text-decoration: none;}152#footer ul.nav li a:hover {color: #000;}153#footer ul.secondaryNav {font-family: Arial, Verdana, Sans-Serif; font-size: 14px; line-height: normal;}154#footer ul.secondaryNav li {padding: 0 20px;}155#footer ul.secondaryNav li a {color: #594e45; text-decoration: none;}156#footer ul.secondaryNav li a:hover {color: #545b20;}157#footer .address {margin: 20px 0; font-size: 15px; line-height: 22px; color: #f8f1e3; text-align: left; text-align: center; } /* float: left; width: 640px; */158#footer .legal {margin: 0; font-size: 11px; color: #e4ded4;}159#footer .legal a {color: #e4ded4; text-decoration: underline;}160#footer .legal a:hover {color: #545b20;}161#footer .legal a.credit {text-decoration: none;}162#footer .facebook {display: none; float: left; width: 32px; height: 32px; margin: 29px 40px 0 220px; background: url(../images/layout/facebook-24x24.png) no-repeat; font-size: 1px; line-height: 1px; text-indent: -10000px;}163 164/**165 * Home page166 */167body.front #header {background-image: url(../images/layout/bg-header-home.jpg);}168 169body.front #bodyWrapper {background-image: url(../images/layout/bg-body-home.jpg);}170body.front #body {background-image: url(../images/layout/bg-body-leaves-home.jpg);}171 172body.front #footer {background-image: url(../images/layout/bg-footer-home.jpg);}173 174#front .header .logo {float: left; position: relative; top: -27px; left: 10px;}175#front .header .principles {float: right; position: relative; top: -3px; padding: 0 10px 0 0; width: 585px; height: 298px;}176#front .header .principles div {position: absolute; top: 0; left: 0;}177 178#front .intro {padding: 20px 45px 0 45px; font-size: 16px;}179#front .intro h1 {margin: 0 0 5px 0;}180 181#front .features {width: 949px; font-size: 15px; line-height: 20px; color: #e4ded4; background-image: url(../images/layout/bg-home-feature.jpg);}182#front .features > div {background: url(../images/layout/bg-home-feature-sprites.jpg) no-repeat;}183#front .features > div > div {padding: 25px 0 20px 20px; background: url(../images/layout/bg-home-feature-sprites.jpg) no-repeat -949px bottom;}184#front .features a {color: #fff;}185#front .features a:hover {color: #000;}186#front .features h2 {margin: 0 0 15px 0; padding: 0 0 5px 0; font-size: 20px; color: #e4ded4; border-bottom: solid 1px #6e94a4;}187#front .features h3 {margin: 0; font-size: 15px; font-weight: normal;}188#front .features h4 {margin: 0 0 5px 0; line-height: normal; color: #e4ded4;}189#front .features p {margin: 0 0 20px 0;}190#front .features .column {float: left; width: 289px; padding: 0 20px 0 0;}191#front .features .news ul {margin: 0; padding: 0; list-style-type: none;}192#front .features .news ul li {padding: 0 0 20px 0;}193#front .features .store img {border: solid 1px #dedad1; display: block;}194#front .features .feature {margin: 0; background-image: url(../images/layout/bg-feature-drop-shadow-front.gif);}195#front .features .feature img {padding-bottom: 10px;}196 197/**198 * Misc.199 */200div.books h3 {margin: 0; font-weight: normal; line-height: 20px; font-style: italic; text-align: center;}201div.books h4 {margin: 0 0 5px 0; font-size: 12px; font-weight: normal; text-align: center;}202div.books .row {padding: 0 0 20px 0;}203div.books .book {float: left; width: 290px;}204div.books .book .amazon {width: 120px; margin: auto;}205div.books .last {float: right;}206 207/**208 * Forms209 */210form.form {width: 100%;}211form.form .row {padding: 0px 0px 5px 0px;}212form.form .label {float: left; width: 90px;}213form.form .field {float: left; width: 190px;}214 </style>215 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">216 <title>217 Visceral Manipulation NH, Natural Health Center NH - Cura' Naturale Therapeutic Healing218 </title>219 <meta content="Cura' Naturale Therapeutic Healing is New England's leading naturopathic clinic serving Dover, Portsmouth, Manchester, Newburyport, Exeter, Nashua, & Concord, New Hampshire, from Maine & Vermont to Massachusetts & Rhode Island." name="description">220 <meta content name="keywords">221 <meta content="noodp" name="robots">222 <meta content="noydir" name="robots">223 <meta content="no" http-equiv="imagetoolbar">224 <meta content="Driven Development (www.drivendevelopment.com)" name="developer">225 <!--[if lt IE 7]>226 227 228 <![endif]-->229 </head>230 <body>231 <div id="master">232 <div id="headerWrapper">233 <div id="header">234 <ul class="nav">235 <!--236-->237 <li>238 <a>239 Home240 </a>241 </li>242 <!--243-->244 <li>245 <a>246 About Us247 </a>248 </li>249 <!--250-->251 <li>252 <a>253 Resources254 </a>255 </li>256 <!--257-->258 <li class="facebook">259 <a target="_blank" title="Connect with us on Facebook">260 Connect with us on Facebook261 </a>262 </li>263 <!--264-->265 </ul>266 <ul class="secondaryNav">267 <!--268-->269 <li>270 <a>271 <img alt="Naturopathic Services" height="26" src="rick.jpg" width="185">272 </a>273 </li>274 <!--275-->276 <li>277 <a>278 <img alt="Natural Healthcare" height="26" src="rick.jpg" width="170">279 </a>280 </li>281 <!--282-->283 <li>284 <a>285 <img alt="Corporate Wellness" height="26" src="rick.jpg" width="168">286 </a>287 </li>288 <!--289-->290 <li>291 <a>292 <img alt="Simple Health Store" height="26" src="rick.jpg" width="169">293 </a>294 </li>295 <!--296-->297 <!--298-->299 </ul>300 </div>301 </div>302 <div id="bodyWrapper">303 <div id="body">304 <div id="sidebar">305 <a class="logo">306 <img alt="Cura’ Naturale Therapeutic Healing logo" height="219" src="rick.jpg" width="233">307 </a>308 <ul class="subnav">309 <!--310-->311 <li>312 <a>313 Botanical Medicine314 </a>315 </li>316 <!--317-->318 <li>319 <a>320 Biotherapeutic Medicine (PEKANA)321 </a>322 </li>323 <!--324-->325 <li>326 <a>327 Homeopathy328 </a>329 </li>330 <!--331-->332 <li>333 <a>334 Lifestyle Medicine335 </a>336 </li>337 <!--338-->339 <!--340-->341 <!--342-->343 <!-- 344 <li><a >Massage Therapy</a></li>-->345 <!--346-->347 <!--348-->349 <!--350-->351 <!--352-->353 <!--354-->355 <!--356-->357 <!--358-->359 <!--360-->361 <!--362-->363 <!--364-->365 <!--366-->367 <!--368-->369 <!--370-->371 <!--<li><a >Diapulse</a></li>-->372 <!--373-->374 <!--<li><a >Fango Clay Therapy</a></li>-->375 <!--376-->377 </ul>378 </div>379 <div id="content">380 <ul class="breadcrumbs">381 <!--382-->383 <li>384 <a>385 Home386 </a>387 >388 </li>389 <!--390-->391 <li>392 <a>393 Natural Healthcare394 </a>395 >396 </li>397 <!--398-->399 <li>400 <a>401 Visceral Manipulation402 </a>403 </li>404 <!--405-->406 </ul>407 <h1>408 Visceral Manipulation409 </h1>410 <img alt="Visceral Manipulation Photo" class="right" height="481" src="rick.jpg" width="302">411 <p>412 A light, manual therapy works through the internal visceral organs in the body including heart, liver, stomach, intestines, etc. After the initial assessment of the body, the practitioner's hands are gently placed on those organs that are not moving with the rhythm of the body.413 </p>414 <p>415 Mobility is the pushing and pulling of surrounding tissue. Visceral organs move in response to external forces that are either voluntary or involuntary movements.416 </p>417 <p>418 Motility is the organ's intrinsic, active motion. It is also explained as the kinetic expression of tissues in motion.419 </p>420 </div>421 <div class="clear">422 423 </div>424 </div>425 </div>426 <div id="footerWrapper">427 <div id="footer">428 <ul class="secondaryNav">429 <!--430-->431 <li>432 <a>433 Naturopathic Services434 </a>435 </li>436 <!--437-->438 <li>439 <a>440 Natural Healthcare441 </a>442 </li>443 <!--444-->445 <li>446 <a>447 Corporate Wellness448 </a>449 </li>450 <!--451-->452 <li>453 <a>454 Simple Health Store455 </a>456 </li>457 <!-- -->458 <!--459-->460 </ul>461 <ul class="nav">462 <!--463-->464 <li>465 <a>466 Home467 </a>468 </li>469 <!--470-->471 <li>472 <a>473 About Us474 </a>475 </li>476 <!--477-->478 <li>479 <a>480 Resources481 </a>482 </li>483 <!--484-->485 <li class="facebook">486 <a target="_blank" title="Connect with us on Facebook">487 Connect with us on Facebook488 </a>489 </li>490 <!--491-->492 </ul>493 <p class="address">494 Cura’ Naturale Therapeutic Healing495 <br>496 468 Central Ave, Dover, NH 03820 | [PHONE REDACTED] | F: [PHONE REDACTED]497 </p>498 <p class="legal">499 Copyright © 2010-2023 Cura’ Naturale Therapeutic Healing. All rights reserved.500 <a>501 Privacy Practices502 </a>503 </p>504 </div>505 </div>506 </div>507 </body>508</html>509