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 class="" lang="en-CA">3 <head>4 <style>5 6h1 { font-family: 'Open Sans', sans-serif; font-size: 20px; line-height:24px; border-bottom:2px solid #ddd; color:#161d40; padding-bottom:20px; margin:15px 0; font-weight:bold; }7h2 { font-family: 'Open Sans', sans-serif; font-size: 20px; line-height:24px; border-bottom:2px solid #ddd; color:#161d40; padding-bottom:20px; margin:15px 0; font-weight:bold; }8h3 { font-family: 'Open Sans', sans-serif; font-size: 20px; line-height:24px; margin:12px 0; font-weight:bold; text-transform:uppercase; }9h4 { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height:20px; color:#222222; }10h5 { font-family: 'Open Sans', sans-serif; font-size: 12px; line-height:20px; color:#222222; }11h6 { font-family: 'Open Sans', sans-serif; font-size: 10px; line-height:20px; color:#222222; }12p { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height:20px; color:#222222; margin:16px 0; }13a { color:#1D2951; 14 -o-transition:.5s;15 -ms-transition:.5s;16 -moz-transition:.5s;17 -webkit-transition:.5s;18 transition:.5s; }19a:hover { color:#770015; }20 21* { margin:0px; }22.wrapper { width: 940px; margin: 0 auto; }23html { background:none !important; margin:0px; }24body { margin:0; font-family: 'Open Sans', sans-serif; background-color:#fff; color:#222222; }25a{ color:#161d40;text-decoration:none; }26a:hover{ color:#770015; }27#header-wrapper #logo-container { float:left; width:100%; min-height:160px; }28#header-container #header-wrapper #logo{ display:block; float:left; text-indent:-9999px; background:url("/template/logo.png") no-repeat transparent; width:460px; height:160px; }29#header-container #header-wrapper .slogan{ float:right; font-style:italic; color:#770015; font-size:18px; font-weight:300; margin-top:66px; }30 31#menu-container { float:left; width:100%; min-height:60px; background-color:#eeeeee; border-bottom:1px solid #dddddd; }32#menu-container ul{ padding:0px; list-style:none; }33#menu-container #menu-wrapper ul li a{ font-family: 'Open Sans', sans-serif; font-size:18px; color:#161d40; font-weight:500; padding: 18px 30px; float:left; width:100px;}34#menu-container #menu-wrapper ul li ul li a{ width:200px; }35#menu-container #menu-wrapper ul li a:hover{ color:#770015; font-weight:bold; }36#menu-container #menu-wrapper ul li a.selected{ color:#770015; font-weight:bold; }37#menu-container #menu-wrapper ul li a.first-item{ padding-left:0px; }38#menu-container #menu-wrapper ul li a.last-item{ padding-right:0px; }39ul .menu-arrow { background: url("/template/menu-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 11px; width: 14px; left: 40px; position: absolute; top: -11px; }40 41#banner-container { width:100%; height:330px; background-color:#E4E4E4; float:left; overflow:hidden; }42#banner-container #banner-wrapper {width:1400px; margin:0 auto; height:481px; position:relative; }43#banner-container #banner-wrapper .prev { cursor:pointer; position:absolute; top:160px; left:10%; z-index:20; width:36px; height:36px; background:url("/template/nav.png") transparent no-repeat; text-indent:-9999px;background-position:0 100%; }44#banner-container #banner-wrapper .next { cursor:pointer; position:absolute; top:160px; right:10%; z-index:20; width:36px; height:36px; background:url("/template/nav.png") transparent no-repeat; text-indent:-9999px;}45#banner-container #banner-wrapper .prev:hover { background-position:100% 100%; }46#banner-container #banner-wrapper .next:hover { background-position:100% 0; }47#banner-container #banner-wrapper .pager { position:absolute; top:300px; left:45%; z-index:20; width:300px; }48#banner-container #banner-wrapper .pager a { width:12px; height:12px; background:url("/template/pager.png") no-repeat; text-indent:-9999px; float:left; margin-right:10px; -moz-transition: none; -webkit-transition: none;49-o-transition: color 0 ease-in; transition: none; }50#banner-container #banner-wrapper .pager a:hover, #banner-container #banner-wrapper .pager a.activeSlide { background-position:0 100%; }51#banner-container #banner-wrapper .banner-text {width:590px; left:60%; top:220px; position:absolute; }52#banner-container #banner-wrapper .banner-text h2 {width:590px; font-family: 'Open Sans', sans-serif; font-size:28px; color:#ffffff; text-shadow: 2px 1px #000; font-style:italic; border:none; }53 54#content { padding-top:20px; overflow:hidden; }55#content .home-left { float:left; width:620px; }56#content .home-right { float:left; width:300px; margin-left:20px; }57#content .home-right .bubble-title{ float:left; width:300px; text-align:center; }58#content .home-right .bubble{ float:left; width:300px; background-color:#d6d6d6; min-height:200px; margin-top:10px; position:relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }59#content .home-right .bubble .bubble-arrow{ width:20px; height:16px; background:url("/template/bubble_arrow.png") no-repeat; position:absolute; top:-16px; left:210px; }60#content .home-right span{ margin-top:30px; float:left; width:100%; text-align:center; font-weight:bold; font-size:20px; color:#fff; }61#content .home-right span a{ float:left; width:100%; text-align:center; font-weight:bold; font-size:24px; color:#161d40; }62#content .home-right span a:hover { color:#770015; }63.shadow { -moz-box-shadow: 1px 1px #b0b2b2; -webkit-box-shadow: 1px 1px #b0b2b2; box-shadow: 1px 1px #b0b2b2; }64#content #sidebar{ float:left; width:220px; min-height:200px; padding-bottom:60px; }65#content #sidebar .bubble-title{ float:left; width:220px; text-align:center; font-size:16px;}66#content #sidebar .bubble{ float:left; width:220px; background-color:#d6d6d6; min-height:140px; margin-top:10px; position:relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }67#content #sidebar .bubble .bubble-arrow{ width:20px; height:16px; background:url("/template/bubble_arrow.png") no-repeat; position:absolute; top:-16px; left:160px; }68#content #sidebar span{ margin-top:25px; float:left; width:100%; text-align:center; font-weight:bold; font-size:14px; color:#fff; }69#content #sidebar span a{ float:left; width:100%; text-align:center; font-weight:bold; font-size:16px; color:#161d40; }70#content #sidebar span a:hover { color:#770015; }71#content #main-column{ float:left; width:700px; margin-left:20px; }72#content #main-column a { color:#770015; }73#content #main-column a:hover { text-decoration:underline; }74#content #sidebar ul { list-style:none; padding:0px; margin-bottom:50px; float:left; margin-top:10px; }75#content #sidebar ul li { position:relative; float:left; width:170px; border-bottom:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; background-color:#efefef; padding:10px 20px 10px 30px; }76#content #sidebar ul li a{ font-size:16px; }77#content #sidebar ul li.first-item { border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; }78#content #sidebar ul li.last-item { border-bottom:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; }79#content #sidebar ul li a.selected { color:#770015; }80#content #sidebar ul .menu-arrow { background: url("/template/sidebar-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 14px; width: 14px; position:absolute; top:15px; left:9px; }81#content #sidebar ul li .more { background: url("/template/more_less.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 16px; width: 16px; position:absolute; top:13px; right:9px; text-indent:-9999px; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}82#content #sidebar ul li .more:hover { cursor:pointer; }83#content #sidebar ul li .open { background-position:0 100%; }84#content #sidebar ul ul { margin:0px; }85#content #sidebar ul ul li{ border-bottom:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; background-color:#F8F8F8; padding:10px; width:200px; }86#content #sidebar ul ul a{ font-size:12px; }87#content #sidebar ul ul a.selected{ color:#770015; }88#content #sidebar ul ul li .menu-arrow { background: url("/template/sidebar-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 14px; width: 14px; position:absolute; top:16px; left:20px; }89#content { float:left; width:100%; background: url("/template/background.jpg") repeat; }90#content-wrapper { min-height:300px; }91#footer-container{ min-height:240px; background-color:#ddd; background: url("/template/footer-background.png") no-repeat transparent; margin-top:10px; position:relative; }92#footer{ min-height:240px; font-family: 'Open Sans', sans-serif; font-size:12px; color:#666666; float:left; width:100%; }93#footer a { font-family: 'Open Sans', sans-serif; font-size:12px; color:#666666; text-decoration:none; }94#footer a:hover { text-decoration:underline; }95#footer-cover-left{ background:#E4E4E4; position:absolute; height:106px; left:-100%; top:132px; width:100%; }96#footer-cover-right{ background:#E4E4E4; position:absolute; height:153px; right:-100%; top:85px; width:100%; } 97#footer-left{ float:left; width:220px; margin-left:160px; margin-top:110px; }98#footer-right{ float:left; width:560px; margin-top:110px;}99#footer .footer-menu li { float:left; list-style:none; }100#footer .footer-menu li span{ float:left;margin:0 10px 17px; }101#footer .footer-copy { float:right; text-align:right; }102 103 104/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */105.fancybox-wrap,106.fancybox-skin,107.fancybox-outer,108.fancybox-inner,109.fancybox-image,110.fancybox-wrap iframe,111.fancybox-wrap object,112.fancybox-nav,113.fancybox-nav span,114.fancybox-tmp115{116 padding: 0;117 margin: 0;118 border: 0;119 outline: none;120 vertical-align: top;121}122 123.fancybox-wrap {124 position: absolute;125 top: 0;126 left: 0;127 z-index: 8020;128}129 130.fancybox-skin {131 position: relative;132 background: #f9f9f9;133 color: #444;134 text-shadow: none;135 -webkit-border-radius: 4px;136 -moz-border-radius: 4px;137 border-radius: 4px;138}139 140.fancybox-opened {141 z-index: 8030;142}143 144.fancybox-opened .fancybox-skin {145 -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);146 -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);147 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);148}149 150.fancybox-outer, .fancybox-inner {151 position: relative;152}153 154.fancybox-inner {155 overflow: hidden;156}157 158.fancybox-type-iframe .fancybox-inner {159 -webkit-overflow-scrolling: touch;160}161 162.fancybox-error {163 color: #444;164 font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;165 margin: 0;166 padding: 15px;167 white-space: nowrap;168}169 170.fancybox-image, .fancybox-iframe {171 display: block;172 width: 100%;173 height: 100%;174}175 176.fancybox-image {177 max-width: 100%;178 max-height: 100%;179}180 181#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {182 background-image: url('fancybox_sprite.png');183}184 185#fancybox-loading {186 position: fixed;187 top: 50%;188 left: 50%;189 margin-top: -22px;190 margin-left: -22px;191 background-position: 0 -108px;192 opacity: 0.8;193 cursor: pointer;194 z-index: 8060;195}196 197#fancybox-loading div {198 width: 44px;199 height: 44px;200 background: url('fancybox_loading.gif') center center no-repeat;201}202 203.fancybox-close {204 position: absolute;205 top: -18px;206 right: -18px;207 width: 36px;208 height: 36px;209 cursor: pointer;210 z-index: 8040;211}212 213.fancybox-nav {214 position: absolute;215 top: 0;216 width: 40%;217 height: 100%;218 cursor: pointer;219 text-decoration: none;220 background: transparent url('blank.gif'); /* helps IE */221 -webkit-tap-highlight-color: rgba(0,0,0,0);222 z-index: 8040;223}224 225.fancybox-prev {226 left: 0;227}228 229.fancybox-next {230 right: 0;231}232 233.fancybox-nav span {234 position: absolute;235 top: 50%;236 width: 36px;237 height: 34px;238 margin-top: -18px;239 cursor: pointer;240 z-index: 8040;241 visibility: hidden;242}243 244.fancybox-prev span {245 left: 10px;246 background-position: 0 -36px;247}248 249.fancybox-next span {250 right: 10px;251 background-position: 0 -72px;252}253 254.fancybox-nav:hover span {255 visibility: visible;256}257 258.fancybox-tmp {259 position: absolute;260 top: -99999px;261 left: -99999px;262 visibility: hidden;263 max-width: 99999px;264 max-height: 99999px;265 overflow: visible !important;266}267 268/* Overlay helper */269 270.fancybox-lock {271 overflow: hidden !important;272 width: auto;273}274 275.fancybox-lock body {276 overflow: hidden !important;277}278 279.fancybox-lock-test {280 overflow-y: hidden !important;281}282 283.fancybox-overlay {284 position: absolute;285 top: 0;286 left: 0;287 overflow: hidden;288 display: none;289 z-index: 8010;290 background: url('fancybox_overlay.png');291}292 293.fancybox-overlay-fixed {294 position: fixed;295 bottom: 0;296 right: 0;297}298 299.fancybox-lock .fancybox-overlay {300 overflow: auto;301 overflow-y: scroll;302}303 304/* Title helper */305 306.fancybox-title {307 visibility: hidden;308 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;309 position: relative;310 text-shadow: none;311 z-index: 8050;312}313 314.fancybox-opened .fancybox-title {315 visibility: visible;316}317 318.fancybox-title-float-wrap {319 position: absolute;320 bottom: 0;321 right: 50%;322 margin-bottom: -35px;323 z-index: 8050;324 text-align: center;325}326 327.fancybox-title-float-wrap .child {328 display: inline-block;329 margin-right: -100%;330 padding: 2px 20px;331 background: transparent; /* Fallback for web browsers that doesn't support RGBa */332 background: rgba(0, 0, 0, 0.8);333 -webkit-border-radius: 15px;334 -moz-border-radius: 15px;335 border-radius: 15px;336 text-shadow: 0 1px 2px #222;337 color: #FFF;338 font-weight: bold;339 line-height: 24px;340 white-space: nowrap;341}342 343.fancybox-title-outside-wrap {344 position: relative;345 margin-top: 10px;346 color: #fff;347}348 349.fancybox-title-inside-wrap {350 padding-top: 10px;351}352 353.fancybox-title-over-wrap {354 position: absolute;355 bottom: 0;356 left: 0;357 color: #fff;358 padding: 10px;359 background: #000;360 background: rgba(0, 0, 0, .8);361}362 363/*Retina graphics!*/364@media only screen and (-webkit-min-device-pixel-ratio: 1.5),365 only screen and (min--moz-device-pixel-ratio: 1.5),366 only screen and (min-device-pixel-ratio: 1.5){367 368 #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {369 background-image: url('[EMAIL REDACTED]');370 background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/371 }372 373 #fancybox-loading div {374 background-image: url('[EMAIL REDACTED]');375 background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/376 }377}378 379 380/*** ESSENTIAL STYLES ***/381.sf-menu, .sf-menu * {382 margin: 0;383 padding: 0;384 list-style: none;385}386.sf-menu li {387 position: relative;388}389.sf-menu ul {390 position: absolute;391 display: none;392 top: 100%;393 left: 0;394 z-index: 99;395}396.sf-menu > li {397 float: left;398}399.sf-menu li:hover > ul,400.sf-menu li.sfHover > ul {401 display: block;402}403 404.sf-menu a {405 display: block;406 position: relative;407}408.sf-menu ul ul {409 top: 0;410 left: 100%;411}412 413 414/*** DEMO SKIN ***/415 416.sf-menu li ul{417}418.sf-menu li ul li a{419 font-size:16px!important; 420 color:#1C2951;421 padding:15px!important; 422 width:100%;423 background:#ddd;424}425.sf-menu li ul li a:hover{426 color:#8C101A;427 background: #eeeeee;428}429.sf-menu li:hover,430.sf-menu li.sfHover {431 /* only transition out, not in */432 -webkit-transition: none;433 transition: none;434}435 436/*** arrows (for all except IE7) **/437.sf-arrows .sf-with-ul {438 padding-right: 2.5em;439 *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */440}441/* styling for both css and generated arrows */442.sf-arrows > li > .sf-with-ul:focus:after,443.sf-arrows > li:hover > .sf-with-ul:after,444.sf-arrows > .sfHover > .sf-with-ul:after {445 border-top-color: white; /* IE8 fallback colour */446}447/* styling for right-facing arrows */448.sf-arrows ul .sf-with-ul:after {449 margin-top: -5px;450 margin-right: -3px;451 border-color: transparent;452 border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */453 border-left-color: rgba(255,255,255,.5);454}455.sf-arrows ul li > .sf-with-ul:focus:after,456.sf-arrows ul li:hover > .sf-with-ul:after,457.sf-arrows ul .sfHover > .sf-with-ul:after {458 border-left-color: white;459}460 </style>461 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">462 <title>463 E-Factor Engineering - Morris and Helen Belkin Art Gallery Humidification System Upgrade Project - Projects - HVAC Design Application464 </title>465 <meta content="index,follow" name="robots">466 <style type="text/css">467 .fancybox-margin{margin-right:0px;}468 </style>469 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">470 </head>471 <body>472 <div id="body-container">473 <div id="header-container">474 <div class="wrapper" id="header-wrapper">475 <div id="logo-container">476 <a alt="E-Factor Engineering" id="logo">477 E-Factor Engineering478 </a>479 <span class="slogan">480 Specializing in Energy Efficient Solutions for Buildings481 </span>482 <div class="slogan">483 </div>484 </div>485 </div>486 </div>487 <div id="menu-container">488 <div class="wrapper" id="menu-wrapper">489 <ul class="nav sf-menu sf-js-enabled sf-arrows">490 <li>491 <a class="menu-2 first-item sf-with-ul">492 About Us493 </a>494 <ul style="display: none;">495 <div class="menu-arrow">496 </div>497 <li>498 <a class="">499 Who we are500 </a>501 </li>502 <li>503 <a class="last-item">504 Our Team505 </a>506 </li>507 </ul>508 </li>509 <li>510 <a class="menu-3 sf-with-ul">511 Our Focus512 </a>513 <ul style="display: none;">514 <div class="menu-arrow">515 </div>516 <li>517 <a class="">518 Engineering519 </a>520 </li>521 <li>522 <a class="">523 Energy Management524 </a>525 </li>526 <li>527 <a class="">528 Efficiency529 </a>530 </li>531 <li>532 <a class="">533 Economics534 </a>535 </li>536 </ul>537 </li>538 <li class="selected">539 <a class="selected menu-4 sf-with-ul">540 Projects541 </a>542 <ul style="display: none;">543 <div class="menu-arrow">544 </div>545 <li>546 <a class="first-item selected">547 All Projects548 </a>549 </li>550 <li>551 <a class="">552 Health Care553 </a>554 </li>555 <li>556 <a class="">557 Government558 </a>559 </li>560 <li>561 <a class="">562 Institutional563 </a>564 </li>565 </ul>566 </li>567 <li>568 <a class="menu-5">569 Clients570 </a>571 </li>572 </ul>573 </div>574 </div>575 <div id="content">576 <div class="wrapper" id="content-wrapper">577 <div id="sidebar">578 <ul>579 <li class="first-item">580 <a class="first-item">581 All Projects582 </a>583 </li>584 <li>585 <a class="more">586 more587 </a>588 <a class="">589 Health Care590 </a>591 </li>592 <ul style="display:none;">593 <li>594 <a>595 VCHA - Hybrid Heat Recovery Systems596 </a>597 </li>598 <li>599 <a>600 625 Powell St Foundation - Mechanical Design601 </a>602 </li>603 <li>604 <a>605 Lower Mainland Facilities Mgmt COp Projects606 </a>607 </li>608 <li>609 <a>610 Jack Bell Chilled Water Interconnect Project611 </a>612 </li>613 </ul>614 <li>615 <a class="more">616 more617 </a>618 <a class="">619 Government620 </a>621 </li>622 <ul style="display:none;">623 <li>624 <a>625 City of Richmond - Watermania Projects626 </a>627 </li>628 <li>629 <a>630 City of Burnaby - Edmonds Community Centre (2018)631 </a>632 </li>633 <li>634 <a>635 VCHA - Hybrid Heat Recovery Systems636 </a>637 </li>638 <li>639 <a>640 NRCan PFC Victoria - RCx and Boiler Project641 </a>642 </li>643 </ul>644 <li>645 <a class="more open">646 more647 </a>648 <a class="selected">649 Institutional650 </a>651 </li>652 <ul>653 <li>654 <a>655 VCHA - Hybrid Heat Recovery Systems656 </a>657 </li>658 <li>659 <a>660 Schools District 35 - Continuous Optimization and Power Factor Correction661 </a>662 </li>663 <li class="selected">664 <!--<div class="menu-arrow"></div>-->665 <a class="selected">666 UBC Art Gallery Humidification System Upgrade667 </a>668 </li>669 </ul>670 <ul style="display:none;">671 <li>672 <a>673 City of Richmond - Watermania Projects674 </a>675 </li>676 <li>677 <a>678 Aircraft Hangars679 </a>680 </li>681 <li>682 <a>683 625 Powell St Foundation - Mechanical Design684 </a>685 </li>686 <li>687 <a>688 NRCan PFC Victoria - RCx and Boiler Project689 </a>690 </li>691 </ul>692 <ul style="display:none;">693 <li>694 <a>695 825 Homer Street696 </a>697 </li>698 <li>699 <a>700 Shaughnessy Plc High Efficiency Boilers701 </a>702 </li>703 <li>704 <a>705 Aquarius Mews - Parkade Heat Reclaim Project706 </a>707 </li>708 <li>709 <a>710 Shaughnessy Place - HVAC Projects711 </a>712 </li>713 </ul>714 <ul style="display:none;">715 <li>716 <a>717 Sprinkler Systems Upgrade718 </a>719 </li>720 <li>721 <a>722 Backflow Prevention723 </a>724 </li>725 <li>726 <a>727 Insurance Claims Reports and Studies728 </a>729 </li>730 <li>731 <a>732 Lafarge Canada Inc.733 </a>734 </li>735 </ul>736 </ul>737 <h3 class="bubble-title">738 Do you have a739 <br>740 question for us?741 </h3>742 <div class="bubble shadow">743 <div class="bubble-arrow">744 </div>745 <span>746 Email us at747 <br>748 <a>749 [EMAIL REDACTED]750 </a>751 <br>752 Or give us a call at753 <br>754 <a>755 [PHONE REDACTED]756 </a>757 </span>758 </div>759 </div>760 <div id="main-column">761 <style type="text/css">762 #projects-container { margin-top:40px; }763#projects-container .project-container { width:220px; float:left; margin:0px 20px 20px 0px; background:#FFF; padding-bottom:5px; min-height:285px; }764#projects-container .project-container.last { width:220px; float:left; margin:0px 0px 20px 0px; }765#projects-container .project-container .image-container img { border: 2px solid #fff; }766#projects-container .project-container .image-container a{ position:relative; display:block; }767#projects-container .project-container .content-container { text-align:left; margin: 10px auto; font-size:14px; width:200px; }768#projects-container .project-container .image-container .overlay { background: url("/template/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0); display: none; height:196px; left:2px; position: absolute; top:2px; width: 216px; }769#projects-container .project-container .content-container h4 a{ font-weight:normal; }770#project-slide-container { position:relative; margin-bottom:20px; }771#project-slide-container #sliders{ padding:0px; border:5px solid #fff; list-style:none; }772#project-slide-container .prev { cursor:pointer; position:absolute; top:180px; left:2%; z-index:20; width:36px; height:36px; background:url("/template/nav.png") transparent no-repeat; text-indent:-9999px;background-position:0 100%; }773#project-slide-container .next { cursor:pointer; position:absolute; top:180px; right:2%; z-index:20; width:36px; height:36px; background:url("/template/nav.png") transparent no-repeat; text-indent:-9999px;}774#project-slide-container .prev:hover { background-position:100% 100%; }775#project-slide-container .next:hover { background-position:100% 0; }776#project-slide-container .pager { position:absolute; top:375px; left:45%; z-index:20; width:300px; }777#project-slide-container .pager a { width:12px; height:12px; background:url("/template/pager.png") no-repeat; text-indent:-9999px; float:left; margin-right:10px; -moz-transition: none; -webkit-transition: none;778-o-transition: color 0 ease-in; transition: none;}779#project-slide-container .pager a:hover, #project-slide-container .pager a.activeSlide { background-position:0 100%; }780#project-slide-container #caption{ text-align:center; font-weight:bold; }781 782#single-project-container { float:left; width:100%; }783#single-project-container .content-container{ float:left; width:100%; }784#single-project-container .content-container .client{ float:left; width:100%; font-size:18px; color:#161d40; font-weight:bold; }785#single-project-container .content-container .client span { color:#222222; }786#single-project-container .content-container .venue{ float:left; width:100%; font-size:18px; color:#161d40; font-weight:bold; }787#single-project-container .content-container .venue span { color:#222222; }788#single-project-container .content-container .year{ float:left; width:100%; font-size:18px; color:#161d40; font-weight:bold; }789#single-project-container .content-container .year span { color:#222222; }790#single-project-container .content-container .type{ float:left; width:100%; font-size:18px; color:#161d40; font-weight:bold; }791#single-project-container .content-container .type span { color:#222222; }792#single-project-container .content-container .description{ float:left; width:100%; margin-top:4px; }793 </style>794 <div id="single-project-container">795 <h1>796 Morris and Helen Belkin Art Gallery Humidification System Upgrade Project797 </h1>798 <div id="project-slide-container">799 <nav class="slide-wrapper">800 <span class="prev">801 Previous802 </span>803 <span class="next">804 Next805 </span>806 </nav>807 <ul id="sliders" style="position: relative; width: 690px; height: 394px; overflow: hidden;">808 <a style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1;" target="_blank" title>809 <img alt src="rick.jpg" style="width:690px; height:390px;" title>810 </a>811 <a style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4;" target="_blank" title>812 <img alt src="rick.jpg" style="width:690px; height:390px;" title>813 </a>814 <a style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3;" target="_blank" title>815 <img alt src="rick.jpg" style="width:690px; height:390px;" title>816 </a>817 <a style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2;" target="_blank" title>818 <img alt src="rick.jpg" style="width:690px; height:390px;" title>819 </a>820 <a style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1;" target="_blank" title>821 <img alt src="rick.jpg" style="width:690px; height:390px;" title>822 </a>823 </ul>824 <div class="pager">825 <a class="activeSlide">826 1827 </a>828 <a>829 2830 </a>831 <a>832 3833 </a>834 <a>835 4836 </a>837 <a>838 5839 </a>840 </div>841 <p id="caption">842 </p>843 </div>844 <div class="content-container">845 <div class="client">846 <span>847 Client:848 </span>849 University of British Columbia850 </div>851 <div class="venue">852 <span>853 Venue:854 </span>855 Morris and Helen Belkin Art Gallery856 </div>857 <div class="year">858 <span>859 Year:860 </span>861 2007862 </div>863 <div class="type">864 <span>865 Type: Institutional866 </span>867 </div>868 <div class="description">869 <p>870 <span style="color: #000000;">871 This project began with a review of the existing humidification system design problems and determination of causes and the development of some redesign options. An option to replace 5 of the 8 zone humidifiers with new electric pan humidifiers was selected to replace the failing - oversized steam to steam units.872 </span>873 </p>874 <p>875 <span style="color: #000000;">876 A dew-point temperature control scheme will be used to ensure tight RH control under variable conditions to well within +/- 1%RH. The new equipment was installed in March 2007.877 </span>878 </p>879 <p>880 <span style="color: #000000;">881 Many thanks to UBCH staff and also to Chris Malloy at Square M for the great service and pricing for the Dristeem equipment.882 </span>883 </p>884 </div>885 </div>886 </div>887 </div>888 <!-- END #main-column -->889 </div>890 <!-- END #content-wrapper -->891 <div id="footer">892 <div class="wrapper" id="footer-container">893 <div id="footer-cover-left">894 </div>895 <div id="footer-cover-right">896 </div>897 <div id="footer-left">898 [ADDRESS REDACTED]899 <br>900 [ADDRESS REDACTED]901 <br>902 [ADDRESS REDACTED]903 <br>904 [PHONE REDACTED]905 <br>906 <a>907 [EMAIL REDACTED]908 </a>909 </div>910 <div id="footer-right">911 <ul class="footer-menu" style="float:right;">912 <li>913 <a>914 About Us915 </a>916 </li>917 <li>918 <a>919 Our Focus920 </a>921 <span>922 |923 </span>924 </li>925 <li class="selected">926 <a>927 Projects928 </a>929 <span>930 |931 </span>932 </li>933 <li>934 <a>935 Clients936 </a>937 <span>938 |939 </span>940 </li>941 </ul>942 <div class="footer-copy">943 © 2023 E-Factor Engineering, Incorporated944 <br>945 Website Design by946 <a target="_blank">947 Eggbeater Creative948 </a>949 Inc. | Powered By950 <a target="_blank">951 Vortex952 </a>953 </div>954 </div>955 </div>956 </div>957 </div>958 <!-- END #content-container -->959 </div>960 <!-- END #body-container -->961 </body>962</html>963