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="de">3 <head>4 <style>5 @font-face {6 font-family: 'OS-RC';7 src: url(../fonts/OpenSans-Light.woff2) format('woff2'),8 url(../fonts/OpenSans-Light.woff) format('woff'),9 url(../fonts/OpenSans-Light.ttf) format('truetype');10 font-weight: 300;11 font-style: normal;12 font-display: swap;13}14@font-face {15 font-family: 'OS-RC';16 src: url(../fonts/OpenSans-Regular.woff2) format('woff2'),17 url(../fonts/OpenSans-Regular.woff) format('woff'),18 url(../fonts/OpenSans-Regular.ttf) format('truetype');19 font-weight: 400;20 font-style: normal;21 font-display: swap;22}23@font-face {24 font-family: 'OS-RC';25 src: url(../fonts/OpenSans-SemiBold.woff2) format('woff2'),26 url(../fonts/OpenSans-SemiBold.woff) format('woff'),27 url(../fonts/OpenSans-SemiBold.ttf) format('truetype');28 font-weight: 700;29 font-style: normal;30 font-display: swap;31}32@font-face {33 font-family: 'OS-RC';34 src: url(../fonts/OpenSans-Bold.woff2) format('woff2'),35 url(../fonts/OpenSans-Bold.woff) format('woff'),36 url(../fonts/OpenSans-Bold.ttf) format('truetype');37 font-weight: 900;38 font-style: normal;39 font-display: swap;40}41body {42 font-family: 'OS-RC', 'Univers LT W01 45 Light', Arial, sans-serif, Helvetica;43 font-weight: 300;44}45 46/*** VARIABLES ***/47:root {48 /* Corporate Design */49 --cd-anthrazit: #323232;50 --cd-mittelblau: #004191;51 --cd-hellblau: #00beff;52 --cd-farbverlauf: linear-gradient(45deg, #004191 0%, #00beff 100%);53 54 /* Vordergrund */55 --textauf-mittelblau: #fff;56 --textauf-anthrazit: #fff;57 --textauf-hellblau: #000;58 59 /* Farben aus dem OpenCMS-Style */60 --active-background: #fff;61 --inactive-background: #ddd; /* "r-main" */62 --blassblau: #ccf2ff; /* "bg-info" */63 64 /* Sonstige Farben */65 --himmelblau: #6ac5f6;66 --text-lightgrey-bg: #eee;67 68 /* Layout */69 --topnav-padding: 8px;70 71 --sidebar-base-width: 200px;72 73 --outermost-padding-x: var(--page-padding-x);74 --page-padding-x: 15px;75 --page-padding-y: 20px;76 --main-padding-x: var(--outermost-padding-x);77 --main-padding-y: var(--page-padding-y);78 79 --small-icon-size: 20px;80 --medium-icon-size: 30px;81 --large-icon-size: 42px;82 83 --hamburger-margin: 10px;84 --hamburger-total: calc(var(--hamburger-margin) + var(--large-icon-size));85 86 /* Animationen */87 --nav-transition-duration: 0.3s;88 --nav-transition-open: var(--nav-transition-duration) ease-in-out;89 --nav-transition-close: var(--nav-transition-duration) ease-in-out;90}91 92@media (min-width: 768px) { :root {93 --content-width: 100%;94 --sidebar-width: calc(var(--sidebar-base-width) + 2*var(--page-padding-x) + var(--outermost-padding-x));95} }96@media (min-width: 992px) { :root {97 --page-padding-x: 20px;98 --topnav-padding: 10px;99 --main-padding-x: 100px;100 --main-padding-y: 25px;101} }102@media (min-width: 1200px) { :root {103 --content-width: 1170px;104 --main-padding-x: 200px;105} }106 107/*** BODY GRID ***/108body {109 display: grid;110 grid-template-rows: min-content min-content min-content min-content 1fr min-content;111 grid-template-columns: 100%;112 gap: 0px 0px;113 grid-template-areas: "mainidentity" "header" "topnav" "breadcrumbs" "main" "footer";114}115body > .mainidentity { grid-area: mainidentity; }116body > header { grid-area: header; }117body > nav.topnav { grid-area: topnav; }118body > nav.breadcrumbs { grid-area: breadcrumbs; }119body > main { grid-area: main; }120body > footer { grid-area: footer; }121 122/*** HEADER GRID ***/123body > header {124 display: grid;125 grid-template-columns: auto auto min-content;126 grid-template-rows: 1fr;127 gap: 0px 0px;128 grid-auto-flow: row;129 grid-template-areas: "headleft headright hamburger";130}131@media (min-width: 768px) {132 body > header {133 display: grid;134 grid-template-columns: auto auto;135 grid-template-rows: 1fr;136 gap: 0px 0px;137 grid-auto-flow: row;138 grid-template-areas: "headleft headright";139 }140 body > header > .hamburger { display: none; }141}142body > header > .hamburger { grid-area: hamburger; }143body > header > .headleft { grid-area: headleft; }144body > header > .headright { grid-area: headright; }145 146/*** FOOTER GRID ***/147body > footer {148 display: grid;149 gap: 0px 0px;150 grid-template: "foot1" min-content151 "foot2" min-content152 "foot3" min-content153 / min-content;154} @media (min-width: 768px) { body > footer {155 grid-template: "foot1 foot2 foot3" min-content156 / 1fr 1fr 1fr;157} }158body > footer > .foot1 { grid-area: foot1; }159body > footer > .foot2 { grid-area: foot2; }160body > footer > .foot3 { grid-area: foot3; }161 162/*** REST ***/163/* Grundsätzliches */164html, body, main, div {165 padding: 0;166 margin: 0;167}168html {169 background: var(--inactive-background);170}171body {172 width: var(--content-width);173 margin: auto;174 background: var(--active-background);175 color: var(--cd-anthrazit);176 position: relative;177 min-height: 100vh;178 line-height: 1.6;179 word-wrap: break-word;180}181h1, h2, h3, h4, h5, h6 {182 line-height: normal;183}184h1 > a.anchor, h2 > a.anchor, h3 > a.anchor, h4 > a.anchor, h5 > a.anchor, h6 > a.anchor {185 text-decoration: none;186 color: inherit;187}188h1 > a.anchor:hover, h2 > a.anchor:hover, h3 > a.anchor:hover, h4 > a.anchor:hover, h5 > a.anchor:hover, h6 > a.anchor:hover {189 text-decoration: underline;190}191a {192 text-decoration: underline;193 color: var(--cd-mittelblau);194}195a:hover {196 text-decoration: none;197}198code {199 font-size: 0.95rem;200}201pre {202 background: var(--text-lightgrey-bg);203 padding: 18px 30px;204}205 206/* tables */207table {208 border-collapse: separate;209 border: none;210 border-spacing: 2px 0;211}212th, td {213 padding: 5px 10px;214}215th {216 background-color: var(--cd-anthrazit);217 color: var(--textauf-anthrazit);218}219tr:nth-child(2n+1) td {220 background-color: var(--text-lightgrey-bg);221}222 223/* layout aid */224.nowrap {225 white-space: nowrap;226 hyphens: none;227}228 229/* footnotes contain a <p> internally that they shouldn't */230ol > li[id^="fn-"] > p {231 display: inline;232}233 234/* mainidentity: Ganz oben */235body > .mainidentity {236 padding-left: var(--outermost-padding-x);237 padding-right: var(--outermost-padding-x);238 239 position: relative;240 background: var(--cd-mittelblau);241 font-weight: 400;242 text-align: right;243 font-size: 12px;244 height: 40px;245}246body > .mainidentity, body > .mainidentity a {247 color: var(--textauf-mittelblau);248 text-decoration: none;249}250body > .mainidentity > a > * {251 vertical-align: top;252 position: relative;253 top: 50%;254 display: inline-block;255 transform: translateY(-50%);256}257body > .mainidentity .icon {258 margin-left: 10px;259}260body > .mainidentity a {261 margin-left: 25px;262}263 264/* Header */265body > header {266 padding-left: var(--outermost-padding-x);267 padding-right: var(--outermost-padding-x);268 padding-top: var(--page-padding-y);269 padding-bottom: var(--page-padding-y);270 background: var(--active-background);271 height: 60px;272}273body > header img.logo {274 width: calc( (100vw - var(--hamburger-total)) - 2 * var(--outermost-padding-x) );275 max-width: 360px;276 height: auto;277} @media (min-width: 768px) { body > header img.logo {278 width: 360px;279} }280body > header .hamburger {281 margin-left: var(--hamburger-margin);282}283/*body > header .hamburger img {284 width: var(--hamburger-total);285}*/286 287body > header > * {288 display: flex;289 align-items: center;290}291body > header .headright > * {292 margin-left: auto;293}294body > header .headleft > * {295 margin-right: auto;296} @media (max-width: 767px) { body > header .headright {297 display: none;298} }299 300 301/* Nav */302body > nav a {303 text-decoration: none;304}305 306/* Topnav */307body > nav.topnav {308 font-weight: 400;309 line-height: 1.3em;310} @media (max-width: 767px) { body > nav.topnav {311 display: none;312} }313 314body > nav.topnav ul {315 margin: 0;316 padding-left: 0;317 list-style: none;318}319body > nav.topnav ul li {320 display: inline-block;321}322body > nav.topnav ul li a {323 display: inline-block;324 padding: var(--topnav-padding) var(--topnav-padding);325}326 327body > nav.topnav > ul {328 padding: 0 calc(var(--outermost-padding-x) - var(--topnav-padding));329}330body > nav.topnav > ul,331body > nav.topnav > ul a {332 color: var(--nav-fg);333 background: var(--nav-bg);334}335body > nav.topnav > ul a.nav-current {336 background: var(--nav-act-bg);337 color: var(--nav-act-fg);338 text-decoration: var(--nav-act-deco);339 font-weight: var(--nav-act-weight)340}341body > nav.topnav > ul a:not(.nav-current):hover {342 color: var(--nav-hover-fg);343 text-decoration: var(--nav-hover-deco);344}345body > nav.topnav > ul.stacked-1 {346 --nav-bg: var(--cd-anthrazit);347 --nav-fg: var(--textauf-anthrazit);348 --nav-act-bg: var(--himmelblau);349 --nav-act-fg: var(--textauf-hellblau);350 --nav-act-weight: 900;351 --nav-hover-fg: var(--himmelblau);352}353body > nav.topnav > ul.stacked-2 {354 --nav-bg: var(--himmelblau);355 --nav-fg: var(--textauf-hellblau);356 --nav-act-deco: underline;357 --nav-hover-deco: underline;358}359body > nav.topnav > ul.stacked-3 {360 --nav-bg: #eeeeee;361 --nav-fg: var(--cd-anthrazit);362 --nav-act-deco: underline;363 --nav-hover-deco: underline;364}365 366/* Breadcrumbs */367body > nav.breadcrumbs {368 display: none;369 font-weight: 400;370 font-size: 0.8em;371 line-height: 1.3em;372 padding: 5px var(--outermost-padding-x);373 color: black;374 background: #eeeeee;375} @media (max-width: 767px) { body > nav.breadcrumbs {376 display: block;377} }378body > nav.breadcrumbs a[href] {379 text-decoration: underline;380}381@media (max-width: 767px) {382 body > .breadcrumbs,383 body > main {384 filter: none;385 }386 .nav-is-open body > .breadcrumbs,387 .nav-is-open body > main {388 filter: brightness(0.5);389 390 /* open transition */391 transition: filter var(--nav-transition-open);392 }393 :not(.nav-is-open) body > .breadcrumbs,394 :not(.nav-is-open) body > main {395 /* open transition */396 transition: filter var(--nav-transition-open);397 }398}399 400/* Mobile nav */401body > nav.mobilenav {402 background: #eeeeee;403 font-weight: 400;404 padding-top: var(--page-padding-y);405 padding-bottom: var(--page-padding-y);406 padding-left: var(--outermost-padding-x);407 padding-right: var(--outermost-padding-x);408 409 position: absolute;410 bottom: 0;411 right: 0;412 top: 140px;413 width: var(--sidebar-base-width);414 415 display: none;416}417body > nav.mobilenav, body > nav a {418 color: var(--cd-anthrazit);419}420body > nav.mobilenav a.nav-current {421 font-weight: 900;422}423body > nav.mobilenav #nav-close-button {424 position: absolute;425 /* 9px is from the position of .icon.large i.x::before */426 top: calc(var(--page-padding-y) - 9px);427 right: calc(var(--page-padding-x) - 9px);428}429@media (max-width: 767px) {430 body > nav.mobilenav {431 display: block;432 433 visibility: hidden;434 opacity: 0;435 pointer-events: none;436 transform: translateX(100%);437 }438 html, body {439 overflow-x: hidden;440 }441 .nav-is-open body > nav.mobilenav {442 visibility: visible;443 opacity: 1;444 pointer-events: unset;445 transform: translateX(0);446 447 /* open transition */448 transition:449 transform var(--nav-transition-open),450 opacity var(--nav-transition-open),451 visibility var(--nav-transition-duration) step-start;452 }453 :not(.nav-is-open) body > nav.mobilenav {454 /* close transition */455 transition:456 transform var(--nav-transition-close),457 opacity var(--nav-transition-close),458 visibility var(--nav-transition-duration) step-end;459 }460}461body > nav.mobilenav .navsection {462 font-weight: 900;463 padding-bottom: 10px;464}465body > nav.mobilenav ul {466 margin: 0;467 padding-left: 20px;468 list-style: disc;469}470body > nav.mobilenav ul ul {471 padding-left: 16px;472 list-style: circle;473}474body > nav.mobilenav ul ul ul {475 padding-left: 16px;476 list-style: square;477}478 479 480/* Main */481body > main {482 background: var(--active-background);483 padding: var(--main-padding-y) var(--main-padding-x);484}485body > main > :first-child {486 margin-top: 0;487}488body > main > :last-child {489 margin-bottom: 0;490}491body > main strong, body > main b {492 font-weight: bold;493}494 495/* Footer */496body > footer {497 background: var(--cd-anthrazit);498 padding: 30px var(--outermost-padding-x);499}500body > footer > div {501 padding: 20px 0;502}503body > footer, body > footer a {504 color: var(--textauf-anthrazit);505}506body > footer .footsection {507 font-weight: 900;508}509body > footer ul.linklist {510 list-style: none;511 padding-inline-start: 0;512 max-width: 250px;513}514body > footer ul {515 margin-bottom: 0;516}517 518/*** COMPONENTS ***/519.bluebox {520 border: 1px solid var(--cd-hellblau);521 margin: 0;522 padding: 5px;523}524.bluebox > :first-child {525 margin-block-start: 0;526}527.bluebox > :last-child {528 margin-block-end: 0;529}530 531/*** ICONS ***/532.icon {533 position: relative;534 box-sizing: content-box;535 display: inline-block;536}537.icon.small {538 width: var(--small-icon-size);539 height: var(--small-icon-size);540}541.icon.medium {542 width: var(--medium-icon-size);543 height: var(--medium-icon-size);544}545.icon.large {546 width: var(--large-icon-size);547 height: var(--large-icon-size);548}549.icon i {550 overflow: hidden;551 font: 0/0 serif;552 text-shadow: none;553 color: transparent;554}555.icon i::before {556 background-size: 1450px 110px;557 background-image: url(../img/sprites-icons-min.svg);558 content: "";559 position: absolute;560}561 562/* small icon: main-id-link */563.icon.small i.main-id-link::before {564 width: 20px;565 height: 20px;566 background-position: -25px 0;567 top: 0;568 left: 0;569}570 571/* medium icon: language */572.icon.medium i.language::before {573 width: 30px;574 height: 28px;575 background-position: -344px -76px;576 top: 1px;577 left: 0;578}579 580/* large icon: menu */581.icon.large i.menu::before {582 width: 26px;583 height: 22px;584 background-position: -895px 0;585 top: 10px;586 left: 8px;587}588 589/* large icon: x */590.icon.large i.x::before {591 width: 24px;592 height: 24px;593 background-position: -1105px 0;594 left: 9px;595 top: 9px;596}597 598/* large-icon-button */599.large-icon-button {600 padding: 0;601 line-height: 0;602 background: none;603 border: none;604 border-radius: 5px;605 cursor: pointer;606}607 608/* button.border */609.large-icon-button.border {610 border: 1px solid var(--cd-anthrazit);611}612 613 614 615h1 {616 hyphens: auto;617}618.floatafter {619 display: grid;620 grid-template:621 "a" min-content622 "b" min-content623 / 1fr;624}625.floatafter .floatbase {626 grid-area: a;627}628.floatafter .floatright, .floatafter .floatleft {629 grid-area: b;630}631 632@media (min-width: 768px) {633 .floatafter {634 display: block;635 /*grid-template: 636 "a c" min-content637 "b c" min-content638 / 1fr max-content;*/639 }640 .floatafter .floatleft {641 margin-right: var(--page-padding-x);642 float: left;643 }644 .floatafter .floatright {645 margin-left: var(--page-padding-x);646 float: right;647 }648}649 650.contact-card {651 background: var(--text-lightgrey-bg);652 padding: 18px 30px;653}654 655.blog-list h3 {656 margin-block-end: 0.25em;657}658.blog-list p {659 margin-block-start: 0.25em;660}661 662.image-link {663 text-decoration: none;664 display: inline-block;665}666.member-logos > * {667 padding-inline-end: var(--page-padding-x);668}669.member-logos > :last-child {670 padding-inline-end: 0;671}672 </style>673 <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport">674 <meta charset="utf-8">675 <title>676 Stabsstelle Informationssicherheit (RUS-CERT) | Universität Stuttgart677 </title>678 </head>679 <body>680 <div class="mainidentity">681 <a>682 <span>683 Universität Stuttgart684 </span>685 <span class="small icon">686 <i class="main-id-link">687 </i>688 </span>689 </a>690 </div>691 <header>692 <div class="headleft">693 <a>694 <picture>695 <source type="image/webp">696 <img alt="Logo der Stabsstelle Informationssicherheit der Universität Stuttgart" class="logo" height="59" src="rick.jpg" width="360">697 </picture>698 </a>699 </div>700 <div class="headright">701 <a>702 <picture>703 <source type="image/webp">704 <img alt="Logo des RUS-CERT" class="logo" height="47" src="rick.jpg" width="360">705 </picture>706 </a>707 </div>708 <div class="hamburger">709 <button class="border large-icon-button" id="hamburger-toggle-button">710 <span class="large icon">711 <i class="menu">712 </i>713 </span>714 </button>715 </div>716 </header>717 <nav class="topnav">718 <ul class="stacked-1">719 <li>720 <a class="nav-current">721 Home722 </a>723 </li>724 <li>725 <a>726 Aktuelles727 </a>728 </li>729 <li>730 <a>731 Services732 </a>733 </li>734 <li>735 <a>736 Themen737 </a>738 </li>739 </ul>740 </nav>741 <nav class="breadcrumbs">742 <a>743 Home744 </a>745 </nav>746 <main>747 <h1>748 Stabsstelle Informationssicherheit749 <span class="nowrap">750 (RUS-CERT)751 </span>752 </h1>753 <div class="floatafter">754 <aside class="floatright contact-card">755 <strong>756 Kontakt757 </strong>758 <br>759 E-Mail:760 <a>761 [EMAIL REDACTED]762 </a>763 <br>764 Telefon:765 <a>766 [PHONE REDACTED]767 </a>768 <br>769 <a>770 Mehr...771 </a>772 </aside>773 <div class="floatbase">774 <p>775 Die Stabsstelle Informationssicherheit (RUS-CERT) ist für die IT- und Informationssicherheit der Universität Stuttgart zuständig. Sie ist Stabsstelle des776 <a>777 Kanzlers778 </a>779 und damit direkt der Universitätsleitung unterstellt. Als Computernotfallteam (Computer Emergency Response Team, CERT) ist sie unter anderem die zentrale Melde- und Koordinationsstelle für Informationssicherheitsvorfälle.780 </p>781 </div>782 </div>783 <h2>784 Aktuelles785 </h2>786 <div class="blog-list">787 <h3>788 <a>789 Erpressungs-Mails790 </a>791 </h3>792 <p>793 Aus aktuellem Anlass weist die Stabsstelle Informationssicherheit auf kursierende Erpressungs-Mails hin.794 </p>795 <h3>796 <a>797 Neue Endpoint Protection Lösung798 </a>799 </h3>800 <p>801 Für Beschäftigte an der Universität steht eine neue Endpoint Protection Lösung zur Verfügung. Ein Wechsel wird dringend empfohlen.802 </p>803 <h3>804 <a>805 Warnung vor CEO-Fraud806 </a>807 </h3>808 <p>809 Da in letzter Zeit vermehrt Fälle von CEO-Fraud an der Universität auftreten, möchten wir etwas detaillierter über diese Betrugsmasche informieren.810 </p>811 </div>812 <h2>813 Mitgliedschaften814 </h2>815 <div class="member-logos">816 <a class="image-link">817 <picture>818 <source type="image/webp">819 <img alt="Logo von FIRST" class="logo" height="120" src="rick.jpg" width="201">820 </picture>821 </a>822 <a class="image-link">823 <picture>824 <source type="image/webp">825 <img alt="Logo von TI" class="logo" height="120" src="rick.jpg" width="120">826 </picture>827 </a>828 <a class="image-link">829 <picture>830 <source type="image/webp">831 <img alt="Logo des CV" class="logo" height="120" src="rick.jpg" width="120">832 </picture>833 </a>834 <a class="image-link">835 <picture>836 <source type="image/webp">837 <img alt="Logo des EDUCV" class="logo" height="120" src="rick.jpg" width="120">838 </picture>839 </a>840 </div>841 </main>842 <footer>843 <div class="foot1">844 <div class="footsection">845 Formalia846 </div>847 <ul class="linklist">848 <li>849 <a>850 Impressum851 </a>852 </li>853 <li>854 <a>855 Datenschutz856 </a>857 </li>858 </ul>859 </div>860 <div class="foot2">861 <div class="footsection">862 Die Stabsstelle863 </div>864 <ul class="linklist">865 <li>866 <a>867 Kontakt868 </a>869 </li>870 <li>871 <a>872 Jobs873 </a>874 </li>875 </ul>876 </div>877 <div class="foot3">878 <div class="footsection">879 Dokumente880 </div>881 <ul class="linklist">882 <li>883 <a>884 <span class="nowrap">885 Leitlinie zur Informations886 </span>887 ­888 <span class="nowrap">889 sicherheit (ISL)890 </span>891 </a>892 </li>893 </ul>894 </div>895 </footer>896 <nav class="mobilenav">897 <button class="large-icon-button" id="nav-close-button">898 <span class="large icon">899 <i class="x">900 </i>901 </span>902 </button>903 <div class="navsection">904 Navigation905 </div>906 <ul>907 <li>908 <a class="nav-current">909 Home910 </a>911 </li>912 <li>913 <a>914 Aktuelles915 </a>916 </li>917 <li>918 <a>919 Services920 </a>921 </li>922 <li>923 <a>924 Themen925 </a>926 </li>927 </ul>928 </nav>929 </body>930</html>931