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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 /*6 * Gridiculous7 *8 * A responsive grid boilerplate that takes you all the way from 1200px on down to 320px.9 *10 * created by c.bavota11 * released under GPL v212 *13 * March 4th, 201314 */15 16/* =Normalize.css v2.1.0 by Nicolas Gallagher - http://necolas.github.com/normalize.css/17-------------------------------------------------------------- */18article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}19audio,canvas,video{display:inline-block}20audio:not([controls]){display:none;height:0}21[hidden]{display:none}22html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}23body{margin:0}24a:focus{outline:thin dotted}25a:active,a:hover{outline:0}26h1{font-size:2em;margin:0.67em 0}27abbr[title]{border-bottom:1px dotted}28b,strong{font-weight:bold}29dfn{font-style:italic}30hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}31mark{background:#ff0;color:#000}32code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}33pre{white-space:pre-wrap}34q{quotes:"\201C" "\201D" "\2018" "\2019"}35small{font-size:80%}36sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}37sup{top:-0.5em}38sub{bottom:-0.25em}39img{border:0}40svg:not(:root){overflow:hidden}41figure{margin:0}42fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}43legend{border:0;padding:0}44button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}45button,input{line-height:normal}46button,select{text-transform:none}47button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}48button[disabled],html input[disabled]{cursor:default}49input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}50input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}51input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}52button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}53textarea{overflow:auto;vertical-align:top}54table{border-collapse:collapse;border-spacing:0}55 56/* =Clearfix by Nicolas Gallagher57-------------------------------------------------------------- */58.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}59.row:after,.clearfix:after{clear:both}60.row,.clearfix{zoom:1}61 62/* =Gridiculous63-------------------------------------------------------------- */64*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}65body{font-size:100%;line-height:1.6875}66.grid{margin:0 auto;max-width:1200px;width:100%}67img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}68.wfull{width:100%;max-width:100%}69.w320{max-width:320px}70.w640{max-width:640px}71.w960{max-width:960px}72.row{width:100%;margin-bottom:0px}73.row .row{width:auto;margin:0 -10px}74.c1{width:8.33%}75.c2{width:16.66%}76.c3{width:25%}77.c4{width:33.33%}78.c5{width:41.66%}79.c6{width:50%}80.c7{width:58.33%}81.c8{width:66.66%}82.c9{width:75%}83.c10{width:83.33%}84.c11{width:91.66%}85.c12{width:100%}86.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{min-height:1px;float:left;padding-left:10px;padding-right:10px;position:relative}87.s1{margin-left:8.33%}88.s2{margin-left:16.66%}89.s3{margin-left:25%}90.s4{margin-left:33.33%}91.s5{margin-left:41.66%}92.s6{margin-left:50%}93.s7{margin-left:58.33%}94.s8{margin-left:66.66%}95.s9{margin-left:75%}96.s10{margin-left:83.33%}97.s11{margin-left:91.66%}98.end{float:right!important}99 100/* =Media query for 960 Screens - sets nested grids to 100%101-------------------------------------------------------------- */102@media only screen and (max-width:960px){103.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12{width:100%;margin-bottom:0px}104.row .row > div:last-child{margin-bottom:0 !important}105}106 107/* =Media query for iPad and tablets108-------------------------------------------------------------- */109@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){110body{font-size:90%}111.row{margin-bottom:0!important}112.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{width:100%;margin-right:0;margin-left:0;margin-bottom:0px}113}114 115 116*{117 margin: 0;118 padding: 0;119}120a img{121 border: 0;122}123.none{124 display: none;125}126.clear{127 clear: both;128} 129hr{ display: none;}130a{131 color: #1292ec;132}133a:hover{134 color: #444;135}136 137html, body {138 height: 100%;139 width: 100%;140 font-family: 'Open Sans', sans-serif;141 142}143 144body{145 text-align: left;146 font-family: 'Open Sans', sans-serif;147 font-size: 15px;148 padding: 0 0;149 background: #525252;150 margin: 0;151}152 153#contentbg{154 width: 100%;155 position: relative;156 text-align: center;157 margin: 0 auto;158 background: #fff;159 padding: 0px 0px 20px ;160}161 162.content{163 position: relative;164 margin: 0px auto 0px;165 166 text-align: left;167 168 169 170}171 172#obsah{173 position: relative;174 z-index: 2;175 padding: 0px 0px 0;176 177 178}179 180#roundheader{181 width: 100%;182 text-align: center;183 position: relative;184 background: #fff url(../layout/bodybg.png) 0% 0% repeat-x;185 border-bottom: 1px solid #fff;186 border-bottom: 6px solid #525252;187}188 189 190 191#header{192 193 position: relative;194 195 padding: 0px 0 0 0;196 197 margin: 0 auto;198 z-index: 1000;199}200.toptel{201 background: #063353;202 padding: 0px 8px;203 position: absolute;204 right: 5px;205 top: 0;206 font-size: 18px;207 color: #fff;208 text-transform: uppercase;209}210.toptel strong{211 font-size: 120%;212}213 214 #logo{215 float: left;216 display: block;217 margin: 15px 0;218 }219 220 221#icoline{222 position: absolute;223 right: 5px;224 top: 0px;225 padding: 2px 5px 0px 2px;226 background: url(../layout/bbg.png);227 228}229 230 .lang{231 width:24px;232 height: 24px;233 display: block;234 float: left;235 margin-left: 5px;236 }237 .lang span{display: none;}238 239 .lcz{background: url(../layout/flag_cz.png) 0% 0% no-repeat;}240 .len{background: url(../layout/flag_en.png) 0% 0% no-repeat;}241 .lde{background: url(../layout/flag_de.png) 0% 0% no-repeat;}242 .lru{background: url(../layout/flag_ru.png) 0% 0% no-repeat;}243 .lpl{background: url(../layout/flag_pl.png) 0% 0% no-repeat;}244 245 246#topmenu{247 margin: 52px auto 0;248 padding: 0px 0px;249 text-align: left;250 z-index: 10000;251 float: right;252}253 254 255#topmenu ul{256 list-style: none;257 258}259#topmenu ul li{260 padding: 0px 0px 0px 10px;261 display: block;262 float: left;263 background: url(../layout/topmenusep.png) 0% 0% no-repeat;264 265}266#topmenu ul li.first{267 background: none;268 padding-left: 0;269}270#topmenu ul li a{271 font-size: 14px;272 color: #171919;273 display: block;274 float: left;275 font-weight: 500;276 text-transform: uppercase;277 text-decoration: none;278 padding: 6px 3px 0px 3px;279 line-height: 22px;280}281#topmenu ul li.first a{282 padding-left: 3px;283}284#topmenu ul li a:hover{285 text-decoration: none;286 color: #1292ec;287}288#topmenu ul li a.active{289 text-decoration: none;290 color: #1292ec;291 border-bottom: 2px solid #1292ec;292 293}294#topmenu ul li a.active:hover{295 text-decoration: none;296 color: #1292ec;297}298 299#rpart{300 width: 960px;301 position: relative;302 margin: 0px auto;303 padding: 0px 0px 00px 0px;304 305}306 307.centerpanel{308 width: 940px;309 text-align: left;310 padding: 00px 0px 30px 0px; 311 color: #444;312 font-size: 13px;313 margin: 0px auto;314 315 316}317 318 319#centerpanel div.sep{320 width: 100%;321 border-top: 1px solid #a62483;322}323h1{324 font-size: 40px;325 color: #063353;326 text-transform: uppercase;327 font-weight: 600;328 padding: 5px 0 0px 0;329 margin: 0;330}331h2{332 font-size: 33px;333 font-weight: 500;334 text-transform: uppercase;335 padding: 0px 0 7px 0px;336 margin: 10px 0 0;337 color: #1292ec;338}339h3{340 font-size: 20px;341 font-weight: normal;342 color: #666;343 padding: 6px 0 2px 0;344}345p{346 line-height: 140%;347 padding: 0 0 8px 0;348 349}350#centerpanel p.zarovnatStred{351 text-align: center;352}353.content ol, .content ul{354 padding: 4px 0 8px 15px;355}356#centerpanel ol li, .content ul li{357 padding: 1px 0;358}359 360.content ul{361 list-style: square;362}363.content ul.bigpoints{364 font-size:18px;365 padding: 0 0 0 22px;366}367 368 369.gallery{370margin: 0 -10px;371}372 373#centerpanel .photo{374 width: 140px;375 height: 105px;376 margin: 5px;377 padding: 5px;378 text-align: center;379 float: left;380 381}382#roundfooter{383 384 width: 100%;385 386}387 388#footer{389 390 391 margin: 0 auto 0px; 392 color: #222;393 394 line-height: 130%;395 396}397 398 399#footer .left{400 float: left;401 402 text-align: left;403 404}405#footer .right{406 float: right;407 text-align: right;408 409}410 411#copyinfo{412 413 line-height: 120%;414 font-size: 11px;415 padding: 7px 0px 0px;416 417 margin-bottom: 20px;418 color: #fff;419}420#flinks{421 padding: 0 0 65px 0;422 width: 100%;423}424 425#copyinfo a{426 color: #fff;427 text-decoration: none;428}429 430form.kontakt .block{431 float: left;432 display: block;433}434form.kontakt label{435 padding: 4px 0 0;436 margin: 2px 0;437}438form.kontakt input.text{439 border: 1px solid #f0f0f0;440 margin: 2px 0;441 padding: 6px 5px;442 font-size: 13px;443 width: 100%;444 background: #f0f0f0;445 446 font-family: 'Open Sans', sans-serif;447}448form.kontakt textarea{449 width: 100%;450 padding: 5px;451 margin: 2px 0;452 height: 90px;453 border: 1px solid #f0f0f0;454 background: #f0f0f0;455 font-size: 13px;456 font-family: 'Open Sans', sans-serif;457}458form.kontakt2 textarea{459 height: 150px;460}461form.kontakt .req, form.kontakt strong{462 color: #1292ec;463}464form.kontakt input.submit{465 margin: 3px 0 0 100px;466 padding: 5px 10px;467 font-weight:bold;468 color: #fff;469 border: none;470 font-size: 16px;471 background: #1292ec;472 cursor:pointer;473 font-family: 'Open Sans', sans-serif;474 float: right;475}476form.kontakt .l{477 478}479 480blockquote{481 padding: 7px 10px;482 margin: 5px 0;483}484 485blockquote.err{486 border: 1px solid #fad7d7;487 background: #faf1f1;488 color: #a70806;489}490blockquote.ok{491 border: 1px solid #cde1cb;492 background: #e2f8e0;493 color: #2f8920;494 font-weight: bold;495}496.rmenu{497 padding: 0 0 15px 0;498 width: 100%;499}500.rmenu ul{501 list-style: none;502 color: #25adce;503}504.rmenu ul li{505 border-bottom: 1px solid #ddd;506}507.rmenu ul li a{508 display: block;509 padding: 5px 0 5px 35px;510 font-weight: normal;511 text-decoration: none;512 color: #999;513}514 515.rmenu ul li a.active{516 color: #000;517 text-decoration: none;518}519.rmenu ul li a:hover{520 text-decoration: underline;521}522 523.rmenu ul li ul{524 list-style: none;525}526.rmenu ul li ul li{527 border-top: 1px solid #fff;528 border-bottom: none;529}530.rmenu ul li ul li a{531 padding: 4px 0 4px 15px;532 font-weight: normal;533}534.rmenu ul li ul li a:hover{535 536}537 538.admlink{539 position: absolute;540 left: 0;541 top: -185px;542 color: #fff;543 font-size: 10px;544}545 546.right{547 float: right;548}549 550.centered{551 text-align: center;552 553}554 555.spec{556 visibility: hidden;557 height: 1px;558 overflow: hidden;559}560 561 562.zarovnatVpravo{563 float: right;564 margin: 0 0 0 5px;565}566.zarovnatVlevo{567 float: left;568 margin: 0 5px 0 0;569}570 571.map{572 float: right;573}574 575 576/* mobile devices */577@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){578 579 #topmenu ul{580 text-align: left;581 float: left;582 }583 #topmenu{584 text-align: left;585 float: left;586 }587 588 #topmenu ul li{589 float: none;590 text-align: left;591 padding: 0; 592 background: none;593 }594 #topmenu ul li a{595 float: none;596 text-align: left;597 }598 599}600 601 602/* added styles */603 604.headerimg{605 height: 345px;606 background-position: 50% 50%;607 background-repeat: no-repeat;608 -moz-background-size: cover;609 -webkit-background-size: cover;610 -o-background-size: cover;611 background-size: cover;612 613 margin-bottom: 1px;614 615 border-bottom: 4px solid #1292ec;616}617.ilu1{ background-image: url(../layout/ilu1.jpg);}618.ilu2{ background-image: url(../layout/ilu2.jpg);}619.ilu3{ background-image: url(../layout/ilu3.jpg);}620.ilu4{ background-image: url(../layout/ilu4.jpg);}621 622.botprod{623 text-decoration: none;624 text-align: center;625 margin-bottom: 20px;626}627.botprod span.text{628 display: block;629 color: #1292ec;630 text-decoration: none;631 padding: 6px 10px;632 font-size: 18px;633 text-align: left;634 text-transform: uppercase;635 text-align: center;636}637.botprod2 span.text{638 display: block;639 background: #1292ec;640 color: #fff;641 text-decoration: none;642 padding: 6px 10px;643 font-size: 18px;644 text-align: left;645 text-transform: uppercase;646 text-align: center;647}648.botprod .img{649 height: 240px;650 overflow: hidden;651}652.botprod:hover span.text{653 654}655.botprod2:hover span.text{656 background: #1292ec;657}658.ubged{659 background: url(../layout/umoreboxbg.png) 0% 0% repeat-x;660}661.ubged ul{662 list-style: none;663 margin: 0 0 0 0;664 padding: 8px 10px;665}666.ubged ul li{667 background: url(../layout/umoreli.png) 0% 7px no-repeat;668 padding: 3px 0 3px 18px;669}670.morebut{671 background: #1292ec url(../layout/morebutbg.png) 85% 50% no-repeat;672 color: #fff;673 font-size: 15px;674 text-decoration: none;675 text-transform: uppercase;676 font-weight: 100%;677 display: inline-block;678 padding: 5px 25px 5px 15px;679 float: right;680}681.morebut:hover{682 background-color: #063353;683 color: #fff;684}685 686.shaded{687 background: url(../layout/contentbg.png) 0% 0% repeat-x;688}689 690.reftbox img{691 border-top-left-radius: 50%;692 border-top-right-radius: 50%;693 border-bottom-right-radius: 50%;694 border-bottom-left-radius: 50%;695}696.reftbox p{697 font-size: 80%;698 text-align: left;699 background: #f0f0f0;700 padding: 10px;701-webkit-border-radius: 5px;702-moz-border-radius: 5px;703border-radius: 5px;704}705.reftbox em{706 float: right;707 font-size: 90%;708 background: url(../layout/speakbg.png) 0% 0% no-repeat;709 padding: 0 0 0 28px;710}711 712.fwkar .row .c12 img{713 display: inline-block;714 top: 15px;715 height: 40px;716 position: relative;717}718.fwkar p{719 line-height: 30px;720 position: relative;721 padding: -5px 0 0 0;722 margin: 0;723}724.fwkar{725 padding: 0;726 margin: 0px 0 10px 0;727 728}729 730.imgright{731 float: right;732}733 734.rline{735 border-left: 2px solid #ccc;736 padding-top: 10px;737}738.rline .photo{739 text-align: center;740 margin-bottom: 10px;741}742 743 744/*! fancyBox v2.1.3 fancyapps.com | fancyapps.com/fancybox/#license */745.fancybox-wrap,746.fancybox-skin,747.fancybox-outer,748.fancybox-inner,749.fancybox-image,750.fancybox-wrap iframe,751.fancybox-wrap object,752.fancybox-nav,753.fancybox-nav span,754.fancybox-tmp755{756 padding: 0;757 margin: 0;758 border: 0;759 outline: none;760 vertical-align: top;761}762 763.fancybox-wrap {764 position: absolute;765 top: 0;766 left: 0;767 z-index: 8020;768}769 770.fancybox-skin {771 position: relative;772 background: #f9f9f9;773 color: #444;774 text-shadow: none;775 -webkit-border-radius: 4px;776 -moz-border-radius: 4px;777 border-radius: 4px;778}779 780.fancybox-opened {781 z-index: 8030;782}783 784.fancybox-opened .fancybox-skin {785 -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);786 -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);787 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);788}789 790.fancybox-outer, .fancybox-inner {791 position: relative;792}793 794.fancybox-inner {795 overflow: hidden;796}797 798.fancybox-type-iframe .fancybox-inner {799 -webkit-overflow-scrolling: touch;800}801 802.fancybox-error {803 color: #444;804 font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;805 margin: 0;806 padding: 15px;807 white-space: nowrap;808}809 810.fancybox-image, .fancybox-iframe {811 display: block;812 width: 100%;813 height: 100%;814}815 816.fancybox-image {817 max-width: 100%;818 max-height: 100%;819}820 821#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {822 background-image: url('fancybox_sprite.png');823}824 825#fancybox-loading {826 position: fixed;827 top: 50%;828 left: 50%;829 margin-top: -22px;830 margin-left: -22px;831 background-position: 0 -108px;832 opacity: 0.8;833 cursor: pointer;834 z-index: 8060;835}836 837#fancybox-loading div {838 width: 44px;839 height: 44px;840 background: url('fancybox_loading.gif') center center no-repeat;841}842 843.fancybox-close {844 position: absolute;845 top: -18px;846 right: -18px;847 width: 36px;848 height: 36px;849 cursor: pointer;850 z-index: 8040;851}852 853.fancybox-nav {854 position: absolute;855 top: 0;856 width: 40%;857 height: 100%;858 cursor: pointer;859 text-decoration: none;860 background: transparent url('blank.gif'); /* helps IE */861 -webkit-tap-highlight-color: rgba(0,0,0,0);862 z-index: 8040;863}864 865.fancybox-prev {866 left: 0;867}868 869.fancybox-next {870 right: 0;871}872 873.fancybox-nav span {874 position: absolute;875 top: 50%;876 width: 36px;877 height: 34px;878 margin-top: -18px;879 cursor: pointer;880 z-index: 8040;881 visibility: hidden;882}883 884.fancybox-prev span {885 left: 10px;886 background-position: 0 -36px;887}888 889.fancybox-next span {890 right: 10px;891 background-position: 0 -72px;892}893 894.fancybox-nav:hover span {895 visibility: visible;896}897 898.fancybox-tmp {899 position: absolute;900 top: -99999px;901 left: -99999px;902 visibility: hidden;903 max-width: 99999px;904 max-height: 99999px;905 overflow: visible !important;906}907 908/* Overlay helper */909 910.fancybox-lock {911 overflow: hidden;912}913 914.fancybox-overlay {915 position: absolute;916 top: 0;917 left: 0;918 overflow: hidden;919 display: none;920 z-index: 8010;921 background: url('fancybox_overlay.png');922}923 924.fancybox-overlay-fixed {925 position: fixed;926 bottom: 0;927 right: 0;928}929 930.fancybox-lock .fancybox-overlay {931 overflow: auto;932 overflow-y: scroll;933}934 935/* Title helper */936 937.fancybox-title {938 visibility: hidden;939 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;940 position: relative;941 text-shadow: none;942 z-index: 8050;943}944 945.fancybox-opened .fancybox-title {946 visibility: visible;947}948 949.fancybox-title-float-wrap {950 position: absolute;951 bottom: 0;952 right: 50%;953 margin-bottom: -35px;954 z-index: 8050;955 text-align: center;956}957 958.fancybox-title-float-wrap .child {959 display: inline-block;960 margin-right: -100%;961 padding: 2px 20px;962 background: transparent; /* Fallback for web browsers that doesn't support RGBa */963 background: rgba(0, 0, 0, 0.8);964 -webkit-border-radius: 15px;965 -moz-border-radius: 15px;966 border-radius: 15px;967 text-shadow: 0 1px 2px #222;968 color: #FFF;969 font-weight: bold;970 line-height: 24px;971 white-space: nowrap;972}973 974.fancybox-title-outside-wrap {975 position: relative;976 margin-top: 10px;977 color: #fff;978}979 980.fancybox-title-inside-wrap {981 padding-top: 10px;982}983 984.fancybox-title-over-wrap {985 position: absolute;986 bottom: 0;987 left: 0;988 color: #fff;989 padding: 10px;990 background: #000;991 background: rgba(0, 0, 0, .8);992}993 994 995*{996 margin: 0;997 padding: 0;998}999#sliderot{1000 width: 887px;1001 height: 285px;1002 margin: 0px auto 0;1003}1004 1005.slideinbox{1006 display: none;1007color: #fff;1008 position: absolute;1009 left: 0;1010 top: 0;1011 width: 887px;1012 height: 285px;1013 overflow: hidden;1014}1015#slider1{ background: url('../layout/topilu1.jpg') 0% 0% no-repeat; display: block;}1016#slider2{ background: url('../layout/topilu2.jpg') 0% 0% no-repeat;}1017#slider3{ background: url('../layout/topilu3.jpg') 0% 0% no-repeat;}1018 1019 1020 1021.slideinbox .box{1022 position: absolute;1023 font-family: arial, sans serif;1024 position: absolute;1025 left: 505px;1026 top: 75px;1027 width: 289px;1028 border: none;1029 background: transparent;1030}1031.box div.tbox{1032 width: 100%;1033 height: 9px;1034 overflow: hidden;1035 background: url('../layout/rotboxtop.png') 0% 0% no-repeat;1036}1037.box div.bbody{1038 width: 269px;1039 background: #ea272d;1040 padding: 0 10px;1041}1042.box div.bbox{1043 width: 100%;1044 height: 9px;1045 overflow: hidden;1046 background: url('../layout/rotboxbot.png') 0% 0% no-repeat;1047}1048 1049.slideinbox .box a {1050 color: #fff;1051 text-decoration: none;1052}1053.slideinbox .box a:hover {1054 text-decoration: underline;1055}1056.slideinbox .box strong.bhl {1057 font-size: 20px;1058 font-weight: normal;1059 text-transform: uppercase;1060 font-family: arial;1061}1062.slideinbox .box strong.b span{1063 font-size: 20px;1064 font-weight: normal;1065 text-transform: uppercase;1066 font-family: arial;1067}1068 1069.slideinbox .box p{1070 padding: 9px 15px 0 0px;1071 font-family: arial;1072 color: #fff;1073 font-size: 12px;1074 line-height: 160%;1075}1076#centerpanel .slideinbox ul{1077 padding: 10px 0 0 15px;1078 list-style: square;1079 font-family: arial;1080 color: #fff;1081 1082 font-size: 12px;1083 line-height: 150%;1084}1085 1086.slidebox{1087 position: relative;1088 width: 887px;1089 height: 285px;1090 float: left;1091}1092.slidebox a.chbut{1093 display: block;1094 text-align: center;1095 font-weight: bold;1096 background: url('../layout/chanbutbgfd2.jpg') 0% 0% no-repeat;1097 width: 185px;1098 padding: 12px 0 0;1099 font-size: 13px;1100 height: 32px;1101 overflow: hidden;1102 position: absolute;1103 right: 0px;1104 bottom: 0px;1105}1106.slidebox a.chbut:hover{1107 background-position: 0% 100%;1108}1109 1110.larr{1111 position: absolute;1112 left: 5px;1113 bottom: 5px;1114 display: block;1115 width: 21px;1116 height: 20px;1117 overflow: hidden;1118 background: url('../bgs/larr.jpg') 0% 0% no-repeat;1119}1120 1121.larr span, .rarr span{1122 display: none;1123}1124 1125.rarr{1126 position: absolute;1127 right: 5px;1128 bottom: 5px;1129 display: block;1130 width: 21px;1131 height: 20px;1132 overflow: hidden;1133 background: url('../bgs/rarr.jpg') 0% 0% no-repeat;1134}1135 1136.larr:hover, .rarr:hover{1137 background-position: 0% 0%;1138}1139 1140 1141 1142@font-face {1143 font-family: 'Open Sans';1144 font-style: normal;1145 font-weight: 300;1146 font-stretch: normal;1147 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVc.ttf) format('truetype');1148}1149@font-face {1150 font-family: 'Open Sans';1151 font-style: normal;1152 font-weight: 400;1153 font-stretch: normal;1154 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVc.ttf) format('truetype');1155}1156@font-face {1157 font-family: 'Open Sans';1158 font-style: normal;1159 font-weight: 700;1160 font-stretch: normal;1161 src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4uaVc.ttf) format('truetype');1162}1163 </style>1164 <title>1165 Quality | 2es.cz - výrobky pro automobilový a strojírenský průmysl1166 </title>1167 <meta content="text/html; charset=utf-8" http-equiv="content-type">1168 <meta content="no" http-equiv="imagetoolbar">1169 <meta content="no" http-equiv="MSThemeCompatible">1170 <meta content="cs" name="MS.LOCALE">1171 <meta content="off" name="autosize">1172 <meta content="index,follow" name="robots">1173 <meta content="index,follow,snippet,archive" name="googlebot">1174 <meta content name="Keywords">1175 <meta content name="Description">1176 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">1177 <meta content name="category">1178 <meta content="c-design.cz" name="Author">1179 <meta content="All: [EMAIL REDACTED]" name="webmaster">1180 <meta content name="copyright">1181 </head>1182 <body>1183 <div id="roundheader">1184 <div class="grid" id="header">1185 <div class="row">1186 <div class="c1">1187 <a id="logo">1188 <img alt="2es.cz - výrobky pro automobilový a strojírenský průmysl" src="rick.jpg" title>1189 </a>1190 </div>1191 <div class="c11">1192 <div id="topmenu">1193 <ul>1194 <li class="first">1195 <a>1196 Home1197 </a>1198 </li>1199 <li>1200 <a>