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="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en" style>3 <!--<![endif]-->4 <head>5 <style>6 /*7=====================================================================8* Ceevee v1.0 Default Stylesheet9* url: styleshout.com10* 03-17-201411=====================================================================12 13TOC:14a. Webfonts and Icon fonts15b. Reset16c. Default Styles17 1. Basic18 2. Typography19 3. Links20 4. Images21 5. Buttons22 6. Forms23d. Grid24e. Others25 1. Clearing26 2. Misc27 28===================================================================== */29 30/* ------------------------------------------------------------------ */31/* a. Webfonts and Icon fonts32 ------------------------------------------------------------------ */33 34 35/* ------------------------------------------------------------------36/* b. Reset37 Adapted from:38 Normalize.css - https://github.com/necolas/normalize.css/39 HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/40/* ------------------------------------------------------------------ */41 42html, body, div, span, object, iframe,43h1, h2, h3, h4, h5, h6, p, blockquote, pre,44abbr, address, cite, code,45del, dfn, em, img, ins, kbd, q, samp,46small, strong, sub, sup, var,47b, i,48dl, dt, dd, ol, ul, li,49fieldset, form, label, legend,50table, caption, tbody, tfoot, thead, tr, th, td,51article, aside, canvas, details, figcaption, figure,52footer, header, hgroup, menu, nav, section, summary,53time, mark, audio, video {54 margin: 0;55 padding: 0;56 border: 0;57 outline: 0;58 font-size: 100%;59 vertical-align: baseline;60 background: transparent;61}62 63article,aside,details,figcaption,figure,64footer,header,hgroup,menu,nav,section {65 display: block;66}67 68audio,69canvas,70video {71 display: inline-block;72}73 74audio:not([controls]) {75 display: none;76 height: 0;77}78 79[hidden] { display: none; }80 81code, kbd, pre, samp {82 font-family: monospace, serif;83 font-size: 1em;84}85 86pre {87 white-space: pre;88 white-space: pre-wrap;89 word-wrap: break-word;90}91 92blockquote, q { quotes: “ “ }93 94blockquote:before, blockquote:after,95q:before, q:after {96 content: '';97 content: none;98}99 100ins {101 background-color: #ff9;102 color: #000;103 text-decoration: none;104}105 106mark {107 background-color: #A7F4F6;108 color: #555;109}110 111del { text-decoration: line-through; }112 113abbr[title], dfn[title] {114 border-bottom: 1px dotted;115 cursor: help;116}117 118table {119 border-collapse: collapse;120 border-spacing: 0;121}122 123 124/* ------------------------------------------------------------------ */125/* c. Default and Basic Styles126 Adapted from:127 Skeleton CSS Framework - http://www.getskeleton.com/128 Typeplate Typographic Starter Kit - http://typeplate.com/129/* ------------------------------------------------------------------ */130 131/* 1. Basic ------------------------------------------------------- */132 133*,134*:before,135*:after {136 -moz-box-sizing: border-box;137 -webkit-box-sizing: border-box;138 box-sizing: border-box;139}140 141html {142 font-size: 62.5%;143 -webkit-font-smoothing: antialiased;144}145 146body {147 background: #fff;148 font-family: 'opensans-regular', sans-serif;149 font-weight: normal;150 font-size: 15px;151 line-height: 30px;152 color: #838C95;153 154 -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */155 -webkit-text-size-adjust: 100%;156}157 158/* 2. Typography159 Vertical rhythm with leading derived from 6160--------------------------------------------------------------------- */161 162h1, h2, h3, h4, h5, h6 {163 color: #313131;164 font-family: 'opensans-bold', sans-serif;165 font-weight: normal;166}167h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }168h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; }169h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; }170h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; }171h4 { font-size: 20px; line-height: 30px; margin-bottom: 6px; }172h5 { font-size: 18px; line-height: 30px; }173h6 { font-size: 14px; line-height: 30px; }174.subheader { }175 176p { margin: 0 0 30px 0; }177p img { margin: 0; }178p.lead {179 font: 19px/36px 'opensans-light', sans-serif;180 margin-bottom: 18px;181}182 183/* for 'em' and 'strong' tags, font-size and line-height should be same with184the body tag due to rendering problems in some browsers */185em { font: 15px/30px 'opensans-italic', sans-serif; }186strong, b { font: 15px/30px 'opensans-bold', sans-serif; }187small { font-size: 11px; line-height: inherit; }188 189/* Blockquotes */190blockquote {191 margin: 30px 0px;192 padding-left: 40px;193 position: relative;194}195blockquote:before {196 content: "\201C";197 opacity: 0.45;198 font-size: 80px;199 line-height: 0px;200 margin: 0;201 font-family: arial, sans-serif;202 203 position: absolute;204 top: 30px;205 left: 0;206}207blockquote p {208 font-family: 'librebaskerville-italic', serif;209 padding: 0;210 font-size: 18px;211 line-height: 36px;212}213blockquote cite {214 display: block;215 font-size: 12px;216 font-style: normal;217 line-height: 18px;218}219blockquote cite:before { content: "\2014 \0020"; }220blockquote cite a,221blockquote cite a:visited { color: #8B9798; border: none }222 223/* ---------------------------------------------------------------------224/* Pull Quotes Markup225/*226 <aside class="pull-quote">227 <blockquote>228 <p></p>229 </blockquote>230 </aside>231/*232/* --------------------------------------------------------------------- */233.pull-quote {234 position: relative;235 padding: 18px 30px 18px 0px;236}237.pull-quote:before,238.pull-quote:after {239 height: 1em;240 opacity: 0.45;241 position: absolute;242 font-size: 80px;243 font-family: Arial, Sans-Serif;244}245.pull-quote:before {246 content: "\201C";247 top: 33px;248 left: 0;249}250.pull-quote:after {251 content: '\201D';252 bottom: -33px;253 right: 0;254}255.pull-quote blockquote {256 margin: 0;257}258.pull-quote blockquote:before {259 content: none;260}261 262/* Abbreviations */263abbr {264 font-family: 'opensans-bold', sans-serif;265 font-variant: small-caps;266 text-transform: lowercase;267 letter-spacing: .5px;268 color: gray;269}270abbr:hover { cursor: help; }271 272/* drop cap */273.drop-cap:first-letter {274 float: left;275 margin: 0;276 padding: 14px 6px 0 0;277 font-size: 84px;278 font-family: /* Copperplate */ 'opensans-bold', sans-serif;279 line-height: 60px;280 text-indent: 0;281 background: transparent;282 color: inherit;283}284 285hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; }286 287 288/* 3. Links ------------------------------------------------------- */289 290a, a:visited {291 text-decoration: none;292 outline: 0;293 color: #147EFF;294 295 -webkit-transition: color .3s ease-in-out;296 -moz-transition: color .3s ease-in-out;297 -o-transition: color .3s ease-in-out;298 transition: color .3s ease-in-out;299}300a:hover, a:focus { color: #313131; }301p a, p a:visited { line-height: inherit; }302 303 304/* 4. List --------------------------------------------------------- */305 306ul, ol { margin-bottom: 24px; margin-top: 12px; }307ul { list-style: none outside; }308ol { list-style: decimal; }309ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }310ul.square { list-style: square outside; }311ul.circle { list-style: circle outside; }312ul.disc { list-style: disc outside; }313ul ul, ul ol,314ol ol, ol ul { margin: 6px 0 6px 30px; }315ul ul li, ul ol li,316ol ol li, ol ul li { margin-bottom: 6px; }317li { line-height: 18px; margin-bottom: 12px; }318ul.large li { }319li p { }320 321/* ---------------------------------------------------------------------322/* Stats Tab Markup323 324 <ul class="stats-tabs">325 <li><a >[value]<b>[name]</b></a></li>326 </ul>327 328 Extend this object into your markup.329/*330/* --------------------------------------------------------------------- */331.stats-tabs {332 padding: 0;333 margin: 24px 0;334}335.stats-tabs li {336 display: inline-block;337 margin: 0 10px 18px 0;338 padding: 0 10px 0 0;339 border-right: 1px solid #ccc;340}341.stats-tabs li:last-child {342 margin: 0;343 padding: 0;344 border: none;345}346.stats-tabs li a {347 display: inline-block;348 font-size: 22px;349 font-family: 'opensans-bold', sans-serif;350 border: none;351 color: #313131;352}353.stats-tabs li a:hover {354 color:#147EFF;355}356.stats-tabs li a b {357 display: block;358 margin: 6px 0 0 0;359 font-size: 13px;360 font-family: 'opensans-regular', sans-serif;361 color: #8B9798;362}363 364/* definition list */365dl { margin: 12px 0; }366dt { margin: 0; color:#147EFF; }367dd { margin: 0 0 0 20px; }368 369/* Lining Definition Style Markup */370.lining dt,371.lining dd {372 display: inline;373 margin: 0;374}375.lining dt + dt:before,376.lining dd + dt:before {377 content: "\A";378 white-space: pre;379}380.lining dd + dd:before {381 content: ", ";382}383.lining dd:before {384 content: ": ";385 margin-left: -0.2em;386}387 388/* Dictionary Definition Style Markup */389.dictionary-style dt {390 display: inline;391 counter-reset: definitions;392}393.dictionary-style dt + dt:before {394 content: ", ";395 margin-left: -0.2em;396}397.dictionary-style dd {398 display: block;399 counter-increment: definitions;400}401.dictionary-style dd:before {402 content: counter(definitions, decimal) ". ";403}404 405/* Pagination */406.pagination {407 margin: 36px auto;408 text-align: center;409}410.pagination ul li {411 display: inline-block;412 margin: 0;413 padding: 0;414}415.pagination .page-numbers {416 font: 15px/18px 'opensans-bold', sans-serif;417 display: inline-block;418 padding: 6px 10px;419 margin-right: 3px;420 margin-bottom: 6px;421 color: #6E757C;422 background-color: #E6E8EB;423 424 -webkit-transition: all 200ms ease-in-out;425 -moz-transition: all 200ms ease-in-out;426 -o-transition: all 200ms ease-in-out;427 -ms-transition: all 200ms ease-in-out;428 transition: all 200ms ease-in-out;429 430 -moz-border-radius: 3px;431 -webkit-border-radius: 3px;432 -khtml-border-radius: 3px;433 border-radius: 3px;434}435.pagination .page-numbers:hover {436 background: #838A91;437 color: #fff;438}439.pagination .current,440.pagination .current:hover {441 background-color: #147EFF;442 color: #fff;443}444.pagination .inactive,445.pagination .inactive:hover {446 background-color: #E6E8EB;447 color: #A9ADB2;448}449.pagination .prev, .pagination .next {}450 451/* 5. Images --------------------------------------------------------- */452 453img {454 max-width: 100%;455 height: auto;456}457img.pull-right { margin: 12px 0px 0px 18px; }458img.pull-left { margin: 12px 18px 0px 0px; }459 460/* 6. Buttons --------------------------------------------------------- */461 462.button,463.button:visited,464button,465input[type="submit"],466input[type="reset"],467input[type="button"] {468 font: 16px/30px 'opensans-bold', sans-serif;469 background: #147EFF;470 display: inline-block;471 text-decoration: none;472 letter-spacing: 0;473 color: #fff;474 padding: 12px 20px;475 margin-bottom: 18px;476 border: none;477 cursor: pointer;478 height: auto;479 480 -webkit-transition: all .2s ease-in-out;481 -moz-transition: all .2s ease-in-out;482 -o-transition: all .2s ease-in-out;483 -ms-transition: all .2s ease-in-out;484 transition: all .2s ease-in-out;485 486 -moz-border-radius: 3px;487 -webkit-border-radius: 3px;488 -khtml-border-radius: 3px;489 border-radius: 3px;490}491 492.button:hover,493button:hover,494input[type="submit"]:hover,495input[type="reset"]:hover,496input[type="button"]:hover {497 background: #3d4145;498 color: #fff;499}500 501.button:active,502button:active,503input[type="submit"]:active,504input[type="reset"]:active,505input[type="button"]:active {506 background: #3d4145;507 color: #fff;508}509 510.button.full-width,511button.full-width,512input[type="submit"].full-width,513input[type="reset"].full-width,514input[type="button"].full-width {515 width: 100%;516 padding-left: 0 !important;517 padding-right: 0 !important;518 text-align: center;519}520 521/* Fix for odd Mozilla border & padding issues */522button::-moz-focus-inner,523input::-moz-focus-inner {524 border: 0;525 padding: 0;526}527 528 529/* 7. Forms --------------------------------------------------------- */530 531form { margin-bottom: 24px; }532fieldset { margin-bottom: 24px; }533 534input[type="text"],535input[type="password"],536input[type="email"],537textarea,538select {539 display: block;540 padding: 18px 15px;541 margin: 0 0 24px 0;542 border: 0;543 outline: none;544 vertical-align: middle;545 min-width: 225px;546 max-width: 100%;547 font-size: 15px;548 line-height: 24px;549 color: #647373;550 background: #D3D9D9;551 552}553 554/* select { padding: 0;555 width: 220px;556 } */557 558input[type="text"]:focus,559input[type="password"]:focus,560input[type="email"]:focus,561textarea:focus {562 color: #B3B7BC;563 background-color: #3d4145;564}565 566textarea { min-height: 220px; }567 568label,569legend {570 font: 16px/24px 'opensans-bold', sans-serif;571 margin: 12px 0;572 color: #3d4145;573 display: block;574}575label span,576legend span {577 color: #8B9798;578 font: 14px/24px 'opensans-regular', sans-serif;579}580 581input[type="checkbox"],582input[type="radio"] {583 font-size: 15px;584 color: #737373;585}586 587input[type="checkbox"] { display: inline; }588 589/* ------------------------------------------------------------------ */590/* d. Grid591---------------------------------------------------------------------592 gutter = 40px.593/* ------------------------------------------------------------------ */594 595/* default596--------------------------------------------------------------- */597.row {598 width: 96%;599 max-width: 1020px;600 margin: 0 auto;601}602/* fixed width for IE8 */603.ie .row { width: 1000px ; }604 605.narrow .row { max-width: 980px; }606 607.row .row { width: auto; max-width: none; margin: 0 -20px; }608 609/* row clearing */610.row:before,611.row:after {612 content: " ";613 display: table;614}615.row:after {616 clear: both;617}618 619.column, .columns {620 position: relative;621 padding: 0 20px;622 min-height: 1px;623 float: left;624}625.column.centered, .columns.centered {626 float: none;627 margin: 0 auto;628}629 630/* removed gutters */631.row.collapsed > .column,632.row.collapsed > .columns,633.column.collapsed, .columns.collapsed { padding: 0; }634 635[class*="column"] + [class*="column"]:last-child { float: right; }636[class*="column"] + [class*="column"].end { float: right; }637 638/* column widths */639.row .one { width: 8.33333%; }640.row .two { width: 16.66667%; }641.row .three { width: 25%; }642.row .four { width: 33.33333%; }643.row .five { width: 41.66667%; }644.row .six { width: 50%; }645.row .seven { width: 58.33333%; }646.row .eight { width: 66.66667%; }647.row .nine { width: 75%; }648.row .ten { width: 83.33333%; }649.row .eleven { width: 91.66667%; }650.row .twelve { width: 100%; }651 652/* Offsets */653.row .offset-1 { margin-left: 8.33333%; }654.row .offset-2 { margin-left: 16.66667%; }655.row .offset-3 { margin-left: 25%; }656.row .offset-4 { margin-left: 33.33333%; }657.row .offset-5 { margin-left: 41.66667%; }658.row .offset-6 { margin-left: 50%; }659.row .offset-7 { margin-left: 58.33333%; }660.row .offset-8 { margin-left: 66.66667%; }661.row .offset-9 { margin-left: 75%; }662.row .offset-10 { margin-left: 83.33333%; }663.row .offset-11 { margin-left: 91.66667%; }664 665/* Push/Pull */666.row .push-1 { left: 8.33333%; }667.row .pull-1 { right: 8.33333%; }668.row .push-2 { left: 16.66667%; }669.row .pull-2 { right: 16.66667%; }670.row .push-3 { left: 25%; }671.row .pull-3 { right: 25%; }672.row .push-4 { left: 33.33333%; }673.row .pull-4 { right: 33.33333%; }674.row .push-5 { left: 41.66667%; }675.row .pull-5 { right: 41.66667%; }676.row .push-6 { left: 50%; }677.row .pull-6 { right: 50%; }678.row .push-7 { left: 58.33333%; }679.row .pull-7 { right: 58.33333%; }680.row .push-8 { left: 66.66667%; }681.row .pull-8 { right: 66.66667%; }682.row .push-9 { left: 75%; }683.row .pull-9 { right: 75%; }684.row .push-10 { left: 83.33333%; }685.row .pull-10 { right: 83.33333%; }686.row .push-11 { left: 91.66667%; }687.row .pull-11 { right: 91.66667%; }688 689/* block grids690--------------------------------------------------------------------- */691.bgrid-sixths [class*="column"] { width: 16.66667%; }692.bgrid-quarters [class*="column"] { width: 25%; }693.bgrid-thirds [class*="column"] { width: 33.33333%; }694.bgrid-halves [class*="column"] { width: 50%; }695 696[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; }697 698/* Left clearing for block grid columns - columns that changes width in699different screen sizes. Allows columns with different heights to align700properly.701--------------------------------------------------------------------- */702.first { clear: left; } /* first column in default screen */703.s-first { clear: none; } /* first column in smaller screens */704 705/* smaller screens706--------------------------------------------------------------- */707@media only screen and (max-width: 900px) {708 709 /* block grids on small screens */710 .s-bgrid-sixths [class*="column"] { width: 16.66667%; }711 .s-bgrid-quarters [class*="column"] { width: 25%; }712 .s-bgrid-thirds [class*="column"] { width: 33.33333%; }713 .s-bgrid-halves [class*="column"] { width: 50%; }714 715 /* block grids left clearing */716 .first { clear: none; }717 .s-first { clear: left; }718 719}720 721/* mobile wide/smaller tablets722--------------------------------------------------------------- */723@media only screen and (max-width: 767px) {724 725 .row {726 width: 460px;727 margin: 0 auto;728 padding: 0;729 }730 .column, .columns {731 width: auto !important;732 float: none;733 margin-left: 0;734 margin-right: 0;735 padding: 0 30px;736 }737 .row .row { width: auto; max-width: none; margin: 0 -30px; }738 739 [class*="column"] + [class*="column"]:last-child { float: none; }740 [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; }741 742 /* Offsets */743 .row .offset-1 { margin-left: 0%; }744 .row .offset-2 { margin-left: 0%; }745 .row .offset-3 { margin-left: 0%; }746 .row .offset-4 { margin-left: 0%; }747 .row .offset-5 { margin-left: 0%; }748 .row .offset-6 { margin-left: 0%; }749 .row .offset-7 { margin-left: 0%; }750 .row .offset-8 { margin-left: 0%; }751 .row .offset-9 { margin-left: 0%; }752 .row .offset-10 { margin-left: 0%; }753 .row .offset-11 { margin-left: 0%; }754}755 756/* mobile narrow757--------------------------------------------------------------- */758@media only screen and (max-width: 460px) {759 760 .row { width: auto; }761 762}763 764/* larger screens765--------------------------------------------------------------- */766@media screen and (min-width: 1200px) {767 768 .wide .row { max-width: 1180px; }769 770}771 772/* ------------------------------------------------------------------ */773/* e. Others774/* ------------------------------------------------------------------ */775 776/* 1. Clearing777 (http://nicolasgallagher.com/micro-clearfix-hack/778--------------------------------------------------------------------- */779 780.cf:before,781.cf:after {782 content: " ";783 display: table;784}785.cf:after {786 clear: both;787}788 789/* 2. Misc -------------------------------------------------------- */790 791.remove-bottom { margin-bottom: 0 !important; }792.half-bottom { margin-bottom: 12px !important; }793.add-bottom { margin-bottom: 24px !important; }794.no-border { border: none; }795 796.text-center { text-align: center !important; }797.text-left { text-align: left !important; }798.text-right { text-align: right !important; }799.pull-left { float: left !important; }800.pull-right { float: right !important; }801.align-center {802 margin-left: auto !important;803 margin-right: auto !important;804 text-align: center !important;805}806 807 808 809 810 811 812 813/*814=====================================================================815* Ceevee v1.0 Layout Stylesheet816* url: styleshout.com817* 03-18-2014818=====================================================================819 820 TOC:821 a. General Styles822 b. Header Styles823 c. About Section824 d. Resume Section825 e. Portfolio Section826 f. Call To Action Section827 g. Testimonials Section828 h. Contact Section829 i. Footer830 831===================================================================== */832 833/* ------------------------------------------------------------------ */834/* a. General Styles835/* ------------------------------------------------------------------ */836 837body { background: #0f0f0f; }838 839/* ------------------------------------------------------------------ */840/* b. Header Styles841/* ------------------------------------------------------------------ */842 843header {844 position: relative;845 height: 800px;846 min-height: 500px;847 width: 100%;848 background: #161415 url(../images/header-background.jpg) no-repeat top center;849 background-size: cover !important;850 -webkit-background-size: cover !important;851 text-align: center;852 overflow: hidden;853}854 855/* vertically center banner section */856header:before {857 content: '';858 display: inline-block;859 vertical-align: middle;860 height: 100%;861}862header .banner {863 display: inline-block;864 vertical-align: middle;865 margin: 0 auto;866 width: 85%;867 padding-bottom: 30px;s868 text-align: center;869}870 871header .banner-text { width: 100%; }872header .banner-text h1 {873 font: 90px/1.1em 'opensans-bold', sans-serif;874 color: #fff;875 letter-spacing: -2px;876 margin: 0 auto 18px auto;877 text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);878}879header .banner-text h3 {880 font: 18px/1.9em 'librebaskerville-regular', serif;881 color: #A8A8A8;882 margin: 0 auto;883 width: 70%;884 text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);885}886header .banner-text h3 span,887header .banner-text h3 a {888 color: #fff;889}890header .banner-text hr {891 width: 60%;892 margin: 18px auto 24px auto;893 border-color: #2F2D2E;894 border-color: rgba(150, 150, 150, .1);895}896 897/* header social links */898header .social {899 margin: 24px 0;900 padding: 0;901 font-size: 30px;902 text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);903}904header .social li {905 display: inline-block;906 margin: 0 15px;907 padding: 0;908}909header .social li a { color: #fff; }910header .social li a:hover { color: #147EFF; }911 912/* scrolldown link */913header .scrolldown a {914 position: absolute;915 bottom: 30px;916 left: 50%;917 margin-left: -29px;918 color: #fff;919 display: block;920 height: 42px;921 width: 42px;922 font-size: 42px;923 line-height: 42px;924 color: #fff;925 border-radius: 100%;926 927 -webkit-transition: all .3s ease-in-out;928 -moz-transition: all .3s ease-in-out;929 -o-transition: all .3s ease-in-out;930 transition: all .3s ease-in-out;931}932header .scrolldown a:hover { color: #147EFF; }933 934/* primary navigation935--------------------------------------------------------------------- */936#nav-wrap ul, #nav-wrap li, #nav-wrap a {937 margin: 0;938 padding: 0;939 border: none;940 outline: none;941}942 943/* nav-wrap */944#nav-wrap {945 font: 12px 'opensans-bold', sans-serif;946 width: 100%;947 text-transform: uppercase;948 letter-spacing: 2.5px;949 margin: 0 auto;950 z-index: 100;951 position: fixed;952 left: 0;953 top: 0;954}955.opaque { background-color: #333; }956 957/* hide toggle button */958#nav-wrap > a.mobile-btn { display: none; }959 960ul#nav {961 min-height: 48px;962 width: auto;963 964 /* center align the menu */965 text-align: center;966}967ul#nav li {968 position: relative;969 list-style: none;970 height: 48px;971 display: inline-block;972}973 974/* Links */975ul#nav li a {976 977/* 8px padding top + 8px padding bottom + 32px line-height = 48px */978 979 display: inline-block;980 padding: 8px 13px;981 line-height: 32px;982 text-decoration: none;983 text-align: left;984 color: #fff;985 986 -webkit-transition: color .2s ease-in-out;987 -moz-transition: color .2s ease-in-out;988 -o-transition: color .2s ease-in-out;989 -ms-transition: color .2s ease-in-out;990 transition: color .2s ease-in-out;991}992 993ul#nav li a:active { background-color: transparent !important; }994ul#nav li.current a { color: #147EFF; }995 996 997/* ------------------------------------------------------------------ */998/* c. About Section999/* ------------------------------------------------------------------ */1000 1001#about {1002 background: #2B2B2B;1003 padding-top: 96px;1004 padding-bottom: 66px;1005 overflow: hidden;1006}1007 1008#about a, #about a:visited { color: #fff; }1009#about a:hover, #about a:focus { color: #147EFF; }1010 1011#about h2 {1012 font: 22px/30px 'opensans-bold', sans-serif;1013 color: #fff;1014 margin-bottom: 12px;1015}1016#about p {1017 line-height: 30px;1018 color: #7A7A7A;1019}1020#about .profile-pic {1021 position: relative;1022 width: 120px;1023 height: 120px;1024 border-radius: 100%;1025}1026#about .contact-details { width: 41.66667%; }1027#about .download {1028 width: 58.33333%;1029 padding-top: 6px;1030}1031#about .main-col { padding-right: 5%; }1032#about .download .button {1033 margin-top: 6px;1034 background: #444;1035}1036#about .download .button:hover {1037 background: #fff;1038 color: #2B2B2B;1039}1040#about .download .button i {1041 margin-right: 15px;1042 font-size: 20px;1043}1044 1045 1046/* ------------------------------------------------------------------ */1047/* d. Resume Section1048/* ------------------------------------------------------------------ */1049 1050#resume {1051 background: #fff;1052 padding-top: 90px;1053 padding-bottom: 72px;1054 overflow: hidden;1055}1056 1057#resume a, #resume a:visited { color: #147EFF; }1058#resume a:hover, #resume a:focus { color: #313131; }1059 1060#resume h1 {1061 font: 18px/24px 'opensans-bold', sans-serif;1062 text-transform: uppercase;1063 letter-spacing: 1px;1064}1065#resume h1 span {1066 border-bottom: 3px solid #147EFF;1067 padding-bottom: 6px;1068}1069#resume h3 {1070 font: 25px/30px 'opensans-bold', sans-serif;1071}1072 1073#resume .header-col { padding-top: 9px; }1074#resume .main-col { padding-right: 10%; }1075 1076.education, .work {1077 margin-bottom: 48px;1078 padding-bottom: 24px;1079 border-bottom: 1px solid #E8E8E8;1080}1081#resume .info {1082 font: 16px/24px 'librebaskerville-italic', serif;1083 color: #6E7881;1084 margin-bottom: 18px;1085 margin-top: 9px;1086}1087#resume .info span {1088 margin-right: 5px;1089 margin-left: 5px;1090}1091#resume .date {1092 font: 15px/24px 'opensans-regular', sans-serif;1093 margin-top: 6px;1094}1095 1096/*----------------------------------------------*/1097/* Skill Bars1098/*----------------------------------------------*/1099 1100.bars {1101 width: 95%;1102 float: left;1103 padding: 0;1104 text-align: left;1105}1106.bars .skills {1107 margin-top: 36px;1108 list-style: none;1109}1110.bars li {1111 position: relative;1112 margin-bottom: 60px;1113 background: #ccc;1114 height: 42px;1115 border-radius: 3px;1116}1117.bars li em {1118 font: 15px 'opensans-bold', sans-serif;1119 color: #313131;1120 text-transform: normal;1121 letter-spacing: 2px;1122 font-weight: normal;1123 position: relative;1124 top: -36px;1125}1126.bar-expand {1127 position: absolute;1128 left: 0;1129 top: 0;1130 1131 margin: 0;1132 padding-right: 24px;1133 background: #147EFF;1134 display: inline-block;1135 height: 42px;1136 line-height: 42px;1137 border-radius: 3px 0 0 3px;1138}1139 1140.C-plus-plus {1141 width: 80%;1142 -moz-animation: C-plus-plus 2.5s ease;1143 -webkit-animation: C-plus-plus 2.5s ease;1144}1145.Python {1146 width: 55%;1147 -moz-animation: Python 1.7s ease;1148 -webkit-animation: Python 1.7s ease;1149}1150.Swift {1151 width: 30%;1152 -moz-animation: Swift 1.2s ease;1153 -webkit-animation: Swift 1.2s ease;1154}1155.HTML {1156 width: 90%;1157 -moz-animation: HTML 2s ease;1158 -webkit-animation: HTML 2s ease;1159}1160.CSS {1161 width: 35%;1162 -moz-animation: CSS 1.8s ease;1163 -webkit-animation: CSS 1.8s ease;1164}1165.Movie-Making {1166 width: 70%;1167 -moz-animation: Movie-Making 2s ease;1168 -webkit-animation: Movie-Making 2s ease;1169}1170.Linux {1171 width: 50%;1172 -moz-animation: Linux 2.2s ease;1173 -webkit-animation: Linux 2.2s ease;1174}1175 1176@-moz-keyframes C-plus-plus {1177 0% { width: 0px; }1178 100% { width: 80%; }1179}1180@-moz-keyframes Python {1181 0% { width: 0px; }1182 100% { width: 55%; }1183}1184@-moz-keyframes Swift {1185 0% { width: 0px; }1186 100% { width: 30%; }1187}1188@-moz-keyframes HTML {1189 0% { width: 0px; }1190 100% { width: 90%; }1191}1192@-moz-keyframes CSS {1193 0% { width: 0px; }1194 100% { width: 35%; }1195}1196@-moz-keyframes Movie-Making {1197 0% { width: 0px; }1198 100% { width: 70%; }1199}1200@-moz-keyframes Linux {