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="js canvas canvastext rgba backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssgradients fontface video audio wf-museoslab-n5-active wf-museosans-n5-active wf-museosans-n7-active wf-museosans-n3-active wf-museoslab-n3-active wf-atramentweb-n4-active wf-active" ng-app="ratesApp" style>3 <!--<![endif]-->4 <head>5 <style>6 * {7 -webkit-box-sizing: border-box;8 -moz-box-sizing: border-box;9 box-sizing: border-box; }10 11/* http://meyerweb.com/eric/tools/css/reset/ 12 v2.0 | 2011012613 License: none (public domain)14*/15html, body, div, span, applet, object, iframe,16h1, h2, h3, h4, h5, h6, p, blockquote, pre,17a, abbr, acronym, address, big, cite, code,18del, dfn, em, img, ins, kbd, q, s, samp,19small, strike, strong, sub, sup, tt, var,20b, u, i, center,21dl, dt, dd, ol, ul, li,22fieldset, form, label, legend,23table, caption, tbody, tfoot, thead, tr, th, td,24article, aside, canvas, details, embed,25figure, figcaption, footer, header, hgroup,26menu, nav, output, ruby, section, summary,27time, mark, audio, video {28 margin: 0;29 padding: 0;30 border: 0;31 font-size: 100%;32 font: inherit;33 vertical-align: baseline; }34 35/* HTML5 display-role reset for older browsers */36article, aside, details, figcaption, figure,37footer, header, hgroup, menu, nav, section {38 display: block; }39 40body {41 line-height: 1;42 font-family: "museo-sans", Helvetica, Arial, sans-serif; }43 44ol, ul {45 list-style: none; }46 47blockquote, q {48 quotes: none; }49 50blockquote:before, blockquote:after,51q:before, q:after {52 content: '';53 content: none; }54 55a {56 text-decoration: none; }57 58table {59 border-collapse: collapse;60 border-spacing: 0; }61 62/* GENERAL STYLES USED ACROSS ALL PAGES:63 These styles focus on layout, dimensions,64 typography and so on that will be shared65 across all INMA-Knows pages. */66body {67 color: #334e5e;68 background-color: #FFF;69 padding-top: 92px; }70 @media screen and (min-width: 769px) {71 body {72 padding-top: 120px; } }73 @media screen and (min-width: 1140px) {74 body {75 padding-top: 77px; } }76 @media screen and (max-width: 1215px) {77 body {78 padding-top: 125px; } }79 @media screen and (max-width: 768px) {80 body {81 padding-top: 100px; } }82 83h1 {84 font-family: "museo-slab", Helvetica, Arial, sans-serif;85 font-weight: 500;86 font-size: 42px;87 line-height: 48px;88 margin-bottom: 28px;89 text-align: center;90 text-transform: uppercase; }91 @media screen and (max-width: 500px) {92 h1 {93 font-size: 28px;94 line-height: 38px;95 margin-bottom: 18px; } }96 97h2 {98 font-size: 22px;99 line-height: 24px; }100 101h3 {102 font-size: 18px;103 line-height: 20px;104 font-weight: 700; }105 106p {107 font-family: "museo-sans", Helvetica, Arial, sans-serif;108 font-weight: 700;109 font-size: 17px;110 line-height: 24px; }111 112em {113 font-style: italic; }114 115strong {116 font-weight: bold; }117 118a:link, a:visited {119 font-family: "museo-sans", Helvetica, Arial, sans-serif; }120 121a:focus {122 outline: none; }123 124#masthead {125 background-image: url(../images/banners/cityscape.jpg);126 background-color: #091d2c;127 background-repeat: no-repeat;128 background-position: center center;129 background-size: cover;130 padding: 30px 20px; }131 @media screen and (min-width: 769px) {132 #masthead {133 width: 100%;134 min-height: 327px;135 padding-top: 135px; } }136 @media screen and (max-width: 768px) {137 #masthead {138 width: 100%;139 min-height: 200px; } }140 #masthead h1 {141 color: #ffaf10;142 font-size: 60px;143 line-height: 64px; }144 @media screen and (max-width: 768px) {145 #masthead h1 {146 font-size: 48px;147 line-height: 52px;148 margin-top: 50px; } }149 @media screen and (max-width: 500px) {150 #masthead h1 {151 font-size: 36px;152 line-height: 42px; } }153 154.promo {155 background: #ffaf10;156 padding: 90px 20px; }157 .promo h1 {158 color: #FFF;159 margin-bottom: 20px; }160 .promo p {161 text-align: center;162 color: #FFF;163 max-width: 680px;164 margin: 0 auto; }165 .promo .promoLink {166 width: auto;167 display: block;168 border-radius: 4px;169 -webkit-border-radius: 4px;170 -moz-border-radius: 4px;171 text-align: center;172 text-transform: uppercase;173 background-color: #FFF;174 color: #2985d1;175 padding: 14px 20px 12px;176 box-sizing: border-box;177 width: 310px;178 margin: 30px auto 0;179 padding-left: 0;180 padding-right: 0; }181 .promo .promoLink .arrow {182 display: inline-block;183 height: 13px;184 width: 18px;185 background-size: contain;186 background-image: url(../images/icons/buttonArrow_blue.png);187 background-repeat: no-repeat;188 background-position: right center; }189 @media screen and (max-width: 500px) {190 .promo .promoLink {191 max-width: 300px;192 line-height: 18px;193 font-size: 15px; } }194 @media screen and (max-width: 500px) {195 .promo .promoLink {196 width: auto; } }197 198.arrow {199 height: 14px;200 width: 18px;201 background-image: url(../images/icons/buttonArrow.png);202 display: inline-block;203 background-size: contain;204 background-repeat: no-repeat;205 background-position: left center; }206 @media screen and (max-width: 500px) {207 .arrow {208 position: absolute;209 right: 0;210 top: 40px; } }211 212.rev-arrow {213 height: 14px;214 width: 18px;215 background-image: url(../images/icons/buttonArrow_rev.png);216 display: inline-block;217 background-size: contain;218 background-repeat: no-repeat;219 background-position: right center; }220 @media screen and (max-width: 500px) {221 .rev-arrow {222 position: absolute;223 right: 0;224 top: 40px; } }225 226#convincing {227 width: 100%;228 padding: 0px 20px;229 background: #2985d1;230 text-align: center; }231 #convincing a {232 width: 390px;233 margin: 0 auto;234 padding: 33px 0 33px 30px;235 font-size: 18px;236 color: #FFF;237 display: block;238 background-repeat: no-repeat;239 background-position: left center;240 background-image: url(../images/icons/document.png);241 background-size: 25px 32px;242 margin: 0 auto;243 position: relative; }244 @media screen and (max-width: 500px) {245 #convincing a {246 padding: 30px 20px 30px 30px;247 width: 250px; } }248 #convincing a.hide-note {249 background-image: none; }250 251.comingSoon {252 width: 100%;253 background-color: #2985d1; }254 .comingSoon p {255 margin: 0 auto;256 max-width: 670px;257 font-size: 18px;258 line-height: 24px;259 text-align: center;260 padding: 30px 20px;261 color: #FFF;262 font-weight: normal; }263 .comingSoon a {264 color: #ffaf10; }265 .comingSoon a .arrow {266 background-image: url(../images/icons/buttonArrow_yellow.png); }267 268table.responsive {269 max-width: 990px;270 min-width: 600px;271 margin: 0 auto; }272 273#primaryNav {274 width: 100%;275 padding-top: 42px;276 background: #FFF;277 position: fixed;278 top: 0;279 z-index: 1000;280 border-bottom: 1px solid #c1cace;281 *zoom: 1; }282 #primaryNav:before, #primaryNav:after {283 content: " ";284 display: table; }285 #primaryNav:after {286 clear: both; }287 @media screen and (min-width: 1140px) {288 #primaryNav {289 padding-top: 0px; } }290 @media screen and (max-width: 1215px) {291 #primaryNav {292 padding-top: 0; } }293 #primaryNav #inmaHome {294 display: none; }295 @media screen and (min-width: 769px) {296 #primaryNav #inmaHome {297 height: 77px;298 width: 77px;299 margin-right: 1.5%;300 display: inline-block;301 color: transparent;302 font: 0/0 a;303 text-shadow: none;304 background-image: url(../images/icons/toINMA.png);305 background-size: contain;306 background-repeat: no-repeat;307 float: left;308 border-right: 1px solid #c1cace; } }309 #primaryNav #navLogo {310 display: inline-block;311 float: left;312 background-image: url(../images/logo.png);313 background-position: center center;314 background-size: contain;315 background-repeat: no-repeat;316 margin-right: 2.0%;317 margin-top: 10px;318 color: transparent;319 font: 0/0 a;320 text-shadow: none; }321 @media screen and (min-width: 769px) {322 #primaryNav #navLogo {323 width: 140px;324 height: 48px; } }325 @media screen and (max-width: 768px) {326 #primaryNav #navLogo {327 margin-top: 0;328 width: 84px;329 height: 50px;330 margin-left: 3%; } }331 #primaryNav #mainMenu {332 width: auto;333 display: block;334 overflow: hidden; }335 #primaryNav #mainMenu li {336 display: inline-block;337 border-top: 1px solid #c1cace; }338 @media screen and (min-width: 769px) {339 #primaryNav #mainMenu li {340 float: left;341 margin-right: 2.25%;342 margin-top: 30px;343 border-top: none; }344 #primaryNav #mainMenu li.inmaHome {345 display: none; } }346 @media screen and (max-width: 1215px) {347 #primaryNav #mainMenu li {348 float: none;349 border-top: none;350 margin-right: 25px;351 margin-top: 0; } }352 #primaryNav #mainMenu .menuItem {353 text-transform: uppercase;354 color: #082439;355 font-size: 15px;356 display: inline-block;357 padding-top: 18px;358 padding-bottom: 16px; }359 @media screen and (min-width: 769px) {360 #primaryNav #mainMenu .menuItem {361 padding-top: 0;362 padding-bottom: 9px; }363 #primaryNav #mainMenu .menuItem:hover {364 border-bottom: 2px solid; } }365 @media screen and (max-width: 1215px) {366 #primaryNav #mainMenu .menuItem {367 padding-top: 10px;368 padding-bottom: 4px;369 margin-top: 8px; } }370 #primaryNav #mainMenu .espanol.menuItem {371 color: #6cbd44; }372 @media screen and (max-width: 1215px) {373 #primaryNav #mainMenu {374 padding-left: 3%;375 overflow-x: scroll;376 overflow-y: hidden;377 white-space: nowrap;378 width: 100%;379 float: none;380 -webkit-overflow-scrolling: touch;381 margin: 0 auto;382 text-align: center;383 border-top: 1px solid #ccc;384 height: 50px; } }385 @media screen and (max-width: 768px) {386 #primaryNav #mainMenu {387 background: white;388 background: -moz-linear-gradient(left, white 0%, white 92%, #d9d9d9 100%);389 background: -webkit-gradient(left top, right top, color-stop(0%, white), color-stop(92%, white), color-stop(100%, #d9d9d9));390 background: -webkit-linear-gradient(left, white 0%, white 92%, #d9d9d9 100%);391 background: -o-linear-gradient(left, white 0%, white 92%, #d9d9d9 100%);392 background: -ms-linear-gradient(left, white 0%, white 92%, #d9d9d9 100%);393 background: linear, to right, white 0%, white 92%, #d9d9d9 100%;394 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9d9d9', GradientType=1 ); } }395 #primaryNav #register {396 background: #6cbd44;397 width: 200px;398 color: #FFF;399 text-transform: uppercase;400 position: absolute;401 top: 17px;402 right: 3%;403 text-align: center;404 float: right;405 padding: 14px 20px 12px;406 width: auto;407 display: block;408 border-radius: 4px;409 -webkit-border-radius: 4px;410 -moz-border-radius: 4px;411 text-align: center;412 text-transform: uppercase;413 background-color: #6cbd44;414 color: #FFF;415 padding: 14px 20px 12px;416 box-sizing: border-box;417 display: inline-block; }418 @media screen and (max-width: 500px) {419 #primaryNav #register {420 max-width: 300px;421 line-height: 18px;422 font-size: 15px; } }423 @media screen and (max-width: 768px) {424 #primaryNav #register {425 font-size: 14px;426 top: 9px;427 padding: 11px 15px 8px 15px; } }428 @media screen and (max-width: 500px) {429 #primaryNav #register {430 font-size: 14px;431 top: 9px;432 padding: 11px 15px 8px 15px;433 line-height: 14px; } }434 435#home #badge {436 position: absolute;437 margin: -199px auto 0 auto;438 z-index: 50;439 width: 100%;440 text-align: center; }441 @media screen and (min-width: 769px) {442 #home #badge {443 margin: -174px auto 0 auto; } }444 @media screen and (max-width: 768px) {445 #home #badge {446 margin: -112px auto 0 auto; } }447#home #badge img {448 width: 390px;449 height: 223px; }450 @media screen and (min-width: 769px) {451 #home #badge img {452 width: 370px;453 height: 211px; } }454 @media screen and (max-width: 768px) {455 #home #badge img {456 width: 237px;457 height: 135px; } }458#home #masthead {459 padding: 25px 20px 0 20px;460 position: relative;461 overflow: hidden;462 background: none;463 background-repeat: no-repeat;464 background-position: center center;465 background-size: cover;466 height: 472px; }467 @media screen and (max-width: 768px) {468 #home #masthead {469 background-image: url(../images/banners/cityscape.jpg);470 height: auto;471 padding: 20px 20px 125px 20px; } }472 #home #masthead #cityscape-video {473 min-width: 100.5%;474 min-height: 100%;475 width: auto;476 height: auto;477 z-index: -1;478 background-size: cover;479 position: absolute;480 top: 0px;481 left: 0px; }482 @media screen and (max-width: 768px) {483 #home #masthead #cityscape-video {484 display: none; } }485 #home #masthead h1 {486 color: #ffaf10;487 margin: 1.5% 0 10px 0; }488 #home #masthead h2 {489 text-align: center;490 font-weight: 500;491 font-size: 30px;492 color: #ffaf10;493 margin: 0 0 35px 0; }494 @media screen and (max-width: 768px) {495 #home #masthead h2 {496 font-size: 25px;497 margin: 0 0 15px 0; } }498 @media screen and (max-width: 500px) {499 #home #masthead h2 {500 font-size: 20px;501 margin: 0 0 15px 0; } }502 #home #masthead p {503 color: #FFF;504 font-weight: 300;505 max-width: 740px;506 text-align: center;507 margin: 0 auto; }508 @media screen and (min-width: 769px) {509 #home #masthead p {510 font-size: 20px;511 line-height: 26px; } }512 @media screen and (max-width: 768px) {513 #home #masthead p {514 font-size: 20px;515 line-height: 28px;516 padding: 0 20px; } }517 @media screen and (max-width: 500px) {518 #home #masthead p {519 font-size: 18px;520 line-height: 20px;521 padding: 0; } }522#home .clock {523 *zoom: 1;524 display: block;525 margin: 60px auto 70px;526 width: 550px; }527 #home .clock:before, #home .clock:after {528 content: " ";529 display: table; }530 #home .clock:after {531 clear: both; }532 @media screen and (max-width: 768px) {533 #home .clock {534 display: none; } }535#home #intro {536 margin: 60px auto 70px;537 padding: 0 20px; }538 #home #intro h1 {539 max-width: 700px;540 margin: 0 auto 50px; }541 #home #intro .reasonsWhy {542 margin: 0 auto;543 max-width: 725px;544 margin-bottom: 60px; }545 #home #intro .reasonsWhy ul {546 text-align: center; }547 @media screen and (max-width: 768px) {548 #home #intro .reasonsWhy ul .reason {549 display: inline-block;550 width: 27%;551 margin: 0 1.5% 30px; } }552 @media screen and (max-width: 500px) {553 #home #intro .reasonsWhy ul .reason {554 display: block;555 width: 100%; } }556 @media screen and (min-width: 769px) {557 #home #intro .reasonsWhy ul .reason {558 display: inline-block;559 width: 27%;560 margin: 0 1.5% 30px; } }561 #home #intro .reasonsWhy ul .reason .reasonIcon {562 width: 100%;563 margin: 0 auto; }564 @media screen and (max-width: 768px) {565 #home #intro .reasonsWhy ul .reason .reasonIcon {566 max-width: 120px; } }567 @media screen and (min-width: 769px) {568 #home #intro .reasonsWhy ul .reason .reasonIcon {569 max-width: 100px; } }570 @media screen and (max-width: 500px) {571 #home #intro .reasonsWhy ul .reason .reasonIcon {572 max-width: 120px; } }573 #home #intro .reasonsWhy ul .reason .reasonIcon img {574 width: 100%; }575#home #speakers {576 padding: 80px 20px 70px;577 background-color: #2985d1; }578 #home #speakers h1 {579 color: #FFF;580 margin: 0 auto 20px; }581 #home #speakers p {582 text-align: center;583 color: #FFF;584 font-weight: 300;585 margin: 0 auto 50px;586 max-width: 700px; }587 #home #speakers #speakerList {588 margin: 0 auto;589 max-width: 725px;590 margin-bottom: 60px;591 *zoom: 1;592 max-width: 990px;593 margin-left: auto;594 margin-right: auto; }595 #home #speakers #speakerList:before, #home #speakers #speakerList:after {596 content: " ";597 display: table; }598 #home #speakers #speakerList:after {599 clear: both; }600 #home #speakers #speakerList .row {601 *zoom: 1;602 display: block; }603 #home #speakers #speakerList .row:before, #home #speakers #speakerList .row:after {604 content: " ";605 display: table; }606 #home #speakers #speakerList .row:after {607 clear: both; }608 #home #speakers #speakerList .row .speaker {609 text-align: center;610 color: #FFF;611 margin-bottom: 30px; }612 #home #speakers #speakerList .row .speaker p {613 font-size: 16px;614 font-weight: 300;615 margin-bottom: 0; }616 #home #speakers #speakerList .row .speaker p span {617 display: block; }618 #home #speakers #speakerList .row .speaker p a {619 display: block; }620 #home #speakers #speakerList .row .speaker p a:link {621 color: #ffaf10; }622 #home #speakers #speakerList .row .speaker p a:visited {623 color: #ffaf10; }624 #home #speakers #speakerList .row .speaker p .handles {625 text-align: center;626 line-height: 5px; }627 #home #speakers #speakerList .row .speaker p .handles a {628 color: transparent;629 font: 0/0 a;630 text-shadow: none;631 background-repeat: no-repeat;632 display: inline-block;633 width: 24px;634 height: 24px;635 background-size: contain;636 margin: 0 2px; }637 #home #speakers #speakerList .row .speaker p .handles .twitterHandle {638 background-image: url(../images/icons/twitterHandle.png); }639 #home #speakers #speakerList .row .speaker p .handles .linkedinHandle {640 background-image: url(../images/icons/linkedinHandle.png); }641 @media screen and (max-width: 768px) {642 #home #speakers #speakerList .row .speaker {643 float: left;644 display: block;645 margin-right: 2.35765%;646 width: 23.23176%; }647 #home #speakers #speakerList .row .speaker:last-child {648 margin-right: 0; }649 #home #speakers #speakerList .row .speaker:nth-child(4n+0) {650 margin-right: 0; } }651 @media screen and (max-width: 500px) {652 #home #speakers #speakerList .row .speaker {653 float: left;654 display: block;655 margin-right: 2.35765%;656 width: 100%; }657 #home #speakers #speakerList .row .speaker:last-child {658 margin-right: 0; } }659 @media screen and (min-width: 769px) {660 #home #speakers #speakerList .row .speaker {661 float: left;662 display: block;663 margin-right: 2.35765%;664 width: 23.23176%; }665 #home #speakers #speakerList .row .speaker:last-child {666 margin-right: 0; } }667 #home #speakers #speakerList .row .speaker .speakerAvatar {668 width: 100%;669 margin: 0 auto 15px; }670 @media screen and (max-width: 768px) {671 #home #speakers #speakerList .row .speaker .speakerAvatar {672 max-width: 125px; } }673 @media screen and (min-width: 769px) {674 #home #speakers #speakerList .row .speaker .speakerAvatar {675 max-width: 200px; } }676 @media screen and (max-width: 500px) {677 #home #speakers #speakerList .row .speaker .speakerAvatar {678 max-width: 150px; } }679 #home #speakers #speakerList .row .speaker .speakerAvatar img {680 width: 100%; }681 @media screen and (min-width: 769px) {682 #home #speakers #speakerList .row.last .speaker {683 margin-left: auto;684 margin-right: auto;685 float: none; } }686 #home #speakers .agendaButton {687 width: auto;688 display: block;689 border-radius: 4px;690 -webkit-border-radius: 4px;691 -moz-border-radius: 4px;692 text-align: center;693 text-transform: uppercase;694 background-color: #FFF;695 color: #ffaf10;696 padding: 14px 20px 12px;697 box-sizing: border-box;698 margin: 0 auto;699 width: 309px; }700 #home #speakers .agendaButton .arrow {701 display: inline-block;702 height: 13px;703 width: 18px;704 background-size: contain;705 background-image: url(../images/icons/buttonArrow_yellow.png);706 background-repeat: no-repeat;707 background-position: right center; }708 @media screen and (max-width: 500px) {709 #home #speakers .agendaButton {710 max-width: 300px;711 line-height: 18px;712 font-size: 15px; } }713#home #venues {714 padding: 70px 20px 70px; }715 #home #venues p {716 text-align: center;717 margin-bottom: 40px; }718 #home #venues .venueList {719 *zoom: 1;720 max-width: 990px;721 margin-left: auto;722 margin-right: auto; }723 #home #venues .venueList:before, #home #venues .venueList:after {724 content: " ";725 display: table; }726 #home #venues .venueList:after {727 clear: both; }728 #home #venues .venueList .venue {729 margin-bottom: 40px; }730 @media screen and (min-width: 769px) {731 #home #venues .venueList .venue {732 float: left;733 display: block;734 margin-right: 2.35765%;735 width: 31.76157%; }736 #home #venues .venueList .venue:last-child {737 margin-right: 0; } }738 @media screen and (max-width: 768px) {739 #home #venues .venueList .venue {740 float: left;741 display: block;742 margin-right: 2.35765%;743 width: 31.76157%; }744 #home #venues .venueList .venue:last-child {745 margin-right: 0; } }746 @media screen and (max-width: 500px) {747 #home #venues .venueList .venue {748 float: left;749 display: block;750 margin-right: 2.35765%;751 width: 100%; }752 #home #venues .venueList .venue:last-child {753 margin-right: 0; } }754 #home #venues .venueList .venue h2 {755 text-align: center;756 color: #6cbd44;757 font-size: 22px;758 margin-bottom: 20px; }759 #home #venues .venueList .venue a {760 display: block;761 width: 100%;762 position: relative;763 overflow: hidden; }764 #home #venues .venueList .venue a img {765 width: 100%; }766 #home #venues .venueList .venue a p {767 display: block;768 width: 100%;769 background: #6cbd44;770 color: #FFF;771 position: absolute;772 bottom: 0px;773 text-align: left;774 box-sizing: border-box;775 padding: 10px;776 margin-bottom: 0; }777 @media screen and (max-width: 768px) {778 #home #venues .venueList .venue a p {779 font-size: 14px; } }780#home #events {781 background-image: url(../images/banners/homeEvents.png);782 background-repeat: no-repeat;783 background-position: center center;784 background-size: cover;785 padding: 110px 20px 70px; }786 #home #events h1 {787 color: #FFF; }788 #home #events p {789 color: #FFF;790 text-align: center;791 max-width: 700px;792 margin: 0 auto 40px; }793 #home #events ul {794 max-width: 820px;795 margin: 0 auto;796 display: block;797 *zoom: 1; }798 #home #events ul:before, #home #events ul:after {799 content: " ";800 display: table; }801 #home #events ul:after {802 clear: both; }803 #home #events .eventItem a {804 width: 100%;805 display: block;806 text-align: center; }807 #home #events .eventItem a img {808 width: 100%;809 margin-bottom: 20px; }810 #home #events .eventItem a p {811 color: #f9b023; }812 @media screen and (max-width: 500px) {813 #home #events .eventItem a p {814 color: #FFF;815 font-size: 22px; } }816 @media screen and (min-width: 769px) {817 #home #events .eventItem {818 width: 17%;819 margin: 0 1.5%;820 float: left; } }821 @media screen and (max-width: 768px) {822 #home #events .eventItem {823 width: 17%;824 margin: 0 1.5%;825 float: left; } }826 @media screen and (max-width: 500px) {827 #home #events .eventItem {828 width: 60%;829 margin: 0 auto 20px auto;830 display: block;831 float: none; } }832#home #whytAttend {833 padding: 110px 20px 70px; }834 #home #whytAttend p {835 text-align: center;836 max-width: 700px;837 margin: 0 auto 40px; }838 #home #whytAttend #toReasons {839 width: auto;840 display: block;841 border-radius: 4px;842 -webkit-border-radius: 4px;843 -moz-border-radius: 4px;844 text-align: center;845 text-transform: uppercase;846 background-color: #6cbd44;847 color: #FFF;848 padding: 14px 20px 12px;849 box-sizing: border-box;850 width: 340px;851 margin: 0 auto;852 font-size: 16px;853 padding-left: 0;854 padding-right: 0; }855 #home #whytAttend #toReasons .arrow {856 display: inline-block;857 height: 13px;858 width: 18px;859 background-size: contain;860 background-image: url(../images/icons/buttonArrow.png);861 background-repeat: no-repeat;862 background-position: right center; }863 @media screen and (max-width: 500px) {864 #home #whytAttend #toReasons {865 max-width: 300px;866 line-height: 18px;867 font-size: 15px; } }868 869#whyAttend #masthead {870 background-image: url(../images/banners/why_attend.jpg); }871#whyAttend #fifteenReasons {872 text-align: center;873 padding: 80px 20px 120px; }874 #whyAttend #fifteenReasons p {875 max-width: 700px;876 margin: 0 auto; }877 #whyAttend #fifteenReasons li {878 margin: 60px 0 0 0; }879 #whyAttend #fifteenReasons li .count {880 font-family: "museo-slab", Helvetica, Arial, sans-serif;881 color: #6cbd44;882 font-size: 60px;883 width: 142px;884 border-bottom: 2px solid #6cbd44;885 padding-bottom: 20px;886 display: block;887 margin: 0 auto; }888 #whyAttend #fifteenReasons li .reason {889 font-size: 22px;890 line-height: 24px;891 margin-top: 30px;892 display: block;893 text-align: center; }894 #whyAttend #fifteenReasons li:nth-child(14) {895 margin-left: auto;896 margin-right: auto;897 max-width: 400px; }898 #whyAttend #fifteenReasons li:nth-child(15) {899 margin-left: auto;900 margin-right: auto;901 max-width: 400px; }902 903#agenda #masthead {904 background-image: url(../images/banners/agenda.jpg); }905#agenda #partners {906 *zoom: 1;907 display: block;908 text-align: center;909 margin: 0 auto 35px auto;910 max-width: 960px; }911 #agenda #partners:before, #agenda #partners:after {912 content: " ";913 display: table; }914 #agenda #partners:after {915 clear: both; }916 #agenda #partners .col-4 {917 float: left;918 display: block;919 margin-right: 2.35765%;920 width: 31.76157%; }921 #agenda #partners .col-4:last-child {922 margin-right: 0; }923 @media screen and (max-width: 768px) {924 #agenda #partners .col-4 {925 float: left;926 display: block;927 margin-right: 2.35765%;928 width: 100%; }929 #agenda #partners .col-4:last-child {930 margin-right: 0; } }931 #agenda #partners img {932 width: 100%;933 max-width: 350px; }934#agenda #overview {935 background: #2985d1;936 padding: 80px 20px 60px;937 color: #FFF; }938 #agenda #overview p {939 font-weight: normal;940 font-size: 18px;941 max-width: 680px;942 margin: 0 auto;943 text-align: center;944 line-height: 24px; }945 #agenda #overview p a:link, #agenda #overview p a:visited {946 color: #ffaf10; }947 #agenda #overview #scheduleDays {948 *zoom: 1;949 max-width: 990px;950 margin-left: auto;951 margin-right: auto;952 *zoom: 1;953 margin-top: 40px; }954 #agenda #overview #scheduleDays:before, #agenda #overview #scheduleDays:after {955 content: " ";956 display: table; }957 #agenda #overview #scheduleDays:after {958 clear: both; }959 #agenda #overview #scheduleDays:before, #agenda #overview #scheduleDays:after {960 content: " ";961 display: table; }962 #agenda #overview #scheduleDays:after {963 clear: both; }964 #agenda #overview #scheduleDays h2 {965 color: #334e5e;966 padding-left: 1%;967 margin-bottom: 15px; }968 #agenda #overview #scheduleDays h3 {969 background: #0c3976;970 width: 100%;971 padding: 12px;972 box-sizing: border-box; }973 #agenda #overview #scheduleDays p {974 color: #FFF;975 margin-top: 15px;976 margin-left: 20px;977 display: block;978 font-size: 15px;979 line-height: 18px;980 text-align: left; }981 #agenda #overview #scheduleDays .days {982 *zoom: 1; }983 #agenda #overview #scheduleDays .days:before, #agenda #overview #scheduleDays .days:after {984 content: " ";985 display: table; }986 #agenda #overview #scheduleDays .days:after {987 clear: both; }988 #agenda #overview #scheduleDays .day {989 *zoom: 1;990 background: #165db1;991 padding-bottom: 20px;992 margin-bottom: 30px;993 position: relative; }994 #agenda #overview #scheduleDays .day:before, #agenda #overview #scheduleDays .day:after {995 content: " ";996 display: table; }997 #agenda #overview #scheduleDays .day:after {998 clear: both; }999 @media screen and (min-width: 769px) {1000 #agenda #overview #scheduleDays .days {1001 width: 50%;1002 float: left; }1003 #agenda #overview #scheduleDays .day {1004 width: 31%;1005 margin: 0 1%;1006 float: left;1007 min-height: 220px; }1008 #agenda #overview #scheduleDays .day p {1009 max-width: 75%; }1010 #agenda #overview #scheduleDays .day .multi-day {1011 width: 200%;1012 max-width: 175%;1013 box-sizing: border-box;1014 padding: 33px 25px;1015 text-align: center;1016 z-index: 200;1017 position: relative;1018 background: #17498d; }1019 #agenda #overview #scheduleDays #may12 .multi-day {1020 visibility: hidden; } }1021 @media screen and (max-width: 768px) {1022 #agenda #overview #scheduleDays .days {1023 width: 100%;1024 margin-bottom: 30px; }1025 #agenda #overview #scheduleDays .day {1026 width: 31%;1027 margin: 0 1%;1028 float: left;1029 min-height: 220px; }1030 #agenda #overview #scheduleDays .day p {1031 max-width: 75%; }1032 #agenda #overview #scheduleDays .day .multi-day {1033 width: 200%;1034 max-width: 175%;1035 box-sizing: border-box;1036 padding: 33px 25px;1037 text-align: center;1038 z-index: 500;1039 position: relative;1040 background: #17498d; }1041 #agenda #overview #scheduleDays #may12 .multi-day {1042 visibility: hidden; }1043 #agenda #overview #scheduleDays #awardsDinner {1044 position: absolute;1045 bottom: 20px; } }1046 @media screen and (max-width: 500px) {1047 #agenda #overview #scheduleDays .days {1048 width: 100%;1049 margin-bottom: 0; }1050 #agenda #overview #scheduleDays .day {1051 width: 100%;1052 margin-bottom: 30px;1053 float: none;1054 min-height: 0px; }1055 #agenda #overview #scheduleDays .day p {1056 max-width: 75%; }1057 #agenda #overview #scheduleDays .day .multi-day {1058 max-width: 75%;1059 padding: 0;1060 text-align: left;1061 z-index: 1000;1062 position: relative;1063 background: transparent; }1064 #agenda #overview #scheduleDays #may12 .multi-day {1065 visibility: visible; }1066 #agenda #overview #scheduleDays #awardsDinner {1067 position: relative;1068 bottom: auto; } }1069#agenda #masterSchedule {1070 padding: 80px 20px 0;1071 background: #fcfcfc; }1072 #agenda #masterSchedule p {1073 max-width: 680px;1074 margin: 0 auto 45px;1075 text-align: center; }1076 #agenda #masterSchedule #schedule {1077 *zoom: 1;1078 max-width: 990px;1079 margin-left: auto;1080 margin-right: auto; }1081 #agenda #masterSchedule #schedule:before, #agenda #masterSchedule #schedule:after {1082 content: " ";1083 display: table; }1084 #agenda #masterSchedule #schedule:after {1085 clear: both; }1086 #agenda #masterSchedule #schedule .day {1087 *zoom: 1;1088 display: block;1089 background-color: #fff; }1090 #agenda #masterSchedule #schedule .day:before, #agenda #masterSchedule #schedule .day:after {1091 content: " ";1092 display: table; }1093 #agenda #masterSchedule #schedule .day:after {1094 clear: both; }1095 #agenda #masterSchedule #schedule .day h2 {1096 background-color: #666666;1097 color: #fff; }1098 #agenda #masterSchedule #schedule .day .event {1099 border-bottom: 2px solid #f1f1f1; }1100 #agenda #masterSchedule #schedule .day .event:last-child {1101 border-bottom: none; }1102 #agenda #masterSchedule #schedule .day h2 {1103 width: 100%;1104 padding: 15px 22px 15px;1105 box-sizing: border-box; }1106 #agenda #masterSchedule #schedule .day h3 {1107 margin-bottom: 15px;1108 font-size: 16px; }1109 #agenda #masterSchedule #schedule .day p {1110 text-align: left;1111 font-size: 15px;1112 line-height: 18px;1113 margin: 0 0 20px 0;1114 font-weight: 300; }1115 #agenda #masterSchedule #schedule .day a:link, #agenda #masterSchedule #schedule .day a:visited {1116 color: #6cbd44;1117 font-weight: 300;1118 text-decoration: underline; }1119 #agenda #masterSchedule #schedule .day .eventSpeakers {1120 clear: both;1121 *zoom: 1;1122 margin-top: -5px; }1123 #agenda #masterSchedule #schedule .day .eventSpeakers:before, #agenda #masterSchedule #schedule .day .eventSpeakers:after {1124 content: " ";1125 display: table; }1126 #agenda #masterSchedule #schedule .day .eventSpeakers:after {1127 clear: both; }1128 #agenda #masterSchedule #schedule .day .eventSpeakersDescription {1129 display: inline-block;1130 width: 75%; }1131 #agenda #masterSchedule #schedule .day img.agendaLogo {1132 display: block;1133 margin-top: 10px;1134 margin-bottom: 10px; }1135 #agenda #masterSchedule #schedule .day ul, #agenda #masterSchedule #schedule .day ol {1136 margin-left: 20px;1137 margin-bottom: 10px; }1138 #agenda #masterSchedule #schedule .day ul {1139 list-style: disc; }1140 #agenda #masterSchedule #schedule .day ol {1141 list-style: armenian; }1142 #agenda #masterSchedule #schedule .day li {1143 text-align: left;1144 font-size: 15px;1145 line-height: 18px;1146 margin: 0;1147 font-weight: 100;1148 padding: 4px 15px 0 0;1149 color: #606060; }1150 #agenda #masterSchedule #schedule .day .time {1151 padding: 20px; }1152 #agenda #masterSchedule #schedule .day .eventDescription {1153 padding: 20px 20px 0 20px;1154 min-height: 100px; }1155 #agenda #masterSchedule #schedule .day .eventDescription .avatar {1156 overflow: hidden;1157 float: left;1158 margin: 0 12px 0 0;1159 display: block; }1160 #agenda #masterSchedule #schedule .day .eventDescription .avatar img {1161 width: 100%; }1162 @media screen and (max-width: 500px) {1163 #agenda #masterSchedule #schedule .day .eventDescription .avatar {1164 float: none;1165 margin: 0 0 10px 0; }1166 #agenda #masterSchedule #schedule .day .eventDescription .avatar img {1167 width: 100%; } }1168 #agenda #masterSchedule #schedule .day .eventDescription .avatar.small {1169 max-width: 40px;1170 max-height: 40px; }1171 @media screen and (max-width: 500px) {1172 #agenda #masterSchedule #schedule .day .eventDescription .avatar.small {1173 float: left;1174 margin: 0 10px 0 0; } }1175 #agenda #masterSchedule #schedule .day .eventDescription a.handle {1176 color: transparent;1177 font: 0/0 a;1178 text-shadow: none;1179 background-repeat: no-repeat;1180 display: inline-block;1181 width: 18px;1182 height: 18px;1183 background-size: contain;1184 margin: -10px 2px;1185 line-height: 26px; }1186 #agenda #masterSchedule #schedule .day .eventDescription .twitterHandle {1187 background-image: url(../images/icons/twitterHandle.png); }1188 #agenda #masterSchedule #schedule .day .eventDescription .linkedinHandle {1189 background-image: url(../images/icons/linkedinHandle.png); }1190 #agenda #masterSchedule #schedule .day .break .eventDescription {1191 min-height: 0;1192 padding-bottom: 0; }1193 #agenda #masterSchedule #schedule .day .timespan {1194 display: block;1195 margin-bottom: 12px;1196 font-weight: 700; }1197 #agenda #masterSchedule #schedule .day .timespan:last-child {1198 margin-bottom: 0; }1199 #agenda #masterSchedule #schedule .day .event {1200 *zoom: 1;