CoolFace
Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.8kdownloads
root3850.html
3850.html1729 linesDownload Raw Back to root
1<!DOCTYPE html>2<html class="js" lang="en">3 <head>4  <style>5   @font-face {6  font-family: 'Open Sans';7  font-style: italic;8  font-weight: 400;9  font-stretch: normal;10  src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexQ.ttf) format('truetype');11}12@font-face {13  font-family: 'Open Sans';14  font-style: normal;15  font-weight: 400;16  font-stretch: normal;17  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');18}19@font-face {20  font-family: 'Open Sans';21  font-style: normal;22  font-weight: 700;23  font-stretch: normal;24  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');25}26 27 28 29*,30*::before,31*::after {32	box-sizing: border-box;33}34 35article,36aside,37dialog,38figcaption,39figure,40footer,41header,42hgroup,43main,44nav,45section {46	display: block;47}48 49:focus::-webkit-input-placeholder {50	color: transparent;51}52 53:focus::-moz-placeholder {54	color: transparent;55}56 57:focus:-moz-placeholder {58	color: transparent;59}60 61:focus:-ms-input-placeholder {62	color: transparent;63}64 65/* Structure */66html {67	font-size: 100%;68	-ms-text-size-adjust: none;69	-webkit-text-size-adjust: none;70}71 72body {73	margin: 0;74	font-family: 'PT Serif', Georgia, serif;75	font-size: 14px;76	font-size: .875rem;77	line-height: 1.6;78	word-wrap: break-word;79	background: #f7f7f7;80	-webkit-font-smoothing: antialiased;81}82 83.container {84	position: relative;85	width: 100%;86	max-width: 1080px;87	margin: 0 auto;88}89 90.container--outer {91	margin: 25px auto;92	box-shadow: 0 0 10px rgba(50, 50, 50, .17);93}94 95.wrapper {96	padding: 25px;97	background: #fff;98}99 100.flex {101	display: -webkit-flex;102	display: flex;103}104 105.primary {106	-webkit-flex: 1 0 65.83%;107	flex: 1 0 65.83%;108	-webkit-order: 1;109	order: 1;110	min-width: 0;111}112 113.sidebar {114	-webkit-flex: 1 0 31.66%;115	flex: 1 0 31.66%;116	-webkit-order: 2;117	order: 2;118	min-width: 0;119	margin: 0 0 0 2.5%;120}121 122.sidebar--left {123	-webkit-order: 0;124	order: 0;125	margin: 0 2.5% 0 0;126}127 128.clearfix {129	display: block;130}131 132.clearfix::after {133	display: block;134	height: 0;135	padding: 0;136	margin: 0;137	clear: both;138	line-height: 0;139	visibility: hidden;140	content: "";141}142 143input,144button,145select,146optgroup,147textarea {148	margin: 0;149	font-family: inherit;150	font-size: inherit;151	line-height: inherit;152}153 154/* Button */155.btn {156	padding: 5px 10px;157	font-weight: 700;158	color: #fff;159	white-space: pre-line;160	background: #2a2a2a;161}162 163.btn:hover {164	color: #fff;165	background: #FF6A00;166}167 168/* Animation */169.menu__item,170.btn {171	transition: background-color .25s ease-out;172}173 174/* Typography */175h1,176h2,177h3,178h4,179h5,180h6 {181	margin: 0 0 20px;182	margin: 0 0 1.25rem;183	font-weight: 700;184	line-height: 1.3;185	color: #000;186}187 188h1 {189	font-size: 32px;190	font-size: 2rem;191}192 193h2 {194	font-size: 24px;195	font-size: 1.5rem;196}197 198h3 {199	font-size: 20px;200	font-size: 1.25rem;201}202 203h4 {204	font-size: 18px;205	font-size: 1.125rem;206}207 208h5 {209	font-size: 16px;210	font-size: 1rem;211}212 213h6 {214	font-size: 16px;215	font-size: 1rem;216}217 218a {219	color: #000;220	text-decoration: none;221}222 223a:hover {224	color: #FF6A00;225}226 227hr {228	margin: 0 0 20px;229	border: 0;230	border-top: 1px solid #dadada;231}232 233p {234	margin: 0 0 20px;235	margin: 0 0 1.25rem;236}237 238b,239strong {240	font: inherit;241	font-weight: 700;242}243 244i,245em {246	font: inherit;247	font-style: italic;248}249 250ol,251ul {252	padding: 0;253	margin: 0;254}255 256small {257	font-size: 12px;258	font-size: .75rem;259}260 261mark {262	background-color: #fd5;263}264 265figure {266	margin: 0 0 20px;267	margin: 0 0 1.25rem;268}269 270figcaption {271	margin-top: 4px;272	margin-top: .25rem;273	color: #666;274}275 276figcaption h4 {277	margin: 0;278	color: inherit;279}280 281pre,282code,283kbd,284samp {285	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;286	font-size: inherit;287}288 289pre,290code {291	background-color: #f5f5f5;292	border: 1px solid #ebebeb;293}294 295code {296	padding: 0 5px;297	color: #c33;298}299 300pre {301	display: block;302	padding: 0;303	padding: 1.25rem;304	margin-bottom: 20px;305	margin-bottom: 1.25rem;306	overflow: auto;307	color: #000;308}309 310pre code {311	padding: 0;312	color: inherit;313	white-space: inherit;314	background: inherit;315	border: 0;316}317 318kbd {319	padding: 2px 3px;320	color: #fff;321	background-color: #2a2a2a;322}323 324blockquote {325	display: block;326	padding: 5px 0 5px 15px;327	margin: 0 0 20px;328	margin: 0 0 1.25rem;329	line-height: 1.6;330	border-left: 5px solid #FF6A00;331}332 333blockquote p:last-child {334	margin: 0;335}336 337blockquote footer {338	text-align: right;339}340 341sup,342sub {343	font-size: 10px;344	font-size: .625rem;345	font-style: normal;346}347 348sup {349	vertical-align: super;350}351 352sub {353	vertical-align: sub;354}355 356abbr[title] {357	text-decoration: none;358	cursor: help;359	border-bottom: 1px dotted #000;360}361 362q {363	font-style: italic;364}365 366address {367	margin-bottom: 20px;368	margin-bottom: 1.25rem;369	font-family: "Consolas", Courier New, Courier, monospace;370	line-height: 1.5;371}372 373dl {374	margin: 0 0 10px 20px;375}376 377dt,378dd {379	display: list-item;380}381 382dt {383	font-weight: bold;384	list-style-type: square;385}386 387dd {388	margin-left: 20px;389	list-style-type: circle;390}391 392select {393	max-width: 100%;394}395 396.warning {397	padding: 20px 10px;398	text-align: center;399	border: 1px solid #ddd;400}401 402.warning__icon {403	margin-bottom: 20px;404	fill: #ddd;405}406 407/* Header */408.header {409	background: #fff;410}411 412.logo {413	padding: 25px;414}415 416.logo__link {417	display: inline-block;418}419 420.logo__item {421	display: inline-block;422	vertical-align: middle;423}424 425.logo__img {426	max-height: 256px;427}428 429.logo__text {430	text-transform: uppercase;431}432 433.logo--mixed .logo__item {434	margin: .5rem auto;435}436 437.logo--mixed .logo__img {438	max-width: 128px;439	max-height: 128px;440}441 442.logo--mixed .logo__text {443	padding: 0 1rem;444}445 446.logo__title {447	font-size: 32px;448	font-size: 2rem;449	font-weight: 700;450	line-height: 1;451	color: #000;452}453 454.logo__tagline {455	display: inline-block;456	padding-top: 10px;457	margin-top: 10px;458	font-size: 14px;459	font-size: .875rem;460	font-weight: 700;461	line-height: 1;462	color: #FF6A00;463	border-top: 1px solid #ebebeb;464}465 466.divider {467	height: 5px;468	margin: 0;469	background: #FF6A00;470	border: 0;471}472 473/* Main menu */474.no-js .menu__btn {475	display: none;476}477 478.menu__btn {479	display: block;480	width: 100%;481	padding: 0;482	font: inherit;483	color: #fff;484	background: #2a2a2a;485	border: 0;486	outline: 0;487}488 489.menu__btn-title {490	position: relative;491	display: block;492	padding: 10px 15px;493	padding: .625rem .9375rem;494	font-weight: 700;495	text-align: right;496	text-transform: uppercase;497	cursor: pointer;498	-webkit-user-select: none;499	-moz-user-select: none;500	-ms-user-select: none;501	-o-user-select: none;502	user-select: none;503}504 505:focus > .menu__btn-title {506	box-shadow: inset 0 0 1px 3px #FF6A00;507}508 509button:not(:-moz-focusring):focus > .menu__btn-title {510	box-shadow: none;511}512 513.menu__btn:focus,514.menu__btn-title:focus {515	outline: 0;516}517 518.js .menu__btn--active {519	color: #FF6A00;520}521 522.menu__list {523	list-style: none;524	background: #2a2a2a;525}526 527.menu__item:hover {528	background: #FF6A00;529}530 531.menu__item:first-child {532	border: 0;533}534 535.menu__item--active {536	background: #FF6A00;537}538 539.menu__link {540	display: block;541	padding: 10px 15px;542	padding: .625rem .9375rem;543	font-weight: 700;544	color: #fff;545	text-transform: uppercase;546}547 548.menu__link:hover {549	color: #fff;550}551 552.js .menu__list {553	position: absolute;554	z-index: 1;555	width: 100%;556	visibility: hidden;557	-webkit-transform: scaleY(0);558	transform: scaleY(0);559	-webkit-transform-origin: top left;560	transform-origin: top left;561}562 563.js .menu__list--active {564	visibility: visible;565	border-top: 1px solid rgba(255, 255, 255, .1);566	border-bottom: 1px solid rgba(255, 255, 255, .1);567	-webkit-transform: scaleY(1);568	transform: scaleY(1);569}570 571.menu__list--transition {572	transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;573}574 575@media screen and (min-width: 767px) {576	.menu {577		border-bottom: 5px solid #FF6A00;578	}579 580	.menu__btn {581		display: none;582	}583 584	.menu__list,585	.js .menu__list {586		position: relative;587		display: -webkit-flex;588		display: flex;589		-webkit-flex-wrap: wrap;590		flex-wrap: wrap;591		visibility: visible;592		border: 0;593		-webkit-transform: none;594		transform: none;595	}596 597	.menu__item {598		border-left: 1px solid rgba(255, 255, 255, .1);599	}600}601 602/* Posts/Pages */603.post__header,604.main__header {605	margin-bottom: 20px;606	margin-bottom: 1.25rem;607}608 609.main__title {610	font-size: 28px;611	font-size: 1.75rem;612}613 614.main__content {615	margin-bottom: 20px;616	margin-bottom: 1.25rem;617}618 619.meta {620	font-size: 13px;621	font-size: .8125rem;622	vertical-align: baseline;623}624 625.meta,626.meta a {627	color: #666;628}629 630.meta a:hover {631	color: #FF6A00;632}633 634.meta__item {635	display: inline;636	margin-left: 15px;637}638 639.meta__item:first-child {640	margin-left: 0;641}642 643.meta__icon {644	margin-right: 5px;645	vertical-align: middle;646	fill: #c4c4c4;647}648 649.meta__text {650	vertical-align: middle;651}652 653.post__title {654	margin: 0;655}656 657.post__meta {658	padding: 5px 0;659	margin-top: 10px;660	margin-top: .625rem;661	border-top: 1px dotted #ebebeb;662	border-bottom: 1px dotted #ebebeb;663}664 665.post__lead {666	margin-top: 4px;667	margin-top: .25rem;668	margin-bottom: 0;669	font-size: 16px;670	font-size: 1rem;671	font-style: italic;672}673 674.post__thumbnail {675	max-width: 1030px;676	margin: 0 0 20px;677	margin-bottom: 0 0 1.25rem;678}679 680.post__thumbnail img {681	width: 100%;682}683 684.content a,685.warning a,686.authorbox__description a {687	font-weight: 700;688	color: #FF6A00;689}690 691.content a:hover,692.warning a:hover,693.authorbox__description a:hover {694	color: #FF6A00;695	text-decoration: underline;696}697 698.content .alignnone {699	display: block;700	margin: 20px 0;701	margin: 1.25rem 0;702}703 704.content .aligncenter {705	display: block;706	margin: 20px auto;707	margin: 1.25rem auto;708}709 710.content .alignleft {711	display: inline;712	float: left;713	margin: 5px 20px 20px 0;714	margin: .3125rem 1.25rem 1.25rem 0;715}716 717.content .alignright {718	display: inline;719	float: right;720	margin: 5px 0 20px 20px;721	margin: .3125rem 0 1.25rem 1.25rem;722}723 724.content ul {725	list-style: square;726}727 728.content ol {729	list-style: decimal;730}731 732.content ul,733.content ol {734	margin: 0 0 20px 40px;735}736 737.content ul ul,738.content ol ol,739.content ol ul,740.content ul ol {741	margin: 0 0 0 40px;742}743 744.content li {745	margin-bottom: 5px;746}747 748.post__footer {749	margin-top: 20px;750	margin-top: 1.25rem;751}752 753/* Post tags */754.tags {755	margin-bottom: 20px;756	margin-bottom: 1.25rem;757	font-size: 12px;758	font-size: .75rem;759	line-height: 1;760	color: #fff;761}762 763.tags__list {764	list-style: none;765}766 767.tags__item {768	float: left;769	margin: 0 6px 6px 0;770	margin: 0 .375rem .375rem 0;771	text-transform: uppercase;772	background: #2a2a2a;773}774 775.tags__item:hover {776	background: #FF6A00;777}778 779.tags__link,780.tags__link:hover {781	display: block;782	padding: 10px 15px;783}784 785.tags__badge {786	float: left;787	width: 32px;788	height: 32px;789	padding: 8px;790	margin-right: 6px;791	background: #FF6A00;792	fill: #fff;793}794 795/* Table of Contents */796.toc {797	margin-bottom: 20px;798	font-weight: 700;799	color: #7a8288;800	background: #fff;801	border-color: #ebebeb;802	border-style: solid;803	border-top-width: 1px;804	border-right-width: 1px;805	border-bottom-width: 0;806	border-left-width: 1px;807}808 809.toc__title {810	padding: 5px 10px;811	color: #fff;812	text-transform: uppercase;813	-webkit-user-select: none;814	-moz-user-select: none;815	-ms-user-select: none;816	-o-user-select: none;817	user-select: none;818	background: #2a2a2a;819}820 821.toc__menu ul {822	margin: 0;823	list-style: none;824}825 826.toc__menu li li a {827	padding-left: 25px;828}829 830.toc__menu li li li a {831	padding-left: 45px;832}833 834.toc__menu li li li li a {835	padding-left: 65px;836}837 838.toc__menu li li li li li a {839	padding-left: 85px;840}841 842.toc__menu li li li li li li a {843	padding-left: 105px;844}845 846.toc__menu li {847	margin: 0;848}849 850.toc__menu a {851	display: block;852	padding: 5px 10px;853	color: #FF6A00;854	border-bottom: 1px solid #ebebeb;855}856 857.toc__menu a:hover {858	text-decoration: underline;859}860 861/* Author Box */862.authorbox {863	padding: 25px 0;864	margin-bottom: 25px;865	line-height: 1.5;866	border-top: 1px solid #ebebeb;867	border-bottom: 1px solid #ebebeb;868}869 870.authorbox__avatar {871	float: left;872	padding: 3px;873	margin: 0 25px 0 0;874	border: 1px solid #ebebeb;875}876 877.authorbox__header {878	margin-bottom: 10px;879}880 881.authorbox__name {882	font-size: 16px;883	font-size: 1rem;884	font-weight: 700;885}886 887/* List content */888.list__item {889	padding-bottom: 20px;890	padding-bottom: 1.25rem;891	margin-bottom: 20px;892	margin-bottom: 1.25rem;893	border-bottom: 1px solid #ebebeb;894}895 896.list__header {897	margin-bottom: 10px;898	margin-bottom: .625rem;899}900 901.list__title {902	font-size: 20px;903	font-size: 1.25rem;904}905 906.list__meta {907	margin-top: 5px;908}909 910.list__thumbnail {911	float: left;912	margin: 0 20px 0 0;913}914 915.list__thumbnail img {916	width: 100%;917	max-width: 235px;918}919 920.list__footer-readmore {921	float: right;922	margin-top: 10px;923}924 925/* Pagination */926.pagination {927	margin-top: 20px;928}929 930.pagination__item {931	display: inline-block;932	padding: 10px 15px;933	font-weight: 700;934	color: #000;935	background: #f5f5f5;936}937 938.pagination__item:hover,939.pagination__item--current {940	color: #fff;941	background: #FF6A00;942}943 944/* Pager (prev/next links) navigation */945.pager {946	-webkit-justify-content: space-between;947	justify-content: space-between;948	padding-top: 25px;949	padding-bottom: 25px;950	margin-bottom: 25px;951	border-bottom: 1px solid #ebebeb;952}953 954.pager__subtitle {955	display: block;956	margin-bottom: 5px;957	font-weight: 700;958	line-height: 1;959	text-transform: uppercase;960}961 962.pager__title {963	margin-bottom: 0;964	overflow: hidden;965	font-size: 13px;966	font-size: .8125rem;967}968 969.pager__item {970	-webkit-flex: 1 1 50%;971	flex: 1 1 50%;972	max-width: 48%;973}974 975.pager__item--next {976	margin-left: auto;977	text-align: right;978}979 980.pager__link {981	display: block;982}983 984/* Images / Video */985img {986	width: auto\9; /* ie8 */987	max-width: 100%;988	height: auto;989	vertical-align: bottom;990}991 992iframe,993embed,994object,995video {996	max-width: 100%;997}998 999/* Table */1000table {1001	width: 100%;1002	margin-bottom: 20px;1003	margin-bottom: 1.25rem;1004	border-spacing: 0;1005	border-collapse: collapse;1006	border-top: 1px solid #ebebeb;1007	border-left: 1px solid #ebebeb;1008}1009 1010td,1011th {1012	padding: 5px 10px;1013	border-right: 1px solid #ebebeb;1014	border-bottom: 1px solid #ebebeb;1015}1016 1017th {1018	font-weight: 700;1019}1020 1021/* Forms */1022input {1023	padding: 5px;1024	font-size: 12px;1025	vertical-align: middle;1026	background: #f5f5f5;1027	border: 1px solid #ebebeb;1028	transition: all .25s ease-in-out;1029}1030 1031input[type=text],1032input[type=email],1033input[type=tel],1034input[type=url] {1035	width: 60%;1036}1037 1038input[type=text]:hover,1039input[type=email]:hover,1040input[type=tel]:hover,1041input[type=url]:hover,1042textarea:hover {1043	border: 1px solid #aaa;1044}1045 1046input[type=submit],1047input[type=reset] {1048	display: inline-block;1049	min-width: 150px;1050	padding: 10px 15px;1051	font-weight: 700;1052	color: #fff;1053	text-transform: uppercase;1054	cursor: pointer;1055	background: #2a2a2a;1056	border: 0;1057	transition: all .1s linear;1058	-webkit-appearance: none;1059}1060 1061input[type=submit]:hover,1062input[type=reset]:hover {1063	background: #FF6A00;1064}1065 1066textarea {1067	width: 96%;1068	padding: 5px;1069	overflow: auto;1070	line-height: 1.5;1071	resize: vertical;1072	background: #f5f5f5;1073	border: 1px solid rgba(0, 0, 0, .1);1074}1075 1076/* Widgets */1077.widget {1078	margin-bottom: 25px;1079	overflow: hidden;1080}1081 1082.widget:last-child {1083	margin-bottom: 0;1084}1085 1086.widget__title {1087	position: relative;1088	padding-bottom: 5px;1089	font-size: 16px;1090	font-size: 1rem;1091	text-transform: uppercase;1092	border-bottom: 3px solid #FF6A00;1093}1094 1095.widget__item {1096	display: block;1097	padding: 5px 0;1098	border-bottom: 1px dotted #ebebeb;1099}1100 1101.widget__item:first-child {1102	padding-top: 0;1103}1104 1105.widget__counter--bubble {1106	display: inline-block;1107	padding: 0 6px;1108	font-size: .75rem;1109	color: #666;1110	text-align: center;1111	background: #ebebeb;1112	border-radius: 2em;1113}1114 1115/* Search widget */1116.widget-search__form {1117	display: block;1118	padding: 5%;1119	margin: 0 auto;1120	background: #f5f5f5;1121}1122 1123.widget-search__form .widget-search__submit {1124	display: none;1125}1126 1127.widget-search__field {1128	position: relative;1129	display: block;1130	width: 90%;1131	padding: 8px;1132	margin: 0 auto;1133	font-size: 11px;1134	cursor: pointer;1135	background: #fff;1136	border: 1px solid #ebebeb;1137	border-radius: 0;1138	outline-offset: -2px;1139	transition: none;1140	-webkit-appearance: none;1141}1142 1143.widget-search__field:active,1144.widget-search__field:focus {1145	cursor: text;1146}1147 1148/* Social widget */1149.widget-social__item {1150	padding: 0;1151	border: 0;1152}1153 1154.widget-social__link {1155	display: block;1156	margin: 0 0 8px;1157	white-space: normal;1158}1159 1160.widget-social__link-icon {1161	margin: 0 5px 0 0;1162	vertical-align: middle;1163	fill: #fff;1164}1165 1166/* Tags Widget */1167.widget-taglist__link {1168	display: inline-block;1169	margin: 0 4px 8px 0;1170	font-size: 12px;1171	text-transform: uppercase;1172}1173 1174/* Languages Widget */1175.widget-languages__link {1176	display: block;1177}1178 1179.widget-languages__link:hover .widget-languages__link-btn {1180	color: #fff;1181	background: #FF6A00;1182}1183 1184.widget-languages__link-btn {1185	display: inline-block;1186}1187 1188/* Footer */1189.footer {1190	padding: 10px 25px;1191	font-size: 12px;1192	font-size: .75rem;1193	color: #999;1194	background: #2a2a2a;1195	border-top: 3px solid #999;1196}1197 1198.footer__container {1199	-webkit-flex-flow: row wrap;1200	flex-flow: row wrap;

Showing the first 1,200 of 1729 lines. Download the file for the rest.