SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "">2<html dir="ltr" xml:lang="en-gb" xmlns="" xmlns:fb="" xmlns:og="">3 <head profile="">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 29html, body, div, span, applet, object, iframe,30h1, h2, h3, h4, h5, h6, p, blockquote, pre,31a, abbr, acronym, address, big, cite, code,32del, dfn, em, img, ins, kbd, q, s, samp,33small, strike, strong, sub, sup, tt, var,34b, u, i, center,35dl, dt, dd, ol, ul, li,36fieldset, form, label, legend,37table, caption, tbody, tfoot, thead, tr, th, td,38article, aside, canvas, details, embed,39figure, figcaption, footer, header, hgroup,40menu, nav, output, ruby, section, summary,41time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}42article, aside, details, figcaption, figure,43footer, header, hgroup, menu, nav, section{display:block;}44body{line-height:1;}45ol, ul{list-style:none;}46blockquote, q{quotes:none;}47blockquote:before, blockquote:after,48q:before, q:after{content:'';content:none;}49table{border-collapse:collapse;border-spacing:0;}50:focus{outline:none;}51::-moz-focus-inner{border:0;}52 53 54html{height:100%;font-size:24px}55body{height:100%;background-color:#ccccaa}56#page{width:1200px;height:720px;margin:0 auto;position:relative;top:50%;transform:translateY(-50%)}57#layout{width:1200px;height:720px;background-color:#fff}58#left{float:left;width:600px;height:720px}59#right{float:left;width:600px;height:720px}60#box1{float:left;width:240px;height:720px}61#box1a{width:216px;height:624px;margin-left:24px;margin-top:24px}62#logo{width:192px}63#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}64#box2{float:left;width:360px;height:720px}65#box2a{width:360px;height:720px}66#box3{float:left;width:600px;height:720px}67#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}68#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}69#map{width:552px;height:276px;clear:both;background-color:#eee}70.box2image{width:360px;height:720px}71.border{border:1px solid #737560}72 73h1{font-size:1.2em;line-height:1.1em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0}74h2{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0 0 1em 0}75h3{font-size:0.95em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0 0 0.5em 0}76h4{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 0.5em 0}77h5{font-size:0.7em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 0.5em 0;font-style:italic}78p{font-size:.8em;line-height:1.8em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 1em 0}79ul{font-size:.8em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555}80ol{font-size:.5em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555}81 82.bold{font-weight:700}83.italic{font-style:italic}84.superscript{font-size:.8em;vertical-align:baseline;position:relative;top:-.4em}85.subscript{font-size:.8em;vertical-align:baseline;position:relative;top:.4em}86.clearboth{clear:both}87.textcentre{text-align:center}88.textleft{text-align:left}89.textright{text-align:right}90 91#box1 a:link{color:#555;text-decoration:none}92#box1 a:visited{color:#555;text-decoration:none}93#box1 a:hover{color:#777;text-decoration:none}94#box3 a:link{color:#06c;text-decoration:none}95#box3 a:visited{color:#06c;text-decoration:none}96#box3 a:hover{color:#777;text-decoration:none}97#box3b #contact a:link{color:#555;text-decoration:none}98#box3b #contact a:visited{color:#555;text-decoration:none}99#box3b #contact a:hover{color:#777;text-decoration:none}100#box3b #footer a:link{color:#888;text-decoration:none}101#box3b #footer a:visited{color:#888;text-decoration:none}102#box3b #footer a:hover{color:#aaa;text-decoration:none}103 104#navigation{padding-top:1em}105#box1a li{line-height:1.3em;padding-bottom:0.7em}106#box1b p{font-size:.6em}107#box3b #contact p{font-size:.65em}108#box3b #footer p{font-size:.5em;color:#888}109 110.rslides {111 position: relative;112 list-style: none;113 overflow: hidden;114 width: 100%;115 padding: 0;116 margin: 0;117 }118 119.rslides li {120 -webkit-backface-visibility: hidden;121 position: absolute;122 display: none;123 width: 100%;124 left: 0;125 top: 0;126 }127 128.rslides li:first-child {129 position: relative;130 display: block;131 float: left;132 }133 134.rslides img {135 display: block;136 height: auto;137 float: left;138 width: 100%;139 }140 141@media only screen and (max-width : 619px) {142/* mobile */143html{font-size:12px}144#page{width:300px;height:auto;margin-top:12px;margin-bottom:12px;top:0;transform:none}145#layout{width:300px;height:auto}146#left{float:none;width:300px;height:auto}147#right{float:none;width:300px;height:auto}148#box1{float:none;width:300px;height:auto}149#box1a{width:288px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px}150#logo{width:276px}151#box1b{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px;padding-bottom:12px}152#box2{float:none;width:300px;height:600px}153#box2a{width:300px;height:600px}154#box3{float:none;width:300px;height:auto}155#box3a{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px}156#box3b{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px;padding-bottom:12px}157#map{width:276px;height:138px}158.box2image{width:300px;height:600px}159h1{font-size:2.4em}160h2{font-size:2em}161h3{font-size:1.5em}162#box1a ul{font-size:1.3em}163}164 165@media only screen and (min-width : 620px) and (max-width : 769px) {166/* portrait */167html{font-size:24px}168#page{width:600px;height:1440px;margin-top:24px;margin-bottom:24px;top:0;transform:none}169#layout{width:600px;height:1440px}170#left{width:600px;height:720px}171#right{width:600px;height:720px;clear:both}172#box1{width:240px;height:720px}173#box1a{width:216px;height:624px;margin-left:24px;margin-top:24px}174#logo{width:192px}175#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}176#box2{width:360px;height:720px}177#box2a{width:360px;height:720px}178#box3{width:600px;height:720px}179#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}180#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}181#map{width:552px;height:276px}182.box2image{width:360px;height:720px}183}184 185@media only screen and (min-width : 770px) and (max-width : 919px) {186html{font-size:15px}187#page{width:750px;height:450px}188#layout{width:750px;height:450px}189#left{width:375px;height:450px}190#right{width:375px;height:450px}191#box1{width:150px;height:450px}192#box1a{width:135px;height:390px;margin-left:15px;margin-top:15px}193#logo{width:120px}194#box1b{width:120px;height:15px;margin-left:15px;margin-top:15px}195#box2{width:225px;height:450px}196#box2a{width:225px;height:450px}197#box3{width:375px;height:450px}198#box3a{width:345px;height:315px;margin-left:15px;margin-top:15px}199#box3b{width:345px;height:90px;margin-left:15px;margin-top:15px}200#map{width:345px;height:172px}201.box2image{width:225px;height:450px}202}203 204@media only screen and (min-width : 920px) and (max-width : 2019px) {205html{font-size:18px}206#page{width:900px;height:540px}207#layout{width:900px;height:540px}208#left{width:450px;height:540px}209#right{width:450px;height:540px}210#box1{width:180px;height:540px}211#box1a{width:164px;height:468px;margin-left:18px;margin-top:18px}212#logo{width:144px}213#box1b{width:144px;height:18px;margin-left:18px;margin-top:18px}214#box2{width:270px;height:540px}215#box2a{width:270px;height:540px}216#box3{width:450px;height:540px}217#box3a{width:414px;height:378px;margin-left:18px;margin-top:18px}218#box3b{width:414px;height:108px;margin-left:18px;margin-top:18px}219#map{width:414px;height:207px}220.box2image{width:270px;height:540px}221}222 223@media only screen and (min-width : 2020px) and (max-width : 2819px) {224html{font-size:24px}225#page{width:1200px;height:720px}226}227 228@media only screen and (min-width : 2820px) {229html{font-size:30px}230#page{width:1500px;height:900px}231#layout{width:1500px;height:900px}232#left{width:750px;height:900px}233#right{width:750px;height:900px}234#box1{width:300px;height:900px}235#box1a{width:270px;height:780px;margin-left:30px;margin-top:30px}236#logo{width:240px}237#box1b{width:240px;height:30px;margin-left:30px;margin-top:30px}238#box2{width:450px;height:900px}239#box2a{width:450px;height:900px}240#box3{width:750px;height:900px}241#box3a{width:690px;height:630px;margin-left:30px;margin-top:30px}242#box3b{width:690px;height:180px;margin-left:30px;margin-top:30px}243#map{width:690px;height:345px}244.box2image{width:450px;height:900px}245}246 247 248html{height:100%;font-size:24px}249body{height:100%;background-color:#fff}250#page{width:840px;height:720px}251#layout{width:840px;height:720px;background-color:#fff}252#left{float:left;width:240px;height:720px}253#right{float:left;width:600px;height:720px}254#box1{float:left;width:240px;height:720px}255#box1a{width:192px;height:624px;margin-left:24px;margin-top:24px}256#logo{width:192px}257#navigation{display:none}258#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}259#box2{display:none}260#box2a{display:none}261#box3{float:left;width:600px;height:720px}262#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}263#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}264#map{width:552px;height:276px;clear:both;background-color:#eee}265.box2image{width:360px;height:720px}266.border{border:1px solid #737560}267 268h1{font-size:1.2em;line-height:1.1em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0;font-weight:600}269h2{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0 0 1em 0}270h3{font-size:0.95em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0 0 0.5em 0}271h4{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 0.5em 0}272h5{font-size:0.7em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 0.5em 0;font-style:italic}273p{font-size:.8em;line-height:1.8em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 1em 0}274ul{font-size:.8em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333}275ol{font-size:.5em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333}276 277.bold{font-weight:700}278.italic{font-style:italic}279.superscript{font-size:.8em;vertical-align:baseline;position:relative;top:-.4em}280.subscript{font-size:.8em;vertical-align:baseline;position:relative;top:.4em}281.clearboth{clear:both}282.textcentre{text-align:center}283.textleft{text-align:left}284.textright{text-align:right}285 286#box1 a:link{color:#333;text-decoration:none}287#box1 a:visited{color:#333;text-decoration:none}288#box1 a:hover{color:#666;text-decoration:none}289#box3 a:link{color:#06c;text-decoration:none}290#box3 a:visited{color:#06c;text-decoration:none}291#box3 a:hover{color:#666;text-decoration:none}292#box3b #contact a:link{color:#333;text-decoration:none}293#box3b #contact a:visited{color:#333;text-decoration:none}294#box3b #contact a:hover{color:#666;text-decoration:none}295#box3b #footer a:link{color:#888;text-decoration:none}296#box3b #footer a:visited{color:#888;text-decoration:none}297#box3b #footer a:hover{color:#aaa;text-decoration:none}298 299#box1b p{font-size:.6em}300#box3b #contact p{font-size:.65em}301#box3b #footer p{font-size:.5em;color:#888}302 303 304.gm-style-moc{background-color:rgba(0,0,0,.45);pointer-events:none;text-align:center;-webkit-transition:opacity ease-in-out;-o-transition:opacity ease-in-out;transition:opacity ease-in-out}.gm-style-mot{color:white;font-family:Roboto,Arial,sans-serif;font-size:22px;margin:0;position:relative;top:50%;-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%)}sentinel{}305 </style>306 <style>307 @font-face {308 font-family: 'Open Sans';309 font-style: italic;310 font-weight: 400;311 font-stretch: normal;312 src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexQ.ttf) format('truetype');313}314@font-face {315 font-family: 'Open Sans';316 font-style: normal;317 font-weight: 400;318 font-stretch: normal;319 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');320}321@font-face {322 font-family: 'Open Sans';323 font-style: normal;324 font-weight: 700;325 font-stretch: normal;326 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');327}328 329 330 331html, body, div, span, applet, object, iframe,332h1, h2, h3, h4, h5, h6, p, blockquote, pre,333a, abbr, acronym, address, big, cite, code,334del, dfn, em, img, ins, kbd, q, s, samp,335small, strike, strong, sub, sup, tt, var,336b, u, i, center,337dl, dt, dd, ol, ul, li,338fieldset, form, label, legend,339table, caption, tbody, tfoot, thead, tr, th, td,340article, aside, canvas, details, embed,341figure, figcaption, footer, header, hgroup,342menu, nav, output, ruby, section, summary,343time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}344article, aside, details, figcaption, figure,345footer, header, hgroup, menu, nav, section{display:block;}346body{line-height:1;}347ol, ul{list-style:none;}348blockquote, q{quotes:none;}349blockquote:before, blockquote:after,350q:before, q:after{content:'';content:none;}351table{border-collapse:collapse;border-spacing:0;}352:focus{outline:none;}353::-moz-focus-inner{border:0;}354 355 356html{height:100%;font-size:24px}357body{height:100%;background-color:#ccccaa}358#page{width:1200px;height:720px;margin:0 auto;position:relative;top:50%;transform:translateY(-50%)}359#layout{width:1200px;height:720px;background-color:#fff}360#left{float:left;width:600px;height:720px}361#right{float:left;width:600px;height:720px}362#box1{float:left;width:240px;height:720px}363#box1a{width:216px;height:624px;margin-left:24px;margin-top:24px}364#logo{width:192px}365#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}366#box2{float:left;width:360px;height:720px}367#box2a{width:360px;height:720px}368#box3{float:left;width:600px;height:720px}369#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}370#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}371#map{width:552px;height:276px;clear:both;background-color:#eee}372.box2image{width:360px;height:720px}373.border{border:1px solid #737560}374 375h1{font-size:1.2em;line-height:1.1em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0}376h2{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0 0 1em 0}377h3{font-size:0.95em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:center;margin:0;padding:0 0 0.5em 0}378h4{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 0.5em 0}379h5{font-size:0.7em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 0.5em 0;font-style:italic}380p{font-size:.8em;line-height:1.8em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555;text-align:left;margin:0;padding:0 0 1em 0}381ul{font-size:.8em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555}382ol{font-size:.5em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#555}383 384.bold{font-weight:700}385.italic{font-style:italic}386.superscript{font-size:.8em;vertical-align:baseline;position:relative;top:-.4em}387.subscript{font-size:.8em;vertical-align:baseline;position:relative;top:.4em}388.clearboth{clear:both}389.textcentre{text-align:center}390.textleft{text-align:left}391.textright{text-align:right}392 393#box1 a:link{color:#555;text-decoration:none}394#box1 a:visited{color:#555;text-decoration:none}395#box1 a:hover{color:#777;text-decoration:none}396#box3 a:link{color:#06c;text-decoration:none}397#box3 a:visited{color:#06c;text-decoration:none}398#box3 a:hover{color:#777;text-decoration:none}399#box3b #contact a:link{color:#555;text-decoration:none}400#box3b #contact a:visited{color:#555;text-decoration:none}401#box3b #contact a:hover{color:#777;text-decoration:none}402#box3b #footer a:link{color:#888;text-decoration:none}403#box3b #footer a:visited{color:#888;text-decoration:none}404#box3b #footer a:hover{color:#aaa;text-decoration:none}405 406#navigation{padding-top:1em}407#box1a li{line-height:1.3em;padding-bottom:0.7em}408#box1b p{font-size:.6em}409#box3b #contact p{font-size:.65em}410#box3b #footer p{font-size:.5em;color:#888}411 412.rslides {413 position: relative;414 list-style: none;415 overflow: hidden;416 width: 100%;417 padding: 0;418 margin: 0;419 }420 421.rslides li {422 -webkit-backface-visibility: hidden;423 position: absolute;424 display: none;425 width: 100%;426 left: 0;427 top: 0;428 }429 430.rslides li:first-child {431 position: relative;432 display: block;433 float: left;434 }435 436.rslides img {437 display: block;438 height: auto;439 float: left;440 width: 100%;441 }442 443@media only screen and (max-width : 619px) {444/* mobile */445html{font-size:12px}446#page{width:300px;height:auto;margin-top:12px;margin-bottom:12px;top:0;transform:none}447#layout{width:300px;height:auto}448#left{float:none;width:300px;height:auto}449#right{float:none;width:300px;height:auto}450#box1{float:none;width:300px;height:auto}451#box1a{width:288px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px}452#logo{width:276px}453#box1b{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px;padding-bottom:12px}454#box2{float:none;width:300px;height:600px}455#box2a{width:300px;height:600px}456#box3{float:none;width:300px;height:auto}457#box3a{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px}458#box3b{width:276px;height:auto;margin-left:0;margin-top:0;padding-left:12px;padding-top:12px;padding-bottom:12px}459#map{width:276px;height:138px}460.box2image{width:300px;height:600px}461h1{font-size:2.4em}462h2{font-size:2em}463h3{font-size:1.5em}464#box1a ul{font-size:1.3em}465}466 467@media only screen and (min-width : 620px) and (max-width : 769px) {468/* portrait */469html{font-size:24px}470#page{width:600px;height:1440px;margin-top:24px;margin-bottom:24px;top:0;transform:none}471#layout{width:600px;height:1440px}472#left{width:600px;height:720px}473#right{width:600px;height:720px;clear:both}474#box1{width:240px;height:720px}475#box1a{width:216px;height:624px;margin-left:24px;margin-top:24px}476#logo{width:192px}477#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}478#box2{width:360px;height:720px}479#box2a{width:360px;height:720px}480#box3{width:600px;height:720px}481#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}482#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}483#map{width:552px;height:276px}484.box2image{width:360px;height:720px}485}486 487@media only screen and (min-width : 770px) and (max-width : 919px) {488html{font-size:15px}489#page{width:750px;height:450px}490#layout{width:750px;height:450px}491#left{width:375px;height:450px}492#right{width:375px;height:450px}493#box1{width:150px;height:450px}494#box1a{width:135px;height:390px;margin-left:15px;margin-top:15px}495#logo{width:120px}496#box1b{width:120px;height:15px;margin-left:15px;margin-top:15px}497#box2{width:225px;height:450px}498#box2a{width:225px;height:450px}499#box3{width:375px;height:450px}500#box3a{width:345px;height:315px;margin-left:15px;margin-top:15px}501#box3b{width:345px;height:90px;margin-left:15px;margin-top:15px}502#map{width:345px;height:172px}503.box2image{width:225px;height:450px}504}505 506@media only screen and (min-width : 920px) and (max-width : 2019px) {507html{font-size:18px}508#page{width:900px;height:540px}509#layout{width:900px;height:540px}510#left{width:450px;height:540px}511#right{width:450px;height:540px}512#box1{width:180px;height:540px}513#box1a{width:164px;height:468px;margin-left:18px;margin-top:18px}514#logo{width:144px}515#box1b{width:144px;height:18px;margin-left:18px;margin-top:18px}516#box2{width:270px;height:540px}517#box2a{width:270px;height:540px}518#box3{width:450px;height:540px}519#box3a{width:414px;height:378px;margin-left:18px;margin-top:18px}520#box3b{width:414px;height:108px;margin-left:18px;margin-top:18px}521#map{width:414px;height:207px}522.box2image{width:270px;height:540px}523}524 525@media only screen and (min-width : 2020px) and (max-width : 2819px) {526html{font-size:24px}527#page{width:1200px;height:720px}528}529 530@media only screen and (min-width : 2820px) {531html{font-size:30px}532#page{width:1500px;height:900px}533#layout{width:1500px;height:900px}534#left{width:750px;height:900px}535#right{width:750px;height:900px}536#box1{width:300px;height:900px}537#box1a{width:270px;height:780px;margin-left:30px;margin-top:30px}538#logo{width:240px}539#box1b{width:240px;height:30px;margin-left:30px;margin-top:30px}540#box2{width:450px;height:900px}541#box2a{width:450px;height:900px}542#box3{width:750px;height:900px}543#box3a{width:690px;height:630px;margin-left:30px;margin-top:30px}544#box3b{width:690px;height:180px;margin-left:30px;margin-top:30px}545#map{width:690px;height:345px}546.box2image{width:450px;height:900px}547}548 549 550html{height:100%;font-size:24px}551body{height:100%;background-color:#fff}552#page{width:840px;height:720px}553#layout{width:840px;height:720px;background-color:#fff}554#left{float:left;width:240px;height:720px}555#right{float:left;width:600px;height:720px}556#box1{float:left;width:240px;height:720px}557#box1a{width:192px;height:624px;margin-left:24px;margin-top:24px}558#logo{width:192px}559#navigation{display:none}560#box1b{width:192px;height:24px;margin-left:24px;margin-top:24px}561#box2{display:none}562#box2a{display:none}563#box3{float:left;width:600px;height:720px}564#box3a{width:552px;height:504px;margin-left:24px;margin-top:24px}565#box3b{width:552px;height:144px;margin-left:24px;margin-top:24px}566#map{width:552px;height:276px;clear:both;background-color:#eee}567.box2image{width:360px;height:720px}568.border{border:1px solid #737560}569 570h1{font-size:1.2em;line-height:1.1em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0;font-weight:600}571h2{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0 0 1em 0}572h3{font-size:0.95em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:center;margin:0;padding:0 0 0.5em 0}573h4{font-size:1em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 0.5em 0}574h5{font-size:0.7em;line-height:1.5em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 0.5em 0;font-style:italic}575p{font-size:.8em;line-height:1.8em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333;text-align:left;margin:0;padding:0 0 1em 0}576ul{font-size:.8em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333}577ol{font-size:.5em;line-height:2em;font-family:"Open Sans",Helvetica,Arial,sans-serif;vertical-align:middle;color:#333}578 579.bold{font-weight:700}580.italic{font-style:italic}581.superscript{font-size:.8em;vertical-align:baseline;position:relative;top:-.4em}582.subscript{font-size:.8em;vertical-align:baseline;position:relative;top:.4em}583.clearboth{clear:both}584.textcentre{text-align:center}585.textleft{text-align:left}586.textright{text-align:right}587 588#box1 a:link{color:#333;text-decoration:none}589#box1 a:visited{color:#333;text-decoration:none}590#box1 a:hover{color:#666;text-decoration:none}591#box3 a:link{color:#06c;text-decoration:none}592#box3 a:visited{color:#06c;text-decoration:none}593#box3 a:hover{color:#666;text-decoration:none}594#box3b #contact a:link{color:#333;text-decoration:none}595#box3b #contact a:visited{color:#333;text-decoration:none}596#box3b #contact a:hover{color:#666;text-decoration:none}597#box3b #footer a:link{color:#888;text-decoration:none}598#box3b #footer a:visited{color:#888;text-decoration:none}599#box3b #footer a:hover{color:#aaa;text-decoration:none}600 601#box1b p{font-size:.6em}602#box3b #contact p{font-size:.65em}603#box3b #footer p{font-size:.5em;color:#888}604 605 606.gm-style img{max-width: none;}.gm-style {font: 400 11px Roboto, Arial, sans-serif; text-decoration: none;}607 </style>608 <title>609 Stream Farm - Location610 </title>611 <meta content="10 days" name="revisit-after">612 <meta content="index,follow" name="robots">613 <meta content="stream farm tn21 dallington" name="keywords">614 <meta content="Stream Farm is situated near the village of Dallington, mid way between Heathfield and Battle off the B2096." name="description">615 <meta content="Stream Farm is situated near the village of Dallington, mid way between Heathfield and Battle off the B2096." property="og:description">616 <meta content="Location" property="og:title">617 <meta content="" property="og:url">618 <meta content="" property="og:image">619 <meta content="Stream Farm" property="og:site_name">620 <meta content="telephone=no" name="format-detection">621 <meta content="Stream Farm" name="author">622 <meta content="" name="publisher">623 <meta content="Quotes" name="copyright">624 <meta content="width=device-width, initial-scale=1" name="viewport">625 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">626 </head>627 <body>628 <div id="page">629 <div id="layout">630 <div id="left">631 <div id="box1">632 <div id="box1a">633 <div id="logo">634 <h1>635 <a title="Stream Farm, Dallington">636 Stream Farm637 </a>638 </h1>639 <h2>640 <a title="Stream Farm, Dallington">641 Dallington642 </a>643 </h2>644 <h3>645 <a title="Bed & Breakfast Accommodation and Self-Catering Holiday Cottage">646 Bed & Breakfast647 </a>648 </h3>649 </div>650 <div id="navigation">651 <ul>652 <li>653 <a title="House and Grounds">654 House and Grounds655 </a>656 </li>657 <li>658 <a title="Accommodation">659 Accommodation660 </a>661 </li>662 <li>663 <a title="Garden Room Cottage">664 Garden Room Cottage665 </a>666 </li>667 <li>668 <a title="Location">669 Location670 </a>671 </li>672 </ul>673 </div>674 </div>675 <div id="box1b">676 <div id="copyright">677 <p>678 © 2013-2023679 <a title="Stream Farm">680 Stream Farm681 </a>682 </p>683 </div>684 </div>685 </div>686 <div id="box2">687 <div id="box2a">688 <img alt="Stream Farm" class="box2image" src="rick.jpg">689 </div>690 </div>691 </div>692 <div id="right">693 <div id="box3">694 <div id="box3a">695 <p>696 Stream Farm is situated near the village of Dallington, mid way between Heathfield and Battle off the B2096. Detailed directions are available when booking.697 </p>698 <div class="border" id="map" style="position: relative; overflow: hidden;">699 <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);">700 <div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;">701 <div aria-label="Map" aria-roledescription="map" role="region" style='position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(""), default; touch-action: none;' tabindex="0">702 <div style="z-index: 1; position: absolute; left: 50%; top: 50%; width: 100%; will-change: transform; transform: translate(0px, 0px);">703 <div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">704 <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">705 <div style="position: absolute; z-index: 990; transform: matrix(1, 0, 0, 1, -2, -18);">706 <div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;">707 <div style="width: 256px; height: 256px;">708 </div>709 </div>710 <div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px;">711 <div style="width: 256px; height: 256px;">712 </div>713 </div>714 <div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;">715 <div style="width: 256px; height: 256px;">716 </div>717 </div>718 <div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;">719 <div style="width: 256px; height: 256px;">720 </div>721 </div>722 </div>723 </div>724 </div>725 <div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;">726 </div>727 <div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;">728 </div>729 <div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;">730 <div style="position: absolute; left: 0px; top: 0px; z-index: -1;">731 <div style="position: absolute; z-index: 990; transform: matrix(1, 0, 0, 1, -2, -18);">732 <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: 0px;">733 </div>734 <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: 0px;">735 </div>736 <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -256px; top: -256px;">737 </div>738 <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 0px; top: -256px;">739 </div>740 </div>741 </div>742 <div style="width: 26px; height: 37px; overflow: hidden; position: absolute; left: -13px; top: -37px; z-index: 0;">743 <img alt draggable="false" src="rick.jpg" style="position: absolute; left: 0px; top: 0px; width: 26px; height: 37px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">744 </div>745 </div>746 <div style="position: absolute; left: 0px; top: 0px; z-index: -1; transform: matrix(1, 0, 0, 1, -207, -103);">747 <div style="position: absolute; left: 0px; top: 0px;">748 <img alt src="rick.jpg" style="width: 414px; height: 207px;">749 </div>750 </div>751 <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">752 <div style="position: absolute; z-index: 990; transform: matrix(1, 0, 0, 1, -2, -18);">753 <div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; transition: opacity 200ms linear 0s; opacity: 0;">754 <img alt draggable="false" role="presentation" src="rick.jpg" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">755 </div>756 </div>757 </div>758 </div>759 <div style="z-index: 3; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; touch-action: pan-x pan-y;">760 <div style="z-index: 4; position: absolute; left: 50%; top: 50%; width: 100%; will-change: transform; transform: translate(0px, 0px);">761 <div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;">762 </div>763 <div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;">764 </div>765 <div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;">766 <span id="7C3A510D-C978-4BCF-8279-9FB77E92BC4F" style="display: none;">767 To navigate, press the arrow keys.768 </span>769 <div aria-label="Stream Farm, Dallington" role="img" style="width: 26px; height: 37px; overflow: hidden; position: absolute; left: -13px; top: -37px; z-index: 0;" tabindex="-1">770 <img alt draggable="false" src="rick.jpg" style="width: 26px; height: 37px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;" usemap="#gmimap0">771 </div>772 </div>773 <div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;">774 </div>775 </div>776 </div>777 <div class="gm-style-moc" style="z-index: 4; position: absolute; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; left: 0px; top: 0px; opacity: 0;">778 <p class="gm-style-mot">779 </p>780 </div>781 </div>782 <div style="pointer-events: none; width: 100%; height: 100%; box-sizing: border-box; position: absolute; z-index: 1000002; opacity: 0; border: 2px solid rgb(26, 115, 232);">783 </div>784 </div>785 </div>786 </div>787 </div>788 <div id="box3b">789 <div id="contact">790 <p>791 Stream Farm, Dallington, Near Heathfield792 <br>793 [PHONE REDACTED] · 794 <a title="Send an email to [EMAIL REDACTED]">795 [EMAIL REDACTED]796 </a>797 </p>798 </div>799 <div id="footer">800 <p>801 <a title="All About Cookies">802 Our site uses cookies. Find out how to manage your cookies at AllAboutCookies.co.uk803 </a>804 .805 <br>806 https://www.streamfarmdallington.co.uk/location/807 <br>808 Last updated: Tuesday, 15th February 2022809 </p>810 </div>811 </div>812 </div>813 </div>814 </div>815 </div>816 <div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;">817 <span style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">818 BESbswy819 </span>820 </div>821 </body>822</html>823