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>3 <head>4 <style>5 /* http://meyerweb.com/eric/tools/css/reset/ */6/* v1.0 | 20080212 */7 8html, body, div, span, applet, object, iframe,9h1, h2, h3, h4, h5, h6, p, blockquote, pre,10a, abbr, acronym, address, big, cite, code,11del, dfn, em, font, img, ins, kbd, q, s, samp,12small, strike, strong, sub, sup, tt, var,13b, u, i, center,14dl, dt, dd, ol, ul, li,15fieldset, form, label, legend,16table, caption, tbody, tfoot, thead, tr, th, td {17 margin: 0;18 padding: 0;19 border: 0;20 outline: 0;21 font-size: 100%;22 vertical-align: baseline;23 background: transparent;24}25body {26 line-height: 1;27}28ol, ul {29 list-style: none;30}31blockquote, q {32 quotes: none;33}34blockquote:before, blockquote:after,35q:before, q:after {36 content: '';37 content: none;38}39 40/* remember to define focus styles! */41:focus {42 outline: 0;43}44 45/* remember to highlight inserts somehow! */46ins {47 text-decoration: none;48}49del {50 text-decoration: line-through;51}52 53/* tables still need 'cellspacing="0"' in the markup */54table {55 border-collapse: collapse;56 border-spacing: 0;57}58 59 60/*61 960 Grid System ~ Core CSS.62 Learn more ~ http://960.gs/63 64 Licensed under GPL and MIT.65*/66 67/* `Containers68----------------------------------------------------------------------------------------------------*/69 70.container_16 {71 margin-left: auto;72 margin-right: auto;73 width: 960px;74}75 76/* `Grid >> Global77----------------------------------------------------------------------------------------------------*/78 79.grid_1,80.grid_2,81.grid_3,82.grid_4,83.grid_5,84.grid_6,85.grid_7,86.grid_8,87.grid_9,88.grid_10,89.grid_11,90.grid_12,91.grid_13,92.grid_14,93.grid_15,94.grid_16 {95 display: inline;96 float: left;97 margin-left: 10px;98 margin-right: 10px;99}100 101.push_1, .pull_1,102.push_2, .pull_2,103.push_3, .pull_3,104.push_4, .pull_4,105.push_5, .pull_5,106.push_6, .pull_6,107.push_7, .pull_7,108.push_8, .pull_8,109.push_9, .pull_9,110.push_10, .pull_10,111.push_11, .pull_11,112.push_12, .pull_12,113.push_13, .pull_13,114.push_14, .pull_14,115.push_15, .pull_15 {116 position: relative;117}118 119 120.container_16 .grid_4 {121 width: 220px;122}123 124 125.container_16 .grid_8 {126 width: 460px;127}128 129 130.container_16 .grid_12 {131 width: 700px;132}133 134 135.container_16 .grid_16 {136 width: 940px;137}138 139/* `Grid >> Children (Alpha ~ First, Omega ~ Last)140----------------------------------------------------------------------------------------------------*/141 142.alpha {143 margin-left: 0;144}145 146.omega {147 margin-right: 0;148}149 150/* `Grid >> 16 Columns151----------------------------------------------------------------------------------------------------*/152 153.container_16 .grid_1 {154 width: 40px;155}156 157.container_16 .grid_2 {158 width: 100px;159}160 161.container_16 .grid_3 {162 width: 160px;163}164 165.container_16 .grid_5 {166 width: 280px;167}168 169.container_16 .grid_6 {170 width: 340px;171}172 173.container_16 .grid_7 {174 width: 400px;175}176 177.container_16 .grid_9 {178 width: 520px;179}180 181.container_16 .grid_10 {182 width: 580px;183}184 185.container_16 .grid_11 {186 width: 640px;187}188 189.container_16 .grid_13 {190 width: 760px;191}192 193.container_16 .grid_14 {194 width: 820px;195}196 197.container_16 .grid_15 {198 width: 880px;199}200 201/* `Prefix Extra Space >> Global202----------------------------------------------------------------------------------------------------*/203 204 205.container_16 .prefix_4 {206 padding-left: 240px;207}208 209 210.container_16 .prefix_8 {211 padding-left: 480px;212}213 214 215.container_16 .prefix_12 {216 padding-left: 720px;217}218 219/* `Prefix Extra Space >> 16 Columns220----------------------------------------------------------------------------------------------------*/221 222.container_16 .prefix_1 {223 padding-left: 60px;224}225 226.container_16 .prefix_2 {227 padding-left: 120px;228}229 230.container_16 .prefix_3 {231 padding-left: 180px;232}233 234.container_16 .prefix_5 {235 padding-left: 300px;236}237 238.container_16 .prefix_6 {239 padding-left: 360px;240}241 242.container_16 .prefix_7 {243 padding-left: 420px;244}245 246.container_16 .prefix_9 {247 padding-left: 540px;248}249 250.container_16 .prefix_10 {251 padding-left: 600px;252}253 254.container_16 .prefix_11 {255 padding-left: 660px;256}257 258.container_16 .prefix_13 {259 padding-left: 780px;260}261 262.container_16 .prefix_14 {263 padding-left: 840px;264}265 266.container_16 .prefix_15 {267 padding-left: 900px;268}269 270/* `Suffix Extra Space >> Global271----------------------------------------------------------------------------------------------------*/272 273 274.container_16 .suffix_4 {275 padding-right: 240px;276}277 278 279.container_16 .suffix_8 {280 padding-right: 480px;281}282 283 284.container_16 .suffix_12 {285 padding-right: 720px;286}287 288/* `Suffix Extra Space >> 16 Columns289----------------------------------------------------------------------------------------------------*/290 291.container_16 .suffix_1 {292 padding-right: 60px;293}294 295.container_16 .suffix_2 {296 padding-right: 120px;297}298 299.container_16 .suffix_3 {300 padding-right: 180px;301}302 303.container_16 .suffix_5 {304 padding-right: 300px;305}306 307.container_16 .suffix_6 {308 padding-right: 360px;309}310 311.container_16 .suffix_7 {312 padding-right: 420px;313}314 315.container_16 .suffix_9 {316 padding-right: 540px;317}318 319.container_16 .suffix_10 {320 padding-right: 600px;321}322 323.container_16 .suffix_11 {324 padding-right: 660px;325}326 327.container_16 .suffix_13 {328 padding-right: 780px;329}330 331.container_16 .suffix_14 {332 padding-right: 840px;333}334 335.container_16 .suffix_15 {336 padding-right: 900px;337}338 339/* `Push Space >> Global340----------------------------------------------------------------------------------------------------*/341 342 343.container_16 .push_4 {344 left: 240px;345}346 347 348.container_16 .push_8 {349 left: 480px;350}351 352 353.container_16 .push_12 {354 left: 720px;355}356 357/* `Push Space >> 16 Columns358----------------------------------------------------------------------------------------------------*/359 360.container_16 .push_1 {361 left: 60px;362}363 364.container_16 .push_2 {365 left: 120px;366}367 368.container_16 .push_3 {369 left: 180px;370}371 372.container_16 .push_5 {373 left: 300px;374}375 376.container_16 .push_6 {377 left: 360px;378}379 380.container_16 .push_7 {381 left: 420px;382}383 384.container_16 .push_9 {385 left: 540px;386}387 388.container_16 .push_10 {389 left: 600px;390}391 392.container_16 .push_11 {393 left: 660px;394}395 396.container_16 .push_13 {397 left: 780px;398}399 400.container_16 .push_14 {401 left: 840px;402}403 404.container_16 .push_15 {405 left: 900px;406}407 408/* `Pull Space >> Global409----------------------------------------------------------------------------------------------------*/410 411 412.container_16 .pull_4 {413 left: -240px;414}415 416.container_16 .pull_8 {417 left: -480px;418}419 420 421.container_16 .pull_12 {422 left: -720px;423}424 425 426/* `Pull Space >> 16 Columns427----------------------------------------------------------------------------------------------------*/428 429.container_16 .pull_1 {430 left: -60px;431}432 433.container_16 .pull_2 {434 left: -120px;435}436 437.container_16 .pull_3 {438 left: -180px;439}440 441.container_16 .pull_5 {442 left: -300px;443}444 445.container_16 .pull_6 {446 left: -360px;447}448 449.container_16 .pull_7 {450 left: -420px;451}452 453.container_16 .pull_9 {454 left: -540px;455}456 457.container_16 .pull_10 {458 left: -600px;459}460 461.container_16 .pull_11 {462 left: -660px;463}464 465.container_16 .pull_13 {466 left: -780px;467}468 469.container_16 .pull_14 {470 left: -840px;471}472 473.container_16 .pull_15 {474 left: -900px;475}476 477/* `Clear Floated Elements478----------------------------------------------------------------------------------------------------*/479 480/* http://sonspring.com/journal/clearing-floats */481 482.clear {483 clear: both;484 display: block;485 overflow: hidden;486 visibility: hidden;487 width: 0;488 height: 0;489}490 491/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */492 493.clearfix:after {494 clear: both;495 content: ' ';496 display: block;497 font-size: 0;498 line-height: 0;499 visibility: hidden;500 width: 0;501 height: 0;502}503 504/*505 The following zoom:1 rule is specifically for IE6 + IE7.506 Move to separate stylesheet if invalid CSS is a problem.507*/508* html .clearfix,509*:first-child+html .clearfix {510 zoom: 1;511}512 513 514.apprise-overlay{background-color:#fff;display:none;height:100%;left:0;position:fixed;top:0;width:100%; z-index: 10000;}div.apprise{background:#fff;border:1px solid #aaa;box-shadow:0 2px 15px rgba(0,0,0,0.2);-mox-box-shadow:0 2px 15px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 15px rgba(0,0,0,0.2);color:#111;display:none;font-family:Arial,sans-serif;font-size:14px;left:40%;max-height:90%;overflow:hidden;position:fixed;top:20%;width:20%; z-index: 10001;}div.apprise .apprise-inner{padding:20px}div.apprise .apprise-input{margin-top:10px;padding:10px 0}div.apprise .apprise-input input{border:1px solid rgba(0,0,0,0.3);border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);-mox-box-shadow:inset 0 0 5px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.1);display:block;font-size:13px;margin:0 auto;padding:5px 10px;width:90%}div.apprise .apprise-input input:focus{border-color:#01aef0;outline:0}div.apprise .apprise-buttons{background:#eee;border-top:1px solid #aaa;box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #fff;padding:5px 20px;text-align:right}div.apprise .apprise-buttons button{background:#ededed;border:1px solid rgba(0,0,0,0.5);border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-mox-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);cursor:pointer;font-size:13px;margin:0 2px;overflow:hidden;padding:5px 12px;text-shadow:0 1px 0 rgba(255,255,255,0.8)}div.apprise .apprise-buttons button.blue{background:#01aef0}div.apprise .apprise-buttons button.red{background:#d23a30}div.apprise .apprise-buttons button.blue,div.apprise .apprise-buttons button.red{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.4)}div.apprise .apprise-buttons button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0px 1px 3px rgba(0,0,0,0.4);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0px 1px 3px rgba(0,0,0,0.4)}div.apprise .apprise-buttons button:active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.5),0px 1px 0 rgba(255,255,255,0.8);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5),0px 1px 0 rgba(255,255,255,0.8);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.5),0px 1px 0 rgba(255,255,255,0.8)}515 516 517 518@font-face {519 font-family: 'Gotham';520 src: url('Gotham-Medium.eot?#iefix') format('embedded-opentype'), url('Gotham-Medium.otf') format('opentype'),521 url('Gotham-Medium.woff') format('woff'), url('Gotham-Medium.ttf') format('truetype'), url('Gotham-Medium.svg#Gotham-Medium') format('svg');522 font-weight: normal;523 font-style: normal;524}525 526@font-face {527 font-family: 'Gotham';528 src: url('Gotham-BoldItalic.eot?#iefix') format('embedded-opentype'), url('Gotham-BoldItalic.otf') format('opentype'),529 url('Gotham-BoldItalic.woff') format('woff'), url('Gotham-BoldItalic.ttf') format('truetype'), url('Gotham-BoldItalic.svg#Gotham-BoldItalic') format('svg');530 font-weight: bold;531 font-style: italic;532}533 534@font-face {535 font-family: 'Gotham';536 src: url('GothamBold.eot?#iefix') format('embedded-opentype'), url('GothamBold.woff') format('woff'), url('GothamBold.ttf') format('truetype'), url('GothamBold.svg#GothamBold') format('svg');537 font-weight: bold;538 font-style: normal;539}540 541@font-face {542 font-family: 'Gotham';543 src: url('Gotham-MediumItalic.eot?#iefix') format('embedded-opentype'), url('Gotham-MediumItalic.otf') format('opentype'),544 url('Gotham-MediumItalic.woff') format('woff'), url('Gotham-MediumItalic.ttf') format('truetype'), url('Gotham-MediumItalic.svg#Gotham-MediumItalic') format('svg');545 font-weight: normal;546 font-style: italic;547}548 549 550 551/* Site framework */552 553body {554 font-family: "Gotham", Arial, Helvetica, sans-serif;555 font-size: 14px;556 background: #fff;557}558 559.contentDiv {560 min-height: 0px;561}562 563.admin_panel+.top_wrap {564 margin-top: 31px;565}566 567.top_wrap {568 background: #000;569 color: #fff;570 line-height: 42px;571 height: 42px;572}573 574.top_wrap .social {575 display: inline-block;576 height: 18px;577 width: 22px;578 background: url(../images/social_icons.png) 5px center no-repeat;579}580 581.top_wrap .social.tw {582 background-position: -22px center;583}584 585.top_wrap .social.li {586 background-position: -52px center;587}588 589.top_wrap .date,590.top_wrap .address {591 display: inline-block;592 float: right;593 padding-left: 20px;594 margin-left: 18px;595 color: #fff;596}597 598.top_wrap .date {599 background: url(../images/icon_calendar.png) left center no-repeat;600}601 602.top_wrap .date sup {603 font-size: 8px;604 vertical-align: super;605}606 607.top_wrap .address {608 background: url(../images/icon_loc.png) left center no-repeat;609}610 611 612/* Header */613 614.header_wrap {615 margin-bottom: 10px;616 border-bottom: 1px solid #ee7202;617}618 619.logo {620 margin: 20px 0 20px 0;621 display: block;622}623 624.header_right {625 text-align: right;626 font-size: 18px;627 color: #1b1464;628 line-height: 30px;629 margin: 20px 0;630 font-family: Arial, Helvetica, sans-serif;631}632 633 634/* Menus */635 636.menu_wrap {}637 638.topmenu {639 z-index: 3000;640 margin: 50px 0 0;641 height: 44px;642 padding: 0;643 position: relative;644 text-transform: uppercase;645 list-style: none;646 float: right;647}648 649.topmenu li {650 float: left;651 list-style: none;652 text-align: left;653 margin: 0;654 padding: 0;655 position: relative;656 display: block;657 line-height: 44px;658}659 660.topmenu li a {661 display: block;662 text-align: center;663 margin: 0 9px;664 padding: 0;665 font-size: 15px;666 color: #4b636e;667 box-sizing: border-box;668}669 670.topmenu li:hover>a {671 color: #f47920;672}673 674.topmenu>li:last-child>a {675 margin-right: 0;676}677 678.topmenu li ul {679 position: absolute;680 display: none;681 z-index: 1000;682 margin: 0;683 padding: 0;684 top: 44px;685 left: 0;686 clear: both;687 background: #fff;688 -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.23);689 -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.23);690 box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.23);691}692 693.topmenu li ul li {694 position: relative;695 display: block;696 margin: 0;697 padding: 0;698 float: none699}700 701.topmenu li ul li a {702 text-align: left;703 color: #000;704 font-size: 13px;705 padding: 0 10px;706 background: #fff;707 z-index: 100;708 width: 220px;709 word-wrap: break-word;710 line-height: 30px;711}712 713.topmenu li ul li ul {714 position: absolute;715 right: -190px;716 top: 0;717 left: auto;718 display: none;719}720 721.topmenu li:last-child ul li ul {722 right: auto;723 left: -190px;724}725 726.footermenu {727 margin: 0;728 padding: 0;729 list-style: none;730 text-align: left;731 text-transform: uppercase;732 height: 40px;733}734 735.footermenu li {736 margin: 0;737 padding: 0;738 display: block;739 line-height: 40px;740 float: left;741}742 743.footermenu li a {744 display: block;745 margin: 0;746 font-size: 12px;747 color: #4b636e;748 padding: 0 10px;749}750 751.footermenu li:hover>a {752 color: #f47920;753}754 755.footermenu li:first-child a {756 padding-left: 0;757}758 759 760/* Footer */761 762.footer_wrap {763 line-height: 26px;764 border-top: 1px solid #ee7202;765 padding: 10px 0;766}767 768.footer div.grid_6:nth-child(2) {769 box-sizing: border-box;770 border-left: 1px solid #ebebeb;771 padding-left: 20px;772 color: #000;773 font-size: 16px;774}775 776.footer div.grid_6:nth-child(2) span:first-of-type {777 font-weight: bold;778}779 780 781.footer .hours p {782 font-size:12px;783}784 785.footer .hours p span {786 font-size:14px;787}788 789.footer .newsletter {790 border: 1px solid #959595;791 background: #fff;792 margin-top: 10px;793}794 795.footer .newsletter input {796 border: 0;797 outline: none;798 background: none;799 height: 33px;800 line-height: 33px;801 color: #5a5959;802 font-size: 12px;803 font-weight: bold;804 padding: 0 10px;805}806 807.footer .newsletter a {808 font-size: 14px;809 color: #fff;810 display: block;811 background: #f47920;812 line-height: 33px;813 padding: 0 10px;814 float: right;815}816 817.footer .social {818 display: inline-block;819 height: 18px;820 width: 22px;821 background: url(../images/social_icons_footer.png) 5px center no-repeat;822}823 824.footer .social.tw {825 background-position: -22px center;826}827 828.footer .social.li {829 background-position: -52px center;830}831 832 833/* Byline */834 835.byline_wrap {836 background: #fff;837 border-top: 1px solid #ebebeb;838 padding: 10px 0 20px 0;839 text-align: right;840 line-height: 14px;841 color: #c9c8c8;842 font-size: 12px;843}844 845.byline_wrap a {846 color: #c9c8c8;847}848 849.sitedocmenu {850 margin: 0;851 padding: 0;852}853 854.sitedocmenu li {855 margin: 0;856 padding: 0;857 list-style: none;858 display: block;859 float: left;860 line-height: 12px;861}862 863.sitedocmenu li a {864 padding: 0 4px;865 color: #434344;866 font-size: 12px;867 display: block;868 border-right: 1px solid #434344;869}870 871.sitedocmenu li:last-child a {872 border: 0;873}874 875 876/* Contact Forms */877 878.customform {879 font: 12px arial;880 color: #333;881}882 883.customform .fullwrap {884 float: left;885 width: 100%;886 margin-bottom: 10px;887}888 889.customform .linewrap {890 float: left;891 width: 100%;892 margin-bottom: 10px;893}894 895.customform .linewrap .leftwrap {896 float: left;897 width: 30%;898 height: 30px;899}900 901.customform .linewrap .leftwrap label {902 display: block;903 text-align: right;904 padding-right: 10px;905}906 907.customform .linewrap .rightwrap {908 float: left;909 width: 70%;910}911 912.customform .linewrap .textareawrap textarea {913 width: 95%;914 height: 120px;915 font: 13px Trebuchet MS;916 color: #000;917}918 919.customform .linewrap .textinputwrap input {920 width: 95%;921 font: 13px Trebuchet MS;922 color: #000;923}924 925.customform .linewrap .dropdownwrap select {926 width: 100%;927 font: 13px Trebuchet MS;928 color: #000;929}930 931.customform .infowrap {932 margin: 10px 0;933 font-weight: bold;934}935 936 937/* Fonts */938 939a {940 text-decoration: none;941 color: #f47920;942}943 944html {945 overflow-y: scroll;946}947 948h1 {949 display: block;950 font-size: 34px;951 color: #000;952 margin: 0 0;953 padding: 0;954 line-height: 40px;955 font-weight: normal;956}957 958h2 {959 display: block;960 font-size: 28px;961 color: #f47920;962 margin: 0 0;963 padding: 0;964 line-height: 30px;965 font-weight: normal;966}967 968h3 {969 display: block;970 font-size: 24px;971 color: #000;972 margin: 0 0;973 padding: 0;974 line-height: 30px;975 font-weight: normal;976}977 978h4 {979 display: block;980 font-size: 24px;981 color: #f47920;982 margin: 0 0;983 padding: 0;984 line-height: 26px;985 font-weight: normal;986}987 988h5 {989 display: block;990 font-size: 20px;991 color: #000;992 margin: 0 0;993 padding: 0;994 line-height: 24px;995 font-weight: normal;996}997 998h6 {999 display: block;1000 font-size: 30px;1001 color: #fff;1002 margin: 0;1003 padding: 15px 10px;1004 line-height: 20px;1005 background: #ee7202;1006 font-weight: normal;1007}1008 1009p {1010 padding: 5px 0 20px 0;1011 font-size: 16px;1012 color: #3f3e3e;1013 line-height: 24px;1014}1015 1016ul {1017 list-style-position: outside;1018 padding: 5px 0 20px 20px;1019 font-size: 16px;1020 color: #3f3e3e;1021 list-style-type: disc;1022 line-height: 24px;1023}1024 1025ul li {1026 padding: 0 0 15px 0;1027 line-height: 20px;1028}1029 1030ol {1031 list-style-position: outside;1032 padding: 5px 0 20px 20px;1033 font-size: 16px;1034 color: #3f3e3e;1035 list-style-type: circle;1036 line-height: 24px;1037}1038 1039ol li {1040 padding: 0 0 5px 0;1041}1042 1043hr {1044 color: #dadbdc;1045 background: #dadbdc;1046 height: 1px;1047 border: 0;1048 margin-bottom: 20px;1049}1050 1051.hidden {1052 display: none;1053}1054 1055 1056/* Button Class */1057 1058.btn_p {1059 display: inline-block;1060 margin: 0 5px;1061 padding: 8px 14px;1062 background: #fff;1063 border: 1px solid #F4791F;1064 box-sizing: border-box;1065 color: #F4791F;1066 transition: 0.3s ease-in all;1067}1068 1069.btn_p:hover {1070 background: #F4791F;1071 color: #fff;1072}1073 1074 1075/* Contact Forms */1076 1077.cf_line {1078 clear: both;1079 line-height: 30px;1080}1081 1082.cf_label {1083 float: left;1084 width: 48%;1085 margin: 0 1%;1086}1087 1088.cf_field {1089 float: left;1090 width: 48%;1091 margin: 0 1%;1092}1093 1094.cf_field textarea,1095.cf_field select,1096.cf_field input[type=text] {1097 width: 98%;1098}1099 1100.cf_field textarea {1101 height: 60px;1102 resize: none;1103}1104 1105.cf_submit,1106.ff_submit {1107 text-align: center;1108 margin: 10px 0;1109}1110 1111.cf_submit a,1112.ff_submit a {1113 font-size: 1.2em;1114 color: #fff;1115 background: #394cc1;1116 border-radius: 5px;1117 line-height: 30px;1118 margin: 0 auto;1119 display: inline-block;1120 padding: 0 20px;1121 text-decoration: none;1122 background: #3344af;1123 /* Old browsers */1124 background: -moz-linear-gradient(top, #3344af 0%, #505fb6 50%, #6973b5 100%);1125 /* FF3.6+ */1126 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3344af), color-stop(50%, #505fb6), color-stop(100%, #6973b5));1127 /* Chrome,Safari4+ */1128 background: -webkit-linear-gradient(top, #3344af 0%, #505fb6 50%, #6973b5 100%);1129 /* Chrome10+,Safari5.1+ */1130 background: -o-linear-gradient(top, #3344af 0%, #505fb6 50%, #6973b5 100%);1131 /* Opera 11.10+ */1132 background: -ms-linear-gradient(top, #3344af 0%, #505fb6 50%, #6973b5 100%);1133 /* IE10+ */1134 background: linear-gradient(to bottom, #3344af 0%, #505fb6 50%, #6973b5 100%);1135 /* W3C */1136 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3344af', endColorstr='#6973b5', GradientType=0);1137 /* IE6-9 */1138}1139 1140 1141/*Fading Gallery*/1142 1143.caroufredsel_wrapper {1144 padding-bottom: 20px;1145}1146 1147div[type=fading_gallery] a {1148 position: relative;1149}1150 1151div[type=fading_gallery] .banner,1152div.fg_gallery .banner {1153 position: absolute;1154 bottom: 0;1155 padding: 0px 5px;1156 width: 100%;1157 background: rgba(0, 105, 0, 0.9);1158}1159 1160 1161/* ----- FULL SCREEN GALLERY -----*/1162 1163div.fullscreenfade { opacity: 0; display: flex; justify-content: center; transition: opacity 0.3s ease-in-out 0s; position: relative; }1164 1165div.fullscreenfade.full_width{width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}1166 1167 1168div.fullscreenfade div.slide {1169 float: left;1170 position: relative;1171 display: flex;1172 align-items: center;1173 background-position: center top;1174 background-size: cover;1175 background-repeat: no-repeat;1176 height: 100%;1177}1178 1179div.fullscreenfade div.slide .banner {1180 margin: 0 auto;1181 width: 1200px;1182}1183 1184div.fullscreenfade div.slide .frame {1185 height: 100%;1186 align-self: center;1187 display: inline-block;1188 padding: 16px 20px;1189}1190 1191div.fullscreenfade div.slide .frame:not(.frame_on) {1192 background-color: transparent !important;1193}1194 1195div.fullscreenfade div.slide .frame h1,1196div.fullscreenfade div.slide .frame h2,1197div.fullscreenfade div.slide .frame h3,1198div.fullscreenfade div.slide .frame h4 {1199 position: relative;1200}