CoolFace
Datasetpublic

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.

sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.8kdownloads
root7.html
7.html4092 linesDownload Raw Back to root
1<!DOCTYPE html>2<html class="no-touch" data-uw-w-loader lang="en" xml:lang="en" xmlns="">3 <head>4  <style>5   @charset "UTF-8";6.cb-lightbox { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform: translateZ(0px); transform: translateZ(0px); position: fixed; font: 14px/1.2 arial; left: 0px; top: 0px; bottom: 0; width: 100%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }7 8.cb-lightbox-overlay { background: rgba(0, 0, 0, 0.85); -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: inherit; transition-duration: inherit; -webkit-transition-property: opacity; transition-property: opacity; width: 100%; height: 100%; position: absolute; }9 10.cb-lightbox-content { width: 100%; height: 100%; position: absolute; left: 0; right: 0; }11 12.cb-lightbox-close { width: 25px; height: 25px; margin: 13px 13px 7px 7px; position: fixed; top: 0px; right: 0px; float: right; overflow: hidden; cursor: pointer; z-index: 20; }13.cb-lightbox-close:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }14.cb-lightbox-close:before { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }15.cb-lightbox-no-touch .cb-lightbox-close:hover { opacity: 1; }16 17.cb-lightbox-slides { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 1; }18 19.cb-lightbox-slide { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; width: 100%; left: 0; top: 0; overflow: hidden; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1; }20.cb-lightbox-slide.cb-lightbox-slide-current { z-index: 2; }21.cb-lightbox-slide.cb-lightbox-image-hide .cb-lightbox-image { opacity: 0.01; }22 23.cb-lightbox-slide-image { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform-origin: top left; transform-origin: top left; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #000; position: absolute; top: 0; left: 0; width: auto; height: auto; }24.cb-lightbox-is-zoomed .cb-lightbox-slide-image { -webkit-backface-visibility: hidden; backface-visibility: hidden; }25 26.cb-lightbox-image { display: block; max-width: 100%; max-height: 100%; z-index: 1; }27 28.cb-lightbox-image-placeholder { z-index: 2; }29 30.cb-lightbox-image-placeholder, .cb-lightbox-image { border: 0; padding: 0; margin: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }31 32.cb-lightbox-is-loading .cb-lightbox-loading { display: block; }33 34.cb-lightbox-arrow { position: fixed; top: 40px; width: 60px; height: calc(100vh - 80px); cursor: pointer; z-index: 10; }35.cb-lightbox-arrow span { border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; display: block; height: 10px; width: 10px; margin-top: -15px; position: absolute; top: 50%; -webkit-transition: all 250ms ease; transition: all 250ms ease; }36.cb-lightbox-no-touch .cb-lightbox-arrow:hover { opacity: 1.0; }37 38.cb-lightbox-arrow--disabled { opacity: 0; visibility: hidden; }39 40.cb-lightbox-arrow--inside { position: absolute; top: 0; height: 100%; }41 42.cb-lightbox-arrow-prev { left: 0px; }43.cb-lightbox-arrow-prev span { left: 25px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }44.cb-lightbox-no-touch .cb-lightbox-arrow-prev:hover span { margin-left: -5px; }45 46.cb-lightbox-arrow-next { right: 0px; }47.cb-lightbox-arrow-next span { right: 25px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }48.cb-lightbox-no-touch .cb-lightbox-arrow-next:hover span { margin-right: -5px; }49 50#cb-loading-image { margin-top: 15px; position: relative; left: 70px; }51 52.cb-lightbox-info { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; }53.cb-lightbox-slide .cb-lightbox-info { -webkit-transform: translateY(100%); transform: translateY(100%); }54.cb-lightbox-info .cb-lightbox-caption { -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; padding: 15px 90px; text-align: center; min-width: 300px; position: relative; left: 50%; }55 56.cb-lightbox-slide-with-caption .cb-lightbox-caption { color: #fff; -webkit-transform: translateY(100%); transform: translateY(100%); position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 10px; }57 58.cb-lightbox-counter { color: #fff; padding: 15px 20px; position: absolute; right: 0; bottom: 0; }59 60.cb-lightbox-lock { overflow: visible !important; }61.cb-lightbox-lock body { overflow: hidden; height: 100%; }62 63.dragarea { position: fixed; width: 100%; height: 100%; }64 65.cb-lightbox-draggable { cursor: -webkit-zoom-in; cursor: zoom-in; }66 67.cb-lightbox-iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }68 69.cb-lightbox-error { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; background: #fff; padding: 50px; }70 71.cb-lightbox-slide-previews, .cb-lightbox-slide-next { -webkit-transform: translateY(-100%); transform: translateY(-100%); }72 73/*--Start Animation--*/74.cb-lightbox-loading { pointer-events: none; position: relative; top: 100px; width: 50px; height: 50px; margin: 0px auto; display: none; text-align: center; z-index: 98; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 10; }75 76.cb-lightbox-loading-animation { display: inline-block; width: 100%; height: 100%; position: relative; }77.cb-lightbox-loading-animation:before { content: ""; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #fff; border-color: #fff transparent #fff transparent; -webkit-animation: dual-ring .8s linear infinite; animation: dual-ring .8s linear infinite; position: absolute; top: 50%; left: 50%; z-index: 1; }78.cb-lightbox-loading-animation:after { content: ""; border-radius: 50%; border: 5px solid rgba(128, 128, 128, 0.4); width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }79 80@-webkit-keyframes dual-ring { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }81  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } }82 83@keyframes dual-ring { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }84  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } }85.cb-lightbox__zoomMap { overflow: hidden; position: absolute; top: 0; left: 0; z-index: 10; }86.cb-lightbox__zoomMap img { display: block; max-width: 200px; max-height: 200px; width: auto; height: auto; }87 88.cb-lightbox__zoomMap-handle { border: 1px solid rgba(255, 255, 255, 0.7); outline: 300px solid rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }89.cb-lightbox-run-zoom .cb-lightbox__zoomMap-handle { -webkit-transition: width 250ms ease, height 250ms ease, top 250ms ease, left 250ms ease; transition: width 250ms ease, height 250ms ease, top 250ms ease, left 250ms ease; }90 91.cb-lightbox__zoomButtons { position: absolute; right: 0; top: 100px; z-index: 20; }92 93.cb-lightbox__zoomButton { background-color: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; color: #fff; -webkit-transition: opacity 250ms; transition: opacity 250ms; }94.cb-lightbox-no-touch .cb-lightbox__zoomButton:not(.cb-lightbox__zoomButton--disabled):hover { opacity: 0.6; }95 96.cb-lightbox__zoomButton--in, .cb-lightbox__zoomButton--out { position: relative; cursor: pointer; }97.cb-lightbox__zoomButton--in:after, .cb-lightbox__zoomButton--out:after { font-size: 24px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }98 99.cb-lightbox__zoomButton--disabled { cursor: default; opacity: .5; }100 101.cb-lightbox__zoomButton--in:after { content: "+"; display: block; }102 103.cb-lightbox__zoomButton--out:after { content: "–"; display: block; }104 105.cb-lightbox-slide-dragging-zoommap { -webkit-transition: -webkit-transform 75ms; transition: -webkit-transform 75ms; transition: transform 75ms; transition: transform 75ms, -webkit-transform 75ms; }106 107.cb-lightbox-arrow, .cb-lightbox-close { -webkit-transition: opacity 250ms ease; transition: opacity 250ms ease; }108.cb-lightbox-no-touch .cb-lightbox-arrow:hover, .cb-lightbox-no-touch .cb-lightbox-close:hover { opacity: 0.6; }109 110.cb-lightbox-init-transitions .cb-lightbox-overlay, .cb-lightbox-init-transitions .cb-lightbox-error, .cb-lightbox-init-transitions .cb-lightbox-arrow, .cb-lightbox-init-transitions .cb-lightbox-close, .cb-lightbox-init-transitions .cb-lightbox-info, .cb-lightbox-init-transitions .cb-lightbox__zoomButtons, .cb-lightbox-init-transitions .cb-lightbox__zoomMap { -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-property: visibility, opacity; transition-property: visibility, opacity; -webkit-transition-duration: inherit; transition-duration: inherit; }111 112.cb-lightbox.cb-lightbox-init-opening .cb-lightbox-overlay, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox-error, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox-close, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox__zoomButtons, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox__zoomMap, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox-info, .cb-lightbox.cb-lightbox-init-opening .cb-lightbox-arrow { opacity: 0; visibility: hidden; }113 114.cb-lightbox.cb-lightbox-init-closing .cb-lightbox-overlay, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox-error, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox-close, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox__zoomButtons, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox__zoomMap, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox-info, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox-arrow, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox-overlay, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox-error, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox-close, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox__zoomButtons, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox__zoomMap, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox-info, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox-arrow { opacity: 1; visibility: visible; }115.cb-lightbox.cb-lightbox-init-closing .cb-lightbox__zoomButton, .cb-lightbox.cb-lightbox-run-opening .cb-lightbox__zoomButton { pointer-events: none; }116 117.cb-lightbox.cb-lightbox-run-closing .cb-lightbox-overlay, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox-error, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox-close, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox__zoomButtons, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox__zoomMap, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox-info, .cb-lightbox.cb-lightbox-run-closing .cb-lightbox-arrow { opacity: 0 !important; visibility: hidden !important; }118.cb-lightbox.cb-lightbox-run-closing .cb-lightbox__zoomButton { pointer-events: none; }119 120.cb-lightbox.cb-lightbox-init-opening .cb-lightbox-slide > .cb-lightbox-caption, .cb-lightbox.cb-lightbox-init-closing .cb-lightbox-slide > .cb-lightbox-caption { visibility: hidden; }121 122.cb-lightbox-is-zoomed .cb-lightbox-arrow, .cb-lightbox-is-zoomed .cb-lightbox-info, .cb-lightbox-is-zoomed .cb-lightbox-caption { display: none; }123.cb-lightbox-is-zoomed .cb-lightbox-slide-draggable { cursor: grab; cursor: -webkit-grab; }124.cb-lightbox-is-zoomed.cb-lightbox-is-grabbing .cb-lightbox-slide-draggable { cursor: grabbing; cursor: -webkit-grabbing; }125 126.cb-lightbox-is-iframe .cb-lightbox__zoomMap, .cb-lightbox-is-iframe .cb-lightbox__zoomButtons { display: none; }127 128@media screen and (max-width: 768px) { .cb-lightbox-lock { padding-right: 0; } }129 130 131 132@charset "UTF-8";133/*134  ICI135  Copyright (C) 2022 by Systemantics, Bureau for Informatics136 137  Systemantics GmbH138  Hausbroicher Str. 218139  47877 Willich140  GERMANY141 142  Web:    www.systemantics.net143  Email:  hello@systemantics.net144 145  Permission granted to use the files associated with this146  website only on your webserver.147 148  Changes to these files are PROHIBITED due to license restrictions.149*/150/* http://meyerweb.com/eric/tools/css/reset/151   v2.0 | 20110126152   License: none (public domain)153*/154html, body, div, span, applet, object, iframe,155h1, h2, h3, h4, h5, h6, p, blockquote, pre,156a, abbr, acronym, address, big, cite, code,157del, dfn, em, img, ins, kbd, q, s, samp,158small, strike, strong, sub, sup, tt, var,159b, u, i, center,160dl, dt, dd, ol, ul, li,161fieldset, form, label, legend,162table, caption, tbody, tfoot, thead, tr, th, td,163article, aside, canvas, details, embed,164figure, figcaption, footer, header, hgroup,165menu, nav, output, ruby, section, summary,166time, mark, audio, video {167  margin: 0;168  padding: 0;169  border: 0;170  font-size: 100%;171  font: inherit;172  vertical-align: baseline;173}174 175/* HTML5 display-role reset for older browsers */176article, aside, details, figcaption, figure,177footer, header, hgroup, menu, nav, section {178  display: block;179}180 181body {182  line-height: 1;183}184 185ol, ul {186  list-style: none;187}188 189blockquote, q {190  quotes: none;191}192 193blockquote:before, blockquote:after,194q:before, q:after {195  content: "";196  content: none;197}198 199table {200  border-collapse: collapse;201  border-spacing: 0;202}203 204/* Clearfix hack by http://nicolasgallagher.com/micro-clearfix-hack/ */205@font-face {206  font-family: "Px Grotesk";207  src: url("../webfonts/Px-Grotesk-Regular.woff2") format("woff2"), url("../webfonts/Px-Grotesk-Regular.woff") format("woff");208  font-style: normal;209  font-weight: normal;210}211@font-face {212  font-family: "Px Grotesk";213  src: url("../webfonts/Px-Grotesk-Italic.woff2") format("woff2"), url("../webfonts/Px-Grotesk-Italic.woff") format("woff");214  font-style: italic;215  font-weight: normal;216}217@font-face {218  font-family: "Px Grotesk";219  src: url("../webfonts/Px-Grotesk-Bold.woff2") format("woff2"), url("../webfonts/Px-Grotesk-Bold.woff") format("woff");220  font-style: normal;221  font-weight: bold;222}223@font-face {224  font-family: "Px Grotesk";225  src: url("../webfonts/Px-Grotesk-Bold-Italic.woff2") format("woff2"), url("../webfonts/Px-Grotesk-Bold-Italic.woff") format("woff");226  font-style: italic;227  font-weight: bold;228}229/* Styles */230body,231input {232  font: normal 20px/25px "Px Grotesk", Helvetica, Arial, sans-serif;233}234@media screen and (max-width: 1024px) {235  body,236input {237    font-size: 16px;238    line-height: 20px;239  }240}241 242img {243  display: block;244}245 246a {247  text-decoration: none;248  color: #000;249}250 251em {252  font-style: italic;253}254 255html {256  -webkit-font-smoothing: antialiased;257  -moz-osx-font-smoothing: grayscale;258  overflow-y: scroll;259  word-wrap: break-word;260  -webkit-text-size-adjust: 100%;261  box-sizing: border-box;262  background-color: #F1F1F1;263}264 265*, *:before, *:after {266  box-sizing: inherit;267}268 269body {270  position: relative;271}272 273strong {274  font-weight: bold;275}276 277.clickable-block {278  cursor: pointer;279  user-select: none;280}281 282.lazyimage {283  height: 100%;284  width: 100%;285  object-fit: contain;286  opacity: 0;287}288 289.lazyloaded {290  opacity: 1;291}292 293:root {294  --space-left: 100px;295  --space-right: 100px;296  --space-left-short: 30px;297  --space-right-short: 30px;298  --screenheight: 100vh;299}300 301@media screen and (max-width: 1024px) {302  :root {303    --space-left: 16px;304    --space-right: 16px;305    --space-left-short: 16px;306    --space-right-short: 16px;307  }308}309.change-transition {310  transition: opacity 300ms;311  opacity: 1;312}313 314.change-transition--hide {315  opacity: 0;316}317 318* + .wrap-exhibitions,319* + .wrap-learning,320* + .wrap-collaborators,321* + .wrap-products {322  margin-top: 66px;323}324 325.page--fixed {326  position: fixed;327  top: 0;328  left: 0;329  overflow: hidden;330  height: 100%;331  width: 100%;332}333 334.header {335  transition: transform 500ms;336  transform: translateY(0);337  background-color: #F1F1F1;338  position: fixed;339  top: 0;340  left: 0;341  width: 100%;342  z-index: 200;343}344 345.header--hide {346  transform: translateY(-100%);347}348 349.header__inner {350  padding-top: 21px;351  padding-bottom: 17px;352  padding-left: var(--space-left-short);353  padding-right: var(--space-right-short);354  position: relative;355}356 357.header__main {358  -webkit-display: flex;359  display: flex;360}361 362.header__main-left {363  justify-content: space-between;364  -webkit-display: flex;365  display: flex;366  width: 50%;367}368 369.header-logo {370  position: absolute;371  top: 20px;372  right: var(--space-right-short);373  width: 92px;374}375.header-logo img {376  width: 100%;377}378 379.header-menu {380  letter-spacing: 0.02em;381}382.no-touch .header-menu a:hover {383  text-decoration: underline;384  text-underline-offset: 3px;385  text-decoration-thickness: 1px;386}387 388.header-menu--main {389  text-transform: uppercase;390}391 392.header-menu__links + .header-menu__links {393  margin-left: 85px;394}395 396.header__main-right {397  width: 50%;398}399 400.header-text {401  font: normal 15px/18px "Px Grotesk", Helvetica, Arial, sans-serif;402  letter-spacing: 0.03em;403  margin-left: 100px;404  width: 344px;405}406@media screen and (max-width: 1024px) {407  .header-text {408    font-size: 13px;409    line-height: 19px;410  }411}412 413.header-center__buttons {414  -webkit-display: flex;415  display: flex;416}417.header-center__buttons * + .button {418  margin-left: 17px;419}420 421.donate-form {422  height: 30px;423}424.donate-form img {425  position: absolute;426  opacity: 0;427}428 429.button--form {430  background-color: transparent;431  height: 30px;432}433 434.header-search {435  margin-top: 14px;436  width: 212px;437}438 439.header-search__form {440  position: relative;441}442 443.header-search__input {444  background-color: transparent;445  padding: 0;446  margin: 0;447  border: 0;448  border-radius: 0;449  border-bottom: 1px solid #000;450  width: 100%;451}452.header-search__input:focus {453  outline: none;454}455 456.header-search__button {457  cursor: pointer;458  user-select: none;459  border: 0;460  background-color: transparent;461  margin: 0;462  padding: 0;463  background-image: url("../elements/ici_search.svg");464  background-repeat: no-repeat;465  background-size: contain;466  position: absolute;467  right: 0;468  top: 4px;469  height: 13px;470  width: 13px;471}472 473.header--large .header__top {474  position: relative;475  overflow: hidden;476}477.header--large .header__top-text {478  font-size: 54px;479  line-height: 1.037;480  padding-bottom: 40px;481  transform-origin: 0 0;482}483.header--large .header__top-text--placeholder {484  opacity: 0;485  visibility: hidden;486}487.header--large .header__top-text--visibile {488  position: absolute;489  top: 0;490  width: 100%;491}492.header--large .header__main {493  position: relative;494}495.header--large .header__main-left {496  width: 70%;497}498.header--large .header-menu {499  font-size: 36px;500  line-height: 1.0555;501}502.header--large .header-search {503  margin-top: 51px;504  width: 340px;505}506.header--large .header-search__button {507  top: -9px;508  height: 21px;509  width: 21px;510}511.header--large .header__main-right {512  position: absolute;513  right: 0;514  width: 40%;515}516.header--large .header-text {517  opacity: 0;518}519.header--large .header-logo {520  top: -1px;521  right: 0;522  width: 140px;523}524 525.header--force-hide {526  display: none;527}528 529.button {530  transition: background 1ms, color 1ms;531  cursor: pointer;532  user-select: none;533  font: bold 13px/17px "Px Grotesk", Helvetica, Arial, sans-serif;534  color: #000;535  letter-spacing: 0.05em;536  display: inline-block;537  border: 1px solid #000;538  border-radius: 6px;539  text-transform: uppercase;540  padding: 5px 12px;541  margin: 0;542}543.no-touch .button:hover {544  background-color: #000;545  color: #F1F1F1;546}547 548.button--more {549  font-weight: normal;550  padding: 11px 17px;551}552 553.button--invert {554  background-color: #000;555  color: #F1F1F1;556}557.no-touch .button--invert:hover {558  border-color: #3ec96d;559  background-color: #3ec96d;560  color: #000;561}562 563.main {564  padding-top: 173px;565}566 567.module .module__inner {568  padding-left: var(--space-left);569  padding-right: var(--space-right);570}571 572.time-bubble {573  cursor: pointer;574  user-select: none;575  transition: border 1ms;576  font: bold 13px/17px "Px Grotesk", Helvetica, Arial, sans-serif;577  font-feature-settings: "tnum";578  text-transform: uppercase;579  border: 1px solid #000;580  letter-spacing: 0.05em;581  border-radius: 18px;582  display: inline-block;583  padding: 5px 9px 6px;584}585.no-touch .time-bubble:hover {586  border-color: #3ec96d;587}588 589.footer {590  margin-top: 200px;591}592 593.footer__inner {594  padding-left: var(--space-left-short);595  padding-right: var(--space-right-short);596  padding-bottom: 20px;597}598 599.footer__columns {600  flex-wrap: wrap;601  justify-content: space-between;602  -webkit-display: flex;603  display: flex;604  width: 50%;605}606.no-touch .footer__columns a:hover {607  text-decoration: underline;608  text-underline-offset: 3px;609  text-decoration-thickness: 1px;610}611 612.module--header .module__inner {613  padding-left: var(--space-left-short);614  padding-right: var(--space-right-short);615}616 617.module__header {618  gap: 4.2798%;619  -webkit-display: flex;620  display: flex;621}622 623.module__header-column {624  width: 100%;625}626 627.module__header-title {628  font: normal 74px/70px "Px Grotesk", Helvetica, Arial, sans-serif;629}630 631.module__header-filter {632  flex-wrap: wrap;633  -webkit-display: flex;634  display: flex;635  margin-top: 21px;636  padding-left: 5px;637}638 639.module__header-filter-item {640  font: normal 20px/25px "Px Grotesk", Helvetica, Arial, sans-serif;641  cursor: pointer;642  user-select: none;643  margin-right: 15px;644}645@media screen and (max-width: 1024px) {646  .module__header-filter-item {647    font-size: 16px;648    line-height: 20px;649  }650}651.no-touch .module__header-filter-item:hover {652  text-decoration: underline;653  text-underline-offset: 5px;654  text-decoration-thickness: 1px;655}656 657.module__header-filter-item--selected {658  text-decoration: underline;659  text-underline-offset: 5px;660  text-decoration-thickness: 1px;661}662 663.module__header-intro {664  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;665  letter-spacing: 0.01em;666  margin-top: 37px;667}668@media screen and (max-width: 1024px) {669  .module__header-intro {670    font-size: 30px;671    line-height: 32px;672  }673}674.module__header-filter + .module__header-intro {675  margin-top: 27px;676}677 678.module__header-intro--large {679  font: normal 36px/38px "Px Grotesk", Helvetica, Arial, sans-serif;680}681 682.module-image--video-icon .module-image__image:before {683  content: "";684  background-color: rgba(0, 0, 0, 0.2);685  position: absolute;686  top: 0;687  left: 0;688  height: 100%;689  width: 100%;690}691 692.module-image__video-icon {693  background-image: url("../elements/icon_overlay_play.svg");694  background-repeat: no-repeat;695  background-position: center;696  background-size: contain;697  display: block;698  transform: translate(-50%, -50%);699  position: absolute;700  pointer-events: none;701  top: 50%;702  left: 50%;703  height: 72px;704  width: 72px;705  z-index: 10;706}707 708.module-image__caption {709  font: bold 11px/14px "Px Grotesk", Helvetica, Arial, sans-serif;710  display: inline-block;711  margin-top: 14px;712}713@media screen and (max-width: 1024px) {714  .module-image__caption {715    font-size: 13px;716    line-height: 19px;717  }718}719 720.module-image--header .module-image__caption {721  font: bold 11px/14px "Px Grotesk", Helvetica, Arial, sans-serif;722  margin-top: 19px;723}724@media screen and (max-width: 1024px) {725  .module-image--header .module-image__caption {726    font-size: 13px;727    line-height: 19px;728  }729}730 731.module-image--align-bottom-left .module-image__image {732  bottom: 0;733  left: 0;734}735 736.module-image--align-top-right .module-image__image {737  top: 0;738  right: 0;739}740 741.module-image--fit-in-height .module-image__image {742  height: 100%;743}744.module-image--fit-in-height .module-image__image .lazyimage {745  height: 100%;746  width: auto;747  object-fit: unset;748}749 750.module-image--fit-in-width .module-image__image {751  width: 100%;752}753 754.module-image__container {755  position: relative;756}757.module-image__container:after {758  content: "";759  padding-bottom: 75%;760  display: block;761}762 763.module-image__image {764  display: block;765  border-radius: 12px;766  overflow: hidden;767  position: absolute;768}769 770.module-image--inline.module-image--fit-in-width .module-image__container:after {771  content: none;772}773 774* + .module--explore {775  margin-top: 66px;776}777 778.module__explore-top {779  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;780  letter-spacing: 0.01em;781  -webkit-display: flex;782  display: flex;783}784@media screen and (max-width: 1024px) {785  .module__explore-top {786    font-size: 30px;787    line-height: 32px;788  }789}790 791.module__explore-filter {792  flex-wrap: wrap;793  -webkit-display: flex;794  display: flex;795  width: 47.5836431227%;796}797 798.module__explore-filter-values {799  flex-wrap: wrap;800  -webkit-display: flex;801  display: flex;802  margin-left: 10px;803  position: relative;804}805 806.module__explore-filter-selected {807  border-bottom: 1px solid #000;808  width: 150px;809}810.module__explore-filter-selected:after {811  content: "";812  background-image: url("../elements/ici_down_arrow.svg");813  background-repeat: no-repeat;814  background-position: center;815  background-size: contain;816  position: absolute;817  right: 10px;818  top: 5px;819  height: 18px;820  width: 14px;821}822 823.module__explore-filter-select {824  cursor: pointer;825  user-select: none;826  position: absolute;827  top: 0;828  left: 0;829  opacity: 0;830  height: 100%;831  width: 100%;832}833 834.module__explore-title {835  text-transform: uppercase;836  letter-spacing: 0.05em;837  margin-left: 52.4163568773%;838}839* + .module__explore-title {840  margin-left: 4.8327137546%;841}842 843.module__explore-items {844  flex-wrap: wrap;845  gap: 4.8327137546%;846  -webkit-display: flex;847  display: flex;848  margin-bottom: -64px;849}850* + .module__explore-items {851  margin-top: 70px;852}853 854.explore-item--size-large {855  width: 47.5836431227%;856}857 858.explore-item--size-small {859  width: 30.1115241636%;860}861.explore-item--size-small .explore-item__title {862  display: -webkit-box;863  -webkit-box-orient: vertical;864  -webkit-line-clamp: 4;865  overflow: hidden;866}867 868.explore-item--initiative .explore-item__title {869  font: normal 36px/38px "Px Grotesk", Helvetica, Arial, sans-serif;870}871@media screen and (max-width: 1024px) {872  .explore-item--initiative .explore-item__title {873    font-size: 20px;874    line-height: 24px;875  }876}877 878.explore-item {879  margin-bottom: 64px;880}881.explore-item .time-bubble {882  margin-top: 14px;883}884.explore-item .explore-item__cities {885  margin-top: 14px;886}887.explore-item .explore-item__cities .time-bubble {888  margin-top: 0;889}890 891.explore-item__type {892  transition: color 1ms;893  font: bold 13px/17px "Px Grotesk", Helvetica, Arial, sans-serif;894  letter-spacing: 0.05em;895  text-transform: uppercase;896}897* + .explore-item__type {898  margin-top: 22px;899}900.no-touch .explore-item__type a:hover {901  color: #3ec96d;902}903 904.explore-item__title {905  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;906  letter-spacing: 0.01em;907}908@media screen and (max-width: 1024px) {909  .explore-item__title {910    font-size: 30px;911    line-height: 32px;912  }913}914* + .explore-item__title {915  margin-top: 12px;916}917.no-touch .explore-item__title a:hover {918  text-decoration: underline;919  text-underline-offset: 3px;920  text-decoration-thickness: 1px;921}922 923.explore-item__date {924  font: normal 20px/25px "Px Grotesk", Helvetica, Arial, sans-serif;925}926@media screen and (max-width: 1024px) {927  .explore-item__date {928    font-size: 16px;929    line-height: 20px;930  }931}932 933.module__explore-more {934  text-align: center;935  margin-top: 164px;936}937 938.playlist-item__cities,939.explore-item__cities {940  flex-wrap: wrap;941  -webkit-display: flex;942  display: flex;943  margin-bottom: -10px;944  position: relative;945  max-height: 80px;946  overflow: hidden;947}948.playlist-item__cities .time-bubble,949.explore-item__cities .time-bubble {950  margin-right: 10px;951  margin-bottom: 10px;952}953 954.playlist-item__cities {955  margin-top: 14px;956}957 958.explore-item__cities--limit:after {959  content: "";960  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f1f1f1 84%, #f1f1f1 100%);961  position: absolute;962  bottom: 0;963  left: 0;964  pointer-events: none;965  height: 65px;966  width: 100%;967}968 969* + .module--playlist {970  margin-top: 66px;971}972 973.module__playlist-top {974  margin-bottom: 70px;975}976 977.module__playlist-title {978  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;979  letter-spacing: 0.01em;980  text-transform: uppercase;981  letter-spacing: 0.05em;982  margin-left: 52.4163568773%;983}984@media screen and (max-width: 1024px) {985  .module__playlist-title {986    font-size: 30px;987    line-height: 32px;988  }989}990 991.module__playlist-items {992  display: grid;993  grid-template-columns: 1fr 1fr;994  grid-column-gap: 4.83271%;995}996 997.playlist-item {998  -webkit-display: flex;999  display: flex;1000  border-bottom: 1px solid #000;1001  padding-top: 15px;1002  padding-bottom: 15px;1003}1004.playlist-item:nth-child(-n+2) {1005  padding-top: 0;1006}1007 1008.playlist-item--featured {1009  flex-direction: column-reverse;1010  grid-row-end: span 4;1011  align-self: flex-start;1012}1013.playlist-item--featured .playlist-item__content {1014  width: 100%;1015}1016.playlist-item--featured .playlist-item__image {1017  margin-bottom: 22px;1018  margin-left: 0;1019  width: 100%;1020}1021 1022.overview-item__content,1023.playlist-item__content,1024.related-item__content {1025  width: 58%;1026}1027 1028.playlist-item--initiative .playlist-item__title {1029  font: normal 36px/38px "Px Grotesk", Helvetica, Arial, sans-serif;1030}1031@media screen and (max-width: 1024px) {1032  .playlist-item--initiative .playlist-item__title {1033    font-size: 20px;1034    line-height: 24px;1035  }1036}1037 1038.playlist-item__type {1039  font: bold 13px/17px "Px Grotesk", Helvetica, Arial, sans-serif;1040  transition: color 1ms;1041  text-transform: uppercase;1042  margin-bottom: 11px;1043}1044.no-touch .playlist-item__type a:hover {1045  color: #3ec96d;1046}1047 1048.playlist-item__title {1049  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;1050  letter-spacing: 0.01em;1051}1052@media screen and (max-width: 1024px) {1053  .playlist-item__title {1054    font-size: 30px;1055    line-height: 32px;1056  }1057}1058.no-touch .playlist-item__title a:hover {1059  text-decoration: underline;1060  text-underline-offset: 3px;1061  text-decoration-thickness: 1px;1062}1063 1064.extern-arrow {1065  background-image: url("../elements/ICI-Website-Update-Sketches-External-Link.svg");1066  background-repeat: no-repeat;1067  background-position: center;1068  background-size: contain;1069  display: inline-block;1070  width: 0.7em;1071  height: 0.65em;1072}1073 1074.playlist-item__date {1075  font: normal 20px/25px "Px Grotesk", Helvetica, Arial, sans-serif;1076}1077@media screen and (max-width: 1024px) {1078  .playlist-item__date {1079    font-size: 16px;1080    line-height: 20px;1081  }1082}1083 1084.overview-item__image,1085.playlist-item__image,1086.related-item__image {1087  margin-left: 4%;1088  width: 38%;1089}1090 1091* + .module--newsletter {1092  margin-top: 133px;1093}1094 1095.module__newsletter {1096  margin-left: 52.4163568773%;1097  margin-right: 40px;1098}1099 1100.module__newsletter-text {1101  font: normal 15px/18px "Px Grotesk", Helvetica, Arial, sans-serif;1102  margin-bottom: 11px;1103}1104@media screen and (max-width: 1024px) {1105  .module__newsletter-text {1106    font-size: 13px;1107    line-height: 19px;1108  }1109}1110 1111.module__newsletter-card {1112  background-color: #EC473D;1113  border-radius: 12px;1114  text-align: center;1115  padding: 70px 0;1116}1117 1118.module__newsletter-card-button {1119  transition: border 1ms, background 1ms, color 1ms;1120  font: normal 24px/24px "Px Grotesk", Helvetica, Arial, sans-serif;1121  letter-spacing: 0.05em;1122  border: 1px solid #000;1123  border-radius: 12px;1124  display: inline-block;1125  text-transform: uppercase;1126  padding: 23px 23px 24px;1127}1128@media screen and (max-width: 1024px) {1129  .module__newsletter-card-button {1130    font-size: 13px;1131    line-height: 13px;1132  }1133}1134.no-touch .module__newsletter-card-button:hover {1135  border-color: #F1F1F1;1136  background-color: #F1F1F1;1137  color: #000;1138}1139 1140* + .module--overview {1141  margin-top: 80px;1142}1143 1144.module__overview-items {1145  display: grid;1146  grid-template-columns: repeat(6, 12.6394052045%);1147  grid-column-gap: 4.8327137546%;1148}1149 1150.overview-item {1151  grid-column: span 3;1152  -webkit-display: flex;1153  display: flex;1154  border-bottom: 1px solid #000;1155  padding-top: 34px;1156  padding-bottom: 33px;1157}1158.overview-item:nth-child(-n+2) {1159  padding-top: 0;1160}1161 1162.overview-item--featured {1163  flex-direction: column-reverse;1164}1165.overview-item--featured .overview-item__content {1166  margin-bottom: auto;1167  width: 100%;1168}1169.overview-item--featured .overview-item__image {1170  margin-bottom: 40px;1171  margin-left: 0;1172  width: 100%;1173}1174 1175.overview-item__title {1176  font: normal 40px/42px "Px Grotesk", Helvetica, Arial, sans-serif;1177  letter-spacing: 0.02em;1178  display: -webkit-box;1179  -webkit-box-orient: vertical;1180  -webkit-line-clamp: 4;1181  overflow: hidden;1182}1183.no-touch .overview-item__title a:hover {1184  text-decoration: underline;1185  text-underline-offset: 3px;1186  text-decoration-thickness: 1px;1187}1188 1189.module__overview-more {1190  text-align: center;1191  margin-top: 164px;1192}1193 1194* + .module--names {1195  margin-top: 80px;1196}1197 1198.module__names-title {1199  font: normal 28px/30px "Px Grotesk", Helvetica, Arial, sans-serif;1200  letter-spacing: 0.01em;

Showing the first 1,200 of 4092 lines. Download the file for the rest.