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>3 <!--<![endif]-->4 <head>5 <style>6 /* ------------------------------------------------------------------------7 Template Name : Jungleland8 Template Code : S-00309 Version : 1.210 Author : Erwin Aligam11 Author URI : http://www.styleshout.com/12 Last Date Modified : December 23, 201113 -------------------------------------------------------------------------- */14 15 16/* =============================================================================17 R E S E T18================================================================================ */19 20html, body, div, span, applet, object, iframe,21h1, h2, h3, h4, h5, h6, p, blockquote, pre,22a, abbr, acronym, address, big, cite, code,23del, dfn, em, img, ins, kbd, q, s, samp,24small, strike, strong, sub, sup, tt, var,25b, u, i, center,26dl, dt, dd, ol, ul, li,27fieldset, form, label, legend,28table, caption, tbody, tfoot, thead, tr, th, td,29article, aside, canvas, details, embed,30figure, figcaption, footer, header, hgroup,31menu, nav, output, ruby, section, summary,32time, mark, audio, video {33 margin: 0;34 padding: 0;35 border: 0;36 font-size: 100%;37 font: inherit;38 vertical-align: baseline;39}40/* HTML5 display-role reset for older browsers */41article, aside, details, figcaption, figure,42footer, header, hgroup, menu, nav, section {43 display: block;44}45body {46 line-height: 1;47}48ol, ul {49 list-style: none;50}51blockquote, q {52 quotes: none;53}54blockquote:before, blockquote:after,55q:before, q:after {56 content: '';57 content: none;58}59table {60 border-collapse: collapse;61 border-spacing: 0;62}63 64 65/* =============================================================================66 G E N E R A L67================================================================================ */68 69html { overflow-y: scroll; }70body { background: #1C130E url(../images/bg.png); }71 72/* Links */73a:link, a:visited {74 text-decoration: none;75 color: #c67114;76 outline: 0;77}78a:hover, a:focus, a:active {79 color: #fff;80}81 82/* Lists */83ul, ol {84 margin: 0 0 24px 0;85 padding: 0 20px;86}87ul { list-style: disc; }88ol { list-style: decimal; }89 90dt {91 font-weight: bold;92 color: #549207;93}94dd {95 padding-left: 20px;96}97dl { margin: 0 0 24px 0; }98 99/* Images */100img {101 background: #130D0A;102 border: 1px solid #261a14;103 padding: 12px;104}105img.align-right { margin: 6px 0px 6px 12px; }106img.align-left { margin: 6px 12px 6px 0px; }107 108/* Button */109a:link.more,110a:visited.more,111form input.button,112.commentlist li .comment-text .reply a,113.navigation a:link,114.navigation a:visited {115 font-family: Verdana, 'Lucida Grande', 'Lucida Sans Unicode', Sans-serif;116 float: left;117 margin-right: 8px;118 padding: 6px 10px;119 border: 1px solid #9c4003;120 background: #DA6503 url(../images/button-bg.png);121 color: #130d0a;122 font-size: 11px;123 font-weight: bold;124 125 text-shadow: 0 1px 0 rgba(250,250,250,0.4);126 127 box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;128 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;129 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #eb961a;130}131a:hover.more,132.commentlist li .comment-text .reply a:hover,133.navigation a:hover {134 background: #4EA41F url(../images/button-bg-hover.png);135 border: 1px solid #366004;136 137 box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;138 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;139 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #9DC13E;140}141 142/* Table */143table {144 border-collapse: collapse;145 margin: 12px 0 24px 0;146}147tr { background: #130D0A; }148th, td {149 text-align: left;150 border-width: 1px;151 border-style: solid;152}153th {154 padding: .8em 1em;155 background: #45561B;156 border-color: #647C28 #586A22 #43511A #5A6F23;157 color: #fff;158 font-family: Arial, Helvetica, Sans-serif;159 font-size: 16px;160 font-weight: bold;161}162td {163 border-color: #271D14;164 padding: .7em 1em;165}166 167/* Form */168form {169 width: 506px;170 margin: 24px 0;171 padding: 32px 40px;172 background-color: #130D0A;173 border: 1px solid #261a14;174}175input, select {176 vertical-align: middle;177}178form div {179 border-bottom: 1px solid #1D1410;180 padding: 12px 0 5px 0;181 margin: 0;182}183form p {184 color: #fff;185}186form label {187 display: block;188 font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;189 font-weight: bold;190 line-height: 24px;191 font-size: 13px;192 margin: 0 0 5px 0;193}194form label span {195 color: #549207;196}197form input,198form select,199form textarea {200 margin-bottom: 24px;201 padding: 10px;202 color: #cccccc;203 background: #663300;204 border: 1px solid #1D1410;205 font: 11px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;206}207form textarea {208 height: 325px;209}210form input:focus,211form select:focus,212form textarea:focus {213 background: #988175;214 color: #0E0A07;215 border: 1px solid #0E0A07;216}217form input.button {218 height: 38px;219 float: none;220 cursor: pointer;221}222.ie7 form input.button {223 padding: 0 2px;224}225#name, #email, #message, #website {226 width: 482px;227}228 229/* Clearing and other stuff */230.no-border { border: none; }231.align-left { float: left; }232.align-right { float: right; }233.fix {234 clear: both;235 height: 1px;236 margin: -1px 0 0;237 overflow: hidden;238}239.clearfix:after {240 visibility: hidden;241 display: block;242 font-size: 0;243 content: " ";244 clear: both;245 height: 0;246}247.ie7 .clearfix { zoom: 1; } /* IE7 */248 249 250/* =============================================================================251 S T R U C T U R E252================================================================================ */253 254#header-wrap {255 width: 100%;256 background: url(../images/header-bg.png) repeat-x left top;257 height: 170px;258}259header {260 position: relative;261 margin: 0 auto;262 height: 170px;263 width: 990px;264 background: url(../images/header-div.png) no-repeat center bottom;265}266#featured-wrap {267 width: 990px;268 margin: 0 auto;269 padding-top: 130px;270 background: transparent url(../images/content-div.png) no-repeat center bottom;271}272#content-wrap, #content-wrap-home {273 width: 990px;274 margin: 0 auto;275 padding: 15px 0 35px 0;276 background: url(../images/content-div.png) no-repeat center bottom;277 overflow: hidden;278}279#main {280 width: 660px;281 float: left;282 margin-top: 15px;283 margin-left: 10px;284}285#sidebar {286 float: right;287 margin-top: 25px;288 margin-right: 5px;289}290#content-wrap-home #main {291 margin-top: 0;292}293#content-wrap-home #sidebar {294 margin-top: 5px;295}296#extra-wrap {297 clear: both;298 padding: 30px 0 10px 0;299 background: transparent url(../images/extra-bg.png) repeat-x;300 position: relative;301 top: -2px;302}303#extra {304 width: 980px;305 margin: 0 auto;306 font-size: 12px;307 line-height: 1.7em;308 padding-left: 10px;309}310footer {311 width: 920px;312 margin: 0 auto;313 padding-top: 12px;314 font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;315 font-size: 11px;316}317 318 319/* =============================================================================320 T Y P O G R A P H Y321================================================================================ */322 323body {324 font: 15px/24px Georgia, Serif;325 color: #AF9C92;326 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);327}328 329/* Paragraph */330p {331 margin-bottom: 24px;332}333#main .col .top p {334 font-size: 11px;335 color: #b5b5b5;336 margin: 5px 0;337}338#featured-wrap .text-block .post-meta,339.post .post-info {340 font-family: 'Lucida Sans Unicode', Arial, Helvetica, Sans-Serif;341 font-size: 12px;342 line-height: 1.3em;343 margin-bottom: 16px;344}345#extra p {346 font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;347}348#extra strong, #extra em, #extra b, #extra i {349 font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, sans-serif;350}351 352/* Headers */353h1, h2, h3, h4 {354 font: bold 1em/1.5em Arial, Helvetica, Sans-Serif;355 margin-bottom: 24px;356 color: #E2DBD8;357}358h1 {359 font-size: 38px;360 line-height: 42px;361 margin-top: 2px;362 margin-bottom: 4px;363 letter-spacing: -2px;364}365/* ----------------------------------------------------------------------------- */366h2 {367 font-size: 32px;368 line-height: 38px;369 margin-top: 5px;370 margin-bottom: 5px;371}372#featured-wrap .text-block h2 {373 margin-right: 20px;374 margin-bottom: 0;375}376/* ----------------------------------------------------------------------------- */377h3 {378 font-size: 22px;379 line-height: 24px;380 letter-spacing: 0.2px;381 margin-top: 12px;382 margin-bottom: 12px;383}384#extra h3 {385 font: bold 18px Arial, Helvetica, Sans-Serif;386 margin-bottom: 15px;387 color: #C8BAB5;388}389/* ----------------------------------------------------------------------------- */390h4 {391 font-size: 18px;392}393#main .col .top h4 {394 line-height: 1.3em;395 margin-bottom: 0;396}397/* ----------------------------------------------------------------------------- */398 399blockquote {400 margin: 12px 0;401 padding: 20px 30px 0 45px;402 background: url(../images/quote.png) no-repeat 0 22px;403 font-size: 18px;404 line-height: 28px;405 font-style: italic;406 font-family: Georgia, 'Times New Roman', Times, Serif;407 overflow: hidden;408}409blockquote .author {410 text-transform: uppercase;411 font-style: normal;412 letter-spacing: 1.5px;413 text-align: right;414 font-size: 12px;415}416code {417 font-family: Consolas, 'Lucida Console', Monaco, Monospace;418 font-size: 14px;419 line-height: 1.5em;420}421pre {422 white-space: pre;423 white-space: pre-wrap;424 word-wrap: break-word;425 426 margin: 0 0 24px 0;427 padding: 0 25px;428 display: block;429 background: #130D0A;430 border: 1px solid #261a14;431 clear: both;432}433abbr[title], dfn[title] {434 border-bottom: 1px dotted;435 cursor: help;436}437mark {438 background-color: #c67114;439 text-shadow: none;440 color: #110C09;441}442strong, b {443 font-weight: bold;444}445 446 447/* =============================================================================448 H E A D E R449================================================================================ */450 451/* Logo */452header hgroup {453 position: absolute;454 background: url(/logo2_transparent.gif) no-repeat;455 height: 220px;456 width: 855px;457 display: block;458 top: 85px;459 left: 5px;460}461header hgroup h1 {462 margin: 0;463 padding: 0;464}465header hgroup h1 a {466 text-indent: -9999em;467 display: block;468 height: 48px;469 width: 218px;470}471header hgroup h3 {472 text-indent: -9999em;473 height: 0;474}475 476 477/* Main Navigation */478header nav {479 position: absolute;480 left: 0;481 top: 0;482 width: 850px;483 height: 59px;484}485header nav ul {486 list-style: none;487 margin-left: 10px;488 padding: 0;489 height: 59px;490}491header nav ul li {492 float: left;493}494header nav ul a:link,495header nav ul a:visited {496 font-family: Verdana, Sans-Serif;497 font-size: 11px;498 font-weight: bold;499 text-transform: lowercase;500 display: block;501 margin: 0;502 padding: 0 15px;503 height: 59px;504 color: #9E8F8F;505 text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);506 line-height: 70px;507}508header nav ul li a:hover,509header nav ul li a:active {510 border: none;511 color: #D67630;512}513header nav ul li#current {514 background: url(../images/tab-right.png) no-repeat right top;515 color: #D67630;516}517header nav ul li#current a {518 background: url(../images/tab-left.png) no-repeat left top;519 color: #f0e8e8;520}521 522/* Subscribe */523header div.subscribe {524 position: absolute;525 font-family: Verdana, Sans-Serif;526 text-transform: lowercase;527 font-size: 11px;528 font-weight: bold;529 line-height: 30px;530 width: 170px;531 height: 30px;532 color: #867474;533 text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);534 background: url(../images/rss32.png) no-repeat 0 center;535 padding-left: 28px;536 right: 5px;537 top: 18px;538}539header div.subscribe a {540 padding-right: 3px;541 padding-left: 3px;542 color: #fff;543}544header div.subscribe a:hover,545header div.subscribe a:active {546 color: #D67630;547}548 549/* Quick Search */550header form#quick-search {551 position: absolute;552 background: transparent;553 border: none;554 margin: 0;555 padding: 0;556 width: 222px;557 top: 92px;558 right: 10px;559}560header fieldset.search {561 border: none;562 width: 222px;563 height: 37px;564 padding: 0;565 margin: 0;566 background: url(../images/search-bg.png) no-repeat;567}568header .search input {569 border: none;570 float: left;571 padding: 0;572 margin: 0;573}574header .search input:focus {575 color: #777;576}577header .search button {578 border: none;579 float: right;580 padding: 0; margin: 0;581}582header .search label { display: none; }583header .search input.tbox {584 font-weight: normal;585 margin: 12px 0 10px 10px;586 background: transparent;587 width: 150px;588}589header .search button.btn {590 width: 37px;591 height: 37px;592 cursor: pointer;593 text-indent: -9999px;594 background: url(../images/search.png) no-repeat center center;595}596 597 598/* Quick Search */599#searcharea form#quick-search {600 background: transparent;601 border: none;602 margin: 0;603 padding: 0;604 605}606#searcharea fieldset.search {607 border: none;608 width: 370px;609 height: 47px;610 padding: 0;611 margin: 0;612 background: url(../images/search-bg.png) no-repeat;613}614#searcharea .search input {615 border: none;616 float: left;617 margin: 0;618}619#searcharea .search input:focus {620 color: #777;621}622#searcharea .search button {623 border: none;624 float: right;625 margin: 0;626 padding: 0; 627}628#searcharea .search label { display: none; }629#searcharea .search input.tbox {630 font-weight: normal;631 background: transparent;632 width: 310px;633}634#searcharea .search button.btn {635 width: 37px;636 height: 37px;637 cursor: pointer;638 text-indent: -9999px;639 background: url(../images/search.png) no-repeat center center;640}641 642 643 644/* =============================================================================645 F E A T U R E D646================================================================================ */647 648#featured {649 position: relative;650 width: 968px;651 margin: 0 auto;652 background: #130D0A;653 border: 1px solid #261a14;654}655#featured-wrap #featured-ribbon {656 position: absolute;657 background: url(../images/ribbon.png) no-repeat;658 width: 110px;659 height: 110px;660 top: -7px;661 right: -7px;662 z-index: 99999;663}664#featured-wrap .image-block {665 margin-top: 30px;666 margin-bottom: 30px;667 margin-left: 30px;668 float: left;669 width: 339px;670}671#featured-wrap .image-block img {672 padding: 0;673 border: none;674}675#featured-wrap .text-block h2 a {676 color: #E2DBD8;677}678#featured-wrap .text-block {679 margin-top: 20px;680 margin-bottom: 30px;681 margin-right: 30px;682 float: right;683 width: 493px;684}685#featured-wrap .text-block .post-meta a {686 color: #549207;687}688 689 690/* =============================================================================691 C O N T E N T692================================================================================ */693 694#main .col {695 width: 276px;696 float: left;697 margin-top: 10px;698 margin-bottom: 25px;699}700#main .col img {701 margin: 0 0 20px 0;702 padding: 14px;703 background: #130D0A;704 display: block;705}706#main h2 a {707 color: #E2DBD8;708}709#main .col .top {710 margin-bottom: 10px;711 padding-bottom: 2px;712 border-bottom: 1px solid #29201c;713}714#main .col .top h4 a {715 color: #6f892c;716}717#main .col .top p a:link,718#main .col .top p a:visited {719 color: #b5b5b5;720}721#main .col .top p .comment {722 margin-left: 5px;723 padding: 0 0 5px 20px;724 background: url(../images/comment.png) no-repeat 0 2px;725}726#main .col .top p .datetime {727 padding: 0 0 5px 20px;728 background: url(../images/clock.png) no-repeat 0 0;729}730#main .col .content {731 margin: 0 5px732}733#main .even { margin-left: 45px; }734 735 736 737/* =============================================================================738 S I D E B A R739================================================================================ */740 741/* Sidemenu */742#sidebar .sidemenu ul {743 margin: 20px 0 30px 0;744 padding: 0;745 border-top: 1px solid #231C18;746 text-align: left;747}748#sidebar .sidemenu ul li {749 list-style: none;750 font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;751 margin: 0;752 padding: 9px 5px 9px 19px;753 border-bottom: 1px solid #231C18;754 font-size: 12px;755 line-height: 20px;756 text-transform: uppercase;757 background: url(../images/bullet.png) no-repeat 0 14px;758}759#sidebar .sidemenu ul li a:link,760#sidebar .sidemenu ul li a:visited {761 padding-left: 0;762 font-weight: bold;763 color: #E2DBD8;764}765#sidebar .sidemenu ul li span {766 display: block;767 color: #9a8377;768 font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;769 font-weight: normal;770 text-transform: none;771}772#sidebar .sidemenu ul li a:hover { color: #fff; border: none; }773#sidebar .sidemenu ul ul { margin: 0 0 0 5px; padding: 0; border: none; }774#sidebar .sidemenu ul ul li { border: none; }775 776/* Photostream */777#sidebar ul.photostream {778 list-style: none;779 margin: 20px 0 25px 0;780 padding: 0;781}782#sidebar ul.photostream li {783 float: left;784 margin: 0 12px 6px 0;785 padding: 0;786}787#sidebar ul.photostream li img {788 background-color: #120c09;789 border: 1px solid #261a14;790 padding: 12px;791}792 793/* =============================================================================794 E X T R A795================================================================================ */796 797#extra img {798 background: #120c09;799 padding: 10px;800}801#extra .xcol {802 float: left;803 width: 200px;804 margin-right: 43px;805}806#extra .xcol.last {807 margin-right: 0;808}809 810/* Footer List */811.footer-list ul {812 border-top: 1px solid #231C18;813 list-style: none;814 padding: 0;815 margin-left: 0;816}817.footer-list ul li {818 border-bottom: 1px solid #231C18;819}820.footer-list ul li a:link,821.footer-list ul li a:visited {822 font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;823 display: block;824 padding: 7px 0 7px 5px;825 margin-left: 0;826 color: #988175;827}828.footer-list ul li a:hover { color: #fff; }829 830/* Social */831.social ul li a:link,832.social ul li a:visited {833 padding-left: 25px;834}835.footer-list ul li.facebook a {836 background: url(../images/social/facebook.png) no-repeat 1px 9px;837}838.footer-list ul li.twitter a {839 background: url(../images/social/twitter-2.png) no-repeat 1px 9px;840}841.footer-list ul li.googleplus a {842 background: url(../images/social/google-plus-black.png) no-repeat 1px 9px;843}844.footer-list ul li.rss a {845 background: url(../images/social/feed.png) no-repeat 1px 9px;846}847.footer-list ul li.email a {848 background: url(../images/social/email.png) no-repeat 1px 9px;849}850 851 852/* =============================================================================853 F O O T E R854================================================================================ */855 856footer a:hover {857 color: #fff;858}859footer a.back-to-top {860 background: url(../images/back-to-top.png) no-repeat right 3px;861 font-weight: bold;862 padding-right: 17px;863}864footer p.footer-left {865 float: left;866 margin: 0 0 40px 0;867 padding: 0;868 width: 600px;869 text-align: left;870}871footer p.footer-right {872 float: right;873 margin: 0 -10px 40px 0;874 padding: 0;875 width: 320px;876 text-align: right;877}878 879/* =============================================================================880 P O S T881================================================================================ */882 883.post {884 margin-bottom: 15px;885 padding-bottom: 15px;886}887.post h2 a {888 color: #E2DBD8;889}890.post .image-section {891 clear: both;892 display: block;893 margin: 20px 0 15px 0;894 padding: 0;895}896.post .image-section img {897 padding: 14px;898}899.post .postmeta {900 padding: 8px 15px; margin: 20px 10px 15px 0;901 background: #130D0A;902 border: 1px solid #261a14;903}904.post .postmeta a.comments { margin: 0 10px 0 5px; }905.post .postmeta a.readmore { margin: 0 10px 0 5px; }906.post .postmeta .date { margin: 0 10px 0 5px; }907 908.post .post-info a {909 color: #549207;910}911.post .tags {912 padding: 8px 15px; margin: 20px 12px 15px 0;913 border-top: 1px solid #231C18;914 border-bottom: 1px solid #231C18;915}916.post .tags span { color: #6f892c; }917 918/* Comments List */919ol.commentlist {920 margin: 15px 10px 35px 0;921 padding: 0;922 background-color: #130D0A;923 border-style: solid;924 border-color: #261a14;925 border-width: 1px 1px 0 1px;926}927.commentlist li {928 list-style: none;929 margin: 0;930 padding: 15px 0 0 0;931 border-bottom: 1px solid #261a14;932}933.commentlist li .comment-info {934 width: 100%;935 margin: 0; padding: 0;936 overflow: hidden;937}938.commentlist li .comment-info img {939 float: right;940 margin: 5px 25px 0 0;941}942.commentlist li .comment-info cite {943 display: block;944 margin: 0; padding: 5px 65px 5px 25px;945 font-style: normal;946}947.commentlist li .comment-info cite .comment-data {948 font-size: .8em;949 font-weight: normal;950}951.commentlist li .comment-text {952 clear: both;953 margin: 0; padding: 0 20px 25px 25px;954}955.commentlist li .comment-text p {956 margin: 10px 0 20px 0;957 padding: 0;958}959.commentlist li .comment-text .reply a {960 float: none;961}962.commentlist li ul.children { margin:0; padding: 0; }963.commentlist li ul.children li.depth-2,964.commentlist li ul.children li.depth-3 {965 margin-left: 40px;966 border-style: solid;967 border-color: #281D15;968 border-width: 1px 0 0 1px;969}970.commentlist li.thread-alt {971 background: #100C0A;972}973 974 975/* =============================================================================976 A R C H I V E S977================================================================================ */978 979ul.archive {980 margin: 10px 0;981 padding: 0;982 border-top: 1px solid #231C18;983}984ul.archive li {985 margin: 0;986 padding: 14px 5px;987 border-bottom: 1px solid #231C18;988 list-style: none;989}990ul.archive li .post-title {991 margin: 0;992 padding: 0;993 font-family: Arial, Helvetica, Sans-Serif;994 font-weight: bold;995 font-size: 26px;996 color: #E2DBD8;997}998ul.archive li .post-title a:link,999ul.archive li .post-title a:visited {1000 color: #E2DBD8;1001}1002ul.archive li .post-title a:hover {1003 border: none;1004 color: #fff;1005}1006ul.archive li .post-details {1007 margin-left: 0;1008 margin-top: 0;1009 font-size: .9em;1010}1011ul.archive li .post-details span {1012 padding-left: 5px;1013 padding-right: 5px;1014}1015 1016/* Page Navigation */1017.navigation {1018 margin: 20px 0 20px 5px;1019 padding: 0;1020}1021 1022 1023/* Mapping */1024#actuatorDiv {1025 width:150px;1026 height:125px;1027 border-radius: 8px;1028}1029 1030#captionDiv {1031 position:relative;1032 top:-26px;1033 width:150px;1034 height:32px;1035 color:#E2DBD8;1036 background-color:#82490D;1037 border-bottom-right-radius: 8px;1038 border-bottom-left-radius: 8px;1039}1040 </style>1041 <title>1042 The Urinals of Dairy Queen1043 </title>1044 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">1045 <meta charset="utf-8">1046 <meta content name="description">1047 <meta content name="author">1048 <meta content="width=device-width, initial-scale=1" name="viewport">1049 <!--[if lt IE 9]>1050 1051 <![endif]-->1052 <meta content="275918535768793" property="fb:app_id">1053 <!--[if lte IE 8]><![endif]-->1054 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">1055 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">1056 <style data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget css:fb.css.customer_chat_plugin_iframe" type="text/css">1057 .fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_reposition{overflow:hidden;position:relative}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}@keyframes fb_transform{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fb_animate{animation:fb_transform .3s forwards}1058.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_reposition{overflow:hidden;position:relative}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:'lucida grande', tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}@keyframes fb_transform{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fb_animate{animation:fb_transform .3s forwards}1059.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_dialog_advanced{border-radius:8px;padding:10px}.fb_dialog_content{background:#fff;color:#373737}.fb_dialog_close_icon{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{left:5px;right:auto;top:5px}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent}.fb_dialog_close_icon:active{background:url(https://connect.facebook.net/rsrc.php/v3/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #365899;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(https://connect.facebook.net/rsrc.php/v3/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{height:100%;left:0;margin:0;overflow:visible;position:absolute;top:-10000px;transform:none;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(https://connect.facebook.net/rsrc.php/v3/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{background:none;height:auto;min-height:initial;min-width:initial;width:auto}.fb_dialog.fb_dialog_mobile.loading.centered #fb_dialog_loader_spinner{width:100%}.fb_dialog.fb_dialog_mobile.loading.centered .fb_dialog_content{background:none}.loading.centered #fb_dialog_loader_close{clear:both;color:#fff;display:block;font-size:18px;padding-top:20px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .4);bottom:0;left:0;min-height:100%;position:absolute;right:0;top:0;width:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_mobile .fb_dialog_iframe{position:sticky;top:0}.fb_dialog_content .dialog_header{background:linear-gradient(from(#738aba), to(#2c4987));border-bottom:1px solid;border-color:#043b87;box-shadow:white 0 1px 1px -1px inset;color:#fff;font:bold 14px Helvetica, sans-serif;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:linear-gradient(from(#4267B2), to(#2a4887));background-clip:padding-box;border:1px solid #29487d;border-radius:3px;display:inline-block;line-height:18px;margin-top:3px;max-width:85px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{background:none;border:none;color:#fff;font:bold 12px Helvetica, sans-serif;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(https://connect.facebook.net/rsrc.php/v3/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #4a4a4a;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f5f6f7;border:1px solid #4a4a4a;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}#fb_dialog_loader_spinner{animation:rotateSpinner 1.2s linear infinite;background-color:transparent;background-image:url(https://connect.facebook.net/rsrc.php/v3/yD/r/t-wz8gw1xG1.png);background-position:50% 50%;background-repeat:no-repeat;height:24px;width:24px}@keyframes rotateSpinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}1060.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_fluid_desktop,.fb_iframe_widget_fluid_desktop span,.fb_iframe_widget_fluid_desktop iframe{max-width:100%}.fb_iframe_widget_fluid_desktop iframe{min-width:220px;position:relative}.fb_iframe_widget_lift{z-index:1}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}1061.fb_mpn_mobile_landing_page_slide_out{animation-duration:200ms;animation-name:fb_mpn_landing_page_slide_out;transition-timing-function:ease-in}.fb_mpn_mobile_landing_page_slide_out_from_left{animation-duration:200ms;animation-name:fb_mpn_landing_page_slide_out_from_left;transition-timing-function:ease-in}.fb_mpn_mobile_landing_page_slide_up{animation-duration:500ms;animation-name:fb_mpn_landing_page_slide_up;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_in{animation-duration:300ms;animation-name:fb_mpn_bounce_in;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_out{animation-duration:300ms;animation-name:fb_mpn_bounce_out;transition-timing-function:ease-in}.fb_mpn_mobile_bounce_out_v2{animation-duration:300ms;animation-name:fb_mpn_fade_out;transition-timing-function:ease-in}.fb_customer_chat_bounce_in_v2{animation-duration:300ms;animation-name:fb_bounce_in_v2;transition-timing-function:ease-in}.fb_customer_chat_bounce_in_from_left{animation-duration:300ms;animation-name:fb_bounce_in_from_left;transition-timing-function:ease-in}.fb_customer_chat_bounce_out_v2{animation-duration:300ms;animation-name:fb_bounce_out_v2;transition-timing-function:ease-in}.fb_customer_chat_bounce_out_from_left{animation-duration:300ms;animation-name:fb_bounce_out_from_left;transition-timing-function:ease-in}.fb_invisible_flow{display:inherit;height:0;overflow-x:hidden;width:0}@keyframes fb_mpn_landing_page_slide_out{0%{margin:0 12px;width:100% - 24px}60%{border-radius:18px}100%{border-radius:50%;margin:0 24px;width:60px}}@keyframes fb_mpn_landing_page_slide_out_from_left{0%{left:12px;width:100% - 24px}60%{border-radius:18px}100%{border-radius:50%;left:12px;width:60px}}@keyframes fb_mpn_landing_page_slide_up{0%{bottom:0;opacity:0}100%{bottom:24px;opacity:1}}@keyframes fb_mpn_bounce_in{0%{opacity:.5;top:100%}100%{opacity:1;top:0}}@keyframes fb_mpn_fade_out{0%{bottom:30px;opacity:1}100%{bottom:0;opacity:0}}@keyframes fb_mpn_bounce_out{0%{opacity:1;top:0}100%{opacity:.5;top:100%}}@keyframes fb_bounce_in_v2{0%{opacity:0;transform:scale(0, 0);transform-origin:bottom right}50%{transform:scale(1.03, 1.03);transform-origin:bottom right}100%{opacity:1;transform:scale(1, 1);transform-origin:bottom right}}@keyframes fb_bounce_in_from_left{0%{opacity:0;transform:scale(0, 0);transform-origin:bottom left}50%{transform:scale(1.03, 1.03);transform-origin:bottom left}100%{opacity:1;transform:scale(1, 1);transform-origin:bottom left}}@keyframes fb_bounce_out_v2{0%{opacity:1;transform:scale(1, 1);transform-origin:bottom right}100%{opacity:0;transform:scale(0, 0);transform-origin:bottom right}}@keyframes fb_bounce_out_from_left{0%{opacity:1;transform:scale(1, 1);transform-origin:bottom left}100%{opacity:0;transform:scale(0, 0);transform-origin:bottom left}}@keyframes slideInFromBottom{0%{opacity:.1;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slideInFromBottomDelay{0%{opacity:0;transform:translateY(100%)}97%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}1062 </style>1063 </head>1064 <body id="top" onload="initPage('Port Charlotte, FL');">1065 <!-- header1066============================================================================= -->1067 <div id="header-wrap" style="height: 130px;">1068 <header style="height: 0;">1069 <div style="position:absolute; top: 85px; left: 10px">1070 <h1>1071 The Urinals of Dairy Queen1072 </h1>1073 </div>1074 <nav>1075 <ul>1076 <li id="headerHome">1077 <a>1078 Home1079 </a>1080 <span>1081 </span>1082 </li>1083 <li id="headerSearch">1084 <a>1085 Search1086 </a>1087 <span>1088 </span>1089 </li>1090 <li id="headerMap">1091 <a>1092 Map1093 </a>1094 <span>1095 </span>1096 </li>1097 <li>1098 <a>1099 Gallery1100 </a>1101 <span>1102 </span>1103 </li>1104 </ul>1105 </nav>1106 </header>1107 </div>1108 <div>1109 <div id="extra">1110 <h3>1111 Dairy Queen is a well known fast food and ice cream shop with locations around the world.1112 </h3>1113 Filed under:1114 <a>1115 Bars & Restaurants1116 </a>1117 |1118 <a>1119 Top 1,000 Urinals1120 </a>1121 |1122 <a>1123 Women's Installations1124 </a>1125 </div>1126 </div>1127 <!-- Social Bar -->1128 <div id="extra" style="height: 35px; padding-top: 30px;">1129 <!-- Facebook -->1130 <div class="fb_reset" id="fb-root">1131 <div style="position: absolute; top: -10000px; width: 0px; height: 0px;">1132 <div>1133 </div>1134 </div>1135 </div>1136 <div class="fb-like fb_iframe_widget" data- data-colorscheme="dark" data-send="true" data-show-faces="false" data-width="640" fb-iframe-plugin-query="app_id=275918535768793&color_scheme=dark&container_width=980&href=http%3A%2F%2Furinal.net%2Fdairy_queen&locale=en_US&sdk=joey&send=true&show_faces=false&width=640" fb-xfbml-state="parsed">1137 <span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">1138 </span>1139 </div>1140 <!-- Twitter -->1141 </div>1142 <!-- End Social Bar -->1143 <!-- Google Banner Ad -->1144 <div id="extra">1145 <!-- GOOGLE AD -->1146 <!-- Front Page banner -->1147 <ins class="adsbygoogle" data-ad-client="ca-pub-6615147015841932" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display:inline-block;width:728px;height:90px">1148 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 90px; width: 728px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">1149 </div>1150 </ins>1151 <!-- END GOOGLE AD -->1152 </div>1153 <!-- End Google Banner Ad -->1154 <!-- Content1155============================================================================== -->1156 <div id="content-wrap" style="padding: 1px 0 35px;">1157 <!-- main -->1158 <section id="main" style="margin-top: 0;">1159 <article class="post">1160 <div class="image-section">1161 <img height="480" src="rick.jpg" width="640">1162 </div>1163 <p>1164 These urinals, submitted by1165 <font face="arial">1166 JM1167 </font>1168 , are located in the Dairy Queen restaurant in Port Charlotte, FL.1169 <font face="arial">1170 "While it's as not as versatile as a regular toilet, it still takes up the same amount of floor space.1171 </font>1172 </p>1173 <div class="image-section">1174 <img height="640" src="rick.jpg" width="480">1175 </div>1176 <p>1177 <font face="arial">1178 AS1179 </font>1180 submitted this image from Dairy Queen in Leetonia, OH:1181 <font face="arial">1182 "This full-line store – featuring both ice cream treats along with hot dogs, fries and 'more burger than bun' burgers – is located in the quaint town of Leetonia, just south of Youngstown, Ohio, and about 1 hour west of Pittsburgh, Pa.1183 </font>1184 </p>1185 <div class="image-section">1186 <img height="640" src="rick.jpg" width="480">1187 </div>1188 <p>1189 <font face="arial">1190 AS1191 </font>1192 also sent in this image from the Dairy Queen in Wellsville, OH:1193 <font face="arial">1194 "Yes, two Dairy Queens in a single trip!"1195 </font>1196 </p>1197 </article>1198 <div>1199 <font size="1">1200 </font>