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>2<html class="">3 <head>4 <style>5 @font-face {6 font-family: 'Lato';7 font-style: normal;8 font-weight: 300;9 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');10}11@font-face {12 font-family: 'Lato';13 font-style: normal;14 font-weight: 400;15 src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');16}17@font-face {18 font-family: 'Lato';19 font-style: normal;20 font-weight: 700;21 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');22}23@font-face {24 font-family: 'Lato';25 font-style: normal;26 font-weight: 900;27 src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPHA.ttf) format('truetype');28}29 30 31 32/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */33 34 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}35 36/* Box Model */37 38 *, *:before, *:after {39 -moz-box-sizing: border-box;40 -webkit-box-sizing: border-box;41 -o-box-sizing: border-box;42 -ms-box-sizing: border-box;43 box-sizing: border-box;44 }45 46/* Container */47 48 body {49 min-width: 1200px;50 }51 52 .sitebox {53 width: 1200px;54 margin-left: auto;55 margin-right: auto;56 }57 58 /* Modifiers */59 60 .sitebox.small {61 width: 900px;62 }63 64 .sitebox.big {65 width: 100%;66 max-width: 1500px;67 min-width: 1200px;68 }69 70/* Grid */71 72 /* Cells */73 74 .\31 2u { width: 100% }75 .\31 1u { width: 91.[PHONE REDACTED]% }76 .\31 0u { width: 83.[PHONE REDACTED]% }77 .\39 u { width: 75% }78 .\38 u { width: 66.[PHONE REDACTED]% }79 .\37 u { width: 58.[PHONE REDACTED]% }80 .\36 u { width: 50% }81 .\35 u { width: 41.[PHONE REDACTED]% }82 .\34 u { width: 33.[PHONE REDACTED]% }83 .\33 u { width: 25% }84 .\32 u { width: 16.[PHONE REDACTED]% }85 .\31 u { width: 8.[PHONE REDACTED]% }86 .\-11u { margin-left: 91.[PHONE REDACTED]% }87 .\-10u { margin-left: 83.[PHONE REDACTED]% }88 .\-9u { margin-left: 75% }89 .\-8u { margin-left: 66.[PHONE REDACTED]% }90 .\-7u { margin-left: 58.[PHONE REDACTED]% }91 .\-6u { margin-left: 50% }92 .\-5u { margin-left: 41.[PHONE REDACTED]% }93 .\-4u { margin-left: 33.[PHONE REDACTED]% }94 .\-3u { margin-left: 25% }95 .\-2u { margin-left: 16.[PHONE REDACTED]% }96 .\-1u { margin-left: 8.[PHONE REDACTED]% }97 98 .row > * {99 padding: 50px 0 0 50px;100 float: left;101 -moz-box-sizing: border-box;102 -webkit-box-sizing: border-box;103 -o-box-sizing: border-box;104 -ms-box-sizing: border-box;105 box-sizing: border-box;106 }107 108 .row + .row > * {109 padding-top: 50px;110 }111 112 .row {113 margin-left: -50px;114 }115 116 /* Rows */117 118 .row:after {119 content: '';120 display: block;121 clear: both;122 height: 0;123 }124 125 .row:first-child > * {126 padding-top: 0;127 }128 129 .row > * {130 padding-top: 0;131 }132 133 /* Modifiers */134 135 /* Flush */136 137 .row.flush {138 margin-left: 0;139 }140 141 .row.flush > * {142 padding: 0 !important;143 }144 145 /* Quarter */146 147 .row.quarter > * {148 padding: 12.5px 0 0 12.5px;149 }150 151 .row.quarter + .row.quarter > * {152 padding-top: 12.5px;153 }154 155 .row.quarter {156 margin-left: -12.5px;157 }158 159 /* Half */160 161 .row.half > * {162 padding: 25px 0 0 25px;163 }164 165 .row.half + .row.half > * {166 padding-top: 25px;167 }168 169 .row.half {170 margin-left: -25px;171 }172 173 /* One and (a) Half */174 175 .row.oneandhalf > * {176 padding: 75px 0 0 75px;177 }178 179 .row.oneandhalf + .row.oneandhalf > * {180 padding-top: 75px;181 }182 183 .row.oneandhalf {184 margin-left: -75px;185 }186 187 /* Double */188 189 .row.double > * {190 padding: 100px 0 0 100px;191 }192 193 .row.double + .row.double > * {194 padding-top: 100px;195 }196 197 .row.double {198 margin-left: -100px;199 }200 201 202 203 204@charset 'UTF-8';205@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=4.0.1');src:url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}206 207/*********************************************************************************/208/* Basic */209/*********************************************************************************/210 211 body {212 margin: 0px;213 padding: 0px;214 background: #4e4340;215 font-family: 'Lato', sans-serif;216 font-size: 12pt;217 font-weight: 300;218 color: #525252;219 }220 221 h1, h2, h3 {222 margin: 0px;223 padding: 0px;224 font-weight: 300;225 }226 227 p {228 margin-bottom: 1.5em;229 line-height: 180%;230 }231 232 a {233 color: #987159;234 }235 236 strong {237 font-weight: 700;238 color: #2A2A2A;239 }240 241 /* Images */242 243 .image244 {245 display: inline-block;246 }247 248 .image img249 {250 display: block;251 width: 100%;252 }253 254 .image.featured255 {256 display: block;257 width: 100%;258 margin: 0 0 2em 0;259 }260 261 .image.full262 {263 display: block;264 width: 100%;265 margin: 0 0 2em 0;266 }267 268 .image.left269 {270 float: left;271 margin: 0 2em 2em 0;272 }273 274 .image.centered275 {276 display: block;277 margin: 0 0 2em 0;278 }279 280 .image.centered img281 {282 margin: 0 auto;283 width: auto;284 }285 286 287 header288 {289 margin-bottom: 2.5em;290 }291 292 header h2293 {294 letter-spacing: -2px;295 text-transform: uppercase;296 font-weight: 900;297 font-size: 2em;298 color: #323338;299 }300 301 header .byline302 {303 }304 305/*********************************************************************************/306/* Icons */307/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */308/* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */309/*********************************************************************************/310 311 .fa312 {313 text-decoration: none;314 }315 316 .fa.solo317 {318 }319 320 .fa.solo span321 {322 display: none;323 }324 325 .fa:before326 {327 display:inline-block;328 font-family: FontAwesome;329 font-size: 1.25em;330 text-decoration: none;331 font-style: normal;332 font-weight: normal;333 line-height: 1;334 -webkit-font-smoothing:antialiased;335 -moz-osx-font-smoothing:grayscale;336 }337 338 .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}339 .fa-2x{font-size:2em}340 .fa-3x{font-size:3em}341 .fa-4x{font-size:4em}342 .fa-5x{font-size:5em}343 .fa-fw{width:1.2857142857142858em;text-align:center}344 .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative}345 .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em}346 .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}347 .pull-right{float:right}348 .pull-left{float:left}349 .fa.pull-left{margin-right:.3em}350 .fa.pull-right{margin-left:.3em}351 .fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}352 @-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}353 .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}354 .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}355 .fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}356 .fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}357 .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}358 .fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}359 .fa-stack-1x{line-height:inherit}360 .fa-stack-2x{font-size:2em}361 .fa-inverse{color:#fff}362 .fa-glass:before{content:"\f000"}363 .fa-music:before{content:"\f001"}364 .fa-search:before{content:"\f002"}365 .fa-envelope-o:before{content:"\f003"}366 .fa-heart:before{content:"\f004"}367 .fa-star:before{content:"\f005"}368 .fa-star-o:before{content:"\f006"}369 .fa-user:before{content:"\f007"}370 .fa-film:before{content:"\f008"}371 .fa-th-large:before{content:"\f009"}372 .fa-th:before{content:"\f00a"}373 .fa-th-list:before{content:"\f00b"}374 .fa-check:before{content:"\f00c"}375 .fa-times:before{content:"\f00d"}376 .fa-search-plus:before{content:"\f00e"}377 .fa-search-minus:before{content:"\f010"}378 .fa-power-off:before{content:"\f011"}379 .fa-signal:before{content:"\f012"}380 .fa-gear:before,.fa-cog:before{content:"\f013"}381 .fa-trash-o:before{content:"\f014"}382 .fa-home:before{content:"\f015"}383 .fa-file-o:before{content:"\f016"}384 .fa-clock-o:before{content:"\f017"}385 .fa-road:before{content:"\f018"}386 .fa-download:before{content:"\f019"}387 .fa-arrow-circle-o-down:before{content:"\f01a"}388 .fa-arrow-circle-o-up:before{content:"\f01b"}389 .fa-inbox:before{content:"\f01c"}390 .fa-play-circle-o:before{content:"\f01d"}391 .fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}392 .fa-refresh:before{content:"\f021"}393 .fa-list-alt:before{content:"\f022"}394 .fa-lock:before{content:"\f023"}395 .fa-flag:before{content:"\f024"}396 .fa-headphones:before{content:"\f025"}397 .fa-volume-off:before{content:"\f026"}398 .fa-volume-down:before{content:"\f027"}399 .fa-volume-up:before{content:"\f028"}400 .fa-qrcode:before{content:"\f029"}401 .fa-barcode:before{content:"\f02a"}402 .fa-tag:before{content:"\f02b"}403 .fa-tags:before{content:"\f02c"}404 .fa-book:before{content:"\f02d"}405 .fa-bookmark:before{content:"\f02e"}406 .fa-print:before{content:"\f02f"}407 .fa-camera:before{content:"\f030"}408 .fa-font:before{content:"\f031"}409 .fa-bold:before{content:"\f032"}410 .fa-italic:before{content:"\f033"}411 .fa-text-height:before{content:"\f034"}412 .fa-text-width:before{content:"\f035"}413 .fa-align-left:before{content:"\f036"}414 .fa-align-center:before{content:"\f037"}415 .fa-align-right:before{content:"\f038"}416 .fa-align-justify:before{content:"\f039"}417 .fa-list:before{content:"\f03a"}418 .fa-dedent:before,.fa-outdent:before{content:"\f03b"}419 .fa-indent:before{content:"\f03c"}420 .fa-video-camera:before{content:"\f03d"}421 .fa-picture-o:before{content:"\f03e"}422 .fa-pencil:before{content:"\f040"}423 .fa-map-marker:before{content:"\f041"}424 .fa-adjust:before{content:"\f042"}425 .fa-tint:before{content:"\f043"}426 .fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}427 .fa-share-square-o:before{content:"\f045"}428 .fa-check-square-o:before{content:"\f046"}429 .fa-move:before{content:"\f047"}430 .fa-step-backward:before{content:"\f048"}431 .fa-fast-backward:before{content:"\f049"}432 .fa-backward:before{content:"\f04a"}433 .fa-play:before{content:"\f04b"}434 .fa-pause:before{content:"\f04c"}435 .fa-stop:before{content:"\f04d"}436 .fa-forward:before{content:"\f04e"}437 .fa-fast-forward:before{content:"\f050"}438 .fa-step-forward:before{content:"\f051"}439 .fa-eject:before{content:"\f052"}440 .fa-chevron-left:before{content:"\f053"}441 .fa-chevron-right:before{content:"\f054"}442 .fa-plus-circle:before{content:"\f055"}443 .fa-minus-circle:before{content:"\f056"}444 .fa-times-circle:before{content:"\f057"}445 .fa-check-circle:before{content:"\f058"}446 .fa-question-circle:before{content:"\f059"}447 .fa-info-circle:before{content:"\f05a"}448 .fa-crosshairs:before{content:"\f05b"}449 .fa-times-circle-o:before{content:"\f05c"}450 .fa-check-circle-o:before{content:"\f05d"}451 .fa-ban:before{content:"\f05e"}452 .fa-arrow-left:before{content:"\f060"}453 .fa-arrow-right:before{content:"\f061"}454 .fa-arrow-up:before{content:"\f062"}455 .fa-arrow-down:before{content:"\f063"}456 .fa-mail-forward:before,.fa-share:before{content:"\f064"}457 .fa-resize-full:before{content:"\f065"}458 .fa-resize-small:before{content:"\f066"}459 .fa-plus:before{content:"\f067"}460 .fa-minus:before{content:"\f068"}461 .fa-asterisk:before{content:"\f069"}462 .fa-exclamation-circle:before{content:"\f06a"}463 .fa-gift:before{content:"\f06b"}464 .fa-leaf:before{content:"\f06c"}465 .fa-fire:before{content:"\f06d"}466 .fa-eye:before{content:"\f06e"}467 .fa-eye-slash:before{content:"\f070"}468 .fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}469 .fa-plane:before{content:"\f072"}470 .fa-calendar:before{content:"\f073"}471 .fa-random:before{content:"\f074"}472 .fa-comment:before{content:"\f075"}473 .fa-magnet:before{content:"\f076"}474 .fa-chevron-up:before{content:"\f077"}475 .fa-chevron-down:before{content:"\f078"}476 .fa-retweet:before{content:"\f079"}477 .fa-shopping-cart:before{content:"\f07a"}478 .fa-folder:before{content:"\f07b"}479 .fa-folder-open:before{content:"\f07c"}480 .fa-resize-vertical:before{content:"\f07d"}481 .fa-resize-horizontal:before{content:"\f07e"}482 .fa-bar-chart-o:before{content:"\f080"}483 .fa-twitter-square:before{content:"\f081"}484 .fa-facebook-square:before{content:"\f082"}485 .fa-camera-retro:before{content:"\f083"}486 .fa-key:before{content:"\f084"}487 .fa-gears:before,.fa-cogs:before{content:"\f085"}488 .fa-comments:before{content:"\f086"}489 .fa-thumbs-o-up:before{content:"\f087"}490 .fa-thumbs-o-down:before{content:"\f088"}491 .fa-star-half:before{content:"\f089"}492 .fa-heart-o:before{content:"\f08a"}493 .fa-sign-out:before{content:"\f08b"}494 .fa-linkedin-square:before{content:"\f08c"}495 .fa-thumb-tack:before{content:"\f08d"}496 .fa-external-link:before{content:"\f08e"}497 .fa-sign-in:before{content:"\f090"}498 .fa-trophy:before{content:"\f091"}499 .fa-github-square:before{content:"\f092"}500 .fa-upload:before{content:"\f093"}501 .fa-lemon-o:before{content:"\f094"}502 .fa-phone:before{content:"\f095"}503 .fa-square-o:before{content:"\f096"}504 .fa-bookmark-o:before{content:"\f097"}505 .fa-phone-square:before{content:"\f098"}506 .fa-twitter:before{content:"\f099"}507 .fa-facebook:before{content:"\f09a"}508 .fa-github:before{content:"\f09b"}509 .fa-unlock:before{content:"\f09c"}510 .fa-credit-card:before{content:"\f09d"}511 .fa-rss:before{content:"\f09e"}512 .fa-hdd-o:before{content:"\f0a0"}513 .fa-bullhorn:before{content:"\f0a1"}514 .fa-bell:before{content:"\f0f3"}515 .fa-certificate:before{content:"\f0a3"}516 .fa-hand-o-right:before{content:"\f0a4"}517 .fa-hand-o-left:before{content:"\f0a5"}518 .fa-hand-o-up:before{content:"\f0a6"}519 .fa-hand-o-down:before{content:"\f0a7"}520 .fa-arrow-circle-left:before{content:"\f0a8"}521 .fa-arrow-circle-right:before{content:"\f0a9"}522 .fa-arrow-circle-up:before{content:"\f0aa"}523 .fa-arrow-circle-down:before{content:"\f0ab"}524 .fa-globe:before{content:"\f0ac"}525 .fa-wrench:before{content:"\f0ad"}526 .fa-tasks:before{content:"\f0ae"}527 .fa-filter:before{content:"\f0b0"}528 .fa-briefcase:before{content:"\f0b1"}529 .fa-fullscreen:before{content:"\f0b2"}530 .fa-group:before{content:"\f0c0"}531 .fa-chain:before,.fa-link:before{content:"\f0c1"}532 .fa-cloud:before{content:"\f0c2"}533 .fa-flask:before{content:"\f0c3"}534 .fa-cut:before,.fa-scissors:before{content:"\f0c4"}535 .fa-copy:before,.fa-files-o:before{content:"\f0c5"}536 .fa-paperclip:before{content:"\f0c6"}537 .fa-save:before,.fa-floppy-o:before{content:"\f0c7"}538 .fa-square:before{content:"\f0c8"}539 .fa-reorder:before{content:"\f0c9"}540 .fa-list-ul:before{content:"\f0ca"}541 .fa-list-ol:before{content:"\f0cb"}542 .fa-strikethrough:before{content:"\f0cc"}543 .fa-underline:before{content:"\f0cd"}544 .fa-table:before{content:"\f0ce"}545 .fa-magic:before{content:"\f0d0"}546 .fa-truck:before{content:"\f0d1"}547 .fa-pinterest:before{content:"\f0d2"}548 .fa-pinterest-square:before{content:"\f0d3"}549 .fa-google-plus-square:before{content:"\f0d4"}550 .fa-google-plus:before{content:"\f0d5"}551 .fa-money:before{content:"\f0d6"}552 .fa-caret-down:before{content:"\f0d7"}553 .fa-caret-up:before{content:"\f0d8"}554 .fa-caret-left:before{content:"\f0d9"}555 .fa-caret-right:before{content:"\f0da"}556 .fa-columns:before{content:"\f0db"}557 .fa-unsorted:before,.fa-sort:before{content:"\f0dc"}558 .fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"}559 .fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"}560 .fa-envelope:before{content:"\f0e0"}561 .fa-linkedin:before{content:"\f0e1"}562 .fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}563 .fa-legal:before,.fa-gavel:before{content:"\f0e3"}564 .fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}565 .fa-comment-o:before{content:"\f0e5"}566 .fa-comments-o:before{content:"\f0e6"}567 .fa-flash:before,.fa-bolt:before{content:"\f0e7"}568 .fa-sitemap:before{content:"\f0e8"}569 .fa-umbrella:before{content:"\f0e9"}570 .fa-paste:before,.fa-clipboard:before{content:"\f0ea"}571 .fa-lightbulb-o:before{content:"\f0eb"}572 .fa-exchange:before{content:"\f0ec"}573 .fa-cloud-download:before{content:"\f0ed"}574 .fa-cloud-upload:before{content:"\f0ee"}575 .fa-user-md:before{content:"\f0f0"}576 .fa-stethoscope:before{content:"\f0f1"}577 .fa-suitcase:before{content:"\f0f2"}578 .fa-bell-o:before{content:"\f0a2"}579 .fa-coffee:before{content:"\f0f4"}580 .fa-cutlery:before{content:"\f0f5"}581 .fa-file-text-o:before{content:"\f0f6"}582 .fa-building:before{content:"\f0f7"}583 .fa-hospital:before{content:"\f0f8"}584 .fa-ambulance:before{content:"\f0f9"}585 .fa-medkit:before{content:"\f0fa"}586 .fa-fighter-jet:before{content:"\f0fb"}587 .fa-beer:before{content:"\f0fc"}588 .fa-h-square:before{content:"\f0fd"}589 .fa-plus-square:before{content:"\f0fe"}590 .fa-angle-double-left:before{content:"\f100"}591 .fa-angle-double-right:before{content:"\f101"}592 .fa-angle-double-up:before{content:"\f102"}593 .fa-angle-double-down:before{content:"\f103"}594 .fa-angle-left:before{content:"\f104"}595 .fa-angle-right:before{content:"\f105"}596 .fa-angle-up:before{content:"\f106"}597 .fa-angle-down:before{content:"\f107"}598 .fa-desktop:before{content:"\f108"}599 .fa-laptop:before{content:"\f109"}600 .fa-tablet:before{content:"\f10a"}601 .fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}602 .fa-circle-o:before{content:"\f10c"}603 .fa-quote-left:before{content:"\f10d"}604 .fa-quote-right:before{content:"\f10e"}605 .fa-spinner:before{content:"\f110"}606 .fa-circle:before{content:"\f111"}607 .fa-mail-reply:before,.fa-reply:before{content:"\f112"}608 .fa-github-alt:before{content:"\f113"}609 .fa-folder-o:before{content:"\f114"}610 .fa-folder-open-o:before{content:"\f115"}611 .fa-expand-o:before{content:"\f116"}612 .fa-collapse-o:before{content:"\f117"}613 .fa-smile-o:before{content:"\f118"}614 .fa-frown-o:before{content:"\f119"}615 .fa-meh-o:before{content:"\f11a"}616 .fa-gamepad:before{content:"\f11b"}617 .fa-keyboard-o:before{content:"\f11c"}618 .fa-flag-o:before{content:"\f11d"}619 .fa-flag-checkered:before{content:"\f11e"}620 .fa-terminal:before{content:"\f120"}621 .fa-code:before{content:"\f121"}622 .fa-reply-all:before{content:"\f122"}623 .fa-mail-reply-all:before{content:"\f122"}624 .fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}625 .fa-location-arrow:before{content:"\f124"}626 .fa-crop:before{content:"\f125"}627 .fa-code-fork:before{content:"\f126"}628 .fa-unlink:before,.fa-chain-broken:before{content:"\f127"}629 .fa-question:before{content:"\f128"}630 .fa-info:before{content:"\f129"}631 .fa-exclamation:before{content:"\f12a"}632 .fa-superscript:before{content:"\f12b"}633 .fa-subscript:before{content:"\f12c"}634 .fa-eraser:before{content:"\f12d"}635 .fa-puzzle-piece:before{content:"\f12e"}636 .fa-microphone:before{content:"\f130"}637 .fa-microphone-slash:before{content:"\f131"}638 .fa-shield:before{content:"\f132"}639 .fa-calendar-o:before{content:"\f133"}640 .fa-fire-extinguisher:before{content:"\f134"}641 .fa-rocket:before{content:"\f135"}642 .fa-maxcdn:before{content:"\f136"}643 .fa-chevron-circle-left:before{content:"\f137"}644 .fa-chevron-circle-right:before{content:"\f138"}645 .fa-chevron-circle-up:before{content:"\f139"}646 .fa-chevron-circle-down:before{content:"\f13a"}647 .fa-html5:before{content:"\f13b"}648 .fa-css3:before{content:"\f13c"}649 .fa-anchor:before{content:"\f13d"}650 .fa-unlock-o:before{content:"\f13e"}651 .fa-bullseye:before{content:"\f140"}652 .fa-ellipsis-horizontal:before{content:"\f141"}653 .fa-ellipsis-vertical:before{content:"\f142"}654 .fa-rss-square:before{content:"\f143"}655 .fa-play-circle:before{content:"\f144"}656 .fa-ticket:before{content:"\f145"}657 .fa-minus-square:before{content:"\f146"}658 .fa-minus-square-o:before{content:"\f147"}659 .fa-level-up:before{content:"\f148"}660 .fa-level-down:before{content:"\f149"}661 .fa-check-square:before{content:"\f14a"}662 .fa-pencil-square:before{content:"\f14b"}663 .fa-external-link-square:before{content:"\f14c"}664 .fa-share-square:before{content:"\f14d"}665 .fa-compass:before{content:"\f14e"}666 .fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}667 .fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}668 .fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}669 .fa-euro:before,.fa-eur:before{content:"\f153"}670 .fa-gbp:before{content:"\f154"}671 .fa-dollar:before,.fa-usd:before{content:"\f155"}672 .fa-rupee:before,.fa-inr:before{content:"\f156"}673 .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}674 .fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}675 .fa-won:before,.fa-krw:before{content:"\f159"}676 .fa-bitcoin:before,.fa-btc:before{content:"\f15a"}677 .fa-file:before{content:"\f15b"}678 .fa-file-text:before{content:"\f15c"}679 .fa-sort-alpha-asc:before{content:"\f15d"}680 .fa-sort-alpha-desc:before{content:"\f15e"}681 .fa-sort-amount-asc:before{content:"\f160"}682 .fa-sort-amount-desc:before{content:"\f161"}683 .fa-sort-numeric-asc:before{content:"\f162"}684 .fa-sort-numeric-desc:before{content:"\f163"}685 .fa-thumbs-up:before{content:"\f164"}686 .fa-thumbs-down:before{content:"\f165"}687 .fa-youtube-square:before{content:"\f166"}688 .fa-youtube:before{content:"\f167"}689 .fa-xing:before{content:"\f168"}690 .fa-xing-square:before{content:"\f169"}691 .fa-youtube-play:before{content:"\f16a"}692 .fa-dropbox:before{content:"\f16b"}693 .fa-stack-overflow:before{content:"\f16c"}694 .fa-instagram:before{content:"\f16d"}695 .fa-flickr:before{content:"\f16e"}696 .fa-adn:before{content:"\f170"}697 .fa-bitbucket:before{content:"\f171"}698 .fa-bitbucket-square:before{content:"\f172"}699 .fa-tumblr:before{content:"\f173"}700 .fa-tumblr-square:before{content:"\f174"}701 .fa-long-arrow-down:before{content:"\f175"}702 .fa-long-arrow-up:before{content:"\f176"}703 .fa-long-arrow-left:before{content:"\f177"}704 .fa-long-arrow-right:before{content:"\f178"}705 .fa-apple:before{content:"\f179"}706 .fa-windows:before{content:"\f17a"}707 .fa-android:before{content:"\f17b"}708 .fa-linux:before{content:"\f17c"}709 .fa-dribbble:before{content:"\f17d"}710 .fa-skype:before{content:"\f17e"}711 .fa-foursquare:before{content:"\f180"}712 .fa-trello:before{content:"\f181"}713 .fa-female:before{content:"\f182"}714 .fa-male:before{content:"\f183"}715 .fa-gittip:before{content:"\f184"}716 .fa-sun-o:before{content:"\f185"}717 .fa-moon-o:before{content:"\f186"}718 .fa-archive:before{content:"\f187"}719 .fa-bug:before{content:"\f188"}720 .fa-vk:before{content:"\f189"}721 .fa-weibo:before{content:"\f18a"}722 .fa-renren:before{content:"\f18b"}723 .fa-pagelines:before{content:"\f18c"}724 .fa-stack-exchange:before{content:"\f18d"}725 .fa-arrow-circle-o-right:before{content:"\f18e"}726 .fa-arrow-circle-o-left:before{content:"\f190"}727 .fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}728 .fa-dot-circle-o:before{content:"\f192"}729 .fa-wheelchair:before{content:"\f193"}730 .fa-vimeo-square:before{content:"\f194"}731 .fa-turkish-lira:before,.fa-try:before{content:"\f195"}732 733 734/** LIST STYLE 1 */735 736ul.style1 {737 margin: 0px;738 padding: 0px 0px 0px 0px;739 list-style: none;740}741 742ul.style1 li {743 display: inline-block;744 padding: 1em 0em;745 border-top: 1px dotted #d9c9bf;746 line-height: 160%;747}748 749ul.style1 span750{751 margin-right: 0.75em;752}753 754ul.style1 a {755 text-decoration: none;756 color: #525252;757}758 759ul.style1 a:hover {760 text-decoration: underline;761}762 763ul.style1 .first {764 border-top: none;765 padding-top: 0px;766}767 768/** LIST STYLE 3 */769 770ul.style3 {771 margin: 0px;772 padding: 0px;773 list-style: none;774}775 776ul.style3 li {777 padding: 20px 0px 25px 0px;778 border-top: 1px dotted #d9c9bf;779}780 781ul.style3 a {782 display: block;783 text-decoration: none;784 color: #525252;785}786 787ul.style3 a:hover {788 text-decoration: underline;789}790 791ul.style3 .date {792 display: inline-block;793 margin: 0px 0px 20px 0px;794 padding: 1em 1em;795 background: #fad26c;796 border-radius: 4px;797 line-height: normal;798 text-align: center;799 text-transform: uppercase;800 font-family: 'Abel', sans-serif;801 font-size: 14px;802 color: #4e4340;803}804 805ul.style3 .date b {806}807 808ul.style3 .date a {809 color: #4e4340;810}811 812ul.style3 .date a:hover {813 text-decoration: none;814}815 816ul.style3 .first {817 padding-top: 0px;818 border-top: none;819}820 821/** BUTTON STYLE */822 823 /* Buttons */824 825 .but826 {827 position: relative;828 display: inline-block;829 margin-top: 2em;830 padding: 1em 1.5em;831 background: #c0aa9d;832 border-radius: 4px;833 text-decoration: none;834 text-transform: uppercase;835 font-size: 1.1em;836 color: #FFF;837 -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;838 -webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;839 -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;840 -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;841 transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;842 cursor: pointer;843 }844 845 .but:hover846 {847 background: #987159;848 color: #FFF !important;849 }850 851.button-style {852 margin: 20px 0px 20px 0px;853}854 855.button-style a {856 padding: 7px 20px 7px 20px;857 background: #CEC3A0;858 border-radius: 5px;859 line-height: normal;860 text-align: center;861 text-transform: uppercase;862 text-decoration: none;863 text-shadow: 1px 1px 1px #8A8B71;864 font-family: 'Abel', sans-serif;865 font-size: 14px;866 color: #FFFFFF;867}868 869/*********************************************************************************/870/* Header */871/*********************************************************************************/872 873 #siteheader874 {875 position: relative;876 text-align: center;877 background: url(../images/banner.jpg) no-repeat center;878 background-size: cover;879 }880 881 882 #main {883 padding: 5em 0em;884 background: #FFF885 }886 887 #sitecontent header888 {889 margin-bottom: 2em !important;890 }891 892 #sitecontent header h2893 {894 line-height: 1.2em;895 font-size: 3em;896 }897 898 #sitecontent899 {900 }901 902 #sitefooter903 {904 padding: 5em 0em;905 background: #c0aa9d;906 }907 908 909/*********************************************************************************/910/* Copyright */911/*********************************************************************************/912 913 #sitecopyright914 {915 position: relative;916 text-align: center;917 }918 919 #sitecopyright .sitebox920 {921 padding: 3em 0em;922 border-top: 1px solid;923 border-color: rgba(0,0,0,.1);924 color: #c4a897!important;925 }926 927 #sitecopyright a928 {929 text-decoration: none;930 color: #decfc6;931 }932 933 #sitecopyright p934 {color: #c4a897!important;}935 936 937 #main938 {939 padding: 5em 0em;940 background: #FFF941 }942 943.popup { width:300px; display:none; background:#4e4340; position:absolute; margin:0px 0px 0px 0px; padding: 15px; border-radius: 4px;}944.popup ul { margin:0!important; padding: 0px!important; float: none!important;}945.popup ul li { margin:0!important; padding: 0px!important; float: none!important; display:block!important;}946.popup ul li a{947 display: block;948 padding: 0em!important;949 letter-spacing: 1px;950 text-decoration: none;951 text-transform: uppercase;952 font-weight: normal!important;953 font-size: 0.9em!important;954 outline: 0;955 color: #c4a897!important;956 margin: 5px 0px!important;957 }958.popup ul li a:hover {color: #fff!important;}959 960 961.popup2 { width:300px; display:none; background:#4e4340; position:absolute; margin:0px 0px 0px 0px; padding: 15px; border-radius: 4px;}962.popup2 ul { margin:0!important; padding: 0px!important; float: none!important;}963.popup2 ul li { margin:0!important; padding: 0px!important; float: none!important; display:block!important;}964.popup2 ul li a{965 display: block;966 padding: 0em!important;967 letter-spacing: 1px;968 text-decoration: none;969 text-transform: uppercase;970 font-weight: normal!important;971 font-size: 0.9em!important;972 outline: 0;973 color: #c4a897!important;974 margin: 5px 0px!important;975 }976.popup2 ul li a:hover {color: #fff!important;}977 978 979 980 981/*********************************************************************************/982/* Header */983/*********************************************************************************/984 985 #siteheader986 {987 padding: 5em 0em;988 }989 990 .page #siteheader991 {992 padding: 10em 0em;993 }994 995 #siteheader .sitebox996 {997 }998 999/*********************************************************************************/1000/* Logo */1001/*********************************************************************************/1002 1003 #sitelogo1004 {1005 margin-bottom: 3em;1006 }1007 1008 #sitelogo h11009 {1010 color: #FFF;1011 }1012 1013 #sitelogo h1 a1014 {1015 display: block;1016 letter-spacing: 1px;1017 text-decoration: none;1018 text-transform: uppercase;1019 font-size: 4em;1020 font-weight: 900;1021 color: #323338;1022 }1023 1024 #sitelogo span1025 {1026 display: block;1027 padding-top: 1em;1028 letter-spacing: 1px;1029 text-transform: uppercase;1030 font-size: 1.2em;1031 color: #4f484a;1032 } 1033 1034 1035/*********************************************************************************/1036/* Nav */1037/*********************************************************************************/1038 1039 #sitenav1040 {1041 }1042 1043 #sitenav > ul > li1044 {1045 display: inline-block;1046 }1047 1048 #sitenav > ul > li:last-child1049 {1050 padding-right: 0;1051 }1052 1053 #sitenav > ul > li > a,1054 #sitenav > ul > li > span1055 {1056 display: block;1057 padding: 1em 1.5em;1058 letter-spacing: 1px;1059 text-decoration: none;1060 text-transform: uppercase;1061 font-weight: bold;1062 font-size: 1em;1063 outline: 0;1064 color: #323338;1065 }1066 1067 1068 #sitenav > ul > li > a:hover1069 {1070 background: #4e4340;1071 border-radius: 4px;1072 color: #FFF;1073 font-weight: normal!important;1074 }1075 1076 #sitenav li.active a1077 {1078 background: #4e4340;1079 border-radius: 4px;1080 color: #FFF;1081 font-weight: normal!important;1082 }1083 1084 #sitenav > ul > li > ul1085 {1086 display: none;1087 }1088 1089 1090/*********************************************************************************/1091/* Banner */1092/*********************************************************************************/1093 1094 #banner {1095 overflow: hidden;1096 margin-top: 10px;1097 margin-bottom: 30px;1098 box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);1099 }1100 1101 #banner .banner-border {1102 padding: 20px;1103 background: #FFFFFF;1104 }1105 1106 #banner a img {1107 display: block;1108 width: 100%;1109 }1110 1111/*********************************************************************************/1112/* Page Wrapper */1113/*********************************************************************************/1114 1115 .page #main {1116 overflow: hidden;1117 }1118 1119/*********************************************************************************/1120/* Content */1121/*********************************************************************************/1122 1123 #sitecontent {1124 padding: 0px 0px 0px 0px;1125 }1126 1127 .twocolumn2 #sitecontent {1128 }1129 1130 .onecolumn #sitecontent {1131 }1132 1133 #sitecontent h2 {1134 }1135 1136/*********************************************************************************/1137/* Sidebar r */1138/*********************************************************************************/1139 1140 #sitesidebar1 {1141 padding: 0px 0px 0px 0px;1142 }1143 1144 #sitesidebar1 h2 {1145 }1146 1147 #sitesidebar2 {1148 padding: 0px 0px 0px 0px;1149 }1150 1151 #sitesidebar2 h2 {1152 }1153 </style>1154 <title>1155 In Search Of Great Editorial Essay Samples On The Web1156 </title>1157 <meta content="text/html; charset=utf-8" http-equiv="content-type">1158 <meta content="In order to compose a good editorial paper you need to fulfill a list of requirements. The best way to complete them is related to a finding of a sample." name="description">1159 <meta content="editorial paper samples" name="keywords">1160 <!--[if lte IE 8]><![endif]-->1161 </head>1162 <!-- Inner -->1163 <body style>1164 <div id="wrapper">1165 <div id="section">1166 <!-- Header -->1167 <div id="siteheader">1168 <div class="sitebox">1169 <!-- Logo -->1170 <div id="sitelogo">1171 <h1>1172 <a>1173 essayscribes.com1174 </a>1175 </h1>1176 </div>1177 <!-- Nav -->1178 <nav id="sitenav">1179 <ul>1180 <li class="active">1181 <a>1182 Homepage1183 </a>1184 </li>1185 <li>1186 <a>1187 Writing Tips1188 </a>1189 </li>1190 <li>1191 <a>1192 Skills For Students1193 </a>1194 </li>1195 <li>1196 <a class="menulink">1197 Essay writing1198 </a>1199 <div class="popup">1200 <ul>