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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">2<html xmlns="">3 <head>4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">5 <title>6 Guestbook | Crowne Plaza Philadelphia - King of Prussia Weddings | Share your Wedding Experience | King of Prussia, PA, 194067 </title>8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">9 <meta content="en-us" http-equiv="Content-Language">10 <meta content="guestbook, email, feedback, guestrooms, testimonials, contact, King of Prussia, PA, 19406" name="keywords">11 <meta content="Here are Crowne Plaza Philadelphia - King of Prussia Weddings, we love to hear from our guest's experience." name="description">12 <meta content="all" name="robots">13 <meta content="all" name="googlebot">14 <meta content="15 days" name="revisit-after">15 <meta content="Allen & Goel Marketing Company" name="development">16 <meta content="no-cache" http-equiv="pragma">17 <!--[if IE 6]>18 19 20<![endif]-->21 <!--[if lt IE 8]>22 23 24<![endif]-->25 <!-- Google tag (gtag.js) -->26 <style>27 @font-face {28 font-family: 'Open Sans';29 font-style: normal;30 font-weight: 400;31 font-stretch: normal;32 src: url(http://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');33}34 35 36 37@charset "utf-8";38 39html { width:100%;40 height:100%;41}42body {43 font-size: 14px;44 width:100%;45 height:100%;46 margin:0;47 padding:0px 0px 50px 0px;48 font-family:Arial, Helvetica, sans-serif;49}50html, 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, img {51 margin:0;52 padding:0;53 border:0;54 text-decoration: none;55 font-weight:normal;56}57caption, th {58 text-align:left;59 font-weight:normal;60}61a img {62 border:none;63}64a {65 cursor:pointer;66 text-decoration:none;67}68input[type=button], input[type=submit]{-webkit-appearance:none;} /* iPad button render fix */69 70/* ======================= */71/* ====== OPTIONALS ====== */72/* ======================= */73.fleft {float:left; }74.fright {float:right; padding-left:12px;}75.clear {clear:both;}76.show_hide {display:block;overflow:hidden;padding-bottom:10px;}77.button {padding: 7px 12px; background:#830051; font-family:'Open Sans', 'Arial', serif; color:#ffffff!important; font-weight:400; text-decoration:none!important;78 -moz-border-radius: 6px;79 -webkit-border-radius: 6px;80 border-radius: 6px; 81 -khtml-border-radius: 6px;82}83.button:hover {background:#cf0072;}84.mrgtop30{margin-top:30px;}85.content-box {border-bottom:1px solid #ccc; padding:7px 0px; margin-bottom:10px;}86.nounderline{text-decoration:none!important;}87 88/* ======================= */89/* ===== MAIN STYLES ===== */90/* ======================= */91h1 {font-family:'Open Sans', 'Arial', serif; font-size:30px; color:#ffffff; font-weight:400;}92h2 {font-family:'Open Sans', 'Arial', serif; font-size:24px; color:#252525; font-weight:400;}93h3 {font-family:'Open Sans', 'Arial', serif; font-size:24px; color:#ffffff; font-weight:400;}94h4 {font-family:'Open Sans', 'Arial', serif; font-size:18px; color:#000000; font-weight:400;}95h5 {font-family:'Arial', serif; font-size:18px; color:#830051; font-weight:400; margin:-10px 0px 17px 0px;}96.wrapper{background: #ffffff; /* Old browsers */97 background: -moz-linear-gradient(top, #ffffff 0%, #e4e1e0 300px, #e4e1e0 100%); /* FF3.6+ */98 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(300px,#e4e1e0), color-stop(100%,#e4e1e0)); /* Chrome,Safari4+ */99 background: -webkit-linear-gradient(top, #ffffff 0%,#e4e1e0 300px,#e4e1e0 100%); /* Chrome10+,Safari5.1+ */100 background: -o-linear-gradient(top, #ffffff 0%,#e4e1e0 300px,#e4e1e0 100%); /* Opera 11.10+ */101 background: -ms-linear-gradient(top, #ffffff 0%,#e4e1e0 300px,#e4e1e0 100%); /* IE10+ */102 background: linear-gradient(to bottom, #ffffff 0%,#e4e1e0 300px,#e4e1e0 100%); /* W3C */103 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4e1e0',GradientType=0 ); /* IE6-9 */min-height:100%;} 104.pageWrap{ width:960px; margin:0 auto; padding-bottom:30px;}105 106/* ======================= */107/* ======= HEADER ======== */108/* ======================= */109.header{ padding-bottom:20px; position:relative;}110.header a{ float:left; display:block;}111.header ul{ float:right; margin-top:10px;}112.header ul li{ float:left; list-style:none; height:12px;}113.header ul li{ padding:0 12px;}114.header ul li+li{ border-left:1px solid #ccc;}115.header ul li a{ font-size:12px; color:#505050; line-height:12px;}116.header ul li a.active, .header ul li a:hover{ color:#cf0072; /*text-decoration:underline!important;*/}117.holdInner{ float:right;}118a.large-button{ float:right; margin-top:25px; background:url(../../images/roundBorderedRight.png) top right no-repeat; padding-right:11px;}119a.large-button span{ background:url(../../images/roundedBorder_left.png) top left no-repeat; line-height:42px; padding:0 9px 0 20px; text-align:center; font-family: 'Open Sans', sans-serif; color:#fff; height:42px; position: relative; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); display:block;}120a.large-button:hover{ background-position:right -42px;}121a.large-button:hover span{ background-position:left -42px;}122.header #tagline {font-family: 'Georgia', serif; color:#ffffff; font-style:italic; font-size:16px; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);background: url('../../images/header-tagline.png') transparent no-repeat left center; height:37px; line-height:37px; padding: 0px 15px 0px 25px; display:block; position:absolute; top:45%; right:0px;}123.menuNav{ background:url(../../images/menuEndRound.png) right center no-repeat; height:58px;}124.menuNav li{ list-style:none; float:left; height:58px; background:url(../../images/menuTopRound.png) 0 0 no-repeat;}125.menuNav li a{ display:block; line-height:58px; background:url(../../images/menuRpt.png) right top repeat-x; margin-left:10px; color:#fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); font-size:14px; text-transform:uppercase; padding:0 33px 0 23px;}126.menuNav li.active, .menuNav li.active a, .menuNav li:hover, .menuNav li:hover a{ background-position:0 -58px;}127.menuNav li+li a{ margin-left:0px; padding:0 33px; font-family: 'Open Sans', sans-serif; color:#fff;}128 129/* ======================= */130/* ====== HOMEPAGE ======= */131/* ======================= */132.blocks {padding:15px 0 20px; background:#fff;}133.blocks .block {float:left; width:294px; border:3px solid #830051; position:relative; margin-left:15px; display:block;}134.blocks .block img {width:100%;135 -webkit-transition: all ease .5s;136 -moz-transition: all ease .5s;137 -o-transition: all ease .5s;138 transition: all ease .5s;139}140.blocks .block:hover img {141 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */142 filter: alpha(opacity=50); /* IE 5-7 */143 -moz-opacity: 0.5; /* Netscape */144 -khtml-opacity: 0.5; /* Safari 1.x */145 opacity: 0.5; /* Good browsers */146}147.blocks .block a.btn{ position:absolute; display:block; line-height:28px; padding:0 10px; color:#fff; background:#830051; left:50%; margin-left:-50px; top:180px; z-index:100;}148.blocks .block a.btn:hover{ background:#cf0072;}149.blocks .block .whitestripe{pointer-events: none; position:absolute; width:100%; font-size:18px; font-family: 'Open Sans', sans-serif; text-align:center; background:url(../../images/whiteBg.png) 0 0; top:56px; padding:20px 0; line-height:20px; z-index:99;}150.blocks .block .whitestripe span{ display:block;}151.knotBlock{ z-index:auto; padding:14px; font-family: 'Open Sans', 'sans-serif'; position:relative; min-height:100%;152 background: #830051; /* Old browsers */153 background: -moz-linear-gradient(top, #830051 0%, #cf0072 100%); /* FF3.6+ */154 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#830051), color-stop(100%,#cf0072)); /* Chrome,Safari4+ */155 background: -webkit-linear-gradient(top, #830051 0%,#cf0072 100%); /* Chrome10+,Safari5.1+ */156 background: -o-linear-gradient(top, #830051 0%,#cf0072 100%); /* Opera 11.10+ */157 background: -ms-linear-gradient(top, #830051 0%,#cf0072 100%); /* IE10+ */158 background: linear-gradient(to bottom, #830051 0%,#cf0072 100%); /* W3C */159 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#830051', endColorstr='#cf0072',GradientType=0 ); /* IE6-9 */160}161.knotBlock .knotContent{ float:left; width:700px; margin:20px;}162.knotBlock img{ float:right; margin:20px;163 -webkit-transition: all ease .5s;164 -moz-transition: all ease .5s;165 -o-transition: all ease .5s;166 transition: all ease .5s;167 }168 169.knotBlock img:hover{170 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */171 filter: alpha(opacity=75); /* IE 5-7 */172 -moz-opacity: 0.75; /* Netscape */173 -khtml-opacity: 0.75; /* Safari 1.x */174 opacity: 0.75; /* Good browsers */175}176.knotBlock .knotContent h3{padding:10px 0;}177.knotBlock .knotContent p{ font-size:18px; line-height:23px; color:#fff;}178.contentBlock{padding:40px 30px 10px; background:#fff;}179.contentBlock h3{ color:#252525; margin-bottom:20px;}180.contentBlock p{ color:#7d7d7d; font-size:14px; line-height:24px; margin-bottom:24px;}181 182/* ======================= */183/* ======= FOOTER ======== */184/* ======================= */185.footer{padding:40px 10px 0 10px; font-family:Arial, Helvetica, Sans-Serif; border-top:8px solid #830051; min-height:100%;186background: #cf0072; /* Old browsers */187background: -moz-linear-gradient(top, #cf0072 0%, #830051 100%); /* FF3.6+ */188background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf0072), color-stop(100%,#830051)); /* Chrome,Safari4+ */189background: -webkit-linear-gradient(top, #cf0072 0%,#830051 100%); /* Chrome10+,Safari5.1+ */190background: -o-linear-gradient(top, #cf0072 0%,#830051 100%); /* Opera 11.10+ */191background: -ms-linear-gradient(top, #cf0072 0%,#830051 100%); /* IE10+ */192background: linear-gradient(to bottom, #cf0072 0%,#830051 100%); /* W3C */193filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0072', endColorstr='#830051',GradientType=0 ); /* IE6-9 */194}195*+html .footer{background:#830051;}196.footer .footerBlock{ width:260px; text-align:center; float:left;}197.footer .footerBlock a.btn{ display:block; background:#fff; color:#830051; margin:20px 10%; padding:3px; font-size:12px;}198.footer .footerBlock a.btn:hover{ background:#f8dcec;}199.footerMenu{ float:left; width:172px; margin-left:20px;}200.footerMenu ul li{ list-style:none;}201.footerMenu li a{ font-size:12px; color:#fff; line-height:18px;}202.footerMenu li a.active, .footerMenu li a:hover{ text-decoration:underline;}203.footerRight{ float:right; text-align:right; margin-right:30px;}204.footerRight p{ color:#fff; font-size:12px; line-height:18px;}205.footerRight a{ color:#fff;}206.footerRight a.link{ text-decoration:underline;}207.footerRight a.facebook{ height:28px; display:block; line-height:28px; background:url(../../images/facebookIcon.png) left center no-repeat; margin-top:10px; padding-left:25px;}208.footerRight a.facebook:hover{ text-decoration:underline;}209.footerBottom{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff;}210.footerBottom a{ color:#fff; text-decoration:underline; }211.footerBottom p{ float:right;}212.footerBottom span{ float:left; display:block;}213.footerBottom{ border-top:1px solid #c46da0; padding-top:15px; line-height:30px;}214.corporate {width:100%; text-align:center; padding-top:20px;}215.corporate p {color:#555555; font-size:10px; margin-top:5px;}216.corporate p a:link, .corporate p a:visited {color:#555555;}217.corporate p a:hover, .corporate p a:active {text-decoration:underline;}218/* ======================= */219/* ======= SLIDER ======== */220/* ======================= */221.next{width:33px; height:33px; position:absolute; background:url(../../images/nexticon.png) no-repeat; z-index:999; right:0px; cursor:pointer; top:128px;}222.prev{width:33px; height:33px; position:absolute; background:url(../../images/previcon.png) no-repeat; z-index:999; left:0px; cursor:pointer; top:128px;}223.slider{ position:relative;}224.slider h1 { color:#830051; font-weight:400; z-index:99; position:absolute;bottom:0; left:0; display:block; width:570px; height:77px; line-height:77px;background :url(../../images/slider-white.png) 0 0 no-repeat; line-height:74px; /*text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/ padding:0px 20px; }225.slider h1 a:link, .slider h1 a:visited {color:inherit!important;}226 227/* ======================= */228/* ====== INTERNAL ======= */229/* ======================= */230.topBanner{ background:#fff; padding:10px 0; position:relative;}231.topBanner h1{ background:url(../../images/sliderTab.png) 0 0 repeat-x; line-height:74px; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); position:absolute; top:17px; padding:0 20px; right:15px;232 -webkit-border-bottom-left-radius: 10px;233 -moz-border-radius-bottomleft: 10px;234 border-bottom-left-radius: 10px; }235.topBanner .contact a:link, .topBanner .contact a:visited{ color:#830051;font-size:24px;font-weight:400;font-family:'Open Sans', sans-serif;/*background:url(../../images/banner-white.png) right center no-repeat; line-height:52px; height:52px;*/ position:absolute; bottom:29px; padding:0 80px 0px 40px; left:0px; z-index:1000;}236.topBanner img.overlay {position:absolute; top:0; left:0; z-index:999;pointer-events: none;}237#content{ background:#fff;}238#content .main{ float:left; width:615px; padding:7px 0 30px 25px;}239.main h2{ margin-bottom:14px;}240.main p{ color:#7d7d7d; line-height:24px; font-family:Arial, Helvetica, sans-serif; font-size:14px; margin-bottom:18px;} 241#content .sidebar{ float:right; width:246px; padding:48px 25px 0 0;}242.main p a:link, .main p a:visited{ text-decoration:underline; color:#830051;}243.main p a:hover, .main p a:active {text-decoration:none; color:#cf0072;}244.main ul {margin: 0px 0px 20px 5px;}245.main ul li {background:url("../../images/li-square.jpg") 0 9px no-repeat;font-family:'Arial', sans-serif; font-size: 14px; color:#7d7d7d; line-height:24px; margin-bottom:10px; padding-left:25px; list-style:none;}246.main ul.twoRow li {width:40%; float:left; margin-left:20px;}247.sideBlock{ position:relative; width:245px; height:134px; margin-bottom:20px;248 -webkit-transition: all ease .5s;249 -moz-transition: all ease .5s;250 -o-transition: all ease .5s;251 transition: all ease .5s;252}253.sideBlock:hover {254 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */255 filter: alpha(opacity=70); /* IE 5-7 */256 -moz-opacity: 0.7; /* Netscape */257 -khtml-opacity: 0.7; /* Safari 1.x */258 opacity: 0.7; /* Good browsers */259}260.sideBlock .overlay{ position:absolute; top:0px; left:0px;}261.sideBlock img{width:245px; height:134px;}262.sideBlock span{ font-size:18px; color:#fff; font-family:'Open Sans', 'Arial', serif; font-weight:400; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); background:#830051; line-height:34px; position:absolute; bottom:0px; width:100%; text-align:center; left:0px; display:block;}263 264/* ======================= */265/* ===== TESTIMONIALS ==== */266/* ======================= */267.testimonial {background:url('../../images/quotation.png') 0px 20px no-repeat;padding:28px 0px 15px 40px; border-bottom: 1px solid #ccc; position:relative;}268.name {font-size:16px!important; color:#830051!important; font-style:italic;}269.phone {background:transparent url('../../images/phone-icon.png') center left no-repeat; padding:3px 0px 0px 18px; margin-bottom:5px!important;}270.phone span {color:#cf0072;}271.description{margin-top:0px!important; /*padding-bottom:20px!important; border-bottom:1px solid #ccc;*/ }272.brdbottom{padding-bottom:20px;border-bottom:1px solid #ccc;}273.red-button {padding: 7px 12px; background:#830051; color:#fff;}274.red-button:hover {background:#cf0072;}275.testimonial a.red-button{position:absolute; bottom:0; right:0px;276 -moz-border-radius-topleft: 6px;277 -moz-border-radius-topright: 6px;278 -webkit-border-top-left-radius: 6px;279 -webkit-border-top-right-radius: 6px;280 border-top-left-radius:6px;281 border-top-right-radius:6px;}282 283/* ======================= */284/* ======= GALLERY ======= */285/* ======================= */286.gallery{ width: 640px; height: 400px; background: #fff; }287 288/* ======================= */289/* ===== FORM FIELDS ===== */290/* ======================= */291form input[type=submit]{background:#830051; padding:8px 14px; color:#fff;font-family: 'Open Sans', 'Arial', serif; font-size: 14px; border:0px;292 -moz-border-radius: 5px;293 -webkit-border-radius: 5px;294 border-radius: 5px; /* future proofing */295 -khtml-border-radius: 5px; /* for old Konqueror browsers */}296form input[type=submit]:hover {background:#cf0072; cursor:pointer;}297.form_field {margin-bottom:20px; width:100%;}298.form_field label {display:block; width:100%;font-family: 'Open Sans', 'Arial', serif; font-size: 14px; color: #000000; font-weight: 400; clear:both;}299.form_field input[type=text], .form_field textarea {border:1px solid #ccc; padding:6px; width:80%; font-family: 'Open Sans', 'Arial', serif; font-size: 14px; color: #686868; font-weight: 400;}300.form_field input[type=text]:focus, .form_field textarea:focus {border:1px solid #830051; outline:none;}301.form_field textarea {height:150px;}302.form_field.half{width:48%; display:block; float:left;}303label.required:before { content: " * "; color:#ff0000; padding:0px!important; }304/*label.required {background:url("../../images/required.png") 4px 4px no-repeat; padding-left:14px;}*/305 306/* ======================= */307/* == PREFERRED PARTNERS = */308/* ======================= */309.partner-box {position:relative; border-bottom:1px solid #ccc; margin-bottom:25px;}310.partner-box h5 {padding:13px 0px; }311.partners ul, .ceremony-locations ul {list-style:none!important;}312.ceremony-locations ul {padding-left:25px; border-left:5px solid #830051!important;}313.partners ul li, .ceremony-locations ul li {margin:0px!important;}314ul li.name {background:none; padding:0px; font-size:16px!important; font-style:normal!important;}315ul li.detail {background:none; padding:0px; font-size:14px!important; font-style:normal!important; color:#cf0072;}316ul li.phone {background:transparent url('../../images/phone-icon.png') center left no-repeat; padding:3px 0px 0px 18px; }317ul li.email {background:transparent url('../../images/email-icon.png') center left no-repeat; padding:3px 0px 0px 18px;}318ul li.web {background:transparent url('../../images/web-icon.png') center left no-repeat; padding:3px 0px 0px 18px;}319.main ul li a:link, .main ul li a:visited {color:#7d7d7d;}320.main ul li a:hover, .main ul li a:active {text-decoration:underline;color:#cf0072; }321.partners .show_hide {}322.partner-box a.red-button{position:absolute; bottom:0; right:0;323 -moz-border-radius-topleft: 6px;324 -moz-border-radius-topright: 6px;325 -webkit-border-top-left-radius: 6px;326 -webkit-border-top-right-radius: 6px;327 border-top-left-radius:6px;328 border-top-right-radius:6px;}329 330/* ======================= */331/* == CEREMONY LOCATIONS = */332/* ======================= */333.ceremony-locations {border-bottom:1px solid #ccc; margin-bottom:20px;padding-bottom:10px;}334 335 336 337 338 339/*340 Colorbox Core Style:341 The following CSS is consistent between example themes and should not be altered.342*/343#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}344#cboxWrapper {max-width:none;}345#cboxOverlay{position:fixed; width:100%; height:100%;}346#cboxMiddleLeft, #cboxBottomLeft{clear:left;}347#cboxContent{position:relative;}348#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}349#cboxTitle{margin:0;}350#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}351#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}352.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}353.cboxIframe{width:100%; height:100%; display:block; border:0;}354#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}355 356/* 357 User Style:358 Change the following styles to modify the appearance of Colorbox. They are359 ordered & tabbed in a way that represents the nesting of the generated HTML.360*/361#cboxOverlay{background:url(../../images/colorbox/overlay.png) repeat 0 0;}362#colorbox{outline:0;}363 #cboxTopLeft{width:21px; height:21px; background:url(../../images/colorbox/controls.png) no-repeat -101px 0;}364 #cboxTopRight{width:21px; height:21px; background:url(../../images/colorbox/controls.png) no-repeat -130px 0;}365 #cboxBottomLeft{width:21px; height:21px; background:url(../../images/colorbox/controls.png) no-repeat -101px -29px;}366 #cboxBottomRight{width:21px; height:21px; background:url(../../images/colorbox/controls.png) no-repeat -130px -29px;}367 #cboxMiddleLeft{width:21px; background:url(../../images/colorbox/controls.png) left top repeat-y;}368 #cboxMiddleRight{width:21px; background:url(../../images/colorbox/controls.png) right top repeat-y;}369 #cboxTopCenter{height:21px; background:url(../../images/colorbox/border.png) 0 0 repeat-x;}370 #cboxBottomCenter{height:21px; background:url(../../images/colorbox/border.png) 0 -29px repeat-x;}371 #cboxContent{background:#fff; overflow:hidden;}372 .cboxIframe{background:#fff;}373 #cboxError{padding:50px; border:1px solid #ccc;}374 #cboxLoadedContent{margin-bottom:28px;}375 #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}376 #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}377 #cboxLoadingOverlay{background:url(../../images/colorbox/loading_background.png) no-repeat center center;}378 #cboxLoadingGraphic{background:url(../../images/colorbox/loading.gif) no-repeat center center;}379 380 /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */381 #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }382 383 /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */384 #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}385 386 #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}387 #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}388 #cboxPrevious:hover{background-position:-75px -25px;}389 #cboxNext{position:absolute; bottom:0; left:27px; background:url(../../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}390 #cboxNext:hover{background-position:-50px -25px;}391 #cboxClose{position:absolute; bottom:0; right:0; background:url(../../images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}392 #cboxClose:hover{background-position:-25px -25px;}393 394/*395 The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill396 when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.397 See: http://jacklmoore.com/notes/ie-transparency-problems/398*/399.cboxIE #cboxTopLeft,400.cboxIE #cboxTopCenter,401.cboxIE #cboxTopRight,402.cboxIE #cboxBottomLeft,403.cboxIE #cboxBottomCenter,404.cboxIE #cboxBottomRight,405.cboxIE #cboxMiddleLeft,406.cboxIE #cboxMiddleRight {407 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);408}409 410.youtube {padding-left:21px; background:url(../../images/Filmstrip.png) no-repeat left 0;}411 412 413form{414 position: relative;415}416 417.error{418 position: absolute;419 left: 405px;420 width: 297px;421 height: 32px;422 font-size: 11px;423 border: none;424 background: transparent;425 line-height: 1em;426 padding: 0;427 margin: 0;428 background: url("../images/errorbg.png") no-repeat top left;429}430 431.error span{432 margin: 0;433 color: black;434 padding: 4px 4px 0 18px;435 display: block;436 font-size:10px;437}438 439.invalid{440 border: 1px solid red !important;441}442 443 444#btnSubmit {445 background: none repeat scroll 0 0 #830051;446 border: 0 none;447 border-radius: 5px;448 color: #FFFFFF;449 font-family: 'Open Sans','Arial',serif;450 font-size: 14px;451 padding: 8px 14px;452}453#btnSubmit:hover {454 background: none repeat scroll 0 0 #CF0072;455 cursor: pointer;456}457 </style>458 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">459 </head>460 <body>461 <!-- Begin Detectnick -->462 <!--[if lt IE 7]><div style="width:100%; background:yellow;"><div style="width:960px; margin:0 auto;"><p style="text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; font-weight:bold; padding:10px 0;">Your Website Browser is no longer supported. Please <a target="_blank">upgrade</a> to view this website properly. Thank you.</p></div></div><![endif]-->463 <!-- End Detectnick -->464 <div class="wrapper">465 <div class="pageWrap">466 <div class="header">467 <a>468 <img alt="Crowne Plaza Weddings logo" height="120" src="rick.jpg" title="Crowne Plaza Philadelphia-Valley Forge Weddings in King of Prussia, PA" width="208">469 </a>470 <div class="holdInner">471 <ul>472 <li>473 <a>474 Home475 </a>476 </li>477 <li>478 <a>479 Special Events480 </a>481 </li>482 <li>483 <a>484 Area Info485 </a>486 </li>487 <li>488 <a class="active">489 Guestbook490 </a>491 </li>492 </ul>493 <div class="clear">494 </div>495 <div id="tagline">496 Creating Memories that last a Lifetime497 </div>498 </div>499 <div class="clear">500 </div>501 </div>502 <div class="menuNav">503 <ul>504 <li>505 <a>506 Weddings507 </a>508 </li>509 <li>510 <a>511 Packages512 </a>513 </li>514 <li>515 <a>516 Gallery517 </a>518 </li>519 <li>520 <a>521 Guestrooms522 </a>523 </li>524 </ul>525 </div>526 <div class="clear">527 </div>528 <div id="content">529 <div class="topBanner">530 <h1>531 Guestbook532 </h1>533 <div class="contact">534 <a>535 Contact a Wedding Specialist536 </a>537 </div>538 <img alt="Reception tables" height="198" src="rick.jpg" title="Entire room decorated for wedding reception" width="960">539 <img alt class="overlay" height="215" src="rick.jpg" width="960">540 </div>541 <div class="main">542 <h2>543 Guestbook544 </h2>545 <h5>546 Tell us about your experience547 </h5>548 <p class="brdbottom">549 Here are Crowne Plaza Philadelphia - King of Prussia, we love to hear from our guest's experience. Tell us about your experience with us and we will 550 take your feedback to heart to help with future plans.551 </p>552 <form id="form1" method="GET" name="form1">553 <input id="database_fields" name="database_fields" type="hidden" value>554 <!--don't touch-->555 <input id="email_fields" name="email_fields" type="hidden" value>556 <!-- don't touch -->557 <input name="form_IP" type="hidden" value="171.66.10.168">558 <!--don't touch-->559 <input name="form_Status" type="hidden" value="1">560 <!-- form status -->561 <input name="form_Type" type="hidden" value="2">562 <!-- each form in site gets unique number -->563 <input name="includeFile" type="hidden" value="guestbook_information.asp">564 <div class="form_field">565 <label class="required" for="name">566 Name:567 </label>568 <input accesskey="y" class="required" id="form_name" name="form_name" title="Name" type="text" value>569 </div>570 <input accesskey="Y" title="filler" type="hidden">571 <div class="form_field">572 <label class="required" for="email">573 Email:574 </label>575 <input accesskey="y" class="required isemail" id="form_email" name="form_email" title="Email" type="text">576 </div>577 <input accesskey="Y" title="filler" type="hidden">578 <div class="form_field">579 <label class="required" for="share">580 Share Your Experience:581 </label>582 <textarea accesskey="y" class="required" cols id="form_comments" name="form_comments" rows title="Share Your Experience"></textarea>583 </div>584 <input name="spamAnswer" type="hidden" value="<@@>A9>9;;88">585 <div class="form_field">586 <label>587 <span>588 *589 </span>590 For validation, please answer following:591 </label>592 8 + 8 =593 <input class="required" maxlength="2" name="spamUserAnswer" size="1" title="Validation Answer" type="text" value>594 595 </div>596 <br>597 <br>598 <input id="btnSubmit" onclick="validateForm();return false;" type="button" value="Submit">599 </form>600 </div>601 <div class="sidebar">602 <div class="sideBlock">603 <a>604 <img alt="Server pouring champagne" src="rick.jpg" title="Server pouring champagne for guests to toast the newlywed couple">605 <span>606 Packages607 </span>608 <img alt class="overlay" height="160" src="rick.jpg" width="301">609 </a>610 </div>611 <div class="sideBlock">612 <a>613 <img alt="Bride and Groom's first dance" src="rick.jpg" title="Bride and Groom kissing during first dance">614 <span>615 Gallery616 </span>617 <img alt class="overlay" height="160" src="rick.jpg" width="301">618 </a>619 </div>620 <div class="sideBlock">621 <a>622 <img alt="Bed made and awaiting guests" src="rick.jpg" title="Guestroom with made up bed">623 <span>624 Guestrooms625 </span>626 <img alt class="overlay" height="160" src="rick.jpg" width="301">627 </a>628 </div>629 </div>630 <div class="clear">631 </div>632 </div>633 <div class="footer">634 <div class="footerBlock">635 <a>636 <img alt="Crowne Plaza Weddings logo" height="76" src="rick.jpg" title="Crowne Plaza Philadelphia-Valley Forge Weddings in King of Prussia, PA" width="203">637 </a>638 <a class="btn" target="_blank">639 Go To Crowne Plaza640 <br>641 Philadelphia - King of Prussia642 </a>643 </div>644 <div class="footerMenu">645 <ul>646 <li>647 <a>648 Weddings649 </a>650 </li>651 <li>652 <a>653 Packages654 </a>655 </li>656 <li>657 <a>658 Gallery659 </a>660 </li>661 <li>662 <a>663 Guestrooms664 </a>665 </li>666 </ul>667 </div>668 <div class="footerMenu">669 <ul>670 <li>671 <a>672 Home673 </a>674 </li>675 <li>676 <a>677 Special Events678 </a>679 </li>680 <li>681 <a>682 Area Info683 </a>684 </li>685 <li>686 <a class="active">687 Guestbook688 </a>689 </li>690 </ul>691 </div>692 <div class="footerRight">693 <p>694 [ADDRESS REDACTED]695 </p>696 <p>697 King of Prussia, PA 698 </p>699 <p>700 Toll-Free: [PHONE REDACTED]701 </p>702 <p>703 [PHONE REDACTED]704 </p>705 <p>706 E:707 <a class="link">708 [EMAIL REDACTED]709 </a>710 </p>711 <p>712 <a class="facebook" target="_blank">713 Like Us On Facebook714 </a>715 </p>716 </div>717 <div class="clear">718 </div>719 <div class="footerBottom">720 <span>721 © 2004 - 2014722 <a class="">723 Crowne Plaza Philadelphia - King of Prussia724 </a>725 . All Rights Reserved.726 </span>727 <p>728 Web Site Designed by729 <a target="_blank">730 AG Marketing Solutions731 </a>732 </p>733 <div class="clear">734 </div>735 </div>736 </div>737 <div class="imageHold">738 <img alt height="9" src="rick.jpg" width="960">739 </div>740 <div class="corporate">741 <p>742 <a target="_blank">743 Crowne Plaza744 </a>745 ® -746 <a target="_blank">747 Service Mark748 </a>749 -750 <a target="_blank">751 Privacy Policy752 </a>753 </p>754 <p>755 Hotel Managed By756 <a target="_blank">757 PM Hotel Group758 </a>759 </p>760 </div>761 </div>762 </div>763 <div id="cboxOverlay" style="display: none;">764 </div>765 <div class="" id="colorbox" role="dialog" style="display: none;" tabindex="-1">766 <div id="cboxWrapper">767 <div>768 <div id="cboxTopLeft" style="float: left;">769 </div>770 <div id="cboxTopCenter" style="float: left;">771 </div>772 <div id="cboxTopRight" style="float: left;">773 </div>774 </div>775 <div style="clear: left;">776 <div id="cboxMiddleLeft" style="float: left;">777 </div>778 <div id="cboxContent" style="float: left;">779 <div id="cboxTitle" style="float: left;">780 </div>781 <div id="cboxCurrent" style="float: left;">782 </div>783 <button id="cboxPrevious" type="button">784 </button>785 <button id="cboxNext" type="button">786 </button>787 <button id="cboxSlideshow">788 </button>789 <div id="cboxLoadingOverlay" style="float: left;">790 </div>791 <div id="cboxLoadingGraphic" style="float: left;">792 </div>793 </div>794 <div id="cboxMiddleRight" style="float: left;">795 </div>796 </div>797 <div style="clear: left;">798 <div id="cboxBottomLeft" style="float: left;">799 </div>800 <div id="cboxBottomCenter" style="float: left;">801 </div>802 <div id="cboxBottomRight" style="float: left;">803 </div>804 </div>805 </div>806 <div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;">807 </div>808 </div>809 </body>810</html>811