SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html prefix="og: http://ogp.me/ns#">3 <head>4 <style>5 /* ==== INCLUDE: /css/resp-base.css ==== */6 7/*8 HTML5 Reset :: style.css9 ----------------------------------------------------------10 We have learned much from/been inspired by/taken code where offered from:11 Eric Meyer :: http://meyerweb.com12 HTML5 Doctor :: http://html5doctor.com13 and the HTML5 Boilerplate :: http://html5boilerplate.com14-------------------------------------------------------------------------------*/15 16/* Let's default this puppy out17-------------------------------------------------------------------------------*/18 19html, body, body div, span, object, iframe, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {20 margin: 0;21 padding: 0;22 border: 0;23 font-size: 11pt;24 font-weight: normal;25 font-family: sans-serif;26 vertical-align: baseline;27 background: transparent;28}29 30article, aside, figure, footer, header, nav, section, details, summary {display: block;}31 32/* Handle box-sizing while better addressing child elements:33 http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */34html {35 box-sizing: border-box;36 scroll-behavior: smooth;37}38 39*,40*:before,41*:after {42 box-sizing: inherit;43}44 45/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */46 47/* Responsive images and other embedded objects */48/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */49img,50object,51embed {max-width: 100%; height: auto;}52 53/*54 Note: keeping IMG here will cause problems if you're using foreground images as sprites.55 In fact, it *will* cause problems with Google Maps' controls at small size.56 If this is the case for you, try uncommenting the following:57#map img {58 max-width: none;59}60*/61 62/* force a vertical scrollbar to prevent a jumpy page */63html {overflow-y: scroll;}64 65/* we use a lot of ULs that aren't bulleted.66 you'll have to restore the bullets within content,67 which is fine because they're probably customized anyway */68/* ul {list-style: none;} */69 70blockquote, q {quotes: none;}71 72blockquote:before,73blockquote:after,74q:before,75q:after {content: ''; content: none;}76 77a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}78 79del {text-decoration: line-through;}80 81abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}82 83/* tables still need cellspacing="0" in the markup */84table {border-collapse: collapse; border-spacing: 0;}85th {font-weight: bold; vertical-align: bottom;}86td {font-weight: normal; vertical-align: top;}87 88hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}89 90input, select {vertical-align: middle;}91 92pre {93 white-space: pre; /* CSS2 */94 white-space: pre-wrap; /* CSS 2.1 */95 white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */96 word-wrap: break-word; /* IE */97}98 99input[type="radio"] {vertical-align: text-bottom;}100input[type="checkbox"] {vertical-align: bottom;}101.ie7 input[type="checkbox"] {vertical-align: baseline;}102.ie6 input {vertical-align: text-bottom;}103 104select, input, textarea {font: 99% sans-serif;}105 106table {font-size: inherit; font: 100%;}107 108small {font-size: 85%;}109 110strong {font-weight: bold;}111 112td, td img {vertical-align: top;}113 114/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */115sub, sup {font-size: 75%; line-height: 0; position: relative;}116sup {top: -0.5em;}117sub {bottom: -0.25em;}118 119/* standardize any monospaced elements */120pre, code, kbd, samp {font-family: monospace, sans-serif;}121 122/* hand cursor on clickable elements */123.clickable,124label,125input[type=button],126input[type=submit],127input[type=file],128button {cursor: pointer;}129 130/* Webkit browsers add a 2px margin outside the chrome of form elements */131button, input, select, textarea {margin: 0;}132 133/* make buttons play nice in IE */134button,135input[type=button] {width: auto; overflow: visible;}136 137/* scale images in IE7 more attractively */138.ie7 img {-ms-interpolation-mode: bicubic;}139 140/* prevent BG image flicker upon hover141 (commented out as usage is rare, and the filter syntax messes with some pre-processors)142.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}143*/144 145/* let's clear some floats */146.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }147.clearfix:after { clear: both; }148.clearfix { zoom: 1; }149 150 151/* mrp additions */152 153.provider-attribution {154 155 156}157 158.mrp-crea-attribution {159 margin: 0 20px;160 padding: 10px 0 20px 0;161 font-size: 10px;162 font-family: verdana;163 text-align: left;164}165 166.mrp-crea-attribution.region-DDF {167 text-align: center;168}169 170.mrp-crea-attribution * {171 font-size: 0.8rem;172}173 174.mrp-crea-attribution {175 max-width: 800px;176 margin: 0 auto;177}178 179.mrp-crea-attribution hr {180 display: none;181}182 183 184.page-footer-copyright {185 186 text-align: center;187 padding: 20px 0;188 font-size: 11px;189}190 191.page-footer-copyright a {192 font-weight: bold;193}194 195.quick-message {196 padding: 20px 30px;197 background-color: black;198 opacity: 0.8;199 border-radius: 10px;200 color: white;201 font-weight: bold;202 font-family: sans-serif;203 text-align: center;204 205 position: fixed;206 top: 50%;207 left: 50%;208 -ms-transform: translate( -50%, -50% ); 209 -webkit-transform: translate( -50%, -50% ); 210 -moz-transform: translate( -50%, -50% ); 211 transform: translate( -50%, -50% ); 212}213 214.quick-message.fade {215 opacity: 0;216 -ie-transition: opacity 1s;217 -moz-transition: opacity 1s;218 -webkit-transition: opacity 1s;219 transition: opacity 1s;220}221 222body > .html-layout{223 -webkit-transition: transform 500ms ease-in-out;224 -moz-transition: transform 500ms ease-in-out;225 -ms-transition: transform 500ms ease-in-out;226 -o-transition: transform 500ms ease-in-out;227 transition: transform 500ms ease-in-out;228}229 230html.mrp-idx-on .mrp-sidebar-tab {231 display: none;232}233 234 235@media (max-width: 650px) {236 237 body #content-well {238 width: 100%;239 }240 241 .mrp-sidebar.mrp-sidebar-left {242 position: absolute;243 position: fixed;244 left: 0px;245 top: 0;246 -moz-transform: translate(-110%,0); 247 -webkit-transform: translate(-110%,0); 248 transform: translate(-110%,0);249 }250 251 .mrp-sidebar.mrp-sidebar-right {252 position: absolute;253 position: fixed;254 right: 0px;255 top: 0;256 -moz-transform: translate(110%,0); 257 -webkit-transform: translate(110%,0); 258 transform: translate(110%,0);259 }260 261 .mrp-sidebar.right.on {262 -moz-transform: translate(0,0); 263 -webkit-transform: translate(0,0); 264 transform: translate(0,0);265 }266 267 268 .mrp-sidebar-tab {269 position: fixed;270 top: 50%;271 background-color: black;272 color: white;273 font: normal normal normal 14px/1 FontAwesome;274 font-size: inherit;275 text-rendering: auto;276 -webkit-font-smoothing: antialiased;277 padding: 10px 7px;278 border: 1px solid black;279 box-shadow: 0 0 5px #333;280 box-sizing: border-box;281 cursor: pointer;282 z-index: 100;283 font-size: 20px;284 opacity: 0.7;285 286 -moz-transform: translate(0,-50%); 287 -webkit-transform: translate(0,-50%); 288 transform: translate(0,-50%);289 }290 .mrp-sidebar-tab.right:before {291 /* content: "\f0c9"; */292 content: "\f03b";293 }294 295 .mrp-sidebar-tab.right.on:before {296 /* content: "\f0c9"; */297 content: "\f03c";298 }299 .mrp-sidebar-tab.left:before {300 /* content: "\f0c9"; */301 content: "\f03c";302 }303 304 .mrp-sidebar-tab.left.on:before {305 /* content: "\f0c9"; */306 content: "\f03b";307 }308 309 .mrp-sidebar-tab.right {310 right: 0; 311 }312 313 .mrp-sidebar-tab.left {314 left: 0;315 }316 317 /*318 .mrp-sidebar:before {319 position: absolute;320 top: 0;321 background-color: black;322 color: white;323 content: "\f0c9";324 font: normal normal normal 14px/1 FontAwesome;325 font-size: inherit;326 text-rendering: auto;327 -webkit-font-smoothing: antialiased;328 padding: 10px;329 border: 1px solid black;330 box-shadow: 0 0 5px #333;331 box-sizing: border-box;332 cursor: pointer;333 }334 335 .mrp-sidebar.right:before {336 left: 0;337 -moz-transform: translate(-100%,0); 338 -webkit-transform: translate(-100%,0); 339 transform: translate(-100%,0);340 }341 */342}343 344/* ==== INCLUDE: /css/weblets/responsive/menu.css ==== */345 346/* menu responsive */347 348.mrp-weblet-menu {349 position: relative;350 z-index: 100;351}352 353.mrp-menu-resp-wrapper li {354 cursor: pointer;355}356.mrp-menu-resp-wrapper > ul {357 /* default is table */358 display: table;359}360.mrp-menu-resp-wrapper > ul > li {361 /* default is table view */362 display: table-cell;363}364 365.mrp-menu-resp-wrapper {366 box-sizing: border-box;367}368 369.mrp-menu-resp-wrapper * {370 box-sizing: border-box;371}372 373.mrp-menu-resp-wrapper ul,374.mrp-menu-resp-wrapper ul li {375 padding: 0;376 margin: 0;377 list-style-type: none;378 position: relative;379}380 381.mrp-menu-resp-wrapper li.has-sub {382 383 padding-right: 31px;384 cursor: pointer;385}386 387.mrp-menu-resp-wrapper span.chevron {388 389 position: absolute;390 display: block;391 right: 0px;392 top: 0px;393 height: 100%;394 width: 25px;395 background-color: #efefef;396 cursor: pointer;397 398 font: normal normal normal 14px/1 FontAwesome;399 font-size: inherit;400 text-rendering: auto;401 -webkit-font-smoothing: antialiased;402}403 404.mrp-menu-resp-wrapper span.chevron::after {405 position: absolute;406 top: 50%;407 left: 50%;408 transform: translate(-50%,-50%);409 opacity: 0.5;410}411 412.mrp-menu-resp-wrapper li > span.chevron::after {413 content: "\f067";414}415 416.mrp-menu-resp-wrapper li.on > span.chevron::after {417 content: "\f068";418}419 420.mrp-menu-resp-wrapper > ul { 421 width: 100%;422}423 424.mrp-menu-resp-wrapper > ul > li {425 padding: 3px 6px;426 border: 1px solid gray;427 box-sizing: border-box;428 position: relative;429}430 431.mrp-menu-resp-wrapper > ul ul {432 display: none;433}434 435.mrp-menu-resp-wrapper ul ul > li {436 display: none;437 min-width: 100px;438 border-bottom: 1px solid gray;439 padding: 3px 6px;440}441 442.mrp-menu-resp-wrapper ul ul > li:last-child {443 border-bottom: 0;444}445 446.mrp-menu-resp-wrapper li.on > ul > li {447 display: block;448}449 450.mrp-menu-resp-wrapper li.on > ul {451 position: absolute;452 left: 0;453 top: 100%;454 display: block;455 456 border: 1px solid gray;457 background-color: white;458 z-index: 1;459 box-shadow: 5px 5px 10px rgba(127,127,127,0.5);460}461 462.mrp-menu-resp-wrapper > ul > li.on.left > ul {463 left: auto;464 right: 0; 465}466 467.mrp-menu-resp-wrapper > ul ul > li.on > ul {468 left: calc(100% - 5px);469 top: 5px;470}471 472.mrp-menu-resp-wrapper > ul ul > li.on.left > ul {473 right: calc(100% - 10px);474 left: auto;475 top: 5px;476}477 478.mrp-menu-resp-wrapper > ul.top > li > a { 479 white-space: nowrap;480}481 482.mrp-menu-resp-wrapper a {483 text-decoration: none;484 display: block;485}486 487.mrp-menu-resp-wrapper li.has-sub a {488 display: inline-block;489}490 491.mrp-menu-resp-wrapper li.on a {492 493}494 495.mrp-menu-resp-wrapper ul.on > li {496 opacity: 0.7;497}498 499.mrp-menu-resp-wrapper ul.on > li.on {500 opacity: 1.0;501}502 503 504@media (min-width: 400px) {505 /* flex-box */506 .mrp-menu-resp-wrapper > ul {507 display: flex;508 flex-direction: row;509 flex-flow: wrap;510 //justify-content: center;511 align-content: stretch;512 }513 514 515 .mrp-menu-resp-wrapper > ul > li {516 flex-grow: 1;517 }518 /* end of flex-box */519}520 521/* sidebar */522 523.mrp-sidebar .mrp-menu-resp-wrapper > ul {524 display: block;525}526 527.mrp-sidebar .mrp-menu-resp-wrapper ul > li {528 529 display: block;530 border: 0;531 border-bottom: 1px solid gray;532}533 534.mrp-sidebar .mrp-menu-resp-wrapper ul > li:first-child {535 border-top: 1px solid gray;536}537 538.mrp-sidebar .mrp-menu-resp-wrapper li.on.has-sub {539 padding-right: 6px;540}541 542.mrp-sidebar .mrp-menu-resp-wrapper ul.on > li.on {543 display: block;544}545 546.mrp-sidebar .mrp-menu-resp-wrapper li.on > ul {547 548 position: relative;549 left: auto;550 top: auto;551 box-shadow: none;552 margin-right: 30px;553 border: 0;554 border-left: 1px solid gray;555 border-right: 1px solid gray;556 margin-top: 5px;557 margin-bottom: 5px;558}559 560.mrp-sidebar .mrp-menu-resp-wrapper ul ul > li:last-child {561 border-bottom: 1px solid gray;562}563 564.mrp-sidebar .mrp-menu-resp-wrapper > ul ul > li.on > ul {565 left: auto;566 right: auto;567 top: auto;568}569 570.mrp-sidebar .mrp-menu-resp-wrapper > ul ul > li.on.left > ul {571 right: auto;572 right: auto;573 top: auto;574}575 576.mrp-sidebar .mrp-menu-resp-wrapper li.on > a {577 display: block;578 padding: 10px 6px;579}580 581 582@media (max-width: 400px) {583 584 .mrp-menu-resp-wrapper {585 overflow: hidden; /* to make it acquire height */586 }587 588 .mrp-menu-resp-wrapper .top-handle {589 clear: both;590 /* float: right; */591 float: left;592 display: block;593 margin: 10px 5px;594 padding: 10px;595 box-shadow: 0 0 10px rgba( 128,128,128,0.5 );596 font: normal normal normal 14px/1 FontAwesome;597 cursor: pointer;598 }599 600 .mrp-menu-resp-wrapper .top-handle:after {601 content: "\f0c9";602 }603 604 .mrp-menu-resp-wrapper > ul {605 display: none;606 }607 608 .mrp-menu-resp-wrapper .top-handle.on ~ ul {609 display: block;610 }611 612 .mrp-menu-resp-wrapper > ul {613 clear: both;614 }615 616 .mrp-menu-resp-wrapper ul > li {617 display: block;618 border: 0;619 border-bottom: 1px solid gray;620 }621 622 .mrp-menu-resp-wrapper ul > li:first-child {623 border-top: 1px solid gray;624 }625 626 .mrp-menu-resp-wrapper ul.on > li {627 /* display: none; */628 }629 630 .mrp-menu-resp-wrapper li.on.has-sub {631 padding-right: 6px;632 }633 634 .mrp-menu-resp-wrapper ul.on > li.on {635 display: block;636 /*637 padding: 0;638 margin: 0;639 border: 0;640 */641 }642 643 .mrp-menu-resp-wrapper li.on > ul {644 645 position: relative;646 left: auto;647 top: auto;648 box-shadow: none;649 margin-right: 30px;650 border: 0;651 border-left: 1px solid gray;652 border-right: 1px solid gray;653 margin-top: 5px;654 margin-bottom: 5px;655 }656 657 .mrp-menu-resp-wrapper ul ul > li:last-child {658 border-bottom: 1px solid gray;659 }660 661 .mrp-menu-resp-wrapper > ul ul > li.on > ul {662 left: auto;663 right: auto;664 top: auto;665 }666 667 .mrp-menu-resp-wrapper > ul ul > li.on.left > ul {668 right: auto;669 right: auto;670 top: auto;671 }672 673 .mrp-menu-resp-wrapper li.on > a {674 display: block;675 padding: 10px 6px;676 } 677}678 679/* ==== INCLUDE: /css/weblets/blog.css ==== */680 681.weblet_blog-navigation, 682.weblet_blog-navigation-sa 683{684 margin: 0;685 /* height: 300px; */686 padding: 5px;687 z-index: 100;688 text-align: left;689 position: relative;690 /* background-color: white; */691}692 693.weblet_blog-no-entries {694 text-align: center;695 padding: 50px 0;696}697 698.weblet_blog-navigation699{700 width: 150px; 701 border: 1px dotted gray;702}703 704.weblet_blog-page-prev {705 float: left; 706}707 708.weblet_blog-navigation-heading, 709.weblet_blog-navigation-sa-heading 710{711 margin: 0px;712 margin-bottom: 3px;713 margin-top: 15px;714 padding-left: 18px;715 /*background: url('img/weblets/blog/full-entry.gif' );*/716 background-position: center left;717 background-repeat: no-repeat;718 font-weight: bold;719}720 721.weblet_blog-navigation-divider, 722.weblet_blog-navigation-sa-divider723{724 margin-top: 11px;725 margin-bottom: 10px;726 height: 1px;727 border-bottom: 1px dotted gray;728}729.weblet_blog-page-nav730{731 /*margin-top: 20px;*/732 text-align: right;733 padding: 20px 0;734}735 736.weblet_blog-page-nav a.weblet_blog-page-prev,737.weblet_blog-page-nav a.weblet_blog-page-next738{739 padding-right: 10px;740}741 742.weblet_blog-page-nav a.weblet_blog-page-prev span,743.weblet_blog-page-nav a.weblet_blog-page-next span744{745 /*font-size: 130%;*/746}747 748.weblet_blog-entry-heading 749{750 margin: 0px;751 padding: 0px;752 font-weight: bold;753 margin-top: 3px;754 margin-bottom: 3px;755 text-decoration: none;756 text-align: left;757}758 759.weblet_blog-main-image-link {760 display: block;761 overflow: hidden;762 position: relative;763}764 765h3.weblet_blog-entry-heading 766{767 border: 0; 768}769 770.weblet_blog-entry-heading-text 771{772 /* padding-left: 18px;773 background: url('img/weblets/blog/full-entry.gif' );774 background-position: top left;775 background-repeat: no-repeat; */776}777 778.weblet_blog-date-friendly {779 font-weight: bold;780}781 782.weblet_blog-entry-author {783 font-size: smaller;784}785 786.weblet_blog-entry-labels {787 font-size: smaller;788}789 790.weblet_blog-entry-text {791 margin-top: 10px;792}793 794.weblet_blog-entry-divider {795 margin-top: 11px;796 margin-bottom: 10px;797 height: 1px;798 border-bottom: 1px dotted gray;799 width: 350px;800}801 802.weblet_blog-entry-back-link {803 margin-top: 10px;804 margin-bottom: 10px;805}806 807.weblet_blog-comment-author {808 font-size: smaller;809}810 811.weblet_blog-comment-date-full {812 font-size: inherit;813}814 815.weblet_blog-comment-text {816 margin-top: 5px;817}818 819.weblet_blog-comment {820 margin-bottom: 20px;821}822 823.weblet_blog-comments-header,824.weblet_blog-comment-form-header {825 margin-top: 20px;826 padding-bottom: 5px;827 margin-bottom: 10px;828 border-bottom: 1px dotted gray;829 width: 350px;830 font-size: 120%;831 font-weight: bold;832}833 834.weblet_blog-comment-divider {835 margin-top: 11px;836 margin-bottom: 10px;837 height: 1px;838 border-bottom: 1px dotted gray;839 width: 350px;840}841 842.weblet_blog-entry-links843{844 margin-top: 10px; 845}846 847p.feedburnerFlareBlock848{849 margin-top: 10px;850}851 852p.feedburnerFlareBlock a853{854 font-weight: normal;855 font-size: 10px;856}857 858.weblet_blog-entry-comments-link, 859.weblet_blog-entry-post-comment-link 860{861 margin-right: 10px;862}863 864.weblet_blog-entry-permalink,865.weblet_blog-entry-comments-link {866 padding-left: 10px;867 border-left: 1px dotted gray;868}869 870.weblet_blog-entry-comments-link {871 padding-top: 10px;872 padding-bottom: 10px;873 display: inline-block;874}875 876.weblet_blog-more-link {877 text-align: right;878}879 880.weblet_blog-syndication-section {881 margin-top: 5px;882 margin-bottom: 5px;883 text-align: right;884}885 886.weblet_blog-syndication-section a {887 text-decoration: none;888}889 890.weblet_blog-syndication-section a img {891 vertical-align: middle;892}893 894.weblet_blog-syndication-section a span {895 vertical-align: middle;896 margin-left: 5px;897 margin-right: 5px;898}899 900.weblet_blog-category-section {901 margin-top: 10px;902 font-size: 8pt;903}904 905.weblet_blog-category-section .weblet_blog-category-heading {906 font-weight: bold; 907}908 909.retweet-button-container,910.facebook-button-container911{912 float: right;913 margin-left: 5px; 914}915 916.weblet_blog-sm-share-container917{918 position: relative;919 white-space: nowrap;920 height: 40px;921}922 923.weblet_blog-sm-share-container-inner924{925 position: absolute;926 left: 0;927 top: 10px; 928 width: 450px;929}930 931.weblet_blog-entry-image-container {932 max-width: 100%;933 position: relative;934}935 936.blog-entry-list .weblet_blog-entry-image-container {937 938 float: left;939 width: 40%;940 margin-right: 15px;941 z-index: 1;942 position: relative;943}944 945.blog-001 .weblet_blog-entry-image-container.missing-photo {946 display: none;947}948 949.blog-entry-list .new-listing .weblet_blog-entry-image-container.missing-photo,950.blog-entry-list .open-house .weblet_blog-entry-image-container.missing-photo,951.blog-entry-list .sold-listing .weblet_blog-entry-image-container.missing-photo {952 min-height: 160px;953}954 955.blog-entry-list .weblet_blog-entry-image-container.missing-photo:before {956 content: "";957 position: absolute;958 width: 100%;959 height: 100%;960 left: 0;961 top: 0;962 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M13.73,15L9.83,21.76C10.53,21.91 11.25,22 12,22C14.4,22 16.6,21.15 18.32,19.75L14.66,13.4M2.46,15C3.38,17.92 5.61,20.26 8.45,21.34L12.12,15M8.54,12L4.64,5.25C3,7 2,9.39 2,12C2,12.68 2.07,13.35 2.2,14H9.69M21.8,10H14.31L14.6,10.5L19.36,18.75C21,16.97 22,14.6 22,12C22,11.31 21.93,10.64 21.8,10M21.54,9C20.62,6.07 18.39,3.74 15.55,2.66L11.88,9M9.4,10.5L14.17,2.24C13.47,2.09 12.75,2 12,2C9.6,2 7.4,2.84 5.68,4.25L9.34,10.6L9.4,10.5Z' /%3E%3C/svg%3E");963 background-repeat: no-repeat;964 background-position: center center;965 background-size: 80px 80px;966 color: #999;967}968 969.weblet_blog-entry-image-container > img.weblet_blog-entry-image {970 max-width: 100%;971}972 973.twitter-share-button974{975 margin-right: 10px; 976}977 978.weblet_blog-sm-share-container .weblet_blog-sm-share-item979{980 float: left;981 margin-right: 20px;982}983 984.weblet_mobile-blog-sm-share-container .weblet_mobile--sm-share-item985{986 float: left;987 margin-right: 20px;988}989 990.weblet_mobile-blog-sm-share-container div{991 margin-right:10px;992 margin-left:10px;993 line-height:9px;994}995 996.weblet_mobile-blog-sm-share-container div:first-child{997 margin-left:0;998}999 1000.weblet_mobile-blog-sm-share-container div:last-child{1001 margin-right:0;1002}1003 1004.weblet_mobile-blog-sm-share-container a{1005 margin-right:10px;1006}1007 1008.listing-details-link-section {1009 margin: 10px 0 10px 0;1010}1011 1012.listing-open-house-text-section {1013 margin-top: 10px;1014}1015 1016.listing-description-section {1017 margin-top: 10px;1018}1019 1020.listing-blog-post {1021}1022 1023.weblet_blog-entry-text {1024 overflow: hidden;1025 position: relative;1026}1027 1028.weblet_blog-entry-text img, 1029.weblet_blog-entry-text object, 1030.weblet_blog-entry-text embed {1031 1032 max-width: 100%;1033 height: auto;1034}1035 1036.listing-banner {1037 color: #fff;1038 display: inline-block;1039 width: 100%;1040 font-size: 13pt;1041 padding: 2px 6px;1042 transform: translate(0%, 0%) rotate(-45deg);1043 text-align: center;1044 position: absolute;1045 top: 43px;1046 left: -45px;1047 z-index: 10;1048 width: 210px;1049 overflow: hidden;1050 font-weight: bold;1051}1052 1053.listing-banner:before {1054 content: attr(data-banner) " ";1055}1056 1057.weblet_blog-entry-author-photo img {1058 border: 0;1059 width: 50px;1060}1061 1062h2.weblet_blog-entry-heading a span {1063 font-size: 120%;1064}1065 1066h2.weblet_blog-entry-heading a {1067 text-decoration: none;1068}1069 1070.weblet_blog-entry-author-section span {1071 opacity: 0.8;1072 font-size: smaller;1073}1074 1075.weblet_blog-entry-labels-section * {1076 opacity: 0.8;1077 font-size: smaller;1078}1079 1080.weblet_blog-entry-share-section {1081 opacity: 0.8;1082 padding: 10px 0 5px 0;1083}1084 1085.weblet_blog-entry-share-section a {1086 color: inherit;1087 display: inline-block;1088}1089 1090.weblet_blog-entry-share-section .fa {1091 font-size: 150%;1092 display: inline-block;1093}1094 1095.weblet_blog-entry-full-link {1096 margin-top: 20px;1097}1098 1099.weblet_blog-blog-entry .submit-button:disabled {1100 opacity: 0.5;1101 cursor: default !important;1102}1103 1104.weblet_blog-blog-entry .form-success {1105 padding: 16px;1106 font-size: 1.2rem;1107 color: white;1108 /*border: 1px solid rgba(0,0,0,0.5);*/1109 background-color: rgba(34,139,34, 0.9 );1110}1111 1112.weblet_blog-blog-entry .mrp-dynamic-form .control-error {1113 padding: 8px;1114 color: white;1115 background-color: darkred;1116}1117 1118.weblet_blog-blog-entry .listing-banner {1119 display: none;1120}1121 1122 1123.weblet_blog-blog-entry .listing-banner.ready {1124 display: block;1125}1126 1127@media (max-width:660px) {1128 .blog-entry-list .weblet_blog-entry-image-container {1129 float: none;1130 width: 100%;1131 margin-right: 0px;1132 }1133}1134 1135/* list and entry */1136.weblet_blog-entry-image-container img {1137 width: 100%;1138}1139 1140/* list */1141.blog-entry-list .weblet_blog-main-image-link {1142 float: left;1143 width: 40%;1144 margin-right: 15px;1145}1146 1147.blog-entry-list .weblet_blog-entry-image-container {1148 float: none;1149 width: 100%;1150}1151 1152.blog-entry-list .weblet_blog-entry-text {1153 overflow: visible;1154}1155 1156/* ==== INCLUDE: /css/weblets/responsive/blog-resp.css ==== */1157 1158.weblet_blog-entry-text > [data-type]:not([data-type=""]),1159.weblet_blog-entry-text > p.block-p {1160 margin: 32px 0;1161}1162 1163[data-type="columns"] {1164 display: grid;1165 grid-template-columns: 1fr 1fr;1166 grid-gap: 24px;1167}1168 1169[data-type="columns"][data-flip="true"] > *:first-child {1170 order: 2;1171}1172 1173[data-type="columns"][data-ratio="ratio30_70"] {1174 grid-template-columns: 3fr 7fr;1175}1176 1177[data-type="columns"][data-ratio="ratio70_30"] {1178 grid-template-columns: 7fr 3fr;1179}1180 1181@media (max-width: 640px) {1182 [data-type="columns"],1183 [data-type="columns"][data-ratio="ratio70_30"],1184 [data-type="columns"][data-ratio="ratio30_70"] {1185 grid-template-columns: 1fr;1186 grid-gap: 0px;1187 }1188}1189 1190[data-type="block-image"] {1191 width: 100%;1192 height: inherit;1193}1194 1195[data-type="block-image"][data-block="true"] img {1196 width: 100%;1197}1198 1199[data-content="image-column"] {1200 display: flex;