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>3 <head>4 <style>5 @font-face {6 font-family: 'Federo';7 font-style: normal;8 font-weight: 400;9 src: url(https://fonts.gstatic.com/s/federo/v19/iJWFBX-cbD_ETsbWilma.ttf) format('truetype');10}11@font-face {12 font-family: 'Open Sans';13 font-style: italic;14 font-weight: 400;15 font-stretch: normal;16 src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexQ.ttf) format('truetype');17}18@font-face {19 font-family: 'Open Sans';20 font-style: italic;21 font-weight: 700;22 font-stretch: normal;23 src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjWVAexQ.ttf) format('truetype');24}25@font-face {26 font-family: 'Open Sans';27 font-style: normal;28 font-weight: 400;29 font-stretch: normal;30 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');31}32@font-face {33 font-family: 'Open Sans';34 font-style: normal;35 font-weight: 700;36 font-stretch: normal;37 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');38}39@font-face {40 font-family: 'Roboto';41 font-style: normal;42 font-weight: 400;43 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');44}45@font-face {46 font-family: 'Roboto';47 font-style: normal;48 font-weight: 700;49 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');50}51 52 53 54@charset "utf-8"; @font-face{font-family:'icomoon';src:url("../fonts/icomoon.eot?mdagel");src:url("../fonts/icomoon.eot?mdagel#iefix") format("embedded-opentype"),url("../fonts/icomoon.ttf?mdagel") format("truetype"),url("../fonts/icomoon.woff?mdagel") format("woff"),url("../fonts/icomoon.svg?mdagel#icomoon") format("svg");font-weight:400;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-quotes-right:before{content:"\e978"}.icon-search:before{content:"\e986"}.icon-arrow-right2:before{content:"\ea3c"}.icon-arrow-left2:before{content:"\ea40"}.icon-google-plus:before{content:"\ea8b"}.icon-facebook:before{content:"\ea90"}.icon-twitter:before{content:"\ea96"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;background:url(../images/bg-body1.gif)}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Roboto",Arial,sans-serif;font-size:16px;line-height:1.6875;color:#363636;background-color:#f1f2f7}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#9b6459;text-decoration:none}a:hover,a:focus{color:#65342B;text-decoration:none}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.6875;background-color:#fff;border:1px solid #ddd;border-radius:4px;transition:all 0.2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eeeeee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}html,body{min-width:320px;height:100%}body{overflow-x:hidden;overflow-y:scroll;-webkit-font-smoothing:subpixel-antialiased}a{transition:color 350ms,background-color 350ms,border-color 350ms;cursor:pointer}a:hover,a:focus,a:active{outline:none}a:focus,a:active{text-decoration:none}img{vertical-align:top;max-width:100%;height:auto}textarea{resize:vertical}input[type=submit]:hover,input[type=submit]:focus,input[type=submit]:active,button:hover,button:focus,button:active{outline:none;cursor:pointer}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}input[type=password]{-webkit-text-security:disc}input[type=submit],input[type=text],input[type=email],input[type=search],input[type=password],input[type=file],input[type=number],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}input[type=image]{border:0}input[type=text],input[type=password],input[type=email],input[type=tel],textarea{-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=number]::-webkit-outer-spin-button{margin:0}input::-ms-clear{display:none;width:0;height:0}@media (orientation:landscape){body{width:100%}}.iframe{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}ol{margin:0;padding:0;list-style:none;counter-reset:item}ol>li{list-style-type:none}ol li{display:table;width:100%;margin-bottom:7px}ol li:before{content:counter(item) ".";counter-increment:item;width:25px;display:table-cell;padding-right:3px;color:#4e97f2}ol blockquote{margin:0}blockquote b{color:#7392a6}.bulleted-list{margin:0;padding:0;list-style:none;font-family:"Open Sans","Roboto",Arial,Helvetica,sans-serif}.bulleted-list>li{list-style-type:none}.bulleted-list li{position:relative;padding-left:28px;margin-bottom:7px}.bulleted-list li:before{content:"";position:absolute;left:0;top:10px;height:4px;width:4px;border-radius:50%;background:#4e97f2}.bulleted-list blockquote{margin:0}blockquote{padding:0;margin-bottom:10px;border:none}blockquote q{display:block;margin:0}blockquote q:before{content:"â"}blockquote q:after{content:"â"}blockquote cite{display:block;text-align:right;font-size:14px;color:#7e7e7e}blockquote cite:before{content:"â";margin-right:3px}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:#7392a6}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small{font-weight:400;line-height:1;color:#777777}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,h1 .small,.h1 small,.h1 .small,h2 small,h2 .small,.h2 small,.h2 .small,h3 small,h3 .small,.h3 small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,h4 .small,.h4 small,.h4 .small,h5 small,h5 .small,.h5 small,.h5 .small,h6 small,h6 .small,.h6 small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:18px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:24px}}small,.small{font-size:75%}mark,.mark{background-color:#fcf8e3;padding:.2em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase,.initialism{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777777}.text-primary{color:#337ab7}a.text-primary:hover,a.text-primary:focus{color:#286090}.text-success{color:#3c763d}a.text-success:hover,a.text-success:focus{color:#2b542c}.text-info{color:#31708f}a.text-info:hover,a.text-info:focus{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:hover,a.text-warning:focus{color:#66512c}.text-danger{color:#a94442}a.text-danger:hover,a.text-danger:focus{color:#843534}.bg-primary{color:#fff}.bg-primary{background-color:#337ab7}a.bg-primary:hover,a.bg-primary:focus{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:hover,a.bg-success:focus{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:hover,a.bg-info:focus{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:hover,a.bg-warning:focus{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:hover,a.bg-danger:focus{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eeeeee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ul ol,ol ul,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-left:5px;padding-right:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.6875}dt{font-weight:700}dd{margin-left:0}.dl-horizontal dd:before,.dl-horizontal dd:after{content:" ";display:table}.dl-horizontal dd:after{clear:both}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #777777}.initialism{font-size:90%}blockquote{padding:10px 20px;margin:0 0 0;font-size:16px;border-left:5px solid #eeeeee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.6875;color:#777777}blockquote footer:before,blockquote small:before,blockquote .small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;border-right:5px solid #eeeeee;border-left:0;text-align:right}.blockquote-reverse footer:before,.blockquote-reverse small:before,.blockquote-reverse .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before,blockquote.pull-right .small:before{content:''}.blockquote-reverse footer:after,.blockquote-reverse small:after,.blockquote-reverse .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.6875}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs{display:none!important}.visible-sm{display:none!important}.visible-md{display:none!important}.visible-lg{display:none!important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}th.visible-xs,td.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}th.visible-sm,td.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}th.visible-md,td.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}th.visible-lg,td.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}th.visible-print,td.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.hidden-only-desktop{display:none}@media screen and (max-width:1165px){.hidden-only-desktop{display:block}}@media screen and (max-width:999px){.hidden-from-tablet{display:none}}.page{display:table;max-width:1206px;margin:0 auto;padding:0 11px;height:100%;width:100%;table-layout:fixed;overflow:hidden}.page .mainContent,.page .main{display:table-row;height:100%}.page .header,.page .mainTop,.page .footer,.page .mainBottom{display:table-row}.page .main-holder{display:table;height:100%;width:100%;padding-top:10px;table-layout:fixed;overflow:hidden}.page .contentWrapper{display:-webkit-flex;display:-ms-flexbox;display:flex}.page .contentWrapper .content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:488px}.static-page{max-width:100%;width:100%}.page .contentWrapper .content.static-page{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:1206px}.page .contentWrapper .sideLeft{min-width:320px;width:320px;margin-right:10px}.page .contentWrapper .sideLeft:empty{display:none;margin-right:0}.page .contentWrapper .sideRight{min-width:356px;width:356px;margin-left:10px}.page .contentWrapper .sideRight:empty{display:none;margin-left:0}@media screen and (max-width:1205px){.page{padding:0}.page .contentWrapper .sideRight{display:none}.page .contentWrapper .content{-webkit-order:1;-ms-flex-order:1;order:1;max-width:100%}}@media screen and (max-width:999px){.page .contentWrapper{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0 7px}.page .contentWrapper .content{-webkit-order:1;-ms-flex-order:1;order:1;max-width:100%}.page .contentWrapper .sideLeft{-webkit-order:2;-ms-flex-order:2;order:2;margin:0;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;width:auto}.page .contentWrapper .sideLeft [class*="-box"]{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;width:100%}.page .contentWrapper .sideRight{display:none}}@media screen and (max-width:1206px){.page{padding:0}.page .contentWrapper .sideRight{display:none}}@media screen and (max-width:767px){.page .contentWrapper .sideLeft{min-width:100%;width:100%;-webkit-order:2;-ms-flex-order:2;order:2;margin:0;-webkit-column-count:1;-moz-column-count:1;column-count:1}}.header{background:#CFDBE2;margin-bottom:10px}.header-holder{height:125px;padding:8px 15px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.header .logo{text-indent:-9999px;overflow:hidden;margin:0;width:367px;height:100px;background:url(../images/logo.png) no-repeat}.header .iframe.tablet{display:none}@media screen and (max-width:1135px){.header .iframe.desktop{display:none}.header .iframe.tablet{display:-webkit-flex;display:-ms-flexbox;display:flex}}@media screen and (max-width:999px){.header .iframe.tablet{display:none}}@media screen and (max-width:767px){.header-holder{height:60px}.header .logo{width:327px;height:60px;margin-top:5px;background-size:60%}}.footer{background:#CFDBE2;color:#5A788C;font-family:"Open Sans","Roboto",Arial,sans-serif;font-size:14px;line-height:1.9286}.footer-holder{padding:15px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.footer-holder p,.footer-holder address{margin:0}.footer-holder address{font-style:normal}.footer-holder a{color:#9b6459}.footer-holder a:hover{color:#65342B}.footer-right{text-align:right}.footer-nav ul{margin:0;padding:0;list-style:none;margin:0 -10px}.footer-nav ul>li{list-style-type:none}.footer-nav ul li{display:inline;margin:0 10px}.footer .social-networks{margin:10px -10px 0}.footer .social-networks li{margin:0 10px}.footer .social-networks a{color:#9b6459}.footer .social-networks a:hover{color:#65342B}.footer .social-networks .icon{font-size:20px;line-height:28px}.footer .social-networks .icon.icon-google-plus{font-size:26px;line-height:28px}@media screen and (max-width:999px){.footer-holder{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;text-align:center}.footer-left{-webkit-order:2;-ms-flex-order:2;order:2}.footer-right{text-align:center;-webkit-order:1;-ms-flex-order:1;order:1;padding-bottom:10px}.footer .social-networks{-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.footer-nav ul{margin-bottom:12px}.footer p span{display:inline-block}}.contentTop .iframe.tablet{display:none}.contentTop .iframe.mobile{display:none;margin:0 -7px -7px -7px}@media screen and (max-width:1100px){.contentTop .iframe.desktop{display:none}.contentTop .iframe.tablet{display:-webkit-flex;display:-ms-flexbox;display:flex}}@media screen and (max-width:468px){.contentTop .iframe.tablet{display:none}.contentTop .iframe.mobile{display:-webkit-flex;display:-ms-flexbox;display:flex}}.contentMiddle .iframe.tablet{display:none}.contentMiddle .iframe.mobile{display:none}@media screen and (max-width:1100px){.contentMiddle .iframe.desktop{display:none}.contentMiddle .iframe.tablet{display:-webkit-flex;display:-ms-flexbox;display:flex}}@media screen and (max-width:767px){.contentMiddle .iframe.tablet{display:none}.contentMiddle .iframe.mobile{display:-webkit-flex;display:-ms-flexbox;display:flex}}.social-networks{padding:0;list-style:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:0 -11px}.social-networks>li{list-style-type:none}.social-networks li{margin:0 11px}.social-networks a{color:#fff}.social-networks a:hover{color:#ffae00}.social-networks .icon{font-size:15px;line-height:20px}.social-networks .icon.icon-google-plus{font-size:18px;line-height:20px}.aside-box{background:#FFFFFF;padding:10px;margin-bottom:10px}.aside-box-holder{padding:0 5px}.aside-box-link img{width:100%}.aside-box h3{font-size:18px;font-weight:700;margin:0 0 10px}.aside-box ul{margin:0;padding:0;list-style:none;border-top:1px solid #dadada;margin-bottom:8px}.aside-box ul>li{list-style-type:none}.aside-box ul li{border-bottom:1px solid #dadada}.aside-box ul a{line-height:22px;padding:10px 22px 10px 12px;position:relative;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.aside-box ul a:after{content:"\203A";font-size:24px;line-height:30px;position:absolute;top:50%;margin-top:-15px;right:8px;transition:all 350ms}.aside-box ul a:hover:after{-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}@media screen and (max-width:1024px){.aside-box{background:#FFFFFF;padding:10px;margin-bottom:10px}}.world-box{background:#1a66c5;color:#fff;padding:27px 24px 23px;margin-bottom:10px}.world-box h3{margin:0 0 15px;font-size:16px;font-weight:700}.world-box .word{font-size:24px;line-height:29px;padding:10px 18px;background:#fff;color:#56598b;display:block;margin-bottom:13px}.world-box .world-noun{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.world-box .world-definition .label{display:block;font-size:14px;color:#64a0eb;text-transform:uppercase;margin-bottom:3px}.world-box .world-definition p{margin-bottom:15px}.alphabet-box{background:#E0E5E9;padding:13px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:10px;font-family:"Open Sans","Roboto",Arial,sans-serif}.alphabet-box .label{font-size:18px;color:#7392a6}.alphabet-box .alphabet{margin:0;padding:0;list-style:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:35px;text-transform:lowercase}.alphabet-box .alphabet>li{list-style-type:none}.alphabet-box .alphabet li{margin:0 2px}.alphabet-box .alphabet li.active a{background:#B9CBD5;color:#f1f1f1}.alphabet-box .alphabet li.active a:hover{background:#B9CBD5;color:#f1f1f1}.alphabet-box .alphabet a{display:block;padding:0 12px}.alphabet-box .alphabet a:hover{color:#65342B}.alphabet-box select{display:none;width:210px;margin-left:10px}@media screen and (max-width:1165px){.alphabet-box .alphabet{line-height:30px}.alphabet-box .alphabet li{margin:0 1px}.alphabet-box .alphabet a{padding:0 11px}}@media screen and (max-width:999px){.alphabet-box .alphabet{display:none}.alphabet-box select{display:block}}.content-box{background:#ffffff;padding:10px;margin-bottom:10px}.content-box .title{font-family:"Roboto","Federo",Arial,sans-serif;font-size:24px;line-height:1.208;font-weight:700;position:relative;margin:8px 0 25px;padding:0 0 20px}.content-box .title span{color:#4e97f2}.content-box .title:after{content:"";position:absolute;bottom:0;left:0;width:50px;height:3px;background:#CFDBE2}.content-box blockquote{padding:0;border:none}.content-box p+.iframe{margin-top:30px}@media screen and (max-width:767px){.content-box .title{font-size:20px}}@media only screen and (max-width:1100px) and (min-width:999px){.content-box{background:#ffffff;padding:10px;margin-bottom:10px;width:680px}.content-box.static-page{background:#ffffff;padding:10px;margin-bottom:10px;width:100%}}.btn{display:inline-block;vertical-align:top;font-size:14px;line-height:20px;height:40px;padding:10px 27px;text-transform:uppercase;font-weight:700;color:#fff;background:#4e97f2}.btn:hover,.btn:focus{background:#ffae00;color:#fff}.btn:active,.btn:focus:active{background:#4e97f2;color:#fff}.btn i{margin-left:10px}.btn-row{text-align:center}.search{max-width:728px;margin:5px auto 40px}.search h2{font-size:24px;line-height:1.2;text-align:center;font-weight:700;margin:0 0 17px;color:#818181}.search-holder{position:relative}.search-holder button{position:absolute;width:30px;height:30px;top:50%;left:10px;text-align:center;background:none;border:none;padding:0;margin:0;color:#4e97f2;font-size:20px;line-height:30px;margin-top:-15px;display:none}.search-holder button i{line-height:30px}.search #search{display:block;width:100%;border:2px solid #dadada;border-radius:4px;height:44px;color:#363636;font-size:24px;line-height:30px;font-weight:700;padding:5px 15px;outline:none}.search a{color:#2C75A1}@media screen and (max-width:1100px){.search{max-width:468px}}@media screen and (max-width:767px){.search{margin-top:0}.search-holder button{display:block}.search h2{display:none}.search #search{padding-left:44px}}.search.no-result{margin:0}.words{padding:25px 0}.words-list{padding:0;list-style:none;margin:0 0 40px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:50px;-moz-column-gap:50px;column-gap:50px}.words-list>li{list-style-type:none}.words-list li{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;width:100%}.words-list li:first-of-type:last-of-type{display:inline-block}@media screen and (max-width:767px){.words{padding-bottom:10px}.words-list{margin:0 0 20px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;font-size:14px}}@media screen and (max-width:420px){.words{padding-bottom:10px}.words-list{margin:0 0 20px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;font-size:12px}}.pagination{margin:0;padding:0;list-style:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px}.pagination>li{list-style-type:none}.pagination li{margin:0 7px}.pagination li.current span,.pagination li.current a{display:block;width:36px;background:#B9CBD5;color:#f1f1f1;text-align:center}.pagination li.current span:hover,.pagination li.current a:hover{background:#B9CBD5;color:#f1f1f1}.pagination a:hover{color:#65342B}.pagination span{color:#9b6459}.pagination .dots{color:#9b6459}@media screen and (max-width:767px){.pagination li{margin:0 5px}}.word-details{padding:10px 0 5px;margin-bottom:20px}.word-details .word-holder{position:relative;padding:0 145px;margin:0 0 22px}.word-details .word-holder h2{font-family:"Federo","Roboto" Arial,sans-serif;font-size:40px;line-height:1;margin:0;color:#4e97f2;text-align:center}.word-details .btn-prev,.word-details .btn-next{position:absolute;left:0;top:50%;margin-top:-26px;height:52px;border:2px solid #4e97f2;padding:2px 0 0 50px;text-transform:uppercase;width:140px;color:#363636;font-weight:700;font-size:12px;line-height:20px}.word-details .btn-prev span,.word-details .btn-next span{display:block;color:#4e97f2;font-size:18px;text-transform:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.word-details .btn-prev i,.word-details .btn-next i{position:absolute;left:17px;top:50%;margin-top:-10px;font-size:18px;line-height:20px;color:#4e97f2}.word-details .btn-prev:hover,.word-details .btn-next:hover{background:#4e97f2;color:#bfdbfd}.word-details .btn-prev:hover span,.word-details .btn-next:hover span{color:#fff}.word-details .btn-prev:hover i,.word-details .btn-next:hover i{color:#fff}.word-details .btn-next{padding:2px 50px 0 0;left:auto;right:0;text-align:right}.word-details .btn-next i{left:auto;right:17px}.word-details .word-transcription{font-family:"Open Sans","Roboto" Arial,sans-serif}.word-details .word-transcription:after{content:"";display:block}.word-details .word-transcription .social-share{float:right}@media screen and (max-width:1100px){.word-details .word-holder h2{font-size:36px}}@media screen and (max-width:999px){.alphabet-box .alphabet{display:none}.alphabet-box select{display:block}.word-details .word-holder h2{font-size:33px}}@media screen and (max-width:767px){.word-details .word-holder{padding:0 0 65px;margin-bottom:30px}.word-details .word-holder h2{font-size:30px}.word-details .word-holder .btn-prev,.word-details .word-holder .btn-next{top:auto;bottom:0}.word-details .word-transcription{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.word-details .word-transcription .social-share{-webkit-order:1;-ms-flex-order:1;order:1;margin-bottom:20px;float:none}.word-details .word-transcription .transcription{-webkit-order:2;-ms-flex-order:2;order:2;text-align:center}}@media screen and (max-width:500px){.word-details .word-holder h2{font-size:28px}}.social-share{margin:0;padding:0;list-style:none;display:-webkit-flex;display:-ms-flexbox;display:flex}.social-share>li{list-style-type:none}.social-share li{margin:0 0 0 10px}.social-share a{color:#fff;padding:0 12px;height:28px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.social-share a.cite{background-color:#fbbe3b;position:relative}.social-share a.google{background:#fa5b4b}.social-share a.twitter{background:#28cde0}.social-share a.facebook{background:#3a98da}.social-share .icon{font-size:15px;line-height:20px;margin-right:8px}.social-share .icon.icon-google-plus{font-size:20px;line-height:20px}@media screen and (max-width:767px){.social-share{-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:0 10px 10px 0}.social-share li{margin:0 5px}.social-share a span{display:none}}@media screen and (max-width:479px){.social-share a{padding:0 5px}}#EBwidget_citation{display:none}.cite #EBwidget,.results-share-quote #EBwidget+div{position:absolute!important;top:0;left:0;bottom:0;right:0;background:transparent}#EBwidget #EBwidget_button{background-image:none!important}.contact-form input,.contact-form textarea{display:block;border:1px solid #abb4d8;border-radius:5px;padding:17px 20px;width:100%;font-size:16px;line-height:24px;color:#4c4c4c}#contact-submit{background-color:#fbbe3b}.footer-banner a{color:#ebeef5;font-size:14px;line-height:34px;border:1px solid #fbbe3b;border-radius:5px;padding:7px 11px;display:block}.footer-banner img{float:left;margin:0 15px 0 0}.footer-banner span{display:inline-block;vertical-align:top;padding:7px 0 0;color:#fbbe3b}.footer-banner strong{font:700 18px/14px 'Open Sans Condensed',sans-serif;display:block;color:#fbbe3b;transition:all 350ms}.footer-banner a:hover{background-color:#1a66c5}#developer{display:block;top:3px;right:30px;height:50px;width:138px;background:url(../images/logo-dev-pro.png) no-repeat 0 0}.word-holder h2{text-align:center}.word-transcription{float:right}@media screen and (max-width:800px){.mgid_index{display:none}.mgid_resource{display:none}}.current-selection{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.highlight-word{color:#9b6459}.highlight-word:hover,.highlight-word:focus{color:#9b6459}.speech{color:#5b5b5b}55 </style>56 <meta charset="utf-8">57 <meta content="width=device-width, initial-scale=1.0 " name="viewport">58 <title>59 Check what does From mean | Funkandwagnalls.com60 </title>61 <meta content="See dictionary definition of From at Funkandwagnalls.com. On our website you can check the various meanings of From with usage examples!" name="description">62 <meta content="From, From definition, define From, From meaning, what does From mean" name="keywords">63 <meta content="all" name="robots">64 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">65 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">66 </head>67 <body>68 <div class="page">69 <header class="header">70 <div class="header-holder">71 <a>72 <h1 class="logo">73 Funk And Wagnalls.com74 </h1>75 </a>76 </div>77 </header>78 <div class="main">79 <div class="main-holder">80 <div class="mainContent">81 <div class="contentWrapper">82 <aside class="sideLeft">83 <div class="aside-box hidden-from-tablet" id="leftads">84 <div class="side_block block_day">85 <h2>86 Nearby words87 </h2>88 <ul class="nearby-list">89 <li>90 <a>91 Fro92 </a>93 </li>94 <li>95 <a>96 frock97 </a>98 </li>99 <li>100 <a>101 frog102 </a>103 </li>104 <li>105 <a>106 frolic107 </a>108 </li>109 </ul>110 </div>111 </div>112 </aside>113 <div class="content">114 <div class="contentTop">115 <div class="content-box">116 <div class="search">117 <form action="#" class="search-form" onsubmit="return false;">118 <select id="search-layer" style="display: none;">119 <option selected value="/">120 </option>121 </select>122 <h2>123 Type your word below and124 <a onclick="checkSearch('search'); return false;">125 click here126 </a>127 </h2>128 <div class="search-holder">129 <input id="search" type="text">130 <button>131 <a onclick="checkSearch('search'); return false;">132 <i class="icon-search">133 </i>134 </a>135 </button>136 </div>137 </form>138 </div>139 </div>140 </div>141 <div class="contentMiddle" xmlns="">142 <div class="content-box">143 <div class="word-transcription">144 <ul class="social-share">145 <li>146 <a class="twitter" onclick="window.open('https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.funkandwagnalls.com%2Ffrom&text=See dictionary definition of FROM','','Width=600, Height=450, Left=400, Top=300, Toolbar=no, Location=no, Directories=no, Status=no, Scrollbars=no, Resizable=no'); return false">147 <i class="icon icon-twitter">148 </i>149 Tweet150 </a>151 </li>152 <li>153 <a class="facebook" onclick="window.open('https://www.facebook.com/share.php?u=https://www.funkandwagnalls.com/from&amp;title=funkandwagnalls.com is your online dictionary','','Width=500, Height=300, Left=400, Top=300, Toolbar=no, Location=no, Directories=no, Status=no, Scrollbars=no, Resizable=no'); return false">154 <i class="icon icon-facebook">155 </i>156 Share157 </a>158 </li>159 </ul>160 </div>161 <dl>162 <dt>163 <h2>164 What does the word165 <span class="highlight-word">166 From167 </span>168 mean?169 </h2>170 </dt>171 <dd>172 <ul>173 <em>174 <h4>175 Part of speech:176 <span class="speech">177 preposition178 </span>179 </h4>180 </em>181 <li>182 <p>183 <a id="def">184 Out185 </a>186 <a id="def">187 of188 </a>189 ; 190 starting191 <a id="def">192 at193 </a>194 ;195 <a id="def">196 beginning197 </a>198 <a id="def">199 with200 </a>201 ;202 <a id="def">203 after204 </a>205 .206 </p>207 </li>208 <em>209 <h4>210 Part of speech:211 <span class="speech">212 preposition213 </span>214 </h4>215 </em>216 <li>217 <p>218 <a id="def">219 In220 </a>221 a222 <a id="def">223 relation224 </a>225 <a id="def">226 of227 </a>228 <a id="def">229 contrast230 </a>231 <a id="def">232 with233 </a>234 ;235 <a id="def">236 as237 </a>238 from239 <a id="def">240 grave241 </a>242 to 243 gay.244 </p>245 </li>246 <em>247 <h4>248 Part of speech:249 <span class="speech">250 preposition251 </span>252 </h4>253 </em>254 <li>255 <p>256 Having257 <a id="def">258 as259 </a>260 a261 <a id="def">262 cause263 </a>264 <a id="def">265 or266 </a>267 <a id="def">268 origin269 </a>270 ;271 <a id="def">272 by273 </a>274 means275 <a id="def">276 of277 </a>278 ;279 <a id="def">280 due281 </a>282 to.283 </p>284 </li>285 </ul>286 </dd>287 </dl>288 </div>289 <div class="content-box">290 <div class="mask">291 <div class="mask-holder">292 <h2>293 Usage examples for294 <span class="highlight-word">295 From296 </span>297 </h2>298 <ol>299 <li>300 <blockquote>301 <a>302 Where303 </a>304 <a>305 he306 </a>307 <a>308 had309 </a>310 <a>311 come312 </a>313 <b>314 from315 </b>316 , 317 I 318 don't319 <a>320 know321 </a>322 .323 <cite>324 – The-Burgess-Animal-Book-for-Children by Burgess, Thornton W. (Thornton Waldo)325 </cite>326 </blockquote>327 </li>328 <li>329 <blockquote>330 Levens 331 is332 <b>333 from334 </b>335 Leofwin.336 <cite>337 – Story of My Life, volumes 1-3 by Augustus J. C. Hare338 </cite>339 </blockquote>340 </li>341 <li>342 <blockquote>343 <a>344 But345 </a>346 <a>347 it348 </a>349 <a>350 got351 </a>352 <a>353 away354 </a>355 <b>356 from357 </b>358 <a>359 him360 </a>361 .362 <cite>363 – Angel Island by Inez Haynes Gillmore364 </cite>365 </blockquote>366 </li>367 </ol>368 </div>369 </div>370 </div>371 </div>372 </div>373 <aside class="sideRight">374 <div class="aside-box">375 <h3>376 Word of the day377 </h3>378 <h2>379 <span itemprop="name">380 wishful381 </span>382 </h2>383 <ul>384 <li>385 <span itemprop="description">386 Full of longing (for).387 </span>388 </li>389 </ul>390 <a class="more" itemprop="relatedLink">391 View More392 </a>393 </div>394 </aside>395 </div>396 </div>397 <div class="mainBottom">398 </div>399 </div>400 </div>401 <footer class="footer">402 <div class="footer-holder">403 <div class="footer-left">404 <address>405 DomainOptions, Inc., 7260 W Azure Dr Ste 140-829, Las Vegas, NV 89130 USA.406 </address>407 <p>408 <span>409 email:410 <a>411 [EMAIL REDACTED]412 </a>413 </span>414 </p>415 <ul class="social-networks">416 <li>417 <a onclick="window.open('https://www.facebook.com/share.php?u=https://www.funkandwagnalls.com/from&amp;title=funkandwagnalls.com is your online dictionary','','Width=500, Height=300, Left=400, Top=300, Toolbar=no, Location=no, Directories=no, Status=no, Scrollbars=no, Resizable=no'); return false">418 <i class="icon icon-facebook">419 </i>420 </a>421 </li>422 <li>423 <a onclick="window.open('http://twitter.com/intent/tweet?Your%20online%20dictionary%20&url=http://www.funkandwagnalls.com','','Width=600, Height=450, Left=400, Top=300, Toolbar=no, Location=no, Directories=no, Status=no, Scrollbars=no, Resizable=no'); return false">424 <i class="icon icon-twitter">425 </i>426 </a>427 </li>428 </ul>429 </div>430 <div class="footer-right">431 <nav class="footer-nav">432 <ul>433 <li>434 <a rel="nofollow">435 Home436 </a>437 </li>438 <li>439 <a rel="nofollow">440 Privacy Policy441 </a>442 </li>443 </ul>444 </nav>445 <p>446 © 2012-2023 DomainOptions, Inc.447 </p>448 <p>449 Trademarks belong to their respective owners. All rights reserved.450 </p>451 </div>452 </div>453 </footer>454 </div>455 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">456 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">457 </div>458 </ins>459 </body>460</html>461