SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html>2<html lang="en-GB">3 <head>4 <style>5 @font-face {6 font-family: 'Nunito';7 font-style: italic;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/nunito/v26/XRXK3I6Li01BKofIMPyPbj8d7IEAGXNirXAHjabf.ttf) format('truetype');10}11@font-face {12 font-family: 'Nunito';13 font-style: normal;14 font-weight: 400;15 src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3ig.ttf) format('truetype');16}17@font-face {18 font-family: 'Nunito';19 font-style: normal;20 font-weight: 700;21 src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTQ3ig.ttf) format('truetype');22}23@font-face {24 font-family: 'Nunito';25 font-style: normal;26 font-weight: 900;27 src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDBImdTQ3ig.ttf) format('truetype');28}29 30 31 32/*!33 * @project Example Project34 * @name styles.35fbf28c8f94f8144ca4.css35 * @author Seth Warburton36 * @build Tue, Mar 10, 2020 8:16 PM ET37 * @release bd6fdfba6e1f7b1763ca97a9aa49e9d460b70ca0 [master]38 * @copyright Copyright (c) 2020 Example Company, Ltd.39 *40 */:root{--font-size:calc(100% + 0.25vw)}address{font-style:normal;line-height:normal}a{text-decoration:none;color:#3490dc;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}blockquote{margin:0;font-weight:700;line-height:1.25;font-size:1.5rem}body{font-feature-settings:"liga","clig","calt","pnum";font-variant-ligatures:common-ligatures;font-variant-ligatures:contextual;font-variant-numeric:proportional-nums}cite{display:block;font-style:normal;font-weight:400;font-size:1rem}code,pre{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:"lnum","zero","tnum";font-variant-numeric:lining-nums;font-variant-numeric:slashed-zero;font-variant-numeric:tabular-nums}figure{margin:0}figcaption{line-height:normal;margin-top:.5rem;text-align:right;font-size:.875rem}label{display:block;margin-bottom:.5rem;text-transform:uppercase;font-size:.75rem;font-weight:700;letter-spacing:.05em;color:#8795a1}select{font:inherit}textarea{display:block;height:auto;resize:vertical}button,input,select{line-height:1}button,input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-feature-settings:"lnum","pnum";font-variant-numeric:lining-nums;font-variant-numeric:proportional-nums}textarea{width:100%}::-webkit-input-placeholder{font:inherit}::-moz-placeholder{font:inherit}:-ms-input-placeholder{font:inherit}::-ms-input-placeholder{font:inherit}::placeholder{font:inherit}[type=date],[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],textarea{border-color:#b8c2cc;border-width:1px;padding:.5rem;border-radius:.25em;width:100%;color:inherit}[type=date]:focus,[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,textarea:focus{border-color:#3490dc;outline:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=range]{display:block;width:100%}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}.h1,.h2,.h3,.h4,h1,h2,h3,h4{line-height:normal;margin-bottom:.5rem;margin-top:2rem;>a{color:inherit;cursor:pointer}}.h1,.h2,.h3,h1,h2,h3{font-feature-settings:"dlig";font-variant-ligatures:discretionary-ligatures}.h1,h1{font-size:2.25rem}.h2,h2{font-size:1.875rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1.125rem}html{box-sizing:border-box;font-size:calc(100% + .25vw);font-size:var(--font-size);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}*{border:0 solid transparent}*,:after,:before{box-sizing:inherit}img{max-width:100%;vertical-align:middle;-ms-interpolation-mode:bicubic}img[width]{max-width:none}ul{line-height:normal;margin-top:1.5rem;margin-bottom:1.5rem;padding:0;list-style-position:outside}p{max-width:50rem;margin:0;orphans:3;widows:3}p+p{margin-top:1.5rem}.btn{display:inline-block;line-height:1;border-radius:.25em;padding:.75rem 1.5rem;font-weight:400;font-family:Constantia,Lucida Bright,Lucidabright,Lucida Serif,Lucida,DejaVu Serif,Bitstream Vera Serif,Liberation Serif,Georgia,serif;background-color:#f8fafc;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);border-width:1px;border-color:#b8c2cc;color:inherit;cursor:pointer;font:inherit;text-decoration:none}.btn:focus{outline:none}.container{margin-left:auto;margin-right:auto;width:90%}@media (min-width:1440px){.container{width:80%}}.flair{position:relative;opacity:.5;border-radius:1em;display:block;transform:rotate(45deg);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);content:"";height:40vw;width:40vw;top:-25%;z-index:-1}.flair-blue{background-image:linear-gradient(135deg,#abdcff,#a4d7ff 11.36%,#9bd1ff 21.57%,#91cbff 30.81%,#85c4ff 39.26%,#78bcff 47.09%,#6ab4ff 54.5%,#5badff 61.66%,#4ba6ff 68.74%,#3aa0ff 75.94%,#289bff 83.43%,#1497ff 91.39%,#0396ff)}.flair-green{background-image:linear-gradient(135deg,#90f7ec,#8bf4e8 11.36%,#84f0e4 21.57%,#7decdf 30.81%,#75e7da 39.26%,#6be2d5 47.09%,#62ded0 54.5%,#58d9cb 61.66%,#4ed5c6 68.74%,#44d1c2 75.94%,#3bcfbf 83.43%,#34cdbd 91.39%,#32ccbc)}.flair-pink{background-image:linear-gradient(135deg,#f5cbff,#f1c3fb 11.36%,#edbaf5 21.57%,#e8b0ef 30.81%,#e3a4e9 39.26%,#dd97e2 47.09%,#d88adc 54.5%,#d27bd5 61.66%,#ce6dcf 68.74%,#c95fca 75.94%,#c653c6 83.43%,#c44ac3 91.39%,#c346c2)}.flair-orange{background-image:linear-gradient(135deg,#fec163,#fcba5f 11.36%,#f9b15a 21.57%,#f5a754 30.81%,#f29c4e 39.26%,#ee9047 47.09%,#eb833f 54.5%,#e87637 61.66%,#e5682f 68.74%,#e25b26 75.94%,#e04f1d 83.43%,#df4616 91.39%,#de4313)}.flair-red{background-image:linear-gradient(135deg,#feb692,#fcb08e 11.36%,#fba989 21.57%,#f9a084 30.81%,#f6977e 39.26%,#f48d77 47.09%,#f28371 54.5%,#f0786a 61.66%,#ee6e64 68.74%,#ec645e 75.94%,#eb5c59 83.43%,#ea5656 91.39%,#ea5455)}.select{font-feature-settings:"lnum","pnum";font-variant-numeric:lining-nums;font-variant-numeric:proportional-nums}.select:focus{border-color:#8795a1;outline:none}.select:before{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.398L10.587 0 6 4.537 1.413 0 0 1.398l6 5.935z' fill='currentColor'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100%;content:"";color:#eee;right:.5em}.select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;outline:0;padding-right:1.5rem;background-color:transparent}.select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.select select::-ms-expand{display:none}.nav-primary.active{display:flex}.center-x{left:50%;transform:translateX(-50%)}.lazyload{opacity:0}.lede>p:first-of-type{font-size:1.25rem}.list-reset{list-style:none;padding:0}.bg-transparent{background-color:transparent}.bg-white{background-color:#fff}.bg-blue-lighter{background-color:#bcdefa}.bg-blue-lightest{background-color:#eff8ff}.focus\:bg-green-lighter:focus,.hover\:bg-green-lighter:hover{background-color:#a2f5bf}.bg-cover{background-size:cover}.border-grey-light{border-color:#dae1e7}.border-grey-lighter{border-color:#f1f5f8}.border-white{border-color:#fff}.border-orange{border-color:#f6993f}.rounded{border-radius:.25em}.rounded-lg{border-radius:.5em}.rounded-full{border-radius:9999em}.rounded-t{border-top-left-radius:.25em;border-top-right-radius:.25em}.border-4{border-width:4px}.border-8{border-width:8px}.border{border-width:1px}.border-t-4{border-top-width:4px}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.self-end{align-self:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-auto{flex:1 1 auto}.flex-grow{flex-grow:1}.font-sans{font-family:nunito,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Oxygen,Fira Sans,Droid Sans,Helvetica Neue}.font-serif{font-family:Constantia,Lucida Bright,Lucidabright,Lucida Serif,Lucida,DejaVu Serif,Bitstream Vera Serif,Liberation Serif,Georgia,serif}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}.h-2{height:.5rem}.h-8{height:2rem}.h-48{height:12rem}.h-full{height:100%}.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-copy{line-height:1.6}.leading-normal{line-height:normal}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.mx-0{margin-left:0;margin-right:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-12{margin-top:3rem;margin-bottom:3rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.mb-6{margin-bottom:1.5rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mb-12{margin-bottom:3rem}.mt-24{margin-top:6rem}.max-w-sm{max-width:30rem}.max-w-lg{max-width:50rem}.max-w-xl{max-width:60rem}.min-h-screen{min-height:100vh}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-mx-8{margin-left:-2rem;margin-right:-2rem}.-ml-24{margin-left:-6rem}.opacity-50{opacity:.5}.focus\:outline-none:focus{outline:0}.overflow-x-hidden{overflow-x:hidden}.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.pb-0{padding-bottom:0}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.pl-8{padding-left:2rem}.pb-16{padding-bottom:4rem}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.pin{right:0;bottom:0;left:0}.pin,.pin-t{top:0}.pin-r{right:0}.pin-b{bottom:0}.pin-l{left:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.hover\:shadow:hover{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.hover\:shadow-none:hover{box-shadow:none}.text-center{text-align:center}.text-currentColor{color:currentColor}.text-black{color:#22292f}.text-grey-darkest{color:#3d4852}.text-grey-darker{color:#606f7b}.text-grey-dark{color:#8795a1}.text-red{color:#e3342f}.text-yellow{color:#ffed4a}.text-teal-dark{color:#38a89d}.text-blue-darker{color:#1c3d5a}.text-blue{color:#3490dc}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.italic{font-style:italic}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.no-underline{text-decoration:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wide{letter-spacing:.05em}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.w-2{width:.5rem}.w-8{width:2rem}.w-24{width:6rem}.w-32{width:8rem}.w-48{width:12rem}.w-auto{width:auto}.w-full{width:100%}.z-10{z-index:10}.aspect-ratio-16\/9{padding-top:56.25%}.aspect-ratio-carousel{padding-top:75%}.transition{transition:all .3s ease}.rotate-180{transform:rotate(180deg)}.-pin-l-15vw{left:-15vw}.-pin-r-15vw{right:-15vw}.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@media (min-width:576px){.sm\:max-w-xs{max-width:20rem}}@media (min-width:768px){.md\:bg-transparent{background-color:transparent}.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:m-0{margin:0}.md\:my-16{margin-top:4rem;margin-bottom:4rem}.md\:mt-12{margin-top:3rem}.md\:-mx-12{margin-left:-3rem;margin-right:-3rem}.md\:pt-8{padding-top:2rem}.md\:w-auto{width:auto}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.33333%}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:flex-wrap{flex-wrap:wrap}.lg\:mt-2{margin-top:.5rem}.lg\:mt-4{margin-top:1rem}.lg\:mt-24{margin-top:6rem}.lg\:-my-4{margin-top:-1rem;margin-bottom:-1rem}.lg\:-mx-4{margin-left:-1rem;margin-right:-1rem}.lg\:p-4{padding:1rem}.lg\:pr-0{padding-right:0}.lg\:pb-0{padding-bottom:0}.lg\:pt-12{padding-top:3rem}.lg\:pin-l{left:0}.lg\:text-2xl{font-size:1.5rem}.lg\:text-4xl{font-size:2.25rem}.lg\:text-5xl{font-size:3rem}.lg\:w-16{width:4rem}.lg\:w-48{width:12rem}.lg\:w-1\/2{width:50%}.lg\:w-full{width:100%}.lg\:aspect-ratio-square{padding-top:100%}}@media (min-width:1440px){.xl\:my-16{margin-top:4rem;margin-bottom:4rem}.xl\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.xl\:px-6{padding-left:1.5rem;padding-right:1.5rem}.xl\:px-16{padding-left:4rem;padding-right:4rem}.xl\:text-2xl{font-size:1.5rem}.xl\:text-3xl{font-size:1.875rem}.xl\:text-4xl{font-size:2.25rem}.xl\:text-5xl{font-size:3rem}}41/*# sourceMappingURL=styles.35fbf28c8f94f8144ca4.css.map */42 43 44/*!45 * @project Example Project46 * @name styles.35fbf28c8f94f8144ca4.css47 * @author Seth Warburton48 * @build Tue, Mar 10, 2020 8:16 PM ET49 * @release bd6fdfba6e1f7b1763ca97a9aa49e9d460b70ca0 [master]50 * @copyright Copyright (c) 2020 Example Company, Ltd.51 *52 */:root{--font-size:calc(100% + 0.25vw)}address{font-style:normal;line-height:normal}a{text-decoration:none;color:#3490dc;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}blockquote{margin:0;font-weight:700;line-height:1.25;font-size:1.5rem}body{font-feature-settings:"liga","clig","calt","pnum";font-variant-ligatures:common-ligatures;font-variant-ligatures:contextual;font-variant-numeric:proportional-nums}cite{display:block;font-style:normal;font-weight:400;font-size:1rem}code,pre{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:"lnum","zero","tnum";font-variant-numeric:lining-nums;font-variant-numeric:slashed-zero;font-variant-numeric:tabular-nums}figure{margin:0}figcaption{line-height:normal;margin-top:.5rem;text-align:right;font-size:.875rem}label{display:block;margin-bottom:.5rem;text-transform:uppercase;font-size:.75rem;font-weight:700;letter-spacing:.05em;color:#8795a1}select{font:inherit}textarea{display:block;height:auto;resize:vertical}button,input,select{line-height:1}button,input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-feature-settings:"lnum","pnum";font-variant-numeric:lining-nums;font-variant-numeric:proportional-nums}textarea{width:100%}::-webkit-input-placeholder{font:inherit}::-moz-placeholder{font:inherit}:-ms-input-placeholder{font:inherit}::-ms-input-placeholder{font:inherit}::placeholder{font:inherit}[type=date],[type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],textarea{border-color:#b8c2cc;border-width:1px;padding:.5rem;border-radius:.25em;width:100%;color:inherit}[type=date]:focus,[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=url]:focus,textarea:focus{border-color:#3490dc;outline:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=range]{display:block;width:100%}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}.h1,.h2,.h3,.h4,h1,h2,h3,h4{line-height:normal;margin-bottom:.5rem;margin-top:2rem;>a{color:inherit;cursor:pointer}}.h1,.h2,.h3,h1,h2,h3{font-feature-settings:"dlig";font-variant-ligatures:discretionary-ligatures}.h1,h1{font-size:2.25rem}.h2,h2{font-size:1.875rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1.125rem}html{box-sizing:border-box;font-size:calc(100% + .25vw);font-size:var(--font-size);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}*{border:0 solid transparent}*,:after,:before{box-sizing:inherit}img{max-width:100%;vertical-align:middle;-ms-interpolation-mode:bicubic}img[width]{max-width:none}ul{line-height:normal;margin-top:1.5rem;margin-bottom:1.5rem;padding:0;list-style-position:outside}p{max-width:50rem;margin:0;orphans:3;widows:3}p+p{margin-top:1.5rem}.btn{display:inline-block;line-height:1;border-radius:.25em;padding:.75rem 1.5rem;font-weight:400;font-family:Constantia,Lucida Bright,Lucidabright,Lucida Serif,Lucida,DejaVu Serif,Bitstream Vera Serif,Liberation Serif,Georgia,serif;background-color:#f8fafc;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);border-width:1px;border-color:#b8c2cc;color:inherit;cursor:pointer;font:inherit;text-decoration:none}.btn:focus{outline:none}.container{margin-left:auto;margin-right:auto;width:90%}@media (min-width:1440px){.container{width:80%}}.flair{position:relative;opacity:.5;border-radius:1em;display:block;transform:rotate(45deg);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);content:"";height:40vw;width:40vw;top:-25%;z-index:-1}.flair-blue{background-image:linear-gradient(135deg,#abdcff,#a4d7ff 11.36%,#9bd1ff 21.57%,#91cbff 30.81%,#85c4ff 39.26%,#78bcff 47.09%,#6ab4ff 54.5%,#5badff 61.66%,#4ba6ff 68.74%,#3aa0ff 75.94%,#289bff 83.43%,#1497ff 91.39%,#0396ff)}.flair-green{background-image:linear-gradient(135deg,#90f7ec,#8bf4e8 11.36%,#84f0e4 21.57%,#7decdf 30.81%,#75e7da 39.26%,#6be2d5 47.09%,#62ded0 54.5%,#58d9cb 61.66%,#4ed5c6 68.74%,#44d1c2 75.94%,#3bcfbf 83.43%,#34cdbd 91.39%,#32ccbc)}.flair-pink{background-image:linear-gradient(135deg,#f5cbff,#f1c3fb 11.36%,#edbaf5 21.57%,#e8b0ef 30.81%,#e3a4e9 39.26%,#dd97e2 47.09%,#d88adc 54.5%,#d27bd5 61.66%,#ce6dcf 68.74%,#c95fca 75.94%,#c653c6 83.43%,#c44ac3 91.39%,#c346c2)}.flair-orange{background-image:linear-gradient(135deg,#fec163,#fcba5f 11.36%,#f9b15a 21.57%,#f5a754 30.81%,#f29c4e 39.26%,#ee9047 47.09%,#eb833f 54.5%,#e87637 61.66%,#e5682f 68.74%,#e25b26 75.94%,#e04f1d 83.43%,#df4616 91.39%,#de4313)}.flair-red{background-image:linear-gradient(135deg,#feb692,#fcb08e 11.36%,#fba989 21.57%,#f9a084 30.81%,#f6977e 39.26%,#f48d77 47.09%,#f28371 54.5%,#f0786a 61.66%,#ee6e64 68.74%,#ec645e 75.94%,#eb5c59 83.43%,#ea5656 91.39%,#ea5455)}.select{font-feature-settings:"lnum","pnum";font-variant-numeric:lining-nums;font-variant-numeric:proportional-nums}.select:focus{border-color:#8795a1;outline:none}.select:before{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1.398L10.587 0 6 4.537 1.413 0 0 1.398l6 5.935z' fill='currentColor'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100%;content:"";color:#eee;right:.5em}.select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;outline:0;padding-right:1.5rem;background-color:transparent}.select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.select select::-ms-expand{display:none}.nav-primary.active{display:flex}.center-x{left:50%;transform:translateX(-50%)}.lazyload{opacity:0}.lede>p:first-of-type{font-size:1.25rem}.list-reset{list-style:none;padding:0}.bg-transparent{background-color:transparent}.bg-white{background-color:#fff}.bg-blue-lighter{background-color:#bcdefa}.bg-blue-lightest{background-color:#eff8ff}.focus\:bg-green-lighter:focus,.hover\:bg-green-lighter:hover{background-color:#a2f5bf}.bg-cover{background-size:cover}.border-grey-light{border-color:#dae1e7}.border-grey-lighter{border-color:#f1f5f8}.border-white{border-color:#fff}.border-orange{border-color:#f6993f}.rounded{border-radius:.25em}.rounded-lg{border-radius:.5em}.rounded-full{border-radius:9999em}.rounded-t{border-top-left-radius:.25em;border-top-right-radius:.25em}.border-4{border-width:4px}.border-8{border-width:8px}.border{border-width:1px}.border-t-4{border-top-width:4px}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.self-end{align-self:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-auto{flex:1 1 auto}.flex-grow{flex-grow:1}.font-sans{font-family:nunito,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Oxygen,Fira Sans,Droid Sans,Helvetica Neue}.font-serif{font-family:Constantia,Lucida Bright,Lucidabright,Lucida Serif,Lucida,DejaVu Serif,Bitstream Vera Serif,Liberation Serif,Georgia,serif}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}.h-2{height:.5rem}.h-8{height:2rem}.h-48{height:12rem}.h-full{height:100%}.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-copy{line-height:1.6}.leading-normal{line-height:normal}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.mx-0{margin-left:0;margin-right:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-12{margin-top:3rem;margin-bottom:3rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.mb-6{margin-bottom:1.5rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mb-12{margin-bottom:3rem}.mt-24{margin-top:6rem}.max-w-sm{max-width:30rem}.max-w-lg{max-width:50rem}.max-w-xl{max-width:60rem}.min-h-screen{min-height:100vh}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-mx-8{margin-left:-2rem;margin-right:-2rem}.-ml-24{margin-left:-6rem}.opacity-50{opacity:.5}.focus\:outline-none:focus{outline:0}.overflow-x-hidden{overflow-x:hidden}.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.pb-0{padding-bottom:0}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pt-8{padding-top:2rem}.pl-8{padding-left:2rem}.pb-16{padding-bottom:4rem}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.pin{right:0;bottom:0;left:0}.pin,.pin-t{top:0}.pin-r{right:0}.pin-b{bottom:0}.pin-l{left:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.hover\:shadow:hover{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.hover\:shadow-none:hover{box-shadow:none}.text-center{text-align:center}.text-currentColor{color:currentColor}.text-black{color:#22292f}.text-grey-darkest{color:#3d4852}.text-grey-darker{color:#606f7b}.text-grey-dark{color:#8795a1}.text-red{color:#e3342f}.text-yellow{color:#ffed4a}.text-teal-dark{color:#38a89d}.text-blue-darker{color:#1c3d5a}.text-blue{color:#3490dc}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.italic{font-style:italic}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.no-underline{text-decoration:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wide{letter-spacing:.05em}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.w-2{width:.5rem}.w-8{width:2rem}.w-24{width:6rem}.w-32{width:8rem}.w-48{width:12rem}.w-auto{width:auto}.w-full{width:100%}.z-10{z-index:10}.aspect-ratio-16\/9{padding-top:56.25%}.aspect-ratio-carousel{padding-top:75%}.transition{transition:all .3s ease}.rotate-180{transform:rotate(180deg)}.-pin-l-15vw{left:-15vw}.-pin-r-15vw{right:-15vw}.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@media (min-width:576px){.sm\:max-w-xs{max-width:20rem}}@media (min-width:768px){.md\:bg-transparent{background-color:transparent}.md\:block{display:block}.md\:hidden{display:none}.md\:flex{display:flex}.md\:m-0{margin:0}.md\:my-16{margin-top:4rem;margin-bottom:4rem}.md\:mt-12{margin-top:3rem}.md\:-mx-12{margin-left:-3rem;margin-right:-3rem}.md\:pt-8{padding-top:2rem}.md\:w-auto{width:auto}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.33333%}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:flex-wrap{flex-wrap:wrap}.lg\:mt-2{margin-top:.5rem}.lg\:mt-4{margin-top:1rem}.lg\:mt-24{margin-top:6rem}.lg\:-my-4{margin-top:-1rem;margin-bottom:-1rem}.lg\:-mx-4{margin-left:-1rem;margin-right:-1rem}.lg\:p-4{padding:1rem}.lg\:pr-0{padding-right:0}.lg\:pb-0{padding-bottom:0}.lg\:pt-12{padding-top:3rem}.lg\:pin-l{left:0}.lg\:text-2xl{font-size:1.5rem}.lg\:text-4xl{font-size:2.25rem}.lg\:text-5xl{font-size:3rem}.lg\:w-16{width:4rem}.lg\:w-48{width:12rem}.lg\:w-1\/2{width:50%}.lg\:w-full{width:100%}.lg\:aspect-ratio-square{padding-top:100%}}@media (min-width:1440px){.xl\:my-16{margin-top:4rem;margin-bottom:4rem}.xl\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.xl\:px-6{padding-left:1.5rem;padding-right:1.5rem}.xl\:px-16{padding-left:4rem;padding-right:4rem}.xl\:text-2xl{font-size:1.5rem}.xl\:text-3xl{font-size:1.875rem}.xl\:text-4xl{font-size:2.25rem}.xl\:text-5xl{font-size:3rem}}53/*# sourceMappingURL=styles.35fbf28c8f94f8144ca4.css.map */54 </style>55 <meta charset="utf-8">56 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">57 <!--# if expr="$HTTP_COOKIE=/critical\-css\=1/" -->58 <!--# else -->59 <noscript>60 </noscript>61 <!--# endif -->62 <title>63 </title>64 </head>65 <body class="antialiased bg-blue-lightest font-sans leading-copy overflow-x-hidden text-grey-darkest m-0" dir="ltr">66 <div class="min-h-screen container" id="app">67 <header class="py-4" role="banner">68 <div class="flex flex-wrap items-center justify-between -mx-4">69 <div class="p-4 w-auto relative font-black text-base tracking-wide uppercase leading-none" itemscope itemtype="">70 <a class="text-grey-darkest" itemprop="url" title="Return to the Fairburn Primary home page">71 Fairburn Primary72 </a>73 </div>74 <button aria-label="Open menu" class="md:hidden leading-none ml-2 btn bg-transparent p-2 z-10" data-toggle="nav" name="button" type="button">75 <span class="font-bold text-xl">76 ☰77 </span>78 </button>79 <nav aria-label="primary" class="nav-primary bg-blue-lightest md:bg-transparent hidden md:block" data-toggle-target="nav">80 <ul class="md:m-0 list-reset flex flex-wrap -mx-4 font-semibold">81 <li class="mx-4 w-full md:w-auto">82 <a class="">83 Home84 </a>85 </li>86 <li class="mx-4 w-full md:w-auto">87 <a class="">88 Our School89 </a>90 </li>91 <li class="mx-4 w-full md:w-auto">92 <a class="">93 Our Team94 </a>95 </li>96 <li class="mx-4 w-full md:w-auto">97 <a class="">98 Information for Parents99 </a>100 </li>101 </ul>102 </nav>103 </div>104 </header>105 <main>106 </main>107 <footer class="mt-12" role="contentinfo">108 <div class="border-t-4 border-white">109 <div class="flex flex-wrap justify-between -mx-8 mt-6">110 <div class="w-full md:w-1/2">111 <div class="p-8 w-auto flex-grow">112 <h3 class="h2 mt-0">113 Get in touch114 </h3>115 <ul>116 <li>117 Contact:118 <span class="font-bold text-lg">119 [NAME REDACTED]120 </span>121 </li>122 <li>123 Email:124 <a class="font-bold text-lg">125 [EMAIL REDACTED]126 </a>127 </li>128 <li>129 Phone:130 <a class="font-bold text-lg">131 [PHONE REDACTED]132 </a>133 </li>134 <li>135 Mobile:136 <a class="font-bold text-lg">137 [PHONE REDACTED]138 </a>139 </li>140 </ul>141 </div>142 <div class="px-8 w-auto flex-grow">143 <h4 class="mt-0">144 Our Address145 </h4>146 <address class="text-lg my-2 pt-1 leading-base">147 [ADDRESS REDACTED]148 <br>149 [ADDRESS REDACTED]150 <br>151 Fairburn,152 <br>153 [ADDRESS REDACTED]154 <br>155 Opening times: 9-3.30pm (32.5 hours)156 <br>157 School Office hours: 8.45am- 4pm158 </address>159 </div>160 </div>161 <div class="w-full md:w-1/2 flex flex-wrap">162 <nav aria-label="legal" class="p-8">163 <h4 class="mt-0">164 Popular pages165 </h4>166 <ul class="list-reset">167 <li>168 <a class="">169 Teaching Staff170 </a>171 </li>172 <li>173 <a class="">174 School Governors175 </a>176 </li>177 <li>178 <a class="">179 News180 </a>181 </li>182 <li>183 <a class="">184 Events185 </a>186 </li>187 </ul>188 </nav>189 <nav aria-label="legal" class="p-8">190 <h4 class="mt-0">191 Important links192 </h4>193 <ul class="list-reset">194 <li>195 <a class="">196 Privacy Policy197 </a>198 </li>199 <li>200 <a class="">201 Contact Us202 </a>203 </li>204 </ul>205 </nav>206 </div>207 </div>208 </div>209 <div class="max-w-sm my-12 leading-normal">210 <p class="mb-0">211 <small>212 All Content © Fairburn Primary213 <span class="numbers">214 2023215 </span>216 . All applicable rights reserved.217 </small>218 </p>219 <p class="mt-0">220 <small>221 Site design222 <span class="amp">223 &224 </span>225 development by226 <a>227 Internet inspired228 </a>229 .230 </small>231 </p>232 </div>233 </footer>234 </div>235 <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->236 </body>237</html>238