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 class="" lang="ja">3 <head>4 <style>5 @font-face {6 font-display: swap;7 font-family: HK Grotesk;8 font-weight: 700;9 src: local("HKGrotesk-Bold"),url(/assets/fonts/HKGrotesk-Bold.woff2) format("woff2"),url(/assets/fonts/HKGrotesk-Bold.ttf) format("truetype")10}11 12@font-face {13 font-display: swap;14 font-family: HK Grotesk;15 font-weight: 600;16 src: local("HKGrotesk-SemiBold"),url(/assets/fonts/HKGrotesk-SemiBold.woff2) format("woff2"),url(/assets/fonts/HKGrotesk-SemiBold.ttf) format("truetype")17}18 19@font-face {20 font-display: swap;21 font-family: HK Grotesk;22 font-weight: 400;23 src: local("HK Grotesk"),local("HKGrotesk-Regular"),url(/assets/fonts/HKGrotesk-Regular.woff2) format("woff2"),url(/assets/fonts/HKGrotesk-Regular.ttf) format("truetype")24}25 26@font-face {27 font-display: swap;28 font-family: Cascadia Mono;29 font-weight: 400;30 src: local("Cascadia Mono"),local("CascadiaMono-Regular"),url(/assets/fonts/CascadiaMono-Regular-Sub.woff2) format("woff2"),url(/assets/fonts/CascadiaMono-Regular-Sub.woff) format("woff"),url(/assets/fonts/CascadiaMono-Regular.ttf) format("truetype")31}32 33@keyframes slide {34 0% {35 transform: translateX(0)36 }37 38 to {39 transform: translateX(-100%)40 }41}42 43@keyframes slide-mobile {44 0% {45 transform: translateX(0)46 }47 48 to {49 transform: translateX(-160%)50 }51}52 53@media (hover: hover) {54 button:hover,input[type=submit]:hover {55 background-color:#e4e5ea56 }57 58 #need-full-control .drawer button:hover {59 background-color: #26252e60 }61 62 .vertical-btns button:hover {63 background-color: #d7d9e064 }65 66 .modal #md-close:hover,.modal #md-next:hover,.modal #md-prev:hover {67 background: #1616162f!important68 }69}70 71#__bs_notify__ {72 display: none!important73}74 75body,html {76 background-color: #fdfdfd;77 color: #19181f;78 font-family: HK Grotesk,Inter,BIZ UDGothic,BIZ UDPGothic,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;79 font-size: 18px;80 scroll-behavior: smooth;81 scroll-padding-top: min(max(65px,8vh),128px)82}83 84body {85 align-items: center;86 display: flex;87 flex-direction: column;88 margin: 0;89 padding: 090}91 92main a:link,section a:link {93 color: #007aff94}95 96main a:visited,section a:visited {97 color: #5d25c698}99 100body>:not(.full-width) {101 box-sizing: border-box;102 max-width: 992px;103 width: 100%104}105 106body>header {107 max-width: unset!important108}109 110body>footer,body>header>div {111 max-width: 1536px!important112}113 114body>footer {115 align-items: flex-end;116 color: #565565;117 display: flex;118 font-size: 16px;119 padding: 120px 40px 40px120}121 122body>footer>* {123 flex-grow: 1124}125 126body>footer>:last-child {127 text-align: right128}129 130body>footer ul {131 list-style: none;132 padding: 0133}134 135body>footer a {136 color: inherit;137 text-decoration: none138}139 140body.landing {141 overflow-x: hidden142}143 144.no-overflow {145 overflow: hidden146}147 148h2,h3,h4 {149 font-weight: 600150}151 152h2 {153 -webkit-margin-before: 16px;154 -webkit-margin-after: 12px;155 font-size: 24px;156 margin-block-end:12px;margin-block-start:16px}157 158button {159 -webkit-appearance: none;160 -moz-appearance: none;161 appearance: none;162 background-color: #fdfdfd;163 border: 1px solid #bdbfcc;164 border-radius: 6px;165 color: inherit;166 margin: 0;167 padding: 8px 16px;168 -webkit-user-select: none;169 -moz-user-select: none;170 -ms-user-select: none;171 user-select: none172}173 174button:-moz-focusring,input:-moz-focusring,textarea:-moz-focusring {175 outline: 3px solid rgba(0,122,255,.5);176 outline-offset: 0177}178 179button:focus,button:focus-visible,input:focus,input:focus-visible,textarea:focus {180 outline: none181}182 183button:focus-visible,input:focus-visible,textarea:focus-visible {184 outline: 3px solid rgba(0,122,255,.5);185 outline-offset: 0186}187 188button:active,input[type=submit]:active {189 background-color: #d7d9e0!important190}191 192input:-ms-input-placeholder {193 color: #565565194}195 196input::placeholder {197 color: #565565198}199 200textarea {201 font-family: inherit;202 resize: vertical203}204 205input[type=checkbox] {206 margin-left: 0;207 margin-right: 8px208}209 210.code,code,pre {211 font-family: Cascadia Mono,Courier New,Courier,monospace;212 font-size: 15px213}214 215code .indented {216 display: block;217 margin-left: 2em218}219 220section {221 column-gap: 24px;222 gap: 32px;223 padding: 80px 32px 40px;224 row-gap: 16px225}226 227main {228 padding: 0 32px229}230 231h1 {232 -webkit-margin-after: 24px;233 font-size: 36px;234 font-weight: 700;235 margin-block-end:24px}236 237h1 small {238 -webkit-margin-start: .2em;239 color: #565565;240 font-size: 24px;241 margin-inline-start:.2em}242 243h3 {244 font-size: inherit245}246 247p {248 -webkit-margin-before: .5rem;249 -webkit-margin-after: .5rem;250 margin-block-end:.5rem;margin-block-start:.5rem}251 252address {253 font-style: inherit254}255 256strong {257 font-weight: 600258}259 260section>*>h2:first-child {261 -webkit-margin-before: 0;262 margin-block-start:0}263 264.signup {265 margin-block:48px 32px}266 267.signup p,.signup>a {268 font-size: 13px269}270 271.signup>a {272 color: #fdfdfd!important273}274 275.hidden-tip {276 opacity: 0;277 pointer-events: none;278 transition: opacity .2s ease279}280 281.hidden-tip.display {282 opacity: 1;283 pointer-events: auto284}285 286.hidden-tip.error {287 color: #f4ffa4288}289 290.cta-field,.ctas>a {291 border: 2px solid #fdfdfd;292 border-radius: 8px;293 margin: 0 auto 8px294}295 296.ctas>a {297 font-weight: 600;298 padding: 12px 24px299}300 301.ctas>a:not(:last-child) {302 margin-right: 8px303}304 305.cta-field,.ctas>a.primary {306 background: #fdfdfd;307 border-color: #0a3649308}309 310.ctas>a {311 color: inherit!important;312 display: inline-block;313 text-decoration: none;314 -webkit-user-select: none;315 -moz-user-select: none;316 -ms-user-select: none;317 user-select: none318}319 320.ctas>a.primary {321 color: #19181f!important322}323 324.cta-field {325 display: flex;326 font-size: 14px;327 max-width: 390px328}329 330.cta-field>:first-child {331 border-radius: 8px 0 0 8px;332 display: flex;333 flex-direction: column;334 flex-grow: 1;335 line-height: 0336}337 338.cta-field>:first-child input {339 background: none;340 border: none;341 box-sizing: border-box;342 font-size: inherit;343 margin: 0;344 padding: 16px 15px;345 width: 100%346}347 348.cta-field>:first-child input:first-child {349 border-top-left-radius: 8px350}351 352.cta-field.no-captcha>:first-child input:first-child,.cta-field>:first-child input:last-child {353 border-bottom-left-radius: 8px354}355 356.cta-field>:first-child svg {357 background: #eff0f3;358 border-bottom: 1px solid #d7d9e0;359 border-top: 1px solid #d7d9e0;360 box-sizing: border-box;361 height: 80px;362 transition: height .2s ease;363 width: 100%364}365 366.cta-field.no-captcha>:first-child svg {367 border-width: 0;368 height: 0369}370 371.cta-field>:first-child .captcha-text {372 max-height: 50px;373 opacity: 1;374 overflow: hidden;375 transition: max-height .2s ease,opacity .2s ease,padding-block .2s ease376}377 378.cta-field.no-captcha>:first-child .captcha-text {379 max-height: 0;380 opacity: 0;381 padding-block:0}382 383.cta-field input[type=submit] {384 -webkit-appearance: none;385 -moz-appearance: none;386 appearance: none;387 background: none;388 border: none;389 border-left: 2px solid #0a3649;390 border-radius: 0 8px 8px 0;391 color: #19181f;392 cursor: pointer;393 font-size: inherit;394 font-weight: 400;395 margin: 0;396 min-height: 100%;397 padding: 16px 15px;398 text-transform: lowercase;399 -webkit-user-select: none;400 -moz-user-select: none;401 -ms-user-select: none;402 user-select: none403}404 405#cta h1,.landing h1 {406 -webkit-margin-after: 1rem;407 font-size: 56px;408 margin-block-end:1rem}409 410#cta h2,.landing h2 {411 font-size: 28px412}413 414#cta {415 background-size: 143%;416 border-radius: 32px;417 margin: 120px 16px 40px;418 padding: 100px 64px 80px;419 text-align: center420}421 422#cta h2 {423 -webkit-margin-before: 0;424 display: block;425 margin-block-start:0}426 427.banner {428 background: #0a3649;429 color: #fdfdfd;430 display: flex;431 gap: 4px;432 justify-content: center;433 padding: 8px;434 position: -webkit-sticky;435 position: sticky;436 text-align: center;437 top: 0;438 z-index: 10439}440 441.banner button {442 background: none;443 border: none;444 justify-self: flex-end;445 line-height: 0;446 margin: 0;447 padding: 4px;448 position: absolute;449 right: 16px450}451 452.banner button:hover {453 background-color: #11566c454}455 456.banner button:active {457 background-color: #19798d!important458}459 460.banner+header {461 top: 39px462}463 464.banner a {465 color: inherit!important466}467 468.time {469 font-weight: 700470}471 472header {473 color: #fdfdfd;474 font-size: 14px;475 position: absolute;476 top: 0;477 z-index: 7478}479 480header.boring {481 position: relative482}483 484header>div {485 align-items: center;486 display: flex;487 gap: 8px;488 justify-content: space-between;489 margin: auto;490 padding: 24px 32px491}492 493header>div>a img,header>div>a svg {494 margin-top: 3px;495 width: auto496}497 498header.fixed>div>a img,header.fixed>div>a svg {499 height: 26px;500 margin-top: 0;501 width: auto502}503 504header.fixed {505 box-shadow: 0 4px 12px rgba(89,85,101,.2);506 position: fixed;507 z-index: 5508}509 510header.boring,header.fixed {511 background: #fdfdfd;512 color: #19181f513}514 515header.fixed.blue {516 background: #239dad;517 box-shadow: 0 4px 16px -2px (89,85,101,.2);518 color: #fdfdfd519}520 521header.fixed>div {522 padding: 12px 32px523}524 525header>div>a:first-child:not(.btn) {526 color: inherit;527 display: block;528 height: 33px529}530 531header.fixed>div>a:first-child {532 align-items: center;533 display: flex;534 text-decoration: none535}536 537header.boring>div>a:first-child:not(.btn),header.fixed:not(.blue)>div>a:first-child {538 color: #239dad539}540 541header.boring>div>a img {542 filter: invert(47%) sepia(80%) saturate(436%) hue-rotate(139deg) brightness(95%) contrast(86%)543}544 545header.blue .logo-box img {546 filter: invert(100%) sepia(1%) saturate(4%) hue-rotate(221deg) brightness(107%) contrast(98%)547}548 549header .beta-pill {550 -webkit-margin-start: 12px;551 border: 1px solid #565565;552 border-radius: 4px;553 bottom: 18px;554 display: inline-block;555 font-size: 11px;556 font-weight: 600;557 margin-inline-start:12px;padding: 0 4px;558 position: relative;559 text-transform: uppercase560}561 562header.fixed .beta-pill {563 -webkit-margin-start: 8px;564 bottom: 2px;565 margin-inline-start:8px}566 567header.blue .beta-pill {568 border: 1px solid #fdfdfd569}570 571header:not(.blue) .beta-pill {572 color: #565565573}574 575header ul {576 align-items: center;577 display: flex;578 gap: 16px;579 list-style: none;580 margin: 0;581 padding: 0582}583 584header ul li svg {585 margin-top: 2px586}587 588nav a {589 color: inherit;590 text-decoration: none;591 transition: -webkit-text-decoration .2s ease-in-out;592 transition: text-decoration .2s ease-in-out;593 transition: text-decoration .2s ease-in-out,-webkit-text-decoration .2s ease-in-out594}595 596footer a:focus,footer a:hover,nav a:not(.btn):focus,nav a:not(.btn):hover {597 text-decoration: underline598}599 600.nav-btn {601 background-color: #ebf7f9;602 border-radius: 8px;603 color: #19181f;604 display: block;605 padding: 8px 12px;606 -webkit-user-select: none;607 -moz-user-select: none;608 -ms-user-select: none;609 user-select: none610}611 612.blue.fixed .nav-btn:active,.nav-btn:active {613 background-color: #a6ebe6614}615 616.boring .nav-btn,.fixed .nav-btn {617 background-color: #127885;618 color: #fdfdfd619}620 621.boring .nav-btn:active,.fixed .nav-btn:active {622 background-color: #0a3649623}624 625.blue.fixed .nav-btn {626 background: #ebf7f9;627 color: #19181f628}629 630.blurred {631 background: url(/assets/images/blur.webp) no-repeat 50% scroll;632 background-color: #00afc6;633 color: #fdfdfd634}635 636.blurred.no-webp-alpha,.blurred.no-webp-lossy {637 background: url(/assets/images/blur.png) no-repeat 50% scroll #00afc6638}639 640.number-discs {641 -webkit-margin-before: 16px;642 column-gap: 80px;643 display: grid;644 grid-template-columns: minmax(160px,1fr) minmax(160px,1fr);645 list-style: none;646 margin-block-start:16px;padding: 0;647 row-gap: 32px648}649 650.number-discs>li {651 position: relative652}653 654.number-discs>li:before {655 align-items: center;656 background: #33323e;657 border-radius: 1em;658 color: #fdfdfd;659 content: "1";660 display: flex;661 font-weight: 600;662 height: 2em;663 justify-content: center;664 left: -2.75em;665 position: absolute;666 text-align: center;667 top: -.38em;668 width: 2em669}670 671.number-discs>li:nth-child(2):before {672 content: "2"673}674 675.number-discs>li:nth-child(3):before {676 content: "3"677}678 679.number-discs>li:nth-child(4):before {680 content: "4"681}682 683.number-discs>li:nth-child(5):before {684 content: "5"685}686 687.number-discs>li>:first-child {688 -webkit-margin-before: 0;689 margin-block-start:0}690 691.status {692 border-radius: 4px;693 display: block;694 padding: 8px 12px695}696 697.status.success {698 background: #f2fff7;699 border: 1px solid #3ed993700}701 702.status.error {703 background: #fff1ef;704 border: 1px solid #ea3e47705}706 707.field {708 background: #eff0f3;709 border-radius: 4px;710 height: 52px;711 margin: 0;712 overflow: hidden;713 padding: 0;714 position: relative;715 width: 100%716}717 718.field.high {719 height: auto720}721 722.field.high textarea {723 height: 153px724}725 726.field label {727 color: #565565;728 left: 12px;729 padding: 0;730 pointer-events: none;731 position: absolute;732 top: 16px;733 transform-origin: left top;734 transition: transform .25s ease-out;735 -webkit-user-select: none;736 -moz-user-select: none;737 -ms-user-select: none;738 user-select: none;739 white-space: nowrap740}741 742.field input:focus+label,.field textarea:focus+label,.field.has-text label,.no-js .field label {743 transform: translateY(-9px) scale(.84615)744}745 746.field input:autofill+label,.field textarea:autofill+label {747 transform: translateY(-9px) scale(.84615)748}749 750.field input:-webkit-autofill+label,.field textarea:-webkit-autofill+label {751 transform: translateY(-9px) scale(.84615)752}753 754.field input,.field textarea {755 -moz-appearance: none;756 appearance: none;757 -webkit-appearance: none;758 background: none;759 border: none;760 border-radius: 4px;761 box-shadow: none;762 box-sizing: border-box;763 font-size: inherit;764 height: 100%;765 margin: 0;766 padding: 23px 12px 9px;767 width: 100%768}769 770button.primary,input[type=submit].primary {771 -webkit-appearance: none;772 -moz-appearance: none;773 appearance: none;774 background: #007aff;775 border: none;776 border-radius: 6px;777 color: #fdfdfd;778 display: inline-block;779 font-size: 18px;780 padding: 12px 24px781}782 783button.primary:hover,input[type=submit].primary:hover {784 background: #004dc6!important785}786 787button.primary:active,input[type=submit].primary:active {788 background: #00298c!important789}790 791.rainbow {792 -webkit-text-fill-color: transparent;793 text-fill-color: transparent;794 background: linear-gradient(90deg,rgba(36,50,45,.4) 3.69%,rgba(27,104,175,.4) 34.79%,rgba(173,208,33,.4) 67.39%,rgba(129,255,209,.4)),#4da7b3;795 -webkit-background-clip: text;796 background-clip: text;797 font-size: 28px;798 font-weight: 700;799 line-height: 1.2;800 text-align: justify801}802 803.rainbow a {804 -webkit-text-decoration-color: #69b082;805 text-decoration-color: #69b082;806 text-decoration-thickness: 4px;807 text-underline-offset: .094em808}809 810#start {811 background-size: 169%;812 display: grid;813 grid-template-rows: minmax(40px,1fr) auto minmax(32px,1fr) auto;814 justify-items: center;815 min-height: 100vh;816 overflow: hidden;817 padding: 88px 64px 0;818 text-align: center;819 z-index: 6820}821 822#change,#start {823 position: relative824}825 826#change {827 white-space: nowrap828}829 830#change .new {831 bottom: .9em;832 left: 0;833 opacity: 0;834 position: absolute;835 -webkit-user-select: none;836 -moz-user-select: none;837 -ms-user-select: none;838 user-select: none839}840 841#change .old {842 display: inline-block;843 position: relative;844 top: 0845}846 847#start>div:first-child {848 grid-row: 2849}850 851#start .demo {852 grid-row: 4;853 margin-top: auto;854 max-width: 1488px855}856 857.demo .grid {858 display: grid;859 grid-template-areas: "sidebar toolbar ." "sidebar video .";860 grid-template-columns: 127fr 2814fr 27fr;861 grid-template-rows: 169fr 924fr862}863 864.demo picture {865 grid-column: 1/span 3;866 grid-row: 1/span 2867}868 869.demo img,.demo picture {870 -webkit-user-select: none;871 -moz-user-select: none;872 -ms-user-select: none;873 user-select: none874}875 876.demo img {877 box-shadow: 0 0 12px rgba(89,85,101,.2),0 8px 48px rgba(89,85,101,.3);878 cursor: default;879 display: block;880 height: auto;881 width: 100%882}883 884.demo video {885 border-top-left-radius: 5px;886 border-top-right-radius: 5px;887 grid-area: video;888 height: 100%;889 width: 100%;890 z-index: 1891}892 893#social-proof {894 padding-bottom: 12px;895 padding-top: 80px896}897 898.claim {899 text-align: center!important900}901 902.sps {903 margin-inline:-120px;max-width: calc(100vw + 120px);904 overflow: hidden;905 padding: 32px 12px;906 position: relative907}908 909.sps>div {910 box-sizing: border-box;911 display: flex;912 gap: 16px913}914 915.sps>div:not(:last-child) {916 -webkit-margin-after: 16px;917 margin-block-end:16px}918 919.sps>div:first-child>div:first-child {920 margin-left: -184px921}922 923.sps>div:nth-child(2) {924 margin-left: -12px925}926 927.user-voice {928 background: #eff0f3;929 border-radius: 6px;930 box-shadow: 0 4px 12px rgba(89,85,101,.2);931 display: flex;932 flex-shrink: 0;933 gap: 24px;934 padding: 16px 24px;935 width: 376px936}937 938.user-image {939 border-radius: 50%;940 height: 56px;941 margin-top: 8px;942 width: 56px943}944 945.user-voice-name {946 font-size: 16px;947 font-weight: 600948}949 950.user-voice a {951 color: inherit!important;952 text-decoration: none953}954 955#cloud-collaborative .figure {956 max-width: 304px957}958 959.figure>img {960 height: auto;961 width: 100%962}963 964#powerful-templates .figure {965 --dia-progress: 0%;966 align-items: stretch;967 display: flex;968 flex-direction: column;969 gap: 40px970}971 972.pages {973 display: grid;974 grid-template-columns: repeat(auto-fit,minmax(50px,-webkit-max-content));975 grid-template-columns: repeat(auto-fit,minmax(50px,max-content));976 justify-items: left;977 max-width: 496px;978 width: max(14vw,290px)979}980 981.pages picture img {982 height: auto;983 width: 100%984}985 986.pages a {987 filter: drop-shadow(0 4px 12px rgba(89,85,101,.2)) drop-shadow(0 4px 24px rgba(89,85,101,.3));988 position: relative;989 width: 180%;990 z-index: 2991}992 993.pages a picture {994 width: 100%995}996 997.pages a:nth-child(2) {998 justify-self: center;999 transform: scale(.9);1000 transform-origin: top center;1001 z-index: 11002}1003 1004.pages a:last-child {1005 justify-self: right;1006 transform: scale(.8);1007 transform-origin: top right;1008 z-index: 01009}1010 1011.left-btns button.active {1012 background-color: rgba(235,236,239,.8)1013}1014 1015.btn-group {1016 background-color: #fdfdfd;1017 border: 1px solid #bdbfcc;1018 border-radius: 6px;1019 display: flex;1020 justify-content: stretch1021}1022 1023.btn-group button {1024 border: none;1025 border-radius: 0;1026 flex-basis: 0;1027 flex-grow: 11028}1029 1030.btn-group button:first-child {1031 border-bottom-left-radius: 6px;1032 border-top-left-radius: 6px1033}1034 1035.btn-group button:last-child {1036 border-bottom-right-radius: 6px;1037 border-top-right-radius: 6px1038}1039 1040.btn-group button:not(:first-child) {1041 border-left: 1px solid #d7d9e01042}1043 1044.modal {1045 align-items: center;1046 background: radial-gradient(ellipse at center,rgba(0,0,0,.28) 0,rgba(4,25,37,.59) 100%);1047 bottom: 0;1048 display: flex;1049 flex-direction: column;1050 justify-content: center;1051 left: 0;1052 opacity: 0;1053 padding: 60px 30px 90px;1054 position: fixed;1055 right: 0;1056 top: 0;1057 transition: opacity .2s ease;1058 z-index: 101059}1060 1061.modal.open {1062 opacity: 11063}1064 1065.modal>div {1066 flex-direction: column;1067 max-height: 100%;1068 max-width: 100%;1069 text-align: center;1070 transform: translateY(100vh);1071 transition: transform .2s cubic-bezier(.27,.1,.07,1.18)1072}1073 1074.modal #md-prev {1075 left: 01076}1077 1078.modal #md-next {1079 right: 01080}1081 1082.modal #md-next,.modal #md-prev {1083 background: none;1084 border: none;1085 border-radius: 0;1086 bottom: 0;1087 color: #fdfdfd;1088 position: absolute;1089 top: 0;1090 z-index: 51091}1092 1093.modal #md-close {1094 background: rgba(25,24,31,.3);1095 color: #fdfdfd1096}1097 1098.modal #md-close:active,.modal #md-next:active,.modal #md-prev:active {1099 background: #2b2c2d63!important1100}1101 1102.modal.open>div {1103 transform: translateY(0)1104}1105 1106.modal>div img {1107 box-shadow: 1px 3px 3px -1px rgba(79,80,82,.61),2px 5px 14px 3px rgba(79,80,82,.48);1108 display: inline-block;1109 height: auto;1110 image-rendering: high-quality;1111 margin-bottom: 16px;1112 max-height: 100%;1113 max-width: 100%;1114 width: auto1115}1116 1117#powerful-templates .figure button {1118 overflow: hidden;1119 position: relative1120}1121 1122#powerful-templates .figure button>span {1123 position: relative;1124 z-index: 11125}1126 1127#powerful-templates .figure button.active:before {1128 background-color: rgba(235,236,239,.8);1129 bottom: 0;1130 content: "";1131 left: 0;1132 position: absolute;1133 top: 0;1134 width: var(--dia-progress);1135 z-index: 01136}1137 1138#powerful-templates .figure button.past:not(:hover) {1139 background-color: rgba(235,236,239,.8)1140}1141 1142#easy-to-learn .figure>img {1143 box-shadow: 0 4px 12px rgba(89,85,101,.2);1144 margin-inline:40px;max-height: 300px;1145 width: auto1146}1147 1148#need-full-control>div {1149 background-color: #33323e;1150 border-radius: 32px;1151 color: #fdfdfd;1152 margin-bottom: 22px;1153 text-align: center1154}1155 1156#need-full-control .top {1157 background: inherit;1158 border-radius: 32px 32px 0 0;1159 box-shadow: 0 4px 12px rgba(36,33,46,.2),0 4px 24px rgba(18,17,21,.3);1160 padding: 48px 64px;1161 position: relative;1162 z-index: 11163}1164 1165#need-full-control h2 {1166 -webkit-margin-before: 0;1167 -webkit-margin-after: 18px;1168 margin-block-end:18px;margin-block-start:0}1169 1170#need-full-control .drawer {1171 font-size: 16px;1172 margin-top: -8em;1173 padding: 40px min(144px,10vw) 52px;1174 position: relative;1175 text-align: left;1176 transition: margin-top .2s ease;1177 z-index: 01178}1179 1180#need-full-control.drawer-open .drawer {1181 margin-top: 01182}1183 1184#need-full-control .drawer ul {1185 column-count: 2;1186 column-gap: 40px1187}1188 1189#need-full-control .drawer button {1190 background: #33323e;1191 border: 0;1192 bottom: -21px;1193 color: #fdfdfd;1194 left: 0;1195 margin: 0 auto;1196 max-width: 14em;1197 padding: 16px 32px;1198 position: absolute;1199 right: 01200}