SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6379
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 .timeline {6 -webkit-box-sizing: border-box;7 box-sizing: border-box;8 position: relative;9}10.timeline *,11.timeline :after,12.timeline :before {13 -webkit-box-sizing: inherit;14 box-sizing: inherit;15}16.timeline:not(.timeline--horizontal):before {17 background-color: #ddd;18 bottom: 0;19 content: "";20 left: 50%;21 margin-left: -2px;22 position: absolute;23 top: 0;24 width: 4px;25 z-index: 1;26}27.timeline__wrap {28 overflow: hidden;29 position: relative;30 z-index: 2;31}32.timeline__item {33 font-size: 16px;34 font-size: 1rem;35 padding: 0.625rem 2.5rem 0.625rem 0;36 position: relative;37 width: 50%;38 z-index: 2;39}40.timeline__item:after {41 background-color: #fff;42 border: 4px solid #ddd;43 border-radius: 50%;44 content: "";45 height: 20px;46 position: absolute;47 right: -10px;48 -webkit-transform: translateY(-50%);49 -ms-transform: translateY(-50%);50 transform: translateY(-50%);51 top: 50%;52 width: 20px;53 z-index: 1;54}55.timeline__item.animated {56 -webkit-animation-duration: 1s;57 animation-duration: 1s;58 -webkit-animation-fill-mode: both;59 animation-fill-mode: both;60 opacity: 0;61}62.timeline__item.fadeIn {63 -webkit-animation-name: fadeIn;64 animation-name: fadeIn;65}66.timeline__item--left {67 left: 0;68}69.timeline__item--right {70 left: 50%;71 padding: 0.625rem 0 0.625rem 2.5rem;72}73.timeline__item--right:after {74 left: -10px;75}76.timeline__item--right .timeline__content:before {77 border-bottom: 10px solid transparent;78 border-right: 12px solid #ccc;79 border-left: none;80 border-top: 10px solid transparent;81 left: -12px;82}83.timeline__item--right .timeline__content:after {84 border-bottom: 9px solid transparent;85 border-right: 11px solid #fff;86 border-left: none;87 border-top: 9px solid transparent;88 left: -10px;89}90.timeline__content {91 background-color: #fff;92 border: 1px solid #ccc;93 border-radius: 10px;94 color: #333;95 display: block;96 padding: 1.25rem;97 position: relative;98}99.timeline__content:after,100.timeline__content:before {101 content: "";102 height: 0;103 position: absolute;104 -webkit-transform: translateY(-50%);105 -ms-transform: translateY(-50%);106 transform: translateY(-50%);107 top: 50%;108 width: 0;109}110.timeline__content:before {111 border-bottom: 10px solid transparent;112 border-left: 12px solid #ccc;113 border-top: 10px solid transparent;114 right: -12px;115 z-index: 1;116}117.timeline__content:after {118 border-bottom: 9px solid transparent;119 border-left: 11px solid #fff;120 border-top: 9px solid transparent;121 right: -10px;122 z-index: 2;123}124.timeline__content h2 {125 font-size: 1.25rem;126 font-weight: 700;127 margin: 0 0 0.625rem;128}129.timeline__content p {130 font-size: 0.9375rem;131 line-height: 1.5;132 margin-bottom: 10px;133}134.timeline--horizontal {135 font-size: 0;136 padding: 0 3.125rem;137 overflow: hidden;138 white-space: nowrap;139}140.timeline--horizontal .timeline-divider {141 background-color: #ddd;142 display: block;143 height: 4px;144 left: 40px;145 position: absolute;146 -webkit-transform: translateY(-50%);147 -ms-transform: translateY(-50%);148 transform: translateY(-50%);149 right: 40px;150 z-index: 1;151}152.timeline--horizontal .timeline__items {153 -webkit-transition: all 0.8s;154 -o-transition: all 0.8s;155 transition: all 0.8s;156 will-change: transform;157}158.timeline--horizontal .timeline__item {159 display: inline-block;160 left: 0;161 padding: 0 0 2.5rem;162 position: relative;163 -webkit-transition: none;164 -o-transition: none;165 transition: none;166 vertical-align: top;167 white-space: normal;168}169.timeline--horizontal .timeline__item:after {170 left: 50%;171 right: auto;172 -webkit-transform: translate(-50%, -50%);173 -ms-transform: translate(-50%, -50%);174 transform: translate(-50%, -50%);175 top: 100%;176}177.timeline--horizontal .timeline__item .timeline__item__inner {178 display: table;179 height: 100%;180 width: 100%;181}182.timeline--horizontal .timeline__item .timeline__content__wrap {183 display: table-cell;184 margin: 0;185 padding: 0;186 vertical-align: bottom;187}188.timeline--horizontal .timeline__item .timeline__content:before {189 border-left: 12px solid transparent;190 border-right: 12px solid transparent;191 border-top: 12px solid #ccc;192 left: 50%;193 right: auto;194 -webkit-transform: translateX(-50%);195 -ms-transform: translateX(-50%);196 transform: translateX(-50%);197 top: 100%;198}199.timeline--horizontal .timeline__item .timeline__content:after {200 border-left: 10px solid transparent;201 border-right: 10px solid transparent;202 border-top: 10px solid #fff;203 left: 50%;204 right: auto;205 -webkit-transform: translateX(-50%);206 -ms-transform: translateX(-50%);207 transform: translateX(-50%);208 top: 100%;209}210.timeline--horizontal .timeline__item--bottom {211 padding: 2.5rem 0 0;212}213.timeline--horizontal .timeline__item--bottom:after {214 top: 0;215}216.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {217 vertical-align: top;218}219.timeline--horizontal .timeline__item--bottom .timeline__content:before {220 border-bottom: 12px solid #ccc;221 border-left: 12px solid transparent;222 border-right: 12px solid transparent;223 border-top: none;224 bottom: 100%;225 top: auto;226}227.timeline--horizontal .timeline__item--bottom .timeline__content:after {228 border-bottom: 10px solid #fff;229 border-left: 10px solid transparent;230 border-right: 10px solid transparent;231 border-top: none;232 bottom: 100%;233 top: auto;234}235.timeline-nav-button {236 background-color: #fff;237 border: 2px solid #ddd;238 border-radius: 50px;239 -webkit-box-sizing: border-box;240 box-sizing: border-box;241 -webkit-box-shadow: none;242 box-shadow: none;243 cursor: pointer;244 display: block;245 height: 40px;246 outline: 0;247 position: absolute;248 text-indent: -9999px;249 -webkit-transform: translateY(-50%);250 -ms-transform: translateY(-50%);251 transform: translateY(-50%);252 top: 50%;253 width: 40px;254 z-index: 10;255}256.timeline-nav-button:disabled {257 opacity: 0.5;258 pointer-events: none;259}260.timeline-nav-button:before {261 background-position: center center;262 background-repeat: no-repeat;263 content: "";264 display: block;265 height: 14px;266 left: 50%;267 position: absolute;268 -webkit-transform: translateX(-50%) translateY(-50%);269 -ms-transform: translateX(-50%) translateY(-50%);270 transform: translateX(-50%) translateY(-50%);271 top: 50%;272 width: 8px;273}274.timeline-nav-button--prev {275 left: 0;276}277.timeline-nav-button--prev:before {278 background-image: url(../images/arrow-left.svg);279}280.timeline-nav-button--next {281 right: 0;282}283.timeline-nav-button--next:before {284 background-image: url(../images/arrow-right.svg);285}286.timeline--mobile {287 padding: 0;288}289.timeline--mobile:before {290 left: 10px !important;291 margin: 0 !important;292}293.timeline--mobile .timeline__item {294 left: 0;295 padding-left: 40px;296 padding-right: 0;297 width: 100%;298}299.timeline--mobile .timeline__item:after {300 left: 2px;301 margin: 0;302}303.timeline--mobile .timeline__item .timeline__content:before {304 left: -12px;305 border-bottom: 12px solid transparent;306 border-right: 12px solid #ccc;307 border-left: none;308 border-top: 12px solid transparent;309}310.timeline--mobile .timeline__item .timeline__content:after {311 left: -10px;312 border-bottom: 10px solid transparent;313 border-right: 10px solid #fff;314 border-left: none;315 border-top: 10px solid transparent;316}317@-webkit-keyframes fadeIn {318 0% {319 opacity: 0;320 top: 70px;321 }322 100% {323 opacity: 1;324 top: 0;325 }326}327@keyframes fadeIn {328 0% {329 opacity: 0;330 top: 70px;331 }332 100% {333 opacity: 1;334 top: 0;335 }336}337@-webkit-keyframes liftUp {338 0% {339 top: 0;340 }341 100% {342 top: -15px;343 }344}345@keyframes liftUp {346 0% {347 top: 0;348 }349 100% {350 top: -15px;351 }352}353 354 355 356* {357 margin: 0;358 padding: 0;359 -webkit-box-sizing: border-box;360 box-sizing: border-box;361 list-style-type: none;362 text-decoration: none;363 font-family: Helvetica;364 -webkit-transition: 0.2s all ease;365 transition: 0.2s all ease;366 font-family: Nunito;367 scroll-behavior: smooth;368}369a {370 text-decoration: none !important;371 color: inherit !important;372}373body {374 overflow-x: hidden;375 position: relative;376}377 378.toggler {379 position: absolute;380 left: 15px;381 top: 80px;382 z-index: 102;383}384 385@media screen and (max-width: 1200px) {386 .toggler {387 left: 10px;388 top: 25px;389 }390}391 392.checkbox {393 position: absolute;394 opacity: 0;395}396 397.checkbox:checked + .label .ball {398 -webkit-transform: translateX(42px);399 transform: translateX(42px);400}401 402.label {403 background-color: #221c1c;404 display: -webkit-box;405 display: -ms-flexbox;406 display: flex;407 border-radius: 50px;408 height: 28px;409 width: 65px;410 -webkit-box-align: center;411 -ms-flex-align: center;412 align-items: center;413 -webkit-box-pack: justify;414 -ms-flex-pack: justify;415 justify-content: space-between;416 padding: 5px;417 color: #cccc5f;418 position: relative;419 -webkit-transition: 0.2s all ease;420 transition: 0.2s all ease;421}422 423.label.light {424 background-color: #fff;425}426 427.ball {428 position: absolute;429 width: 15px;430 height: 15px;431 background-color: #fff;432 border-radius: 50%;433 -webkit-transition: 0.2s all ease;434 transition: 0.2s all ease;435}436 437.ball:hover {438 cursor: pointer;439}440 441.ball.dark {442 background-color: #221c1c;443}444 445.fa-moon,446.fa-sun {447 font-size: 0.8rem;448}449 450@media screen and (max-width: 998px) {451 .top-wave-wrapper {452 display: none;453 }454}455 456#logo {457 height: 60px;458}459 460#waves {461 position: absolute;462 top: 0;463 left: 0;464}465 466@media screen and (max-width: 992px) {467 #waves {468 display: none;469 }470}471 472nav {473 position: fixed;474 top: 0;475 height: 70px;476 z-index: 999;477 width: 100%;478 background-color: transparent;479 color: #111;480 display: -webkit-box;481 display: -ms-flexbox;482 display: flex;483 -webkit-box-align: center;484 -ms-flex-align: center;485 align-items: center;486 padding: 0px 40px;487 font-family: Helvetica;488 display: flex;489 -webkit-box-pack: justify;490 -ms-flex-pack: justify;491 justify-content: space-between;492}493 494nav .logo {495 display: inline;496 color: #fff;497}498 499nav ul {500 display: block;501 float: right;502}503 504nav ul li {505 display: inline;506 font-size: 1.2rem;507 margin: 0px 20px;508 color: #fff;509 cursor: pointer;510 transition: 0.3s all ease;511 padding-bottom: 5px;512 border: 2px solid transparent;513}514nav ul li:hover {515 border-bottom: 2px solid #f3a704;516}517 518nav ul .active {519 border-bottom: 2px solid #ffffff !important;520 padding-bottom: 5px;521}522 523nav .open-source {524 background: #fff;525 color: #000;526 padding: 10px 30px;527 text-align: center;528 text-decoration: none;529 display: inline-block;530 font-size: 1.2rem;531 cursor: pointer;532 -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;533 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;534 width: -webkit-fit-content;535 width: -moz-fit-content;536 width: fit-content;537}538 539nav #name {540 position: absolute;541 top: 20px;542 left: 80px;543 color: #fff;544 font-size: 1.2rem;545}546 547nav .burger {548 display: none;549 cursor: pointer;550}551 552@media screen and (max-width: 1200px) {553 nav .burger {554 color: #fff;555 font-size: 2rem;556 position: absolute;557 right: 20px;558 display: block;559 }560}561 562@media screen and (max-width: 1200px) {563 nav {564 -webkit-box-pack: center;565 -ms-flex-pack: center;566 justify-content: center;567 }568 nav ul {569 display: none;570 }571 nav .open-source {572 display: none;573 }574 nav #name {575 display: none;576 }577}578 579@media screen and (max-width: 992px) {580 nav {581 background-color: #003b4d !important;582 -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;583 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;584 }585}586 587nav.dark {588 -webkit-transition: 0.2s all ease;589 transition: 0.2s all ease;590 background-color: #0b1339;591 color: #fff;592}593 594nav.dark .logo {595 color: #fff;596}597 598nav.dark ul li {599 color: #fff;600}601 602#dropdown {603 width: 100%;604 padding: 10px 10px;605 background-color: white;606 position: sticky;607 top: 70px;608 display: none;609 left: 0px;610 z-index: 999;611 color: #000;612 -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;613 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;614 height: 200px;615 opacity: 0;616 -webkit-box-orient: vertical;617 -webkit-box-direction: normal;618 -ms-flex-direction: column;619 flex-direction: column;620 -webkit-animation-duration: 1s;621 animation-duration: 1s;622 -webkit-animation-fill-mode: forwards;623 animation-fill-mode: forwards;624 -webkit-animation-timing-function: ease-in-out;625 animation-timing-function: ease-in-out;626}627 628#dropdown .active-dropdown {629 background-color: #dbdbdb;630}631 632#dropdown ul li {633 padding: 10px 20px;634 cursor: pointer;635}636 637#dropdown ul li:hover {638 background-color: #dbdbdb;639}640 641@-webkit-keyframes dropdown {642 0% {643 display: none;644 opacity: 0;645 }646 100% {647 display: -webkit-box !important;648 display: flex !important;649 opacity: 1;650 }651}652 653@keyframes dropdown {654 0% {655 opacity: 0;656 }657 100% {658 display: -webkit-box !important;659 display: -ms-flexbox !important;660 display: flex !important;661 opacity: 1;662 top: 70px;663 }664}665 666@-webkit-keyframes dropup {667 0% {668 display: -webkit-box !important;669 display: flex !important;670 top: -725px;671 }672 100% {673 display: none;674 top: -800px;675 }676}677 678@keyframes dropup {679 0% {680 display: -webkit-box !important;681 display: -ms-flexbox !important;682 display: flex !important;683 top: -725px;684 }685 100% {686 display: none;687 top: -800px;688 }689}690 691 692#dropdown2{693 display: inline-block;694 width: 80%;695 text-align: center;696}697 698#dropdown2-select {699 background-color: #fff;700 border: 1px solid #ccc;701 border-radius: 20px; /* Adjust the value to control the roundness of edges */702 color: #555;703 padding: 8px;704 cursor: pointer;705 width: 100%;706 box-sizing: border-box;707 display: flex;708 justify-content: center;709 align-items: center;710}711 712 713#dropdown2-select-placeholder {714 color: #999;715}716 717#dropdownMenu {718 position: absolute;719 background-color: #fff;720 border: 1px solid #ccc;721 border-top: none;722 border-radius: 0 0 4px 4px;723 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);724 display: none;725 z-index: 999;726 width: 40%;727 transform: translateX(-50%);728 left: 50%;729 align-items: center;730 }731 732 #dropdownMenu a {733 display: flex;734 padding: 8px;735 color: #555;736 text-decoration: none;737 width: 100%;738 justify-content: center;739 align-items: center;740 }741 742#dropdownMenu a:hover {743 background-color: #f2f2f2;744}745 746#dropdownMenu.show {747 display: block;748}749 750 .navbarsel {751 background-color: #fffbfb;752 border-radius: 10px; /* Add rounded edges */753 padding: 10px; /* Add padding to separate from the content */754 }755 756 .navbarsel table {757 width: 100%;758 border-collapse: collapse;759 }760 761 .navbarsel td {762 padding: 10px;763 border-radius: 5px; /* Add rounded edges */764 cursor: pointer;765 white-space: nowrap;766 }767 768 .navbarsel td:hover {769 background-color: rgb(240, 240, 240); /* Add hover background color */770 }771 772 .table-responsive {773 overflow-x: auto;774 }775 776 777 778 .container2-wrapper {779 display: flex;780 width: 100%;781 overflow-x: auto;782 justify-content: center;783 scroll-behavior: smooth;784}785 786@media screen and (max-width: 1000px) {787 .container2-wrapper {788 justify-content: flex-start;789 }790 }791 792 .container2 {793 width: 200px;794 text-align: center;795 margin: 20px 10px; /* Adjust the margin values to control the spacing */796 background-color: white;797 padding: 10px;798 border: 1px solid #ccc;799 border-radius: 10px;800 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);801 display: flex;802 flex-direction: column;803 justify-content: space-between;804 }805 806 .container2 img {807 width: 100%;808 height: 50%;809 object-fit: cover;810 border-radius: 25px;811 flex-grow:1;812 }813 814 .container2 .name {815 font-weight: bold;816 color: #333;817 margin-top: 10px;818 }819 820 .container2 .description {821 color: #666;822 margin-top: 5px;823 }824 825 826.content {827 margin-top: 20px;828 background-color: #f2f2f2;829 padding: 10px;830 display: none;831}832 833.spacer {834 height: 100px; /* Adjust the desired height of the spacer */835 }836 837 .hidden {838 display: none;839 }840 841 842.main {843 position: -webkit-sticky;844 position: sticky;845 top: 0;846 background-image: url("/assets/images/bg.png");847 background-position: center center;848 background-repeat: no-repeat;849 background-size: cover;850 padding-top: 70px;851}852 853.main .main-wrapper {854 width: 100%;855 margin: 0px auto;856 min-height: 100vh;857 border-radius: 20px;858 display: -webkit-box;859 display: -ms-flexbox;860 display: flex;861 -webkit-box-pack: justify;862 -ms-flex-pack: justify;863 justify-content: space-between;864 padding: 30px 100px;865}866 867@media screen and (max-width: 1200px) {868 .main .main-wrapper {869 -webkit-box-orient: vertical;870 -webkit-box-direction: normal;871 -ms-flex-direction: column;872 flex-direction: column;873 -webkit-box-align: center;874 -ms-flex-align: center;875 align-items: center;876 -webkit-box-pack: space-evenly;877 -ms-flex-pack: space-evenly;878 justify-content: space-evenly;879 padding: 30px 20px;880 }881}882 883.main .main-wrapper .left {884 display: -webkit-box;885 display: -ms-flexbox;886 display: flex;887 -webkit-box-orient: vertical;888 -webkit-box-direction: normal;889 -ms-flex-direction: column;890 flex-direction: column;891 -webkit-box-pack: center;892 -ms-flex-pack: center;893 justify-content: center;894 font-size: 2.3rem;895 width: 50%;896}897 898@media screen and (max-width: 1200px) {899 .main .main-wrapper .left {900 width: 90%;901 }902}903 904.main .main-wrapper .left #click {905 color: #9b0000;906 -webkit-user-select: none;907 -moz-user-select: none;908 -ms-user-select: none;909 user-select: none;910 cursor: pointer;911}912 913.main .main-wrapper .left h1 {914 color: #003b4d;915 font-weight: 900;916 font-size: clamp(3.5rem, 5vw, 5rem);917}918 919@media screen and (max-width: 1200px) {920 .main .main-wrapper .left h1 {921 text-align: center;922 }923}924 925.main .main-wrapper .left p {926 font-size: 1.3rem;927 margin-top: 30px;928 line-height: 30px;929 font-weight: 200;930 color: #222222;931}932 933.main .main-wrapper .left .button {934 background-color: #f2962f;935 border: none;936 color: black;937 padding: 15px 20px;938 text-align: center;939 display: inline-block;940 font-size: 1.2rem;941 margin-top: 30px;942 cursor: pointer;943 width: -webkit-fit-content;944 width: -moz-fit-content;945 width: fit-content;946 -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;947 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;948}949 950@media screen and (max-width: 1200px) {951 .main .main-wrapper .left .button {952 margin: 0 auto;953 display: block;954 }955}956 957.main .main-wrapper .right {958 display: -webkit-box;959 display: -ms-flexbox;960 display: flex;961 -webkit-box-orient: vertical;962 -webkit-box-direction: normal;963 -ms-flex-direction: column;964 flex-direction: column;965 width: 50%;966 -webkit-box-pack: center;967 -ms-flex-pack: center;968 justify-content: center;969 -webkit-box-align: center;970 -ms-flex-align: center;971 align-items: center;972}973 974@media screen and (max-width: 1200px) {975 .main .main-wrapper .right {976 width: 90%;977 }978}979 980.main .main-wrapper .right img {981 width: 500px;982}983 984@media screen and (max-width: 1200px) {985 .main .main-wrapper .right img {986 width: 100px !important;987 }988}989 990.main.dark {991 background-image: url("../images/bg-dark.png");992 -webkit-transition: 0.2s all ease;993 transition: 0.2s all ease;994}995 996.main.dark .main-wrapper .left {997 color: #fff;998}999 1000.main.dark .main-wrapper .left h1 {1001 color: #fff;1002}1003 1004.main.dark .main-wrapper .left p {1005 color: #fff;1006}1007 1008.main.dark .main-wrapper .left .button {1009 background: #ffffff;1010 color: #000;1011}1012 1013.section-1 {1014 min-height: 120vh;1015 padding-bottom: 20px;1016 z-index: 100;1017 background-color: #003b4d;1018 position: relative;1019 color: #fff;1020}1021 1022.section-1 h1 {1023 font-size: 4.3rem;1024 padding-top: 70px;1025 text-align: center;1026}1027 1028.section-1 p {1029 font-size: 1.3rem;1030 padding-top: 20px;1031 text-align: center;1032}1033 1034.section-1 .line {1035 width: 10%;1036 border: 2.5px solid #f2962f !important;1037 border-radius: 5px;1038 background: #f2962f !important;1039 margin: 10px auto;1040}1041 1042.image-holder {1043 min-width: 325px;1044 min-height: 215px;1045}1046 1047@media (min-width: 400px) {1048 .image-holder {1049 min-width: 300px;1050 min-height: 200px;1051 }1052}1053 1054.section-1 .info-card img {1055 margin: 0 auto;1056 width: 250px;1057 display: block;1058}1059 1060.section-1 .info-card h2 {1061 margin-top: 30px;1062 font-size: 2.5rem;1063 text-align: center;1064}1065 1066.section-1.dark,1067.section-3.dark {1068 background-color: #0b1339;1069}1070/*# sourceMappingURL=style.css.map */1071 1072.section-2 {1073 height: fit-content;1074 padding-bottom: 100px;1075 z-index: 100;1076 background-color: rgb(0, 48, 80);1077 position: relative;1078 /*position: relative;*/1079}1080 1081.section-2 h1 {1082 font-size: 4.3rem;1083 padding-top: 70px;1084 text-align: center;1085 color: #fff;1086}1087 1088.section-2 .intro-p {1089 font-size: 1.3rem;1090 padding-top: 20px;1091 text-align: center;1092 color: #fff;1093 margin: 0 auto;1094 max-width: 60%;1095}1096 1097.section-2 .line {1098 width: 10%;1099 border: 2.5px solid #f2962f !important;1100 border-radius: 5px;1101 background: #f2962f !important;1102 margin: 10px auto;1103}1104 1105.section-2.dark {1106 background-color: #020422;1107}1108 1109.timeline {1110 margin-top: 70px;1111}1112 1113.timeline__content {1114 border: none;1115 /* background: linear-gradient(to right, #ad5389, #3c1053); */1116 background: #020422;1117 color: #fff;1118}1119.timeline__content.dark {1120 background: #0b1339;1121}1122 1123.section-3 {1124 min-height: 100vh;1125 z-index: 100;1126 /* background: #fff; */1127 background-color: #003b4d;1128 color: #fff;1129 position: sticky;1130 top: 0vh;1131}1132 1133.section-3 h1 {1134 font-size: 4.3rem;1135 padding-top: 70px;1136 text-align: center;1137}1138 1139.section-3 .intro-p {1140 font-size: 1.3rem;1141 padding-top: 20px;1142 text-align: center;1143 margin: 0 auto;1144 max-width: 60%;1145}1146 1147.section-3 .line {1148 width: 10%;1149 border: 2.5px solid #f2962f !important;1150 border-radius: 5px;1151 background: #f2962f !important;1152 margin: 10px auto;1153}1154 1155.image-holder {1156 min-width: 325px;1157 min-height: 215px;1158}1159 1160@media (min-width: 400px) {1161 .image-holder {1162 min-width: 300px;1163 min-height: 200px;1164 }1165}1166 1167footer {1168 background-color: #001e27;1169 color: #fff;1170 padding: 10px 0;1171 text-align: center;1172 font-size: 1.2rem;1173 display: flex;1174 flex-direction: column;1175 justify-content: center;1176 align-items: center;1177 width: 100%;1178 margin-top: 60px;1179 margin-bottom: 0px;1180}1181 1182footer p {1183 margin: 0;1184 color: rgb(185, 185, 185);1185 font-size: 1.2rem;1186}1187.footer-links {1188 display: flex;1189 margin-top: 5px;1190 color: rgb(185, 185, 185);1191}1192.footer-links i {1193 margin-right: 12px;1194}1195.footer-links i:hover {1196 color: rgb(82, 82, 82);1197 cursor: pointer;1198 transition: 0.2s all ease;1199}1200@media screen and (max-width: 600px) {