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 xml:lang="en">3 <head>4 <style>5 /* -----------------------------------------------------------------------6 7 8 Blueprint CSS Framework 1.0.19 http://blueprintcss.org10 11 * Copyright (c) 2007-Present. See LICENSE for more info.12 * See README for instructions on how to use Blueprint.13 * For credits and origins, see AUTHORS.14 * This is a compressed file. See the sources in the 'src' directory.15 16----------------------------------------------------------------------- */17 18/* reset.css */19html {margin:0;padding:0;border:0;}20body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}21article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}22body {line-height:1.5;background:white;}23table {border-collapse:separate;border-spacing:0;}24caption, th, td {text-align:left;font-weight:normal;float:none !important;}25table, th, td {vertical-align:middle;}26blockquote:before, blockquote:after, q:before, q:after {content:'';}27blockquote, q {quotes:"" "";}28a img {border:none;}29:focus {outline:0;}30 31/* typography.css */32html {font-size:100.01%;}33body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}34h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}35h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}36h2 {font-size:2em;margin-bottom:0.75em;}37h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}38h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}39h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}40h6 {font-size:1em;font-weight:bold;}41h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}42p {margin:0 0 1.5em;}43.left {float:left !important;}44p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}45.right {float:right !important;}46p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}47a:focus, a:hover {color:#09f;}48a {color:#06c;text-decoration:underline;}49blockquote {margin:1.5em;color:#666;font-style:italic;}50strong, dfn {font-weight:bold;}51em, dfn {font-style:italic;}52sup, sub {line-height:0;}53abbr, acronym {border-bottom:1px dotted #666;}54address {margin:0 0 1.5em;font-style:italic;}55del {color:#666;}56pre {margin:1.5em 0;white-space:pre;}57pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}58li ul, li ol {margin:0;}59ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}60ul {list-style-type:disc;}61ol {list-style-type:decimal;}62dl {margin:0 0 1.5em 0;}63dl dt {font-weight:bold;}64dd {margin-left:1.5em;}65table {margin-bottom:1.4em;width:100%;}66th {font-weight:bold;}67thead th {background:#c3d9ff;}68th, td, caption {padding:4px 10px 4px 5px;}69tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}70tfoot {font-style:italic;}71caption {background:#eee;}72.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}73.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}74.hide {display:none;}75.quiet {color:#666;}76.loud {color:#000;}77.highlight {background:#ff0;}78.added {background:#060;color:#fff;}79.removed {background:#900;color:#fff;}80.first {margin-left:0;padding-left:0;}81.last {margin-right:0;padding-right:0;}82.top {margin-top:0;padding-top:0;}83.bottom {margin-bottom:0;padding-bottom:0;}84 85/* forms.css */86label {font-weight:bold;}87fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}88legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}89fieldset, #IE8#HACK {padding-top:1.4em;}90legend, #IE8#HACK {margin-top:0;margin-bottom:0;}91input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;color:#000;}92input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=email]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}93select {background-color:#fff;border-width:1px;border-style:solid;}94input[type=text], input[type=password], input[type=url], input[type=email], input.text, input.title, textarea, select {margin:0.5em 0;}95input.text, input.title {width:300px;padding:5px;}96input.title {font-size:1.5em;}97textarea {width:390px;height:250px;padding:5px;}98form.inline {line-height:3;}99form.inline p {margin-bottom:0;}100.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}101.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}102.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}103.success {background:#e6efc2;color:#264409;border-color:#c6d880;}104.info {background:#d5edf8;color:#205791;border-color:#92cae4;}105.error a, .alert a {color:#8a1f11;}106.notice a {color:#514721;}107.success a {color:#264409;}108.info a {color:#205791;}109 110/* grid.css */111.container {width:950px;margin:0 auto;}112.showgrid {background:url(src/grid.png);}113.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}114.last {margin-right:0;}115.span-1 {width:30px;}116.span-2 {width:70px;}117.span-3 {width:110px;}118.span-4 {width:150px;}119.span-5 {width:190px;}120.span-6 {width:230px;}121.span-7 {width:270px;}122.span-8 {width:310px;}123.span-9 {width:350px;}124.span-10 {width:390px;}125.span-11 {width:430px;}126.span-12 {width:470px;}127.span-13 {width:510px;}128.span-14 {width:550px;}129.span-15 {width:590px;}130.span-16 {width:630px;}131.span-17 {width:670px;}132.span-18 {width:710px;}133.span-19 {width:750px;}134.span-20 {width:790px;}135.span-21 {width:830px;}136.span-22 {width:870px;}137.span-23 {width:910px;}138.span-24 {width:950px;margin-right:0;}139input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}140input.span-1, textarea.span-1 {width:18px;}141input.span-2, textarea.span-2 {width:58px;}142input.span-3, textarea.span-3 {width:98px;}143input.span-4, textarea.span-4 {width:138px;}144input.span-5, textarea.span-5 {width:178px;}145input.span-6, textarea.span-6 {width:218px;}146input.span-7, textarea.span-7 {width:258px;}147input.span-8, textarea.span-8 {width:298px;}148input.span-9, textarea.span-9 {width:338px;}149input.span-10, textarea.span-10 {width:378px;}150input.span-11, textarea.span-11 {width:418px;}151input.span-12, textarea.span-12 {width:458px;}152input.span-13, textarea.span-13 {width:498px;}153input.span-14, textarea.span-14 {width:538px;}154input.span-15, textarea.span-15 {width:578px;}155input.span-16, textarea.span-16 {width:618px;}156input.span-17, textarea.span-17 {width:658px;}157input.span-18, textarea.span-18 {width:698px;}158input.span-19, textarea.span-19 {width:738px;}159input.span-20, textarea.span-20 {width:778px;}160input.span-21, textarea.span-21 {width:818px;}161input.span-22, textarea.span-22 {width:858px;}162input.span-23, textarea.span-23 {width:898px;}163input.span-24, textarea.span-24 {width:938px;}164.append-1 {padding-right:40px;}165.append-2 {padding-right:80px;}166.append-3 {padding-right:120px;}167.append-4 {padding-right:160px;}168.append-5 {padding-right:200px;}169.append-6 {padding-right:240px;}170.append-7 {padding-right:280px;}171.append-8 {padding-right:320px;}172.append-9 {padding-right:360px;}173.append-10 {padding-right:400px;}174.append-11 {padding-right:440px;}175.append-12 {padding-right:480px;}176.append-13 {padding-right:520px;}177.append-14 {padding-right:560px;}178.append-15 {padding-right:600px;}179.append-16 {padding-right:640px;}180.append-17 {padding-right:680px;}181.append-18 {padding-right:720px;}182.append-19 {padding-right:760px;}183.append-20 {padding-right:800px;}184.append-21 {padding-right:840px;}185.append-22 {padding-right:880px;}186.append-23 {padding-right:920px;}187.prepend-1 {padding-left:40px;}188.prepend-2 {padding-left:80px;}189.prepend-3 {padding-left:120px;}190.prepend-4 {padding-left:160px;}191.prepend-5 {padding-left:200px;}192.prepend-6 {padding-left:240px;}193.prepend-7 {padding-left:280px;}194.prepend-8 {padding-left:320px;}195.prepend-9 {padding-left:360px;}196.prepend-10 {padding-left:400px;}197.prepend-11 {padding-left:440px;}198.prepend-12 {padding-left:480px;}199.prepend-13 {padding-left:520px;}200.prepend-14 {padding-left:560px;}201.prepend-15 {padding-left:600px;}202.prepend-16 {padding-left:640px;}203.prepend-17 {padding-left:680px;}204.prepend-18 {padding-left:720px;}205.prepend-19 {padding-left:760px;}206.prepend-20 {padding-left:800px;}207.prepend-21 {padding-left:840px;}208.prepend-22 {padding-left:880px;}209.prepend-23 {padding-left:920px;}210.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}211.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}212.pull-1 {margin-left:-40px;}213.pull-2 {margin-left:-80px;}214.pull-3 {margin-left:-120px;}215.pull-4 {margin-left:-160px;}216.pull-5 {margin-left:-200px;}217.pull-6 {margin-left:-240px;}218.pull-7 {margin-left:-280px;}219.pull-8 {margin-left:-320px;}220.pull-9 {margin-left:-360px;}221.pull-10 {margin-left:-400px;}222.pull-11 {margin-left:-440px;}223.pull-12 {margin-left:-480px;}224.pull-13 {margin-left:-520px;}225.pull-14 {margin-left:-560px;}226.pull-15 {margin-left:-600px;}227.pull-16 {margin-left:-640px;}228.pull-17 {margin-left:-680px;}229.pull-18 {margin-left:-720px;}230.pull-19 {margin-left:-760px;}231.pull-20 {margin-left:-800px;}232.pull-21 {margin-left:-840px;}233.pull-22 {margin-left:-880px;}234.pull-23 {margin-left:-920px;}235.pull-24 {margin-left:-960px;}236.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}237.push-1 {margin:0 -40px 1.5em 40px;}238.push-2 {margin:0 -80px 1.5em 80px;}239.push-3 {margin:0 -120px 1.5em 120px;}240.push-4 {margin:0 -160px 1.5em 160px;}241.push-5 {margin:0 -200px 1.5em 200px;}242.push-6 {margin:0 -240px 1.5em 240px;}243.push-7 {margin:0 -280px 1.5em 280px;}244.push-8 {margin:0 -320px 1.5em 320px;}245.push-9 {margin:0 -360px 1.5em 360px;}246.push-10 {margin:0 -400px 1.5em 400px;}247.push-11 {margin:0 -440px 1.5em 440px;}248.push-12 {margin:0 -480px 1.5em 480px;}249.push-13 {margin:0 -520px 1.5em 520px;}250.push-14 {margin:0 -560px 1.5em 560px;}251.push-15 {margin:0 -600px 1.5em 600px;}252.push-16 {margin:0 -640px 1.5em 640px;}253.push-17 {margin:0 -680px 1.5em 680px;}254.push-18 {margin:0 -720px 1.5em 720px;}255.push-19 {margin:0 -760px 1.5em 760px;}256.push-20 {margin:0 -800px 1.5em 800px;}257.push-21 {margin:0 -840px 1.5em 840px;}258.push-22 {margin:0 -880px 1.5em 880px;}259.push-23 {margin:0 -920px 1.5em 920px;}260.push-24 {margin:0 -960px 1.5em 960px;}261.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}262div.prepend-top, .prepend-top {margin-top:1.5em;}263div.append-bottom, .append-bottom {margin-bottom:1.5em;}264.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}265hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;}266hr.space {background:#fff;color:#fff;visibility:hidden;}267.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}268.clearfix, .container {display:block;}269.clear {clear:both;}270 271 272/* -----------------------------------------------------------------------273 274 275 Blueprint CSS Framework 1.0.1276 http://blueprintcss.org277 278 * Copyright (c) 2007-Present. See LICENSE for more info.279 * See README for instructions on how to use Blueprint.280 * For credits and origins, see AUTHORS.281 * This is a compressed file. See the sources in the 'src' directory.282 283----------------------------------------------------------------------- */284 285/* print.css */286body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}287.container {background:none;}288hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}289hr.space {background:#fff;color:#fff;visibility:hidden;}290h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}291code {font:.9em "Courier New", Monaco, Courier, monospace;}292a img {border:none;}293p img.top {margin-top:0;}294blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}295.small {font-size:.9em;}296.large {font-size:1.1em;}297.quiet {color:#999;}298.hide {display:none;}299a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}300a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}301 302 303@font-face {304 font-family: 'PT Sans';305 font-style: italic;306 font-weight: 400;307 src: url(https://fonts.gstatic.com/s/ptsans/v17/jizYRExUiTo99u79D0e0x8mN.ttf) format('truetype');308}309@font-face {310 font-family: 'PT Sans';311 font-style: italic;312 font-weight: 700;313 src: url(https://fonts.gstatic.com/s/ptsans/v17/jizdRExUiTo99u79D0e8fOydLxUY.ttf) format('truetype');314}315@font-face {316 font-family: 'PT Sans';317 font-style: normal;318 font-weight: 400;319 src: url(https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KEwA.ttf) format('truetype');320}321@font-face {322 font-family: 'PT Sans';323 font-style: normal;324 font-weight: 700;325 src: url(https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tKA.ttf) format('truetype');326}327 328 329 330@font-face {331 font-family: 'Open Sans';332 font-style: italic;333 font-weight: 400;334 font-stretch: normal;335 src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexQ.ttf) format('truetype');336}337@font-face {338 font-family: 'Open Sans';339 font-style: italic;340 font-weight: 700;341 font-stretch: normal;342 src: url(https://fonts.gstatic.com/s/opensans/v36/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjWVAexQ.ttf) format('truetype');343}344@font-face {345 font-family: 'Open Sans';346 font-style: normal;347 font-weight: 400;348 font-stretch: normal;349 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');350}351@font-face {352 font-family: 'Open Sans';353 font-style: normal;354 font-weight: 700;355 font-stretch: normal;356 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');357}358@font-face {359 font-family: 'Open Sans';360 font-style: normal;361 font-weight: 800;362 font-stretch: normal;363 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVc.ttf) format('truetype');364}365 366 367 368@font-face {369 font-family: 'Droid Sans';370 font-style: normal;371 font-weight: 400;372 src: url(https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSaA.ttf) format('truetype');373}374@font-face {375 font-family: 'Droid Sans';376 font-style: normal;377 font-weight: 700;378 src: url(https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1Yg.ttf) format('truetype');379}380 381 382 383 384 #ps_socialbutton{385 background:transparent url("../images/share.png") no-repeat;386 width:67px;387 height:23px;388 cursor:pointer;389 }390 391 #ps_websites {392 left: 50%;393 position: absolute;394 top: 50%;395 z-index: 9999992;396 }397 398 #ps_websites .ps_label {399 color: #fff;400 display: none;401 font-size: 24px;402 left: 0;403 position: absolute;404 top: 0;405 white-space: nowrap;406 text-shadow:407 -1px -1px 2px rgba(40,40,40, 0.45),408 1px -1px 2px rgba(40,40,40, 0.45),409 -1px 1px 2px rgba(40,40,40, 0.45),410 1px 1px 2px rgba(40,40,40, 0.45)411 }412 413 #ps_websites ul {414 list-style: none;415 position: relative;416 z-index: 1010;417 width: 300px;418 }419 420 #ps_websites li {421 display: block;422 float: left;423 margin: 0 30px 40px 0;424 }425 426 #ps_websites .ps_social_icon {427 display: block;428 cursor: pointer;429 }430 431 #ps_overlay {432 background: #000;433 height: 100%;434 left: 0;435 position: absolute;436 top: 0;437 width: 100%;438 z-index: 9999991;439 }440 441 442/* sticky-footer.css */443 444 445 446* {margin:0;padding:0;}447 448html, body, #wrap {height: 100%;}449 450body > #wrap {height: auto; min-height: 100%;}451 452#main453{454 position:relative;455 height: auto !important;456 height: 100%;457 min-height: 100% !important;458 margin-bottom: -40px; 459 *margin-bottom: -50px; /* IE 7 Hack http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer */460 overflow:hidden;461}462 463#footer464{465 position:relative;466 display:block;467 height: 40px; 468}469 470#push471{472 display:block;473 height: 90px; /* This is footer's height + padding */474}475 476 477 478 479html, body {480font-family: Arial, sans-serif;481background: #FFF;482}483 484/*Always show vertical scroll bar */485html {486overflow: -moz-scrollbars-vertical;487overflow-y: scroll;488overflow-x: auto;489}490 491/*subtract the footer height from main div (height+margin)*/492#main {493 margin-bottom: -34px;494}495 496/*add the footer height from main div (height+margin), so content does not spill underneath footer*/497#content {498margin-bottom: 34px;499}500 501#contact {502 width: 520px;503}504 505#header {506 margin-top:16px;507 margin-bottom:5px;508}509 510a,511#menu li {512 text-decoration:none;513 color:#555;514}515 516a:hover,517#menu li:hover {518 color:#0099FF;519}520 521a.selected,522#menu li.selected {523 font-weight:bold;524 color:#0099FF;525}526 527a.selected:hover,528#menu li.selected:hover {529 font-weight:bold;530 color:#28a9ff;531}532 533 534h1,535h2,536h3,537h4 {538 font-family: 'Droid Sans', Arial, sans-serif;539 font-weight:bold;540 color:#000;541}542 543h1 a,544h2 a,545h3 a,546h4 a{547 color:#000;548}549 550h1 {551 font-size:24px;552}553 554h2 {555 font-size:22px;556}557 558h3 {559 font-size:20px;560}561 562h4 {563 font-size:18px;564}565 566h4 {567 font-size:28px;568}569 570 571#menu {572 font-weight:500;573 font-size:12px;574 line-height:0.9em;575 padding-right:15px;576 -webkit-touch-callout: none;577-webkit-user-select: none;578-khtml-user-select: none;579-moz-user-select: none;580-ms-user-select: none;581user-select: none;582}583 584/*override the span 20 size, because of adding padding above*/585.span-20 {586 width:775px;587}588 589#menu ul,590#menu li,591#menu ol {592 list-style:none;593 margin:0;594 padding:0;595 cursor:pointer;596}597 598#menu li{599 margin-bottom:0.65em;600}601 602#menu ol ol{603 margin-left:20px;604 display:none;605}606 607#menu ol:hover; {608 609}610 611#menu ol li a {612 text-decoration:none;613}614 615 616 617#content h1,618#content h2,619#content h3,620#content h4{621 color:#666;622 margin:0 0 5px 0;623 padding:0;624}625 626#content h2 {627 font-size:20px;628}629 630/*Overrides for blog*/631#blog .post .title,632#blog .post .title a{633 font-size:20px;634 font-family: 'Droid Sans', Arial, sans-serif;635 font-weight:bold;636 color:#666;637}638 639/*set color for img alt text*/640img {641 color:#FFF;642}643 644#content img {645}646 647 648#gallery img:hover {649 opacity:0.65;650 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=65);651}652 653#gallery img {654 opacity:1;655 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);656 max-width:150px;657 max-height:150px;658}659 660/*wrapper when displaying an image*/661#image {662 position:relative;663 visibility:hidden;664}665 666#image a.nextimage{667 position:absolute;668 margin-top:25px;669 margin-right:-44px;670 right:0;671 top:0;672 display:inline-block;673}674 675#image a.previousimage{676 position:absolute;677 margin-top:25px;678 margin-left:-35px;679 left:0;680 top:0;681 display:inline-block;682}683 684#image a.nextimage:hover{685 background-position: -7px;686}687 688#image a.previousimage:hover{689 background-position: -7px;690}691#image a.nextimage{692 width:35px;693 height:37px;694 background:url(../images/nav-next-small.png) no-repeat;695 background-position: -42px;696}697#image a.previousimage{698 width:35px;699 height:37px;700 background:url(../images/nav-prev-small.png) no-repeat;701 background-position: -42px;702}703 704/*div for text for image*/705#image_text {706 position:relative;707 width:200px;708 min-height:35px;709}710 711#image_text #ps_socialbutton {712position:absolute;713top:0px;714right:0px;715display:block;716margin:0;717width:67px;718height:23px;719}720 721.ecommerceFormButtons {722margin-bottom:5px;723}724 725.ecommerceFormButtons div.addtocart {726 float:left;727 margin-right:2px;728}729 730.fb_edge_widget_with_comment span.fb_edge_comment_widget {731left: -357px !important;732top: -145px !important;733}734 735.connect_widget button_count {736 left: -357px !important;737}738 739#image_text p.image_title {740 font-weight:bold;741 margin:0 0 5px 0;742}743 744 745#video {746 margin-left:25px;747}748 749#footer {750 background: #FFF;751 height: auto;752 line-height: 23px;753 padding: 0;754}755 756#artistruncredit {757 font-size:11px;758}759 760#artistruncredit {761 height: 30px;762 margin-top:4px;763 line-height: 23px;764 right:0px;765 text-align:right;766 /* IE 8 */767 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";768 /* IE 5.5-7 */769 filter: alpha(opacity=40);770 /* Netscape */771 -moz-opacity: 0.4;772 /* Safari 1.x */773 -khtml-opacity: 0.4;774 /* Modern browsers */775 opacity: 0.4;776}777 778 779 780#sociallinks {781 782}783 784 785#sociallinks a {786 background: url("images/social_icons.png") no-repeat scroll 0 0 transparent;787 display: inline-block;788 height: 24px;789 margin-left: 2px;790 width: 24px;791 text-decoration: none;792}793 794#sociallinks a.facebook{795 background-position: 0 0;796}797 798#sociallinks a.twitter {799 background-position: -24px 0;800}801 802#sociallinks a.youtube {803 background-position: -48px 0;804}805 806#sociallinks a.linkedin {807 background-position: -72px 0;808}809 810#sociallinks a.pinterest{811 background-position: -96px 0;812}813 814#sociallinks a.flickr {815 background-position: -120px 0;816}817 818#sociallinks a.tumblr {819 background-position: -144px 0;820}821 822#sociallinks a.instagram {823 background-position: -168px 0;824}825 826#sociallinks a.tiktok {827 background-position: -192px 0;828}829 </style>830 <!--[if lt IE 8]><![endif]-->831 <meta content="noodp, noydir" name="robots">832 <meta content="artistrunwebsite.com" name="generator">833 <meta content="artistrunwebsite.com" name="publisher">834 <meta content="Harry Stooshinoff" name="author">835 <style media="screen, projection" type="text/css">836 /*<![CDATA[*/837#sold-dot {838 display:inline-block;width:12px;height:12px;border-radius:6px;background:#f00;margin-left:0.5em;margin-top:0.2em;839} 840.sold-span {841 float:left;842} 843/*]]>*/844 </style>845 <style media="screen, projection" type="text/css">846 /*<![CDATA[*/847div#remotelogin, div#remotelogin h2.login, div#remotelogin h2.login a, div#remotelogin label {color:#222;}div#remotelogin a, div#remotelogin p.hint {color:#888;}a#artistlogin-icon { position:relative; background-image: url("/css/images/artist-login-lightbg.png"); width:8px; height:9px; display: inline-block; margin:0 0 0 0.3em; top:0.1em;}div#remotelogin a:hover {color:#0099FF;}html, body {background-color:#EDEDED;}img {color:#EDEDED;}#footer {background:transparent;}#header h1 {color:#555555;}#header h1 a {color:#555555;}#header h1 {font-size:24px;}#header h1 {font-weight:normal;}#header h1 {font-family:Arial,Arial,Helvetica,sansserif;}#page h2 {color:#616161;}#contact h2 {color:#616161;}#blog .post .title a {color:#616161;}#error h1, #error h2, #error h3 {color:#616161;}#blog h2.category {color:#616161;}#page h2, #contact h2, #blog .post .title a, #blog h2.category {line-height:15px;}#page h2 {font-size:15px;}#contact h2 {font-size:15px;}#blog .post .title a {font-size:15px;}#error h1, #error h2, #error h3 {font-size:15px;}#blog h2.category {font-size:15px;}#page h2 {font-weight:bold;}#contact h2 {font-weight:bold;}#blog .post .title a {font-weight:bold;}#error h1, #error h2, #error h3 {font-weight:bold;}#blog h2.category {font-weight:bold;}#page h2 {font-family:Arial,Arial,Helvetica,sansserif;}#contact h2 {font-family:Arial,Arial,Helvetica,sansserif;}#blog .post .title a {font-family:Arial,Arial,Helvetica,sansserif;}#error h1, #error h2, #error h3 {font-family:Arial,Arial,Helvetica,sansserif;}#blog h2.category {font-family:Arial,Arial,Helvetica,sansserif;}#blog, #blog .content p {color:#382C2C;}#page, #page p {color:#382C2C;}#image, #image p {color:#382C2C;}#contact, #contact p {color:#382C2C;}#error, #error p {color:#382C2C;}#sidebar .portlet-title {color:#382C2C;}#blog, #blog .content p {font-size:11px;}#page, #page p {font-size:11px;}#image, #image p {font-size:11px;}#contact, #contact p {font-size:11px;}#error, #error p {font-size:11px;}#sidebar .portlet-title {font-size:11px;}#blog, #blog .content p {font-weight:normal;}#page, #page p {font-weight:normal;}#image, #image p {font-weight:normal;}#contact, #contact p {font-weight:normal;}#error, #error p {font-weight:normal;}#sidebar .portlet-title {font-weight:normal;}#blog, #blog .content p {font-family:Arial,Arial,Helvetica,sansserif;}#page, #page p {font-family:Arial,Arial,Helvetica,sansserif;}#image, #image p {font-family:Arial,Arial,Helvetica,sansserif;}#contact, #contact p {font-family:Arial,Arial,Helvetica,sansserif;}#error, #error p {font-family:Arial,Arial,Helvetica,sansserif;}#sidebar .portlet-title {font-family:Arial,Arial,Helvetica,sansserif;}#menu a {color:#616161;}#menu li.folder {color:#616161;}#footer #artistruncredit a {color:#616161;}#footer #artistruncredit {color:#616161;}#sidebar .portlet-content ul li, #sidebar .portlet-content ul li a {color:#616161;}#blog a {color:#616161;}#page a {color:#616161;}#image a {color:#616161;}.ecommerceText a {color:#616161;}#blog a {text-decoration:none;}#page a {text-decoration:none;}#image a {text-decoration:none;}.ecommerceText a {text-decoration:none;}a.selected, #menu a.selected {color:#0099FF;}#menu a:hover {color:#0099FF;}#menu li.folder:hover {color:#0099FF;}#blog a:hover {color:#0099FF;}#page a:hover {color:#0099FF;}#image a:hover {color:#0099FF;}#footer #artistruncredit a:hover {color:#0099FF;}#header h1 a:hover {color:#0099FF;}.ecommerceText a:hover {color:#0099FF;}#sidebar .portlet-content ul li a:hover {color:#0099FF;}#menu {font-size:11px;}#sidebar .portlet-content ul li a {font-size:11px;}#menu ol li a {font-size:11px;}#menu li.folder {font-size:11px;}#sidebar .portlet-content ul li a {font-weight:normal;}#menu ol li a {font-weight:normal;}#menu li.folder {font-weight:normal;}#sidebar .portlet-content ul li a {text-decoration:none;}#menu ol li a {text-decoration:none;}#menu li.folder {text-decoration:none;}#sidebar .portlet-content ul li a {font-family:Arial,Arial,Helvetica,sansserif;}#menu ol li a {font-family:Arial,Arial,Helvetica,sansserif;}#menu li.folder {font-family:Arial,Arial,Helvetica,sansserif;}848/*]]>*/849 </style>850 <style media="screen, projection" type="text/css">851 /*<![CDATA[*/852 iframe[name='google_conversion_frame'] {853 height: 0 !important;854 width: 0 !important;855 line-height: 0 !important;856 font-size: 0 !important;857 margin-top: -13px;858 float: left;859 visibility:hidden;860}861 862/*]]>*/863 </style>864 <title>865 Far Stand, October 26 - Harry Stooshinoff - Artist866 </title>867 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">868 <meta content="en" name="language">869 <meta content="Far Stand, October 26. Acrylic, collage, on thin gessoed Masonite panel 8 x 8 inches, signed lightly in pencil. No framing on this piece is necessary! The panel painting is attached with 100% silicone adhesive (removable), to a recessed wooden back support, 1 inch deep. The back support is notched at the top to hang perfectly flat on your wall from a screw or nail....no other hanging apparatus is needed. This method of presentation pushes the piece visually forward, without the visual distraction inherent in most frames. Should you wish to present this piece in another way in the future, the painting can be removed with no damage to the panel. View the last 3 photos to see how this presentation method looks from the back, and on the wall." name="description">870 <meta content="Harry Stooshinoff, paintings, drawings, prints, collages, abstract paintings" name="keywords">871 <meta content="no" http-equiv="imagetoolbar">872 <meta content="" property="og:image">873 <meta content="Acrylic, collage, on thin gessoed Masonite panel 8 x 8 inches, signed lightly in pencil. No framing on this piece is necessary! The panel painting is attached with 100% silicone adhesive (removable), to a recessed wooden back support, 1 inch deep. The back support is notched at the top to hang perfectly flat on your wall from a screw or nail....no other hanging apparatus is needed. This method of presentation pushes the piece visually forward, without the visual distraction inherent in most fram ..." property="og:description">874 <meta content="summary_large_image" property="twitter:card">875 <meta content="Far Stand, October 26 - Harry Stooshinoff - Artist" property="og:title">876 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">877 </head>878 <body>879 <div class="container" id="main">880 <div class="span-24 last" id="header">881 <h1>882 <a>883 Harry Stooshinoff - Artist884 </a>885 </h1>886 </div>887 <div class="span-4" id="menu">888 <ol>889 <li>890 <a target="_blank">891 Join Newsletter892 </a>893 </li>894 <li class="folder">895 <span>896 Galleries897 </span>898 </li>899 <ol style="display: block;">900 <li>901 <a class="selected" id="12239">902 Sold Artworks, September 2016 - August 2021903 </a>904 </li>905 <li>906 <a id="18028">907 Sold Artworks, August 2021 Forward908 </a>909 </li>910 <li>911 <a id="9396">912 Sold Artworks, to September 2016913 </a>914 </li>915 <li>916 <a id="9381">917 Winter Landscape Paintings918 </a>919 </li>920 </ol>921 <li class="folder">922 <span>923 About924 </span>925 </li>926 <ol style="display: none;">927 <li>928 <a>929 Biography and Statement930 </a>931 </li>932 <li>933 <a>934 Curriculum Vitae935 </a>936 </li>937 <li>938 <a>939 Text on Stooshinoff Painting Process.....A Continuous Critique940 </a>941 </li>942 </ol>943 <li class="folder">944 <span>945 Links946 </span>947 </li>948 <ol style="display: none;">949 <li>950 <a target="_blank">951 Paintbox on Etsy952 </a>953 </li>954 <li>955 <a target="_blank">956 You Tube Stooshinoff videos (recent)957 </a>958 </li>959 <li>960 <a target="_blank">961 You Tube Stooshinoff videos (less recent)962 </a>963 </li>964 <li>965 <a target="_blank">966 On Facebook967 </a>968 </li>969 </ol>970 </ol>971 </div>972 <div class="span-20 last" id="content">973 <div id="image" style="user-select: none; visibility: visible; opacity: 0.901409; width: 518px;">974 <div class="gallery_name" id="12239">975 </div>976 <a>977 <img alt="Acrylic painting Far Stand, October 26 by Harry Stooshinoff" src="rick.jpg" style="user-select: none; width: 518px; height: 515px;" title="Far Stand, October 26">978 </a>979 <div id="image_text" style="width: 518px;">980 <div class="ecommerceFormButtons">981 </div>982 <p class="image_title" style="width: 458px;">983 Far Stand, October 26984 </p>985 <p class="image_description" style="width: 458px;">986 Acrylic, collage, on thin gessoed Masonite panel 8 x 8 inches, signed lightly in pencil. No framing on this piece is necessary!987 </p>988 <div class="ecommerceText">989 <p id="pricestatus">990 </p>991 <div class="sold-span">992 SOLD993 </div>994 <div id="sold-dot">995 </div>996 <p>997 </p>998 </div>999 <div id="ps_socialbutton">1000 </div>1001 <a class="previousimage" title="Previous Image">1002 </a>1003 <a class="nextimage" title="Next Image">1004 </a>1005 </div>1006 </div>1007 </div>1008 </div>1009 <div class="container" id="footer">1010 <div class="span-8" id="sociallinks">1011 <a class="facebook" rel="me" target="_blank" title="Follow me on Facebook">1012 1013 </a>1014 <a class="twitter" rel="me" target="_blank" title="Follow me on Twitter">1015 1016 </a>1017 <a class="youtube" rel="me" target="_blank" title="Follow me on Youtube">1018 1019 </a>1020 <a class="pinterest" rel="me" target="_blank" title="Follow me on Pinterest">1021 1022 </a>1023 <a class="flickr" rel="me" target="_blank" title="Follow me on Flickr">1024 1025 </a>1026 1027 </div>1028 <div class="prepend-10 span-6 last" id="artistruncredit">1029 <a title="Log in to edit your website | Make your own artist website">1030 my1031 <span style="font-size:0px">1032 1033 </span>1034 .1035 <span style="font-size:0px">1036 1037 </span>1038 artist1039 <span style="font-size:0px">1040 1041 </span>1042 run1043 <span style="font-size:0px">1044 1045 </span>1046 website1047 </a>1048 <a id="artistlogin-icon">1049 </a>1050 </div>1051 </div>1052 <noscript>1053 <img height="0" src="rick.jpg" style="display:none; visibility: hidden;" width="0">1054 </noscript>1055 <noscript>1056 <img height="1" src="rick.jpg" style="display:none" width="1">1057 </noscript>1058 <div id="protector" style="position: absolute; z-index: 99999; width: auto; height: auto; padding: 8px; text-align: center; color: rgb(255, 255, 255); font: 14px Verdana, Arial, Helvetica, sans-serif; background: rgb(34, 34, 34); display: none; border: 1px solid rgb(153, 153, 153); border-radius: 5px; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px; user-select: none; cursor: default;">1059 © Harry Stooshinoff.1060 <br>1061 All rights reserved.1062 </div>1063 <div id="batBeacon490715933466" style="width: 0px; height: 0px; display: none; visibility: hidden;">1064 <img alt height="0" id="batBeacon306510442717" src="rick.jpg" style="width: 0px; height: 0px; display: none; visibility: hidden;" width="0">1065 </div>1066 </body>1067</html>1068