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.7kdownloads
root12730.html
12730.html1750 linesDownload Raw Back to root
1<!DOCTYPE html>2<html class="no-js" lang="en">3 <head>4  <style>5   @font-face {6  font-family: 'Montserrat';7  font-style: normal;8  font-weight: 400;9  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');10}11@font-face {12  font-family: 'Montserrat';13  font-style: normal;14  font-weight: 700;15  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');16}17 18 19 20/* Normalize Min Styles21----------------------------------------------*/22html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}23/* Skeleton Min Styles24----------------------------------------------*/25.column,.columns,.container{width:100%;box-sizing:border-box}.container{position:relative;max-width:960px;margin:0 auto;padding:0 20px}.column,.columns{float:left}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.[PHONE REDACTED]%}.three.columns{width:22%}.four.columns{width:30.[PHONE REDACTED]%}.five.columns{width:39.[PHONE REDACTED]%}.six.columns{width:48%}.seven.columns{width:56.[PHONE REDACTED]%}.eight.columns{width:65.[PHONE REDACTED]%}.nine.columns{width:74%}.ten.columns{width:82.[PHONE REDACTED]%}.eleven.columns{width:91.[PHONE REDACTED]%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.[PHONE REDACTED]%}.two-thirds.column{width:65.[PHONE REDACTED]%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.[PHONE REDACTED]%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.[PHONE REDACTED]%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.[PHONE REDACTED]%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.[PHONE REDACTED]%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.[PHONE REDACTED]%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.[PHONE REDACTED]%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.[PHONE REDACTED]%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.[PHONE REDACTED]%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.[PHONE REDACTED]%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}26/* Bxslider Min Styles27----------------------------------------------*/28.bx-wrapper{position:relative;margin-bottom:60px;padding:0;-ms-touch-action:pan-y;touch-action:pan-y}.bx-wrapper img{max-width:100%;display:block}.bxslider{margin:0;padding:0}ul.bxslider{list-style:none}.bx-viewport{-webkit-transform:translatez(0)}.bx-wrapper .bx-controls-auto,.bx-wrapper .bx-pager{position:absolute;bottom:-30px;width:100%}.bx-wrapper .bx-loading{min-height:50px;background:url(images/bx_loader.gif) center center no-repeat #fff;height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000}.bx-wrapper .bx-pager{text-align:center;font-size:.85em;font-family:Arial;font-weight:700;color:#666;padding-top:20px}.bx-wrapper .bx-pager.bx-default-pager a{background-color: #fff; opacity: 0.65;text-indent:-9999px;display:block;width:10px;height:10px;margin:0 5px;outline:0;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.bx-wrapper .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-pager.bx-default-pager a:focus,.bx-wrapper .bx-pager.bx-default-pager a:hover{opacity: 1;}.bx-wrapper .bx-controls-auto .bx-controls-auto-item,.bx-wrapper .bx-pager-item{display:inline-block;vertical-align:bottom}.bx-wrapper .bx-pager-item{font-size:0;line-height:0}.bx-wrapper .bx-prev{left:10px;background:url(images/controls.png) 0 -32px no-repeat}.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover{background-position:0 0}.bx-wrapper .bx-next{right:10px;background:url(images/controls.png) -43px -32px no-repeat}.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover{background-position:-43px 0}.bx-wrapper .bx-controls-direction a{position:absolute;top:50%;margin-top:-16px;outline:0;width:32px;height:32px;text-indent:-9999px;z-index:9999}.bx-wrapper .bx-controls-direction a.disabled{display:none}.bx-wrapper .bx-controls-auto{text-align:center}.bx-wrapper .bx-controls-auto .bx-start{display:block;text-indent:-9999px;width:10px;height:11px;outline:0;background:url(images/controls.png) -86px -11px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-start.active,.bx-wrapper .bx-controls-auto .bx-start:focus,.bx-wrapper .bx-controls-auto .bx-start:hover{background-position:-86px 0}.bx-wrapper .bx-controls-auto .bx-stop{display:block;text-indent:-9999px;width:9px;height:11px;outline:0;background:url(images/controls.png) -86px -44px no-repeat;margin:0 3px}.bx-wrapper .bx-controls-auto .bx-stop.active,.bx-wrapper .bx-controls-auto .bx-stop:focus,.bx-wrapper .bx-controls-auto .bx-stop:hover{background-position:-86px -33px}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align:left;width:80%}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right:0;width:35px}.bx-wrapper .bx-caption{position:absolute;bottom:0;left:0;background:#666;background:rgba(80,80,80,.75);width:100%}.bx-wrapper .bx-caption span{color:#fff;font-family:Arial;display:block;font-size:.85em;padding:10px}29/* Base Styles30----------------------------------------------*/31* {box-sizing: border-box;}32html {33    color: #222;34    font-size: 1em;35    line-height: 1.4;36}37body {38	color: #4b4b4a;39	font-size: 16px;40	font-family: 'Montserrat', sans-serif;41}42::-moz-selection {43    background: #b3d4fc;44    text-shadow: none;45}46::selection {47    background: #b3d4fc;48    text-shadow: none;49}50main {position: relative;}51main h3 {52	font-size: 1.8em;53	margin: 0.5em 0;54}55main h4 {56	font-size: 1.6em;57	margin: 0.5em 0;58}59input,60select,61textarea {62	outline: none !important;63	border: 1px solid #4b4b4a;64	background-color: #fff;65	resize: none;66}67button,68input[type=submit] {cursor: pointer;}69table {70	border: none;71	margin-top: 2em;72}73td {74	border: none;75	vertical-align: top;76	padding: 0.5em 2em 0.5em 0;;77}78th {79	text-align: left;80	border: none;81	border-bottom: 1px solid #877773;82}83a {84	text-decoration: none;85	cursor: pointer;86	color: #0971ce;87}88a:hover {color: #17a9f5;}89button,90a.button,91input.button {92	font-size: 1.125em;93	text-align: center;94	padding: 0.25em 2em;95	text-transform: uppercase;96	color: #fff;97	background-color: #877773;98	-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);99	-moz-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);100	-ms-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);101	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);102}103a.button:hover,104input.button {105	background-color: #5e5452;106}107main li a.button {108	font-size: 0.8em109}110select,111textarea,112input[type=text],113input[type=email] {114	border-radius: 0;115	padding: 0.5em;116}117select {height: 35px;;}118nav.buttons .skew {119	margin-bottom: 0.5em;120	color: #fff;121	font-weight: 700;122	text-align: center;123	text-shadow: 2px 2px 0px rgba(75, 75, 75, 1);124	background: rgb(135,119,115);125	background: -moz-linear-gradient(top, rgba(135,119,115,1) 0%, rgba(114,101,97,1) 100%);126	background: -webkit-linear-gradient(top, rgba(135,119,115,1) 0%,rgba(114,101,97,1) 100%);127	background: linear-gradient(to bottom, rgba(135,119,115,1) 0%,rgba(114,101,97,1) 100%);128	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#877773', endColorstr='#726561',GradientType=0 );129}130nav.buttons .skew:hover {131	background: rgb(76, 66, 64);132	background: -moz-linear-gradient(top, rgba(105, 94, 92, 1) 0%, rgba(76, 66, 64, 1) 100%);133	background: -webkit-linear-gradient(top, rgba(105, 94, 92, 1) 0%,rgba(76, 66, 64, 1) 100%);134	background: linear-gradient(to bottom, rgba(105, 94, 92, 1) 0%,rgba(76, 66, 64, 1) 100%);135	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7370', endColorstr='#726765',GradientType=0 );136}137.lines {138	color: #877773;139	text-align: center;140	background: url(/assets/img/doubleLine.png) center repeat-x;141}142.lines .skew {max-width: 70%;}143.Dlines {144	color: #877773;145	position: relative;146	text-align: center;147}148.Dlines:before,149.Dlines:after {150	content: '';151	display: block;152	position: absolute;153	width: 18%;154	height: 20px;155	top: 20%;156	background: url(/assets/img/doubleLine.png) center repeat-x;157	-webkit-transform: skew(-25deg);158	   -moz-transform: skew(-25deg);159	    -ms-transform: skew(-25deg);160	     -o-transform: skew(-25deg);161}162.Dlines:after {right: 0;}163@media (min-width: 550px) {164	.Dlines:before,165	.Dlines:after {166		width: 30%;167	}168}169@media (min-width: 800px) {170	.Dlines:before,171	.Dlines:after {172		width: 35%;173	}174}175@media (min-width: 1000px) {176	.Dlines:before,177	.Dlines:after {178		width: 40%;179	}180}181.ir {182	text-indent: 105%;183	white-space: nowrap;184	overflow: hidden;185}186.cf:before,187.cf:after {188    content: " ";189    display: table;190}191.cf:after {192    clear: both;193}194/* Shapes Styles195----------------------------------------------*/196.skew {197	display: inline-block;198	padding: 0.5em 1em;199	background-color: #fff;200	-webkit-transform: skew(-25deg);201	   -moz-transform: skew(-25deg);202        -ms-transform: skew(-25deg);203	     -o-transform: skew(-25deg);204}205.skew .content {206	display: block;207	-webkit-transform: skew(25deg);208	   -moz-transform: skew(25deg);209        -ms-transform: skew(25deg);210	     -o-transform: skew(25deg);211}212.clip {213	214}215/* Navigation Styles216----------------------------------------------*/217nav ul li {218	list-style: none;219	font-size: 0.938em;220	display: inline-block;221	text-transform: uppercase;222}223/* Mobile Nav Styles 224----------------------------------------------*/225.mobile {226	display: inline-block;227	float: right;228	padding: 0.5em 2em;229	background: url(/assets/img/trianglesBlue.png);230	-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);231       -moz-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);232        -ms-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);233            clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);234}235#menu {236	color: #fff;237	font-weight: 700;238	font-size: 0.8em;239}240#menu svg {max-height: 15px;}241#mobile_nav,242#mobile_nav ul {243	padding-left: 0;244}245#mobile_nav {246	display: none;247	clear: both;248	width: 100%;249	margin: 0;250	padding: 1em 0;251	line-height: 2em;252	text-align: left;253	background: url(/assets/img/trianglesBlue.png);254}255#mobile_nav a {color: #fff;}256#mobile_nav a:hover {color: #17a9f5;}257#mobile_nav li {258	list-style: none;259	line-height: 1.3em;260	margin: .75em 0;261	font-weight: 700;262}263#mobile_nav > li {264	width: 60%;265	margin: .75em auto;266}267#mobile_nav li ul {268	border-top: 1px solid #fff;269	padding-left: 1em;270	margin-bottom: 1.5em;271    margin-top: .25em;272}273#mobile_nav li li {274    font-weight: normal;275}276@media (min-width: 550px) {277	.mobile {display: none;}278}279/* Header Styles280----------------------------------------------*/281body > header {282	position: relative;283	text-align: center;284}285header .searchContain{286	height: 40px;287	color: #fff;288	font-size: 0.9em;289	background-image: url(/assets/img/trianglesDark.png);290}291header .searchContain label, header .searchContain a {292	text-transform: uppercase;293	cursor: pointer;294	font-weight: 700;295}296header .searchContain a { color: #fff; margin-left: 25px; }297header .searchContain label:hover, header .searchContain a:hover {color: #17a9f5;}298header #search {299	position: absolute;300	top: 6px;301	right: 47%;302}303header #search .textInput, main #search-form input[type=text] {304	background-color: #fff;305	max-width: 80%;306	border: 1px solid #877773;307	-webkit-transform: skew(-25deg);308	   -moz-transform: skew(-25deg);309        -ms-transform: skew(-25deg);310	     -o-transform: skew(-25deg);311}312header #search .textInput { display: block; }313main #search-form input[type=text] {314	display: inline-block; padding: 0.25em 0.5em; }315header #search input[type=text] {316	padding: 3px 0;317	max-width: 90%;318	border: none;319	-webkit-transform: skew(25deg);320	   -moz-transform: skew(25deg);321        -ms-transform: skew(25deg);322	     -o-transform: skew(25deg);323	324}325header #search .submitInput, main #search-form input[type=submit] {326    margin-top: 2px;327    width: 100px;328	background-color: #0867bc;   329	-webkit-transform: skew(-25deg);330	   -moz-transform: skew(-25deg);331        -ms-transform: skew(-25deg);332	     -o-transform: skew(-25deg);333}334header #search .submitInput {335	display: block; }336main #search-form input[type=submit] {337	display: inline-block; }338header #search .submitInput:hover, main #search-form input[type=submit]:hover {339	background-color: #17a9f5;340}341input[type=submit] {342    position: relative;343	-webkit-appearance: none;344	apperance: none;345	padding: 0.25em 1.5em;346	border: none;347	color: #fff;348	font-size: 14px;349	font-family: 'Montserrat', sans-serif;350	text-transform: uppercase;351    background-color: transparent;   352	-webkit-transform: skew(25deg);353	   -moz-transform: skew(25deg);354        -ms-transform: skew(25deg);355	     -o-transform: skew(25deg);356}357body > header h1 {358	display: inline-block;359	max-width: 60%;360	margin: 0.5em auto 0 auto;361}362body > header h1 a {363	display: block;364	max-width: 380px;365	height: 35px;366	background: url(/assets/img/logoTagline.svg) no-repeat;367}368body > header nav {display: none;}369body > header nav li a {370	color: #fff;371	font-weight: 700;372}373header nav ul {margin: 0;}374header nav > ul > li {padding: 2em 0;}375header nav > ul > li > ul {376	display: none;377	position: absolute;378	z-index: 10;379	padding: 1.75em 1.75em 0 1.75em;380	max-width: 100%;381	text-align: left;382	left: 6px;383	top: 81px;384	column-count: 2;385	-moz-column-count: 2;386	-webkit-column-count: 2;387	background: url(/assets/img/trianglesDark.png);388}389header nav > ul {position: relative;}390header nav li ul li {margin-bottom: 1em;}391header nav li ul li ul {392	padding-top: 1em;393	padding-left: 1em;394}395header nav li ul a {color: #fff;}396header nav li ul a:hover {color: #17a9f5;}397header nav li:hover ul {display: block;}398.sliderBG nav.buttons {399	position: relative;400	z-index: 10;401	margin-left: 14%;402	padding-right: 4em;403}404.sliderBG nav.buttons .skew {405	font-size: 1em;406	padding: 1em 0;407	width: 45%;408	margin-left: 4px;409}410@media (min-width: 550px) {411	body > header {padding-bottom: 0;}412	body > header h1 {font-size: 2.25em;}413	body > header h1,414	body > header nav,415	body > header nav ul {416		display: inline-block;417		vertical-align: middle;418	}419	body > header h1 a {420		height: 50px;421		margin-bottom: 0.25em;422	}423}424@media (min-width: 750px) {425	.sliderBG nav.buttons {426		position: absolute;427		width: 330px;428		left: 0;429		right: 0;430		bottom: 12px;431		padding-left: 227px;432		margin-left: auto;433		margin-right: auto;434		text-align: center;435	    padding-right: 0;436	}437	.sliderBG nav.buttons .skew {438		width: 225px;439		margin-left: 4px;440	}441	.sliderBG nav.buttons .skew + .skew {margin-left: -24px;}442}443@media (min-width: 587px) { 444	header #search { right: 40%; }445	header #search .textInput { 446		display: inline-block;447		max-width: 45%; }448	header #search .submitInput {449		display: inline-block;450		margin-top: 0;451	}452}453@media (min-width: 786px) { 454	header #search { right: 30%; } 455}456@media (min-width: 900px) {457	header #search {458		margin-left: 125px;459		left: 0;460		right: 0;461	}462	.sliderBG nav.buttons {463		width: 300px;464		bottom: 130px;465		padding-left: 177px;466	}467	.sliderBG nav.buttons .skew {468		font-size: 1.4em;469		width: 225px;470		margin-left: 4px;471	}472	.sliderBG nav.buttons .skew + .skew {margin-left: -40px;}473}474@media (min-width: 1200px) {475	header #search {476		margin-left: 200px; 477	}478}479/* Footer Styles480----------------------------------------------*/481body > footer {482	color: #e1e1e1;483	padding: 2em 0;484	text-align: center;485	background: url(/assets/img/trianglesBlue.png);486}487body > footer h2 a {488	display: block;489	min-height: 70px;490	min-height: 90px;491	background: url(/assets/img/logoW.svg) no-repeat center;492}493footer .social {494	text-align: center;495}496footer .social span {margin-right: 0;}497footer .social a {498	display: inline-block;499	vertical-align: middle;500	width: 22px;501	height: 22px;502	margin: 0.5em 6px 0 6px;503}504footer .social a:hover {opacity: 0.8;}505footer a.icon-fb {background: url(/assets/img/icon-fb.svg) no-repeat;}506footer a.icon-in {background: url(/assets/img/icon-in.svg) no-repeat;}507footer a.icon-yt {508	width: 32px !important;509	background: url(/assets/img/icon-yt.svg) no-repeat;510}511body > footer nav {display: none;}512body > footer nav ul {padding: 0;}513body > footer nav li a{514	color: #e1e1e1;515	font-size: 0.9em;516	margin-right: 0.5em;517	text-decoration: underline;518}519footer p {520	color: #fff;521}522footer p span {display: block;}523footer p a {524	display: block;525	color: #e1e1e1;526}527footer a:hover {528	color: #fff;529	opacity: 0.8;530}531footer div.lines {532	display: block;533	width: 80%;534	margin: 0 auto;535	background: url(/assets/img/doubleLine.png) center repeat-x;536}537footer small {538	display: block;539	/*max-width: 25em;*/ 540	margin: 0 auto;541	color: #fff;542}543@media (min-width: 550px) {544	footer div.lines {display: none;}545	body > footer {text-align: left;}546	body > footer nav {display: block;}547	footer p a,548	footer span p {display: inline-block;}549}550@media (min-width: 900px) {551	footer p {line-height: 2em;}552	footer p span {553		display: inline-block;554		margin-right: 0.5em;555	}556	footer p a:before {557		content: "|";558		color: #fff;559		display: inline-block;560		margin-right: 0.5em;561	}562	footer .social {font-weight: 700;}563	footer .social span {display: block;}564	footer .social a {565		width: 30px;566		height: 30px;567		margin: 0 0.25em;568	}569	footer a.icon-yt {width: 42px !important;}570}571@media (min-width: 1000px) {572	footer .social span {display: inline;}573	footer .social a {574		margin: 0 0.4em;575	}576}577	578/* Search Styles579----------------------------------------------*/580body > header #search {display: none;}581body > header .searchContain {582	position: relative;583	/*margin-bottom: -1px;*/584}585body > header .searchContain .skew {586	display: inline-block;587	vertical-align: middle;588	width: 60%;589	max-width: 777px;590	margin-right: 2em;591	height: 102%;592	padding: 1em;593}594body > header .searchContain .skew{ width: 20%; }595@media (min-width: 300px) {596	body > header .searchContain .skew{ width: 40%; }597}598@media (min-width: 576px) {599	body > header .searchContain .skew{ width: 50%; }600}601@media (min-width: 768px) {602	body > header .searchContain .skew{ width: 60%; }603}604@media (min-width: 900px) {605	body > header .searchContain .skew {606		width: 78%;607		max-width: none;608		background-size: cover;609	}610}611@media (min-width: 1100px) {612	body > header .searchContain .skew {613		width: 62%;614		max-width: 777px;615	}616}617/* Homepage Styles618----------------------------------------------*/619.home > header nav li a {620	color: #4b4b4a;621	margin-right: 1em;622}623.home > header nav li a:hover {color: #0971ce;}624.home header nav > ul > li > ul {625	left: 40px;626	top: 60px;627	max-width: 90%;628}629.home header nav li ul li a {color: #fff;}630.home header nav li ul li a:hover {color: #17a9f5;}631.home main .sliderBG {632	padding-top: 1em;633	position: relative;634	background: url(/assets/img/trianglesLight.png);635}636.home main .sliderBG:before,637.home main .sliderBG:after {638	content: '';639	position: absolute;640	width: 100%;641	height: 20px;642	background-color: #fff;643}644.home main .sliderBG:after {645	bottom: 0;646	height: 30px;647}648.home main .bx-wrapper {649	margin: 0 auto;650	z-index: 1;651}652.home .bx-controls {653	position: absolute;654	width: 100%;655	bottom: 180px;656}657.home .bx-pager {658	text-align: left;659	padding-left: 5em;660}661.home main .slider {662	max-width: 1336px;663}664.home main .slider svg {665	position: relative;666	z-index: -2;667	max-width: 100%;668	width: 100%;669	height: 200px;670	margin-bottom: -70px;671}672.home main .slider svg image {height: auto;}673.home main .slider .copy {674	position: relative;675	right: 0;676	display: inline-block;677	width: 100%;678	margin-left: 13%;679	color: #fff;680	padding: 2% 0 2% 12%;681	text-shadow: 2px 2px 0px rgba(75, 75, 75, 1);682}683.home main .slider .copy:after {684	position: absolute;685	z-index: -1;686	top: 0;687	right: 40px;688	content: '';689	display: block;690	width: 88%;691	height: 98%;692	background: url(/assets/img/trianglesBlue-skew.png);693	-webkit-transform: skew(-25deg);694       -moz-transform: skew(-25deg);695        -ms-transform: skew(-25deg);696         -o-transform: skew(-25deg);697	        transform: skew(-25deg);698}699/*700.home main .slider .copy:after {701	position: absolute;702	z-index: -1;703	top: 0;704	right: 0;705	content: '';706	display: block;707	width: 100%;708	height: 98%;709	background: url(/assets/img/trianglesBlue.png);710	-webkit-clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);711	-moz-clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);712	-ms-clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);713	clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);714}715*/716.home main .slider .copy h3 {717	font-size: 1.5em;718	padding-left: 0.25em;719	margin: 0;720}721.home main .slider .copy p {722	margin: 0 0 0 -1em;723	font-size: 0.8em;724}725.home main .slider .copy .skew {726	background: url(/assets/img/doubleLine.png) repeat-x;727	border: none;728	width: 500px;729    max-width: 100%;730	height: 13px;731	padding: 0;732}733.home .bx-controls {display: none;}734.home main article {text-align: center;}735.home main article p {736	font-size: 0.8em;737	margin-top: 2em;738	line-height: 2em;739}740.home main article a {741	display: inline-block;742	margin-top: 1em;743	text-transform: uppercase;744	text-decoration: underline;745}746.home main h2 {margin-top: 2em}747.home .fund {748	background: url(/assets/img/trianglesLight.png)749}750.home .fund ul {751	width: 100%;752	padding: 0;753	display: flex;754	flex-direction: column;755	list-style: none;756}757.home .fund ul li {758	position: relative;759	padding: 0 10% 4em 10%;760}761.home .fund ul li:first-of-type {;762	background-color: #fff;763}764.home .fund li h3 {765	font-size: 1.4em;766	font-weight: 400;767	text-align: center;768	text-transform: uppercase;769}770.home .fund li h4 {771	margin: 0;772	font-size: 1.25em;773	color: #0971ce;774}775.home .fund li h4 span {color: #4b4b4a;}776.home .fund li img {777	max-width: 100%;778	height: auto;779}780.home .fund li > a.button {781	width: 90%;782	display: block;783}784.home .fund .benefits p {margin: 0}785.home .fund .benefits .endorse {786	text-align: center;787	margin-top: 0.25em;788	font-size: 0.875em;789	font-style: italic;790}791.home .fund .endorse a {792	display: block;793    vertical-align: top;794    margin: 0 auto;795    width: 130px;796    margin-top: 2px;797    height: 55px;798    background: url(/assets/img/ata-logo.svg) no-repeat center;799}800@media (min-width: 400px) {801	.home main .slider svg {802		height: 240px;803	}804}805@media (min-width: 450px) {806	.home main .slider svg {807		height: 300px;808	}809}810@media (min-width: 550px) {811	.home > header {padding-bottom: 30px;}812	.home main .sliderBG {padding-top: 0;}813	.home main .slider svg {814		height: 287px;815		width: 500px;816	}817	.home main .slider svg image,818	.home main .slider img {819		clip-path: url('/#clip1');820		-webkit-clip-path: polygon(0% 0%, 100% 0%, 71% 100%, 0% 100%);821		   -moz-clip-path: polygon(0% 0%, 100% 0%, 71% 100%, 0% 100%);822	}823	.home main .slider .copy .skew {margin-left: -75px;}824	.home main .slider .copy {margin-left: 7%;}825	.home main .slider .copy p {font-size: 1em;}826	.home main article p {827		font-size: 1em;828		line-height: 2.5em;829	}830	.home .fund ul li {padding: 0 1em 3em 1em;}831	.home .fund li > a.button {832		position: absolute;833		bottom: 1em;834	}835}836@media (min-width: 550px) and (max-width: 900px) {837	.home .fund ul {838		display: block;839		text-align: center;840	}841	.home .fund ul li.one-third {width: 48%;}842	.home .fund ul li.one-third:last-of-type {width: 90%;}843	844}845@media (min-width: 650px) {846	.home main .slider svg {847		width: 600px;848		height: 356px;849	}850	.home .bx-pager {851		padding-left: 8em;852	}853}854@media (min-width: 750px) {855	.home main .slider .copy {856		position: absolute;857		top: 8%;858		width: 54%;859		padding-left: 8%;860		margin: 0;861	}862}863@media (min-width: 900px) {864	.home main .slider .copy .skew {margin-left: -90px;}865	.home main .slider section {height: 525px;}866	.home main .slider svg {867		width: 888px;868		height: 525px;869		margin-bottom: 0;870	}871	.home .bx-controls {display: block;}872	.home main .slider .copy {873		top: 25%;874		width: 60%;875	}876	.home main .slider .copy h3 {font-size: 2.5em;}877	.sliderBG nav.buttons {bottom: 40px;}878	.home .bx-controls {879		width: 100%;880		bottom: 10%;881	}882	.home .bx-pager {883		text-align: center;884		margin-left: -20em;885	}886	.home main article p {887		padding: 0 5em;888	}889	.home .fund ul {890		flex-direction: row;	891	}892	.home .fund li h3 {text-align: left;}893}894@media (min-width: 1000px) {895	.home main .slider .copy {width: 50%;}896}897/* Interior Styles898----------------------------------------------*/899.interior header nav {900	padding: 0 0 0 2em;901	background: url(/assets/img/trianglesBlue.png);902}903.interior header nav li a {margin-right: 0.5em;}904.interior header nav:before {905	content: "";906    display: block;907    position: absolute;908    height: 88px;909    width: 30px;910    margin-left: -33px;911    margin-top: -1px;912    border-top: 100px solid #fff;913    border-right: 50px solid transparent;914    height: 0;915	/*content: "";916	display: block;917	position: absolute;918	height: 88px;919	width: 70px;920	margin-left: -33px;921	margin-top: -1px;922	background-color: #fff;923	-webkit-clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);924	-moz-clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);925	-ms-clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);926	clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 0% 100%);*/927}928.interior header nav:after {929	content: '';930	position: absolute;931	z-index: -1;932	right: 0;933	bottom: 0;934	height: 81px;935	width: 50%;936	background: url(/assets/img/trianglesBlue.png);937}938.interior nav.buttons {939	display: none;940	position: relative;941	z-index: 5;942	text-align: center;943	margin-top: 0.25em;944	margin-bottom: -1.5em;945	padding-left: 15%;946}947@media (min-width: 600px) {948	.interior header nav li a {margin-right: 1em;}949}950@media (min-width: 800px) {951	.interior nav.buttons {952		padding-left: 20em;953	}954}955.interior nav.buttons .skew {956	padding: 1em 2em;957}958.interior main {959	padding: 3em 0;960	background: url(/assets/img/trianglesLight.png);961}962.interior main article {963	padding-left: 8%;964	min-height: 420px;965}966.interior main article > * {967	position: relative;968	z-index: 2;969}970.interior main article h2 {971	position: relative;972	z-index: 1;973	font-size: 2em;974	line-height: 1em;975	margin: 0;976	color: #0971ce;977	text-shadow: 1px 1px 0px rgba(135, 119, 115, 1);978}979.interior main article h2:before {980	content: '';981	display: block;982	position: absolute;983	left: -60px;984	/*top: 30%;*/985	height: 13px;986	width: 50px;987	-webkit-transform: skew(-25deg);988	   -moz-transform: skew(-25deg);989	    -ms-transform: skew(-25deg);990	     -o-transform: skew(-25deg);991	background: url(/assets/img/doubleLine.png) 0 0 / 25px 7px repeat-x;992	top: 12px;993}994.interior main article table td {display: block;}995.interior main article img {996	max-width: 100%;997	height: auto !important;998}999.interior main article img[style*="float: left"],1000.interior main article img[style*="float:left"] {1001	margin: 0.5em 1em 0.5em 0;1002}1003.interior main article img[style*="float: right"],1004.interior main article img[style*="float:right"] {1005	margin: 0.5em 0 0.5em 1em;1006}1007@media (min-width: 550px){	1008	.interior main {padding: 5em 0;}1009	.interior main article table td {display: table-cell;}1010}1011@media (min-width: 750px){1012	.interior main article:before {1013		position: absolute;1014		z-index: 1;1015		margin-left: -450px;1016		width: 656px;1017		height: 420px;1018		opacity: 0.7;1019		background: url(/assets/img/logoA.svg) no-repeat;1020		background-size: cover;1021	}1022	.interior main article h2 {font-size: 3em;}1023	.interior main article h2:before {top: 20px;background-size: 50px 13px;}1024}1025@media (min-width: 1000px){1026.interior main article h2:before {background-size: 80px 13px; width: 80px; left: -110px;}1027}1028.interior main article p {1029	position: relative;1030	z-index: 1;1031	line-height: 2em;1032}1033.interior aside.sectionNav {margin: 1em 0 2em 0;}1034.interior aside.sectionNav ul {list-style: none;}1035.interior aside.sectionNav li {1036	margin: 0;1037	padding: 1em;1038}1039.interior aside.sectionNav svg {1040	display: inline-block;1041	vertical-align: middle;1042	/*width: 80px;1043	height: 80px;*/1044	margin-right: 1em;1045	fill: #877773;1046	stroke: #877773;1047    width: 15%;1048    /*float: left;*/1049    width: 46px;1050    height: 46px;1051 1052}1053.interior aside.sectionNav li a {1054	display: inline-block;1055	vertical-align: middle;1056	text-transform: uppercase;1057	font-size: 1.25em;1058	max-width: 12em;1059	width: 70%;1060	text-shadow: 1px 1px 0px rgba(135, 119, 115, 1);1061	/*float: left;*/1062}1063.interior .fundNews {1064	background-size: cover;1065	padding: 2em 0 4em 0;1066}1067.interior .fundNews .container {1068	padding: 0 8%;1069}1070.interior .fundNews h4 {1071	color: #0971ce;1072	font-size: 1.2em;1073	margin-bottom: 0;1074	margin-top: 0.5em;1075}1076.interior .apply {1077	margin-top: 2em;1078	padding: 1em 0;1079	text-align: center;1080	background: url(/assets/img/trianglesLight.png)1081}1082.interior .apply p {padding-right: 4%;}1083.interior .apply h2 {font-size: 1.25em;}1084.interior .apply h2 a {1085	color: #fff;1086	padding: 1em 2em;1087	background: rgb(9,113,206);1088	background: -moz-linear-gradient(top, rgba(9,113,206,1) 0%, rgba(7,87,158,1) 100%);1089	background: -webkit-linear-gradient(top, rgba(9,113,206,1) 0%,rgba(7,87,158,1) 100%);1090	background: linear-gradient(to bottom, rgba(9,113,206,1) 0%,rgba(7,87,158,1) 100%);1091	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0971ce', endColorstr='#07579e',GradientType=0 );1092}1093.interior .apply h2 a:hover {1094	background: rgb(64,150,238);1095	background: -moz-linear-gradient(top, rgba(64,150,238,1) 0%, rgba(64,150,238,1) 100%);1096	background: -webkit-linear-gradient(top, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%);1097	background: linear-gradient(to bottom, rgba(64,150,238,1) 0%,rgba(64,150,238,1) 100%);1098	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 );1099}1100.interior .apply p {font-size: 1.25em;}1101@media (min-width: 550px) {1102	.interior nav.buttons {display: block;}1103	.interior aside.sectionNav ul {width: 96%;}1104	.interior aside.sectionNav li {text-align: left;}1105	.interior aside.sectionNav li:nth-child(odd) {clear: left;}1106	.interior .fundNews {1107		background-image: url(/assets/img/newsBG.jpg);1108		background-position: center;1109		background-repeat: no-repeat;1110	}1111	.interior .fundNews h2.Dlines {margin-bottom: 2em;}1112	.interior .fundNews .container {padding: 0;}1113}1114@media (min-width: 550px) and (max-width: 900px) {1115	.interior .apply .columns {1116		float: none;1117		width: 96%;1118	}1119	.interior .apply h2 {font-size: 1.25em;}1120	1121}1122@media (min-width: 750px) {1123	.interior aside.sectionNav li {display: table;}1124	.interior aside.sectionNav li a {1125		font-size: 1.5em;1126		width: 72%;1127		height: 80px;1128	    line-height: normal;1129    	display: table-cell;1130    	vertical-align: middle;1131	}1132	.interior aside.sectionNav li svg {1133		/*display: block;1134		margin: 0 auto;*/1135	    width: 22%;1136	    width: 80px;1137    	height: 80px;1138	}1139}1140@media (min-width: 900px) {1141	.interior .apply {text-align: left;}1142	.interior main article h2 {1143		margin-left: 0;1144	}1145}1146@media (min-width: 1095px) {1147	.interior aside.sectionNav li {1148		text-align: left;1149	}1150	.interior aside.sectionNav li svg {1151		display: inline-block;1152		margin-right: 1em;1153	}1154}1155@media (min-width: 1200px) {1156	.interior .fundNews {background-size: 1400px;}1157}1158/* List Styles1159----------------------------------------------*/1160.interior main article li {1161	margin: 0.5em 0;1162}1163ol {counter-reset: item;}1164ol > li { display:block;}1165ol > li:before {1166	display: inline-block;1167	margin-right: 0.5em;1168	content: counter(item) ". ";1169	counter-increment: item;1170	color: #0971ce;1171	font-weight: 700;1172}1173.interior main article ul li {1174	position: relative;1175	list-style: none;1176}1177.interior main  article ul li:before {1178	content: '';1179	position: absolute;1180	left: -25px;;1181	top: 8px;1182	width: 18px;1183	height: 3px;1184	background-color: #0971ce;1185	-webkit-transform: skew(-25deg);1186	   -moz-transform: skew(-25deg);1187	    -ms-transform: skew(-25deg);1188	     -o-transform: skew(-25deg);1189}1190.interior.listing main article ul li {margin-bottom: 3em;}1191.interior.listing main  article ul li:before {top: 11px;}1192.interior.listing main article h3 {1193	margin-bottom: 0;1194	font-size: 1.25em;1195}1196.interior.listing main article p {margin-top: 0;}1197/* Detail Styles1198----------------------------------------------*/1199.interior.detail main article h2 {1200	font-size: 1.8em;

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