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.7k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 /***************/6/* MEYER RESET */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, 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,17article, aside, canvas, details, embed,18figure, figcaption, footer, header, hgroup,19menu, nav, output, ruby, section, summary,20time, mark, audio, video {21 margin: 0;22 padding: 0;23 border: 0;24 font-size: 100%;25 font: inherit;26 vertical-align: baseline;27}28 29article, aside, details, figcaption, figure,30footer, header, hgroup, menu, nav, section {31 display: block;32}33 34body {35 line-height: 1;36}37 38ol, ul {39 list-style: none;40}41 42blockquote, q {43 quotes: none;44}45 46blockquote:before, blockquote:after,47q:before, q:after {48 content: '';49 content: none;50}51 52table {53 border-collapse: collapse;54 border-spacing: 0;55}56 57*, *:before, *:after {58 -moz-box-sizing: border-box;59 -webkit-box-sizing: border-box;60 box-sizing: border-box;61}62 63.fork-me-wrapper {64 width: 170px;65 height: 170px;66 position: absolute;67 top: 0;68 right: 0;69 overflow: hidden;70 z-index: 9999;71}72 73.fork-me {74 width: 42px;75 height: 42px;76 position: absolute;77 top: 5px;78 right: 5px;79 background-color: #30892a;80 background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxOCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDE4IDMyIj4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik01LjE0MyAyNi4yODZxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNNS4xNDMgNS43MTRxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNMTYuNTcxIDhxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNMTguMjg2IDhxMCAwLjkyOS0wLjQ2NCAxLjcyM3QtMS4yNSAxLjI0MXEtMC4wMzYgNS4xMjUtNC4wMzYgNy4zOTMtMS4yMTQgMC42NzktMy42MjUgMS40NDYtMi4yODYgMC43MTQtMy4wMjcgMS4yNjh0LTAuNzQxIDEuNzg2djAuNDY0cTAuNzg2IDAuNDQ2IDEuMjUgMS4yNDF0MC40NjQgMS43MjNxMCAxLjQyOS0xIDIuNDI5dC0yLjQyOSAxLTIuNDI5LTEtMS0yLjQyOXEwLTAuOTI5IDAuNDY0LTEuNzIzdDEuMjUtMS4yNDF2LTE0LjY0M3EtMC43ODYtMC40NDYtMS4yNS0xLjI0MXQtMC40NjQtMS43MjNxMC0xLjQyOSAxLTIuNDI5dDIuNDI5LTEgMi40MjkgMSAxIDIuNDI5cTAgMC45MjktMC40NjQgMS43MjN0LTEuMjUgMS4yNDF2OC44NzVxMC45NjQtMC40NjQgMi43NS0xLjAxOCAwLjk4Mi0wLjMwNCAxLjU2Mi0wLjUyN3QxLjI1OS0wLjU1NCAxLjA1NC0wLjcwNSAwLjcyMy0wLjkxMSAwLjUtMS4yNDEgMC4xNTItMS42MzRxLTAuNzg2LTAuNDQ2LTEuMjUtMS4yNDF0LTAuNDY0LTEuNzIzcTAtMS40MjkgMS0yLjQyOXQyLjQyOS0xIDIuNDI5IDEgMSAyLjQyOXoiIGZpbGw9IiNmZmZmZmYiIC8+Cjwvc3ZnPg==");81 background-repeat: no-repeat;82 background-position: center center;83 overflow: hidden;84 white-space: nowrap;85}86@media only screen and (min-width: 40.063em) {87 .fork-me {88 width: auto;89 height: auto;90 top: 40px;91 right: -55px;92 padding: 2px 0;93 box-shadow: 0 0 10px 0 #888;94 background-color: #30892a;95 background-image: none !important;96 transform: rotate(45deg);97 }98}99 100.fork-me-link, .fork-me-link:link, .fork-me-link:visited, .fork-me-link:hover, .fork-me-link:focus, .fork-me-link:active {101 display: block;102 height: 100%;103 text-decoration: none;104 border: none;105}106@media only screen and (min-width: 40.063em) {107 .fork-me-link, .fork-me-link:link, .fork-me-link:visited, .fork-me-link:hover, .fork-me-link:focus, .fork-me-link:active {108 font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;109 text-align: center;110 color: #fff;111 padding: 10px 50px;112 border: 1px solid #fff;113 text-shadow: 0 0 5px #444;114 }115}116.fork-me-link:focus {117 text-decoration: underline;118}119 120.fork-me-text {121 display: none;122}123@media only screen and (min-width: 40.063em) {124 .fork-me-text {125 display: inline;126 }127}128 129.fork-me-dark {130 background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxOCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDE4IDMyIj4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik01LjE0MyAyNi4yODZxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNNS4xNDMgNS43MTRxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNMTYuNTcxIDhxMC0wLjcxNC0wLjUtMS4yMTR0LTEuMjE0LTAuNS0xLjIxNCAwLjUtMC41IDEuMjE0IDAuNSAxLjIxNCAxLjIxNCAwLjUgMS4yMTQtMC41IDAuNS0xLjIxNHpNMTguMjg2IDhxMCAwLjkyOS0wLjQ2NCAxLjcyM3QtMS4yNSAxLjI0MXEtMC4wMzYgNS4xMjUtNC4wMzYgNy4zOTMtMS4yMTQgMC42NzktMy42MjUgMS40NDYtMi4yODYgMC43MTQtMy4wMjcgMS4yNjh0LTAuNzQxIDEuNzg2djAuNDY0cTAuNzg2IDAuNDQ2IDEuMjUgMS4yNDF0MC40NjQgMS43MjNxMCAxLjQyOS0xIDIuNDI5dC0yLjQyOSAxLTIuNDI5LTEtMS0yLjQyOXEwLTAuOTI5IDAuNDY0LTEuNzIzdDEuMjUtMS4yNDF2LTE0LjY0M3EtMC43ODYtMC40NDYtMS4yNS0xLjI0MXQtMC40NjQtMS43MjNxMC0xLjQyOSAxLTIuNDI5dDIuNDI5LTEgMi40MjkgMSAxIDIuNDI5cTAgMC45MjktMC40NjQgMS43MjN0LTEuMjUgMS4yNDF2OC44NzVxMC45NjQtMC40NjQgMi43NS0xLjAxOCAwLjk4Mi0wLjMwNCAxLjU2Mi0wLjUyN3QxLjI1OS0wLjU1NCAxLjA1NC0wLjcwNSAwLjcyMy0wLjkxMSAwLjUtMS4yNDEgMC4xNTItMS42MzRxLTAuNzg2LTAuNDQ2LTEuMjUtMS4yNDF0LTAuNDY0LTEuNzIzcTAtMS40MjkgMS0yLjQyOXQyLjQyOS0xIDIuNDI5IDEgMSAyLjQyOXoiIGZpbGw9IiMwMDAwMDAiIC8+Cjwvc3ZnPgo=");131}132 133.fork-me-left {134 left: 0;135 right: auto;136}137.fork-me-left .fork-me {138 left: 5px;139 right: auto;140}141@media only screen and (min-width: 40.063em) {142 .fork-me-left .fork-me {143 left: -55px;144 right: auto;145 transform: rotate(-45deg);146 }147}148 149.fork-me-fixed {150 position: fixed;151}152 153/**************/154/* BASE RULES */155/**************/156html {157 font-size: 100%;158}159 160body {161 background: #fff;162 font: 18px/1.4 Helvetica, Arial, sans-serif;163 color: #333;164}165 166.container {167 margin: 0 auto;168 max-width: 740px;169 padding: 0 10px;170 width: 100%;171}172 173h1, h2, h3, h4, h5, h6 {174 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;175 color: #222;176 font-weight: bold;177 line-height: 1.7;178 margin: 1em 0 15px;179 padding: 0;180}181@media screen and (max-width: 640px) {182 h1, h2, h3, h4, h5, h6 {183 line-height: 1.4;184 }185}186 187h1 {188 font-size: 30px;189 color: #6acf64;190}191h1 a {192 color: inherit;193}194 195h2 {196 font-size: 24px;197 color: #6acf64;198}199 200h3 {201 font-size: 20px;202 color: #222;203}204 205h4 {206 font-size: 18px;207 color: #666;208}209 210p {211 margin: 15px 0;212}213 214a {215 color: #5cacee;216 text-decoration: none;217 cursor: pointer;218}219a:hover, a:active {220 color: #167bce;221}222 223ul, ol {224 margin: 15px 0;225 padding-left: 30px;226}227 228ul {229 list-style-type: disc;230}231 232ol {233 list-style-type: decimal;234}235 236ol ul, ul ol, ul ul, ol ol {237 margin: 0;238}239 240ul ul, ol ul {241 list-style-type: circle;242}243 244em, i {245 font-style: italic;246}247 248strong, b {249 font-weight: bold;250}251 252img {253 max-width: 100%;254}255 256.gmnoprint img {257 max-width: none;258}259 260.date {261 font-style: italic;262 color: #666;263}264 265::-moz-selection {266 color: #000;267 background: #eee;268}269 270::selection {271 color: #000;272 background: #eee;273}274 275.clearfix:before,276.clearfix:after {277 content: " ";278 display: table;279}280 281.clearfix:after {282 clear: both;283}284 285/*********************/286/* LAYOUT / SECTIONS */287/*********************/288.wrapper-masthead {289 margin-bottom: 50px;290}291 292.masthead {293 padding: 20px 0;294 border-bottom: 1px solid #eee;295}296@media screen and (max-width: 640px) {297 .masthead {298 text-align: center;299 }300}301 302.site-avatar {303 float: left;304 width: 70px;305 height: 70px;306 margin-right: 15px;307}308@media screen and (max-width: 640px) {309 .site-avatar {310 float: none;311 display: block;312 margin: 0 auto;313 }314}315.site-avatar img {316 border-radius: 5px;317}318 319.site-info {320 float: left;321}322@media screen and (max-width: 640px) {323 .site-info {324 float: none;325 display: block;326 margin: 0 auto;327 }328}329 330.site-name {331 margin: 0;332 color: #333;333 cursor: pointer;334 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;335 font-weight: 300;336 font-size: 28px;337 letter-spacing: 1px;338}339 340.site-description {341 margin: -5px 0 0 0;342 color: #fff;343 font-size: 16px;344}345@media screen and (max-width: 640px) {346 .site-description {347 margin: 3px 0;348 }349}350 351nav {352 float: right;353 margin-top: 23px;354 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;355 font-size: 18px;356}357@media screen and (max-width: 640px) {358 nav {359 float: none;360 margin-top: 9px;361 display: block;362 font-size: 16px;363 }364}365nav a {366 margin-left: 20px;367 color: #fff;368 text-align: right;369 font-weight: 300;370 letter-spacing: 1px;371}372nav a:hover, nav a:active {373 color: #333333;374}375@media screen and (max-width: 640px) {376 nav a {377 margin: 0 10px;378 color: #fff;379 }380}381 382.posts > .post {383 padding-bottom: 2em;384 border-bottom: 1px solid #eee;385}386 387.posts > .post:last-child {388 padding-bottom: 1em;389 border-bottom: none;390}391 392.post meta {393 font-size: 80%;394 color: #666;395}396.post blockquote {397 margin: 1.8em .8em;398 border-left: 2px solid #666;399 padding: 0.1em 1em;400 color: #666;401 font-size: 22px;402 font-style: italic;403}404.post .comments {405 margin-top: 10px;406}407.post .read-more {408 text-transform: uppercase;409 font-size: 15px;410}411 412.wrapper-footer {413 margin-top: 50px;414 border-top: 1px solid #ddd;415 border-bottom: 1px solid #ddd;416 background-color: #eee;417}418 419footer {420 padding: 20px 0;421 text-align: center;422}423 424.entry > pre {425 border: 1px solid #ccc;426 padding: 10px;427 background: #fafafa;428 overflow: auto;429 font-size: 15px;430}431 432.entry > pre > code,433.entry > pre {434 font-family: Menlo,Monaco,Consolas,"Courier New",monospace;435}436 437pre {438 font-size: 15px;439}440 441a.tag {442 display: inline-block;443 background: #333;444 color: #fff !important;445 padding: 2px 8px;446 margin-right: 2px;447 border-radius: 4px;448 font-size: 80%;449}450 451a.tag:hover {452 background: #000;453}454 455.highlight {456 background-color: #efefef;457 padding: 7px 7px 7px 10px;458 border: 1px solid #ddd;459 -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.1);460 -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.1);461 box-shadow: 3px 3px rgba(0, 0, 0, 0.1);462 margin: 20px 0 20px 0;463 overflow: scroll;464}465 466code {467 font-family: 'Bitstream Vera Sans Mono','Courier', monospace;468}469 470.highlight .c {471 color: #586E75;472}473 474/* Comment */475.highlight .err {476 color: #93A1A1;477}478 479/* Error */480.highlight .g {481 color: #93A1A1;482}483 484/* Generic */485.highlight .k {486 color: #859900;487}488 489/* Keyword */490.highlight .l {491 color: #93A1A1;492}493 494/* Literal */495.highlight .n {496 color: #93A1A1;497}498 499/* Name */500.highlight .o {501 color: #859900;502}503 504/* Operator */505.highlight .x {506 color: #CB4B16;507}508 509/* Other */510.highlight .p {511 color: #93A1A1;512}513 514/* Punctuation */515.highlight .cm {516 color: #586E75;517}518 519/* Comment.Multiline */520.highlight .cp {521 color: #859900;522}523 524/* Comment.Preproc */525.highlight .c1 {526 color: #586E75;527}528 529/* Comment.Single */530.highlight .cs {531 color: #859900;532}533 534/* Comment.Special */535.highlight .gd {536 color: #2AA198;537}538 539/* Generic.Deleted */540.highlight .ge {541 color: #93A1A1;542 font-style: italic;543}544 545/* Generic.Emph */546.highlight .gr {547 color: #DC322F;548}549 550/* Generic.Error */551.highlight .gh {552 color: #CB4B16;553}554 555/* Generic.Heading */556.highlight .gi {557 color: #859900;558}559 560/* Generic.Inserted */561.highlight .go {562 color: #93A1A1;563}564 565/* Generic.Output */566.highlight .gp {567 color: #93A1A1;568}569 570/* Generic.Prompt */571.highlight .gs {572 color: #93A1A1;573 font-weight: bold;574}575 576/* Generic.Strong */577.highlight .gu {578 color: #CB4B16;579}580 581/* Generic.Subheading */582.highlight .gt {583 color: #93A1A1;584}585 586/* Generic.Traceback */587.highlight .kc {588 color: #CB4B16;589}590 591/* Keyword.Constant */592.highlight .kd {593 color: #268BD2;594}595 596/* Keyword.Declaration */597.highlight .kn {598 color: #859900;599}600 601/* Keyword.Namespace */602.highlight .kp {603 color: #859900;604}605 606/* Keyword.Pseudo */607.highlight .kr {608 color: #268BD2;609}610 611/* Keyword.Reserved */612.highlight .kt {613 color: #DC322F;614}615 616/* Keyword.Type */617.highlight .ld {618 color: #93A1A1;619}620 621/* Literal.Date */622.highlight .m {623 color: #2AA198;624}625 626/* Literal.Number */627.highlight .s {628 color: #2AA198;629}630 631/* Literal.String */632.highlight .na {633 color: #93A1A1;634}635 636/* Name.Attribute */637.highlight .nb {638 color: #B58900;639}640 641/* Name.Builtin */642.highlight .nc {643 color: #268BD2;644}645 646/* Name.Class */647.highlight .no {648 color: #CB4B16;649}650 651/* Name.Constant */652.highlight .nd {653 color: #268BD2;654}655 656/* Name.Decorator */657.highlight .ni {658 color: #CB4B16;659}660 661/* Name.Entity */662.highlight .ne {663 color: #CB4B16;664}665 666/* Name.Exception */667.highlight .nf {668 color: #268BD2;669}670 671/* Name.Function */672.highlight .nl {673 color: #93A1A1;674}675 676/* Name.Label */677.highlight .nn {678 color: #93A1A1;679}680 681/* Name.Namespace */682.highlight .nx {683 color: #555;684}685 686/* Name.Other */687.highlight .py {688 color: #93A1A1;689}690 691/* Name.Property */692.highlight .nt {693 color: #268BD2;694}695 696/* Name.Tag */697.highlight .nv {698 color: #268BD2;699}700 701/* Name.Variable */702.highlight .ow {703 color: #859900;704}705 706/* Operator.Word */707.highlight .w {708 color: #93A1A1;709}710 711/* Text.Whitespace */712.highlight .mf {713 color: #2AA198;714}715 716/* Literal.Number.Float */717.highlight .mh {718 color: #2AA198;719}720 721/* Literal.Number.Hex */722.highlight .mi {723 color: #2AA198;724}725 726/* Literal.Number.Integer */727.highlight .mo {728 color: #2AA198;729}730 731/* Literal.Number.Oct */732.highlight .sb {733 color: #586E75;734}735 736/* Literal.String.Backtick */737.highlight .sc {738 color: #2AA198;739}740 741/* Literal.String.Char */742.highlight .sd {743 color: #93A1A1;744}745 746/* Literal.String.Doc */747.highlight .s2 {748 color: #2AA198;749}750 751/* Literal.String.Double */752.highlight .se {753 color: #CB4B16;754}755 756/* Literal.String.Escape */757.highlight .sh {758 color: #93A1A1;759}760 761/* Literal.String.Heredoc */762.highlight .si {763 color: #2AA198;764}765 766/* Literal.String.Interpol */767.highlight .sx {768 color: #2AA198;769}770 771/* Literal.String.Other */772.highlight .sr {773 color: #DC322F;774}775 776/* Literal.String.Regex */777.highlight .s1 {778 color: #2AA198;779}780 781/* Literal.String.Single */782.highlight .ss {783 color: #2AA198;784}785 786/* Literal.String.Symbol */787.highlight .bp {788 color: #268BD2;789}790 791/* Name.Builtin.Pseudo */792.highlight .vc {793 color: #268BD2;794}795 796/* Name.Variable.Class */797.highlight .vg {798 color: #268BD2;799}800 801/* Name.Variable.Global */802.highlight .vi {803 color: #268BD2;804}805 806/* Name.Variable.Instance */807.highlight .il {808 color: #2AA198;809}810 811/* Literal.Number.Integer.Long */812/****************************/813/* JEKYLL-mono-color */814/***************************/815/* 816 *Title817*/818.site-name a {819 color: #fff;820 text-decoration: none;821 cursor: pointer;822}823.site-name a:hover {824 color: #333333;825}826 827.post a {828 color: #6acf64;829}830.post a:hover {831 color: #379d30;832}833 834.post-heading a {835 color: #333;836}837.post-heading a:hover {838 color: black;839}840.post-heading .edit a {841 opacity: 0;842 transition: opacity 1s;843}844.post-heading .edit a:hover {845 opacity: 1;846}847 848/*849 *Buttons850*/851.button,852button {853 display: inline-block;854 height: 38px;855 padding: 0 30px;856 color: #555;857 text-align: center;858 font-size: 13px;859 font-weight: 600;860 line-height: 38px;861 letter-spacing: .1rem;862 text-decoration: none;863 white-space: nowrap;864 background-color: transparent;865 border-radius: 4px;866 border: 1px solid #bbb;867 cursor: pointer;868 box-sizing: border-box;869}870 871.button:hover,872button:hover,873.button:focus,874button:focus {875 color: #333;876 border-color: #888;877 outline: 0;878}879 880.button.button-primary,881button.button-primary {882 color: #6acf64;883 background-color: transparent;884 border-color: #6acf64;885}886 887.button.button-primary:hover,888button.button-primary:hover,889.button.button-primary:focus,890button.button-primary:focus {891 color: #FFF;892 background-color: #6acf64;893 border-color: #6acf64;894}895 896/*897 *Header898*/899.intro-header {900 border-top: 5px solid white;901 background-color: #6acf64;902}903 904.intro-header .post-heading {905 padding: 0 0 50px;906 color: #fff;907}908 909.intro-header .post-heading h1 {910 color: #fff;911 font-size: 36px;912 line-height: 1.5;913 font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;914}915 916/* 917 *empty spaces918*/919.space-medium {920 padding: 100px 0 50px;921}922 923.space-small {924 padding: 50px 0 25px;925}926 927.space-extra-small {928 padding: 30px 0 15px;929}930 931/* 932 *svg-icons933 934*/935.svg-icon a {936 color: #45c33d;937 cursor: pointer;938}939.svg-icon a:hover {940 color: #379d30;941}942 943/*944 *Image Hover Effects945*/946.centered {947 margin-left: auto;948 margin-right: auto;949}950 951.ch-grid {952 padding: 0;953 list-style: none;954 display: block;955 text-align: center;956 width: 100%;957}958 959.ch-grid:after,960.ch-item:before {961 content: '';962 display: table;963}964 965.ch-grid:after {966 clear: both;967}968 969.ch-grid li {970 width: 220px;971 height: 220px;972 display: inline-block;973}974 975.ch-item {976 width: 100%;977 height: 100%;978 border-radius: 50%;979 position: relative;980 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);981 cursor: default;982}983 984.ch-info-wrap,985.ch-info {986 position: absolute;987 width: 180px;988 height: 180px;989 border-radius: 50%;990}991 992.ch-info-wrap {993 top: 20px;994 left: 20px;995 background: #fff url(/images/bg.jpg);996 box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 23, 0.8);997}998 999.ch-info > div {1000 display: block;1001 position: absolute;1002 width: 100%;1003 height: 100%;1004 border-radius: 50%;1005 background-position: center center;1006 -webkit-backface-visibility: hidden;1007}1008 1009.ch-info .ch-info-front {1010 -webkit-transition: all 0.6s ease-in-out;1011 -moz-transition: all 0.6s ease-in-out;1012 -o-transition: all 0.6s ease-in-out;1013 -ms-transition: all 0.6s ease-in-out;1014 transition: all 0.6s ease-in-out;1015}1016 1017.ch-info .ch-info-back {1018 opacity: 0;1019 background: #fff;1020 pointer-events: none;1021 -webkit-transform: scale(1.5);1022 -moz-transform: scale(1.5);1023 -o-transform: scale(1.5);1024 -ms-transform: scale(1.5);1025 transform: scale(1.5);1026 -webkit-transition: all 0.4s ease-in-out 0.2s;1027 -moz-transition: all 0.4s ease-in-out 0.2s;1028 -o-transition: all 0.4s ease-in-out 0.2s;1029 -ms-transition: all 0.4s ease-in-out 0.2s;1030 transition: all 0.4s ease-in-out 0.2s;1031}1032 1033.ch-img-1 {1034 background-image: url(/images/avatar.jpg);1035}1036 1037.ch-info h3 {1038 color: #000;1039 text-transform: uppercase;1040 letter-spacing: 2px;1041 font-size: 18px;1042 margin: 0 15px;1043 padding: 40px 0 0 0;1044 height: 80px;1045 font-family: 'Open Sans', Arial, sans-serif;1046 text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);1047}1048 1049.ch-info p {1050 color: #fff;1051 padding: 10px 5px 0;1052 font-style: italic;1053 margin: 0 30px;1054 font-size: 12px;1055}1056 1057.ch-info p a {1058 display: block;1059 color: #6acf64;1060 font-style: normal;1061 font-weight: 700;1062 text-transform: uppercase;1063 font-size: 9px;1064 letter-spacing: 1px;1065 padding-top: 4px;1066 font-family: 'Open Sans', Arial, sans-serif;1067}1068 1069.ch-info p a:hover {1070 color: #45c33d;1071}1072 1073.ch-item:hover .ch-info-front {1074 -webkit-transform: scale(0);1075 -moz-transform: scale(0);1076 -o-transform: scale(0);1077 -ms-transform: scale(0);1078 transform: scale(0);1079 opacity: 0;1080}1081 1082.ch-item:hover .ch-info-back {1083 -webkit-transform: scale(1);1084 -moz-transform: scale(1);1085 -o-transform: scale(1);1086 -ms-transform: scale(1);1087 transform: scale(1);1088 opacity: 1;1089 pointer-events: auto;1090}1091 1092.highlight pre.highlight {1093 border: 0;1094 box-shadow: none;1095}1096 1097.highlight {1098 overflow: auto;1099 padding: 20px;1100 margin: 0;1101}1102 1103div.highlight {1104 margin: 10px 0;1105 padding: 0;1106}1107 1108.posts > .post {1109 border-top: 1px solid rgba(128, 128, 128, 0.5);1110}1111 1112@media screen and (prefers-color-scheme: dark) {1113 body {1114 background-color: #333;1115 color: white;1116 }1117 1118 .masthead,1119 .masthead a,1120 .site-description {1121 color: #333;1122 }1123 1124 .wrapper-footer {1125 border-top: 1px solid #444;1126 border-bottom: 1px solid #444;1127 background-color: #444;1128 }1129 1130 .highlight {1131 background-color: #444;1132 border: 1px solid #444;1133 }1134 1135 .intro-header {1136 border-top: 5px solid #333;1137 }1138 1139 h1, h2, h3, h4, h5, h6 {1140 color: white;1141 }1142}1143 1144 1145 1146/*!1147 * Font Awesome 3.2.11148 * the iconic font designed for Bootstrap1149 * ------------------------------------------------------------------------------1150 * The full suite of pictographic icons, examples, and documentation can be1151 * found at http://fontawesome.io. Stay up to date on Twitter at1152 * http://twitter.com/fontawesome.1153 *1154 * License1155 * ------------------------------------------------------------------------------1156 * - The Font Awesome font is licensed under SIL OFL 1.1 -1157 * http://scripts.sil.org/OFL1158 * - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -1159 * http://opensource.org/licenses/mit-license.html1160 * - Font Awesome documentation licensed under CC BY 3.0 -1161 * http://creativecommons.org/licenses/by/3.0/1162 * - Attribution is no longer required in Font Awesome 3.0, but much appreciated:1163 * "Font Awesome by Dave Gandy - http://fontawesome.io"1164 *1165 * Author - Dave Gandy1166 * ------------------------------------------------------------------------------1167 * Email: [EMAIL REDACTED]1168 * Twitter: http://twitter.com/byscuits1169 * Work: Lead Product Designer @ Kyruus - http://kyruus.com1170 */1171/* FONT PATH1172 * -------------------------- */1173@font-face {1174 font-family: 'FontAwesome';1175 src: url('../font/fontawesome-webfont.eot?v=3.2.1');1176 src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');1177 font-weight: normal;1178 font-style: normal;1179}1180/* FONT AWESOME CORE1181 * -------------------------- */1182[class^="icon-"],1183[class*=" icon-"] {1184 font-family: FontAwesome;1185 font-weight: normal;1186 font-style: normal;1187 text-decoration: inherit;1188 -webkit-font-smoothing: antialiased;1189 *margin-right: .3em;1190}1191[class^="icon-"]:before,1192[class*=" icon-"]:before {1193 text-decoration: inherit;1194 display: inline-block;1195 speak: none;1196}1197/* makes the font 33% larger relative to the icon container */1198.icon-large:before {1199 vertical-align: -10%;1200 font-size: 1.3333333333333333em;