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" lang="en">3 <head>4 <style>5 /* cookieUse v3.1 */6.badjs .cookieuse {7 display: none !important;8}9.cookieuse {10 color: #fff;11 background: #000;12 background: rgba(0, 0, 0, 0.8);13 14 font-size: 0.8em;15 line-height: 1.5;16 z-index: 9999;17 position: fixed;18 bottom: 0;19 left: 0;20 right: 0;21 padding: 15px;22 max-height: 80vh;23 overflow: auto;24 opacity: 0;25 transform: translateY(100%);26 transition: 0.5s;27}28@media (min-width: 600px) {29 .cookieuse {30 font-size: 1em;31 }32}33 34.cookieuse-open {35 opacity: 1;36 transform: translateY(0);37}38.cookieuse p,39.cookieuse small {40 display: block;41 color: inherit;42 padding: 0;43 margin: 0;44}45.cookieuse-actions {46 display: flex;47 flex-wrap: wrap;48 justify-content: flex-end;49}50.cookieuse button {51 cursor: pointer;52 color: inherit;53 background: none;54}55.cookieuse-actions button {56 font-weight: bold;57 min-width: 10em;58 padding: 0.5em 1em;59 border: 1px solid;60 margin: 0.5em 0;61}62.cookieuse-closer {63 font-size: 3em;64 line-height: 1;65 float: right;66 border: none;67 padding: 0 0.5em;68}69.cookieuse .cookieuse-accept {70 color: #000;71 background: #fff;72 border-color: #fff;73}74.cookieuse a,75.cookieuse a:hover,76.cookieuse a:focus {77 text-decoration: underline;78 color: inherit;79}80.cookieuse a:hover,81.cookieuse a:focus,82.cookieuse button:hover,83.cookieuse button:focus {84 opacity: 0.6;85}86 87 88 89/* vanillaSlider.VERSION = 2.2 */90.vslider {91 position: relative;92 overflow: hidden;93 outline: none;94}95 96.vslider > * {97 display: block;98 position: relative;99}100 101.vslider > * + * {102 display: none;103 position: absolute;104}105 106.vslider-item {107 display: block;108 width: 100%;109 height: 100%;110 top: 0;111 bottom: 0;112 /* -ms-touch-action: none;113 touch-action: none; */114 transition: z-index 0s,115 opacity 1.2s ease-in-out,116 transform 1s ease-in-out;117 z-index: 20;118 opacity: 0;119 transform: translateX(-10%);120}121 122.vslider-item[aria-hidden='false'] {123 /* hack for Edge 16?! */124 transition: z-index 0s,125 opacity 1.2s ease-in-out,126 transform 1s ease-in-out;127 z-index: 30;128 opacity: 1.0;129 transform: translateX(0);130}131 132.vslider-before {133 z-index: 10;134 opacity: 0;135 transform: translateX(10%);136}137 138.vslider-direct {139 transition: none;140}141 142.vslider-status {143 display: none;144}145 146/*.vslider-status {147 display: block;148 list-style: none;149 z-index: 110;150 position: absolute;151 left: 50%;152 transform: translateX(-50%);153 bottom: 10px;154 text-align: center;155 padding: 0;156 margin: 0;157}158 159.vslider-status-item {160 cursor: pointer;161 display: inline-block;162 font-size: 0.1em;163 width: 4px;164 height: 4px;165 line-height: 1;166 color: transparent;167 background: transparent;168 border: 3px solid rgb(45,170,225);169 border-radius: 100%;170 margin: 0 2px;171 transition: 1s;172 opacity: 0.5;173}174 175.vslider-status-item:hover,176.vslider-status-item:focus,177.vslider-status-item[aria-selected='true'] {178 opacity: 1;179}*/180 181.vslider-nav {182 display: block;183 z-index: 100;184 position: absolute;185 top: 0;186 bottom: 0;187 left: 0;188 right: 0;189}190 191.vslider-prev,192.vslider-next {193 cursor: pointer;194 display: block;195 position: absolute;196 bottom: 0;197 left: 0;198 line-height: 1;199 font-size: 2em;200 border: none;201 color: rgb(45,170,225);202 color: #fff;203 opacity: 0.25;204}205 206.vslider-prev:hover,207.vslider-prev:focus,208.vslider-next:hover,209.vslider-next:focus {210 opacity: 1;211}212 213.vslider-next {214 left: auto;215 right: 0;216 background: url('../../media/img/icons/arrow-right.svg') no-repeat;217}218.vslider-prev {219 background: url('../../media/img/icons/arrow-left.svg') no-repeat;220}221 222.vslider-prev:after {223 content: '.';224}225 226.vslider-next:after {227 content: '.';228}229 230 231.vslider,232.vslider-item {233 height: 70vh;234}235.vslider-item {236 background: no-repeat center;237 background-size: contain;238}239 240 241/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */242 243/* Document244 ========================================================================== */245 246/**247 * 1. Correct the line height in all browsers.248 * 2. Prevent adjustments of font size after orientation changes in iOS.249 */250 251html {252 line-height: 1.15; /* 1 */253 -webkit-text-size-adjust: 100%; /* 2 */254}255 256/* Sections257 ========================================================================== */258 259/**260 * Remove the margin in all browsers.261 */262 263body {264 margin: 0;265}266 267/**268 * Correct the font size and margin on `h1` elements within `section` and269 * `article` contexts in Chrome, Firefox, and Safari.270 */271 272h1 {273 font-size: 2em;274 margin: 0.67em 0;275}276 277/* Grouping content278 ========================================================================== */279 280/**281 * 1. Add the correct box sizing in Firefox.282 * 2. Show the overflow in Edge and IE.283 */284 285hr {286 box-sizing: content-box; /* 1 */287 height: 0; /* 1 */288 overflow: visible; /* 2 */289}290 291/**292 * 1. Correct the inheritance and scaling of font size in all browsers.293 * 2. Correct the odd `em` font sizing in all browsers.294 */295 296pre {297 font-family: monospace, monospace; /* 1 */298 font-size: 1em; /* 2 */299}300 301/* Text-level semantics302 ========================================================================== */303 304/**305 * Remove the gray background on active links in IE 10.306 */307 308a {309 background-color: transparent;310}311 312/**313 * 1. Remove the bottom border in Chrome 57-314 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.315 */316 317abbr[title] {318 border-bottom: none; /* 1 */319 text-decoration: underline; /* 2 */320 text-decoration: underline dotted; /* 2 */321}322 323/**324 * Add the correct font weight in Chrome, Edge, and Safari.325 */326 327b,328strong {329 font-weight: bolder;330}331 332/**333 * 1. Correct the inheritance and scaling of font size in all browsers.334 * 2. Correct the odd `em` font sizing in all browsers.335 */336 337code,338kbd,339samp {340 font-family: monospace, monospace; /* 1 */341 font-size: 1em; /* 2 */342}343 344/**345 * Add the correct font size in all browsers.346 */347 348small {349 font-size: 80%;350}351 352/**353 * Prevent `sub` and `sup` elements from affecting the line height in354 * all browsers.355 */356 357sub,358sup {359 font-size: 75%;360 line-height: 0;361 position: relative;362 vertical-align: baseline;363}364 365sub {366 bottom: -0.25em;367}368 369sup {370 top: -0.5em;371}372 373/* Embedded content374 ========================================================================== */375 376/**377 * Remove the border on images inside links in IE 10.378 */379 380img {381 border-style: none;382}383 384/* Forms385 ========================================================================== */386 387/**388 * 1. Change the font styles in all browsers.389 * 2. Remove the margin in Firefox and Safari.390 */391 392button,393input,394optgroup,395select,396textarea {397 font-family: inherit; /* 1 */398 font-size: 100%; /* 1 */399 line-height: 1.15; /* 1 */400 margin: 0; /* 2 */401}402 403/**404 * Show the overflow in IE.405 * 1. Show the overflow in Edge.406 */407 408button,409input { /* 1 */410 overflow: visible;411}412 413/**414 * Remove the inheritance of text transform in Edge, Firefox, and IE.415 * 1. Remove the inheritance of text transform in Firefox.416 */417 418button,419select { /* 1 */420 text-transform: none;421}422 423/**424 * Correct the inability to style clickable types in iOS and Safari.425 */426 427button,428[type="button"],429[type="reset"],430[type="submit"] {431 -webkit-appearance: button;432}433 434/**435 * Remove the inner border and padding in Firefox.436 */437 438button::-moz-focus-inner,439[type="button"]::-moz-focus-inner,440[type="reset"]::-moz-focus-inner,441[type="submit"]::-moz-focus-inner {442 border-style: none;443 padding: 0;444}445 446/**447 * Restore the focus styles unset by the previous rule.448 */449 450button:-moz-focusring,451[type="button"]:-moz-focusring,452[type="reset"]:-moz-focusring,453[type="submit"]:-moz-focusring {454 outline: 1px dotted ButtonText;455}456 457/**458 * Correct the padding in Firefox.459 */460 461fieldset {462 padding: 0.35em 0.75em 0.625em;463}464 465/**466 * 1. Correct the text wrapping in Edge and IE.467 * 2. Correct the color inheritance from `fieldset` elements in IE.468 * 3. Remove the padding so developers are not caught out when they zero out469 * `fieldset` elements in all browsers.470 */471 472legend {473 box-sizing: border-box; /* 1 */474 color: inherit; /* 2 */475 display: table; /* 1 */476 max-width: 100%; /* 1 */477 padding: 0; /* 3 */478 white-space: normal; /* 1 */479}480 481/**482 * Add the correct vertical alignment in Chrome, Firefox, and Opera.483 */484 485progress {486 vertical-align: baseline;487}488 489/**490 * Remove the default vertical scrollbar in IE 10+.491 */492 493textarea {494 overflow: auto;495}496 497/**498 * 1. Add the correct box sizing in IE 10.499 * 2. Remove the padding in IE 10.500 */501 502[type="checkbox"],503[type="radio"] {504 box-sizing: border-box; /* 1 */505 padding: 0; /* 2 */506}507 508/**509 * Correct the cursor style of increment and decrement buttons in Chrome.510 */511 512[type="number"]::-webkit-inner-spin-button,513[type="number"]::-webkit-outer-spin-button {514 height: auto;515}516 517/**518 * 1. Correct the odd appearance in Chrome and Safari.519 * 2. Correct the outline style in Safari.520 */521 522[type="search"] {523 -webkit-appearance: textfield; /* 1 */524 outline-offset: -2px; /* 2 */525}526 527/**528 * Remove the inner padding in Chrome and Safari on macOS.529 */530 531[type="search"]::-webkit-search-decoration {532 -webkit-appearance: none;533}534 535/**536 * 1. Correct the inability to style clickable types in iOS and Safari.537 * 2. Change font properties to `inherit` in Safari.538 */539 540::-webkit-file-upload-button {541 -webkit-appearance: button; /* 1 */542 font: inherit; /* 2 */543}544 545/* Interactive546 ========================================================================== */547 548/*549 * Add the correct display in Edge, IE 10+, and Firefox.550 */551 552details {553 display: block;554}555 556/*557 * Add the correct display in all browsers.558 */559 560summary {561 display: list-item;562}563 564/* Misc565 ========================================================================== */566 567/**568 * Add the correct display in IE 10+.569 */570 571template {572 display: none;573}574 575/**576 * Add the correct display in IE 10.577 */578 579[hidden] {580 display: none;581}582 583 584 585/*******************************************************586*587Theme Name: SDW 2.0588Theme URI: schuellerdewaal.com589Description: ArtDirection-Site590Version: 1.0591Author: Tina Hoeke592License: none (public domain)593*594*******************************************************/595 596 597/*******************************************************598 1 Global Settings599*******************************************************/600 601/*** horizontale Navigation ***/602.inline {603 margin: 0;604 padding: 0;605 text-align: center;606}607 .inline li, .inline div {608 display: inline-block;609 list-style: none;610 }611 612.flex-horizontal {613 display: flex;614 justify-content: space-between;615 /*align-items: center;*/616 }617 618 619/*** text-align ***/620.center {621 text-align: center;622}623.right {624 text-align: right;625}626.left {627 text-align: left;628}629 630 631 632/*******************************************************633 1 Font-Settings634*******************************************************/635 636/* *** Global *** */637 638html {639 font-family: 'Times New Roman', Times, Georgia, Palatino, serif;640 line-height: 1.2;641 font-style: normal;642 font-weight: normal;643}644 645.serif {646 font-family: 'Times New Roman', Times, Georgia, Palatino, serif;647}648.sans-serif {649 font-family: Arial, 'Lucida Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;650}651.monospace {652 font-family: 'Courier New', Courier, Monaco, 'Lucida Console', monospace;653}654 655.txt-small {656 font-size: .8em;657}658.txt-bold {659 font-weight: bold;660}661 662 663/* *** Module *** */664 665h1, h2, h3, h4, p, ul, form, table {666 margin: 0;667 padding: 0;668}669h1, h2, h3, h4 {670 text-transform: uppercase;671}672 h1 {673 margin-bottom: 1rem;674 }675 h2 {676 margin-bottom: 2.5rem;677 }678 h3 {679 font-weight: normal;680 }681 682 p, ul, table, form {683 margin-bottom: 2rem;684 }685 686h2, h3, p, ul, table, dl, a, b {687 font-size: 1.3rem;688 line-height: 1.5;689 }690 691ul, li {692 list-style: none;693 text-align: left;694}695 696dt {697 font-weight: bold;698}699 700 701/* *** Links *** */702a:link, a:hover, a:focus, a:visited, a:active {703 color: rgb(45,170,225);704 }705 a:hover, a:focus,706 .icon,707 .button {708 text-decoration: none;709 }710 711 712 .without-line {713 text-decoration: none;714 }715 .without-line:hover, .without-line:focus {716 text-decoration: underline;717 }718 719 720 /*.icon, .mainmenue a {721 color: #000;722 transition: color .2s;723 }724 .icon:hover,.icon:focus {725 color: orange;726 }727 .icon-big {728 font-size: 5em;729 }*/730 731 732 .button:link, .button:hover, .button:focus, .button:visited, .button:active {733 display: block;734 padding: 12px 24px;735 margin: 2% auto;736 width: 33%;737 min-width: 200px;738 font-size: 1rem;739 color: #fff;740 text-align: center;741 background-color: rgb(197,197,196);742 border-radius: 24px;743 transition: background-color .2s;744 }745 .button:hover, .button:focus {746 background-color: orange;747 }748 749 750 751/*******************************************************752 2 Layout753*******************************************************/754 755body {756 text-align: center;757 background-color: #fff;758 color: rgb(45,170,225);759 margin: 0;760}761 .bg-blue,762 .bg-blue .mainmenue {763 background-color: rgb(224,242,251);764 }765 .bg-pink,766 .bg-pink .mainmenue {767 background-color: rgb(252,219,210);768 }769 770.wrapper {771 margin: 5vw auto 0 auto;772 width: 95%;773 max-width: 1440px;774}775 776 777/* *** Header *** */778.mainmenue {779 position: fixed;780 top: 0;781 left: 0;782 width: 100%;783 z-index: 100;784 text-transform: uppercase;785 background-color: #fff;786}787 .mainmenue a {788 padding: 3vw 3vw 1vw 3vw;789 }790 791.logo {792 position: relative;793 width: 33%;794 max-width: 480px;795 margin: 2vw;796 z-index: 1000;797}798 799 800/* *** Content *** */801section {802 margin-bottom: 60px;803 padding-bottom: 48px;804 border-bottom: 2px solid rgb(45,170,225);805}806 807 808/* *** Newsletter Sign Up *** */809 810.profile-nl {811 width: 33%;812 max-width: 480px;813 margin: 0 auto;814 }815 .profile-nl h2,{816 margin-bottom: 0;817 }818 819input[type=email]{820 margin-top: 36px;821 width: 100%;822 min-height: 48px;823 border-radius: 24px;824 text-align: center;825 background-color: #fff;826 color: rgb(52,167,222);827 outline: none;828 border: none;829 }830input[type=submit],831input[type=submit]:hover,832input[type=submit]:active,833input[type=submit]:focus {834 height: 30px;835 width: 100%;836 text-align: right;837 color: rgb(52,167,222);838 font-weight: bold;839 text-transform: uppercase;840 background: none;841 outline: none;842 border: none;843 }844 input[type=submit]:hover,845 input[type=submit]:active,846 input[type=submit]:focus {847 text-decoration: underline;848 height: 30px;849 }850 851 /* *** Footer *** */852 853footer {854 display: flex;855 flex-direction: column;856 justify-content: flex-end;857 margin-top: 100px;858 color: #000;859}860 footer a:link, footer a:hover, footer a:focus, footer a:visited, footer a:active {861 display: block;862 color: #000;863 text-transform: uppercase;864 font-weight: bold;865 }866 .to-privacy,867 .copy {868 margin-bottom: 10px;869 }870 871 /* *** Footer Folgeseiten *** */872 873 .footer-follow { /* groÃes Einzelicon sichtbar */874 display: block;875 margin-bottom: 20px;876 }877 .footer-follow img {878 width: 72px;879 }880 881 .footer-home { /* NL-SignUp and kleine Icons versteckt */882 display: none;883 }884 885 886 /* *** Footer Home *** */887 .home footer {888 background: rgb(100, 186, 229) url('../media/img/footer-bg2x.png') top center no-repeat;889 background-size: contain;890 padding-top: 15vw;891 }892 .body-home footer {893 background: none;894 }895 .home .footer-follow { /* groÃes Einzelicon verstecken */896 display: none;897 }898 .home .footer-home { /* NL-SignUp and kleine Icons sichtbar */899 display: block;900 }901 902 .home-nl {903 width: 50%;904 max-width: 480px;905 margin: 0 auto 3vw auto;906 }907 .home-nl h2,908 .home-nl h3 {909 margin-bottom: 0;910 padding-bottom: 0;911 }912 .home-nl input[type=email]{913 margin-top: 12px;914 }915 .home-nl input[type=submit],916 .home-nl input[type=submit]:hover,917 .home-nl input[type=submit]:active,918 .home-nl input[type=submit]:focus {919 color: #000;920 font-size: 1em;921 }922 923 .small-icon {924 margin: 1vw auto 3vw auto;925 }926 .small-icon img {927 width: 29px;928 padding: 0 6px;929 margin: 0 3px;930 }931 932 933/*******************************************************934 3 Templates935*******************************************************/936 937 938/********************** Hompage **********************/939 940/* *** Gradient *** */941.body-home {942 background: linear-gradient(120deg, rgb(193,227,235) 0%, rgb(245,167,175) 33%, rgb(253, 254, 162) 66%, rgb(193,227,235) 100%);943}944.home .logo {945 width: 50%;946 max-width: 740px;947 }948 949.switcher {950 cursor: pointer;951 position: relative;952 z-index: 200;953 text-align: left;954 width: 60px;955 height: 28px;956 padding: 2px;957 margin-bottom: 2vw;958 color: transparent;959 background-image: linear-gradient(90deg, rgb(45,170,225) 0%, rgb(255,255,255) 100% );960 border: none;961 border-radius: 30px;962 box-shadow: 1px 1px 1px rgb(223,237,245), 0px 0px 1px rgb(223,237,245);963 }964 .switcher img {965 width: 24px;966 height: 24px;967 }968 .body-home .switcher {969 background: #fff;970 text-align: right;971 }972 973 .body-home .mainmenue {974 background-color: transparent;975 }976 977 978/* *** Content Home *** */979.content-home { /* wrapper */980 margin-top: 0;981 }982 983.package-wrapper {984 position: relative;985 }986 .package {987 width: 95%;988 margin: 2vw 0;989 }990 991.shop {992 display: flex;993 flex-direction: column;994 align-items: center;995 justify-content: center;996 position: absolute;997 top: -3vw;998 right: 5vw;999 width: 14vw;1000 max-width: 204px;1001 height: 204px;1002 max-height: 14vw;1003 text-transform: uppercase;1004 font-weight: bold;1005 font-size: 20vw;1006 background: url('../media/img/shop.png') no-repeat center center;1007 background-size: contain;1008}1009.shop b {1010 color: #fff;1011 line-height: 1.2;1012 }1013 .shop span {1014 display: block;1015 font-size: .5em;1016 }1017 1018 1019.shop-frame {1020 display: flex;1021 flex-direction: column;1022 align-items: center;1023 justify-content: center;1024 position: absolute;1025 top: -3vw;1026 right: 5vw;1027 width: 14vw;1028 max-width: 204px;1029 height: 204px;1030 max-height: 14vw;1031 background: url('../media/img/shop-bg.png') no-repeat center center;1032 background-size: contain;1033}1034 1035.toshop,1036.toshop:link,1037.toshop:visited {1038 display: block;1039 width: 100%;1040 height: 100%;1041 max-width: 204px;1042 max-height: 204px;1043 min-width: 75px;1044 min-height: 75px;1045 background: url('../media/img/shop-ct-normal.png') no-repeat center center;1046 background-size: contain;1047 transition: background-image .2s;1048 text-decoration: none;1049}1050.toshop:hover,1051.toshop:active,1052.toshop:focus {1053 background-image: url('../media/img/shop-ct-high.png');1054}1055 1056 1057/* *** Need to talk *** */1058.talk-container {1059 margin: 5vw auto;1060 max-width: 720px;1061 color: rgb(52, 167, 222);1062 font-size: 200%;1063}1064 .icon-talk {1065 display: block;1066 margin: 0 auto 2vw auto;1067 width: 20vw;1068 max-width: 180px;1069 }1070 .txt-one {1071 font-size: 115%;1072 line-height: 1.2;1073 margin-bottom: 3vw;1074 }1075 .txt-two {1076 font-size: 90%;1077 }1078 1079 1080 1081 1082/********************** Profile **********************/1083 1084/* *** CONTENT *** */1085.twocol,1086.threecol {1087 align-items: flex-start;1088}1089 .twocol div {1090 width: 48%;1091 }1092 .threecol div {1093 width: 30%;1094 }1095 1096.portrait {1097 width: 100%;1098 margin-bottom: 1em;1099}1100.icon-vcard {1101 width: 22px;1102 padding: 2px 12px 0 0;1103}1104 1105/* *** Newsletter Sign Up *** */1106.profile-nl {1107 margin: 0 auto;1108 width: 33%;1109 padding: 0 48px;1110}1111 .profile-nl h2 {1112 margin-bottom: 0;1113 }1114 1115input[type=email]{1116 margin-top: 36px;1117 width: 100%;1118 min-height: 48px;1119 border-radius: 24px;1120 text-align: center;1121 background-color: #fff;1122 color: rgb(52,167,222);1123 outline: none;1124 border: none;1125 }1126input[type=submit],1127input[type=submit]:hover,1128input[type=submit]:active,1129input[type=submit]:focus {1130 height: 30px;1131 width: 100%;1132 text-align: right;1133 color: rgb(52,167,222);1134 font-weight: bold;1135 text-transform: uppercase;1136 background: none;1137 outline: none;1138 border: none;1139 font-size: 1em;1140 }1141 input[type=submit]:hover,1142 input[type=submit]:active,1143 input[type=submit]:focus {1144 }1145 1146 1147/********************** Projects Oberview **********************/1148table {1149 text-align: left;1150 width: 100%;1151 border-top: 2px solid rgb(45,170,225);1152 border-bottom: 2px solid rgb(45,170,225);1153}1154 th {1155 text-transform: uppercase;1156 padding: 1em 0;1157 /*border-collapse: collapse;1158 border-bottom: 2px solid rgb(45,170,225);*/1159 }1160 td {1161 padding: 1em 0;1162 }1163 .table-middle {1164 padding: 1em 1.5em;1165 }1166 .table-line {1167 background-color: rgb(45,170,225);1168 margin: 0;1169 padding: 0;1170 font-size: 0;1171 line-height: 0;1172 height: 2px;1173 }1174 1175 1176/********************** Projects **********************/1177 1178.projects {1179 background: rgb(215, 245, 255);1180 }1181 1182.content-projects {1183 max-width: 960px;1184 margin: 5vw auto 0 auto;1185}1186.ximg-slider {1187 border: 0;1188}1189 1190.image-container img { /* for single Images */1191 display: block;1192 width: 100%;1193 max-width: 960px;1194}1195 1196.video-container {1197 position: relative;1198 padding-bottom: 65%;1199 height: 0;1200 overflow: hidden;