A Pen by Sugarskill

Thumbnail
This awesome code was written by sugarskill, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sugarskill ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Sugarskill</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/sugarskill/a-pen-by-sugarskill-yPgrOX */
html{box-sizing:border-box;font:inherit;font-family:sans-serif;text-align:baseline;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}*,*:before,*:after{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}img{border:0;display:block;max-width:100%}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}iframe{border:0}@font-face{font-family:'National';src:url("/fonts/national/NationalWebLF-Book.woff2?__appVersion__") format("woff2"),url("/fonts/national/NationalWebLF-Book.woff?__appVersion__") format("woff");font-weight:400;font-style:normal}@font-face{font-family:'National';src:url("/fonts/national/NationalWebLF-Medium.woff2?__appVersion__") format("woff2"),url("/fonts/national/NationalWebLF-Medium.woff?__appVersion__") format("woff");font-weight:600;font-style:bold}@font-face{font-family:'Pakati';src:url("/fonts/pakati/PurePakati-Regular.woff2?__appVersion__") format("woff2"),url("/fonts/pakati/PurePakati-Regular.woff?__appVersion__") format("woff");font-weight:600;font-style:normal}:root{color:#444;font-family:"National",helvetica,arial,verdana,tahoma,sans-serif;font-weight:400;font-size:10px;font-weight:400;line-height:1.4}body{font-size:16px;font-size:1.6rem;-webkit-tap-highlight-color:transparent}:lang(ja) body,:lang(zh) body,:lang(ko) body{font-size:15.2px;font-size:1.52rem}@media (min-width: 640px){body{font-size:18px;font-size:1.8rem}:lang(ja) body,:lang(zh) body,:lang(ko) body{font-size:17.1px;font-size:1.71rem}}:lang(ja) body{font-family:"Arial Unicode MS",sans-serif}:lang(zh) body{font-family:"Arial Unicode MS",sans-serif}:lang(ko) body{font-family:"National","Apple SD Gothic Neo Medium","애플 SD 산돌고딕 Neo Medium","Nanum Gothic Regular","나눔고딕 Regular","HCR Dotum Regular","AppleGothic Regular","AppleGothic 일반체","Arial Unicode MS",sans-serif}h1,h2,h3,h4,h5,h6{color:#2d2d2d;line-height:1;margin:1em 0 0.25em}h1{font-size:38px;font-size:3.8rem}:lang(ja) h1,:lang(zh) h1,:lang(ko) h1{font-size:36.1px;font-size:3.61rem}:not(:lang(ja)) h1,:not(:lang(zh)) h1,:not(:lang(ko)) h1{-moz-font-feature-settings:'liga' 1, 'calt' 1, 'dlig' 1;-ms-font-feature-settings:'liga' 1, 'calt' 1, 'dlig' 1;-o-font-feature-settings:'liga' 1, 'calt' 1, 'dlig' 1;-webkit-font-feature-settings:'liga' 1, 'calt' 1, 'dlig' 1;font-feature-settings:'liga' 1, 'calt' 1, 'dlig' 1;font-family:"Pakati",helvetica,arial,verdana,tahoma,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:subpixel-antialiased;text-transform:uppercase;line-height:0.95}:lang(ja) h1{font-family:"National","Kozuka Gothic Pro B","小塚ゴシック Pro B","MS UI Gothic",Osaka,"MS Gothic","Arial Unicode MS",sans-serif}:lang(zh) h1{font-family:"National","Heiti SC Medium","黑体-简 中黑","Hiragino Sans GB W6","冬青黑体 W6",SimHei,"MS Hei","Arial Bold",sans-serif}:lang(ko) h1{font-family:"National","Apple SD Gothic Neo ExtraBold","애플 SD 산돌고딕 Neo ExtraBold","Baemuk Headline","Nanum Gothic Extra Bold","나눔고딕 ExtraBold","HCR Dotum Bold","Adobe Gothic Std B","Adobe 고딕 Std B","Arial Bold",sans-serif}@media (min-width: 768px){h1{font-size:52px;font-size:5.2rem}:lang(ja) h1,:lang(zh) h1,:lang(ko) h1{font-size:49.4px;font-size:4.94rem}}h2{font-size:30px;font-size:3rem}:lang(ja) h2,:lang(zh) h2,:lang(ko) h2{font-size:28.5px;font-size:2.85rem}@media (min-width: 768px){h2{font-size:36px;font-size:3.6rem}:lang(ja) h2,:lang(zh) h2,:lang(ko) h2{font-size:34.2px;font-size:3.42rem}}h3{font-size:20px;font-size:2rem}:lang(ja) h3,:lang(zh) h3,:lang(ko) h3{font-size:19px;font-size:1.9rem}@media (min-width: 768px){h3{font-size:26px;font-size:2.6rem}:lang(ja) h3,:lang(zh) h3,:lang(ko) h3{font-size:24.7px;font-size:2.47rem}}h4{font-size:18px;font-size:1.8rem}:lang(ja) h4,:lang(zh) h4,:lang(ko) h4{font-size:17.1px;font-size:1.71rem}@media (min-width: 768px){h4{font-size:22px;font-size:2.2rem}:lang(ja) h4,:lang(zh) h4,:lang(ko) h4{font-size:20.9px;font-size:2.09rem}}h5{font-size:16px;font-size:1.6rem}:lang(ja) h5,:lang(zh) h5,:lang(ko) h5{font-size:15.2px;font-size:1.52rem}@media (min-width: 768px){h5{font-size:20px;font-size:2rem}:lang(ja) h5,:lang(zh) h5,:lang(ko) h5{font-size:19px;font-size:1.9rem}}h6{font-size:16px;font-size:1.6rem}:lang(ja) h6,:lang(zh) h6,:lang(ko) h6{font-size:15.2px;font-size:1.52rem}@media (min-width: 768px){h6{font-size:18px;font-size:1.8rem}:lang(ja) h6,:lang(zh) h6,:lang(ko) h6{font-size:17.1px;font-size:1.71rem}}.intro{font-size:22px;font-size:2.2rem;line-height:1.2;margin:0;text-align:center}:lang(ja) .intro,:lang(zh) .intro,:lang(ko) .intro{font-size:20.9px;font-size:2.09rem}@media (min-width: 768px){.intro{font-size:28px;font-size:2.8rem}:lang(ja) .intro,:lang(zh) .intro,:lang(ko) .intro{font-size:26.6px;font-size:2.66rem}}blockquote{border-left:2px solid #444;margin-left:0;padding-left:18px}blockquote>p:first-child:before{content:'\201C'}blockquote>p:last-of-type:after{content:'\201D'}cite{font-size:18px;font-size:1.8rem;display:block;font-style:normal}ul,ol{margin:0;padding-left:20px}:lang(zh) ul,:lang(zh) ol{padding-left:40px}:lang(ja) ul,:lang(ja) ol{padding-left:25px}:lang(ko) ul,:lang(ko) ol{padding-left:40px}:lang(zh) ol{list-style:simp-chinese-informal}:lang(ja) ol{list-style:hiragana}:lang(ko) ol{list-style:korean-hanja-informal}a{color:#0093de;font-family:inherit;font-size:inherit;font-weight:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0.5);text-decoration:none}a:active,a:hover{color:#0071ab;text-decoration:underline}strong,b{font-weight:600}sup{font-size:15px;font-size:1.5rem;line-height:1;vertical-align:super}sub{font-size:15px;font-size:1.5rem;line-height:1;vertical-align:sub}figcaption{font-size:14px;font-size:1.4rem}@keyframes rotate{100%{transform:rotate(360deg)}}[class*="o-button"]{font-size:16px;font-size:1.6rem;border:1px solid #2db6e8;border-radius:2px;color:#fff;font-weight:bold;margin-bottom:5px;margin-right:2px;padding:10px 15px;transition:background-color .4s,border-color .4s,color .4s}[class*="o-button"]:hover:not([disabled]),[class*="o-button"]:active:not([disabled]),[class*="o-button"]:focus:not([disabled]){color:#fff;text-decoration:none}[class*="o-button"]:active{outline:0 none}[class*="o-button"][disabled]{cursor:not-allowed;outline:0}[class*="o-button"][disabled]:not(.is-loading){background-color:#f2f2f2;border-color:#d8d8d8;color:#aaa;cursor:not-allowed;opacity:.5;outline:0}[class*="o-button"].is-loading{color:transparent;cursor:wait;position:relative}[class*="o-button"].is-loading .o-icon{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}[class*="o-button"].is-loading .o-icon svg{animation:rotate 1.5s linear infinite;fill:#fff;height:20px}.o-button{background-color:#2db6e8}.o-button:hover:not([disabled]),.o-button:active:not([disabled]),.o-button:focus:not([disabled]){background-color:#169bcc;border-color:#169bcc}.o-button--ox{color:#2db6e8}.o-button--ox:hover:not([disabled]),.o-button--ox:active:not([disabled]),.o-button--ox:focus:not([disabled]){color:#169bcc;border-color:#169bcc}.o-button--secondary{background-color:#65b319;border-color:#65b319}.o-button--secondary:hover:not([disabled]),.o-button--secondary:active:not([disabled]),.o-button--secondary:focus:not([disabled]){background-color:#4c8613;border-color:#4c8613}.o-button--lg{font-size:18px;font-size:1.8rem;padding-left:20px;padding-right:20px;text-transform:uppercase}@media (max-width: 519px){.o-button--full\@x-sm{display:block;margin-right:0;text-align:center;width:100%}}.o-icon{display:inline-block;vertical-align:text-top}.o-icon svg{display:block;height:16px;vertical-align:inherit}.o-icon--medium svg{height:32px}.o-icon--large svg{height:64px}.o-icon--square,.o-icon--circle{background-color:#0093de;border-radius:3px;padding:1px}.o-icon--square svg,.o-icon--circle svg{fill:#fff}.o-icon--circle{border-radius:50%;padding:7px;vertical-align:middle}.o-link{transition:color .4s}.o-link:hover,.o-link:active,.o-link:focus{color:#0071ab;text-decoration:underline}.o-link:active{outline:0 none}.o-link .o-icon{margin-right:5px;transition:background-color .4s}.row{margin-top:20px}@media (min-width: 640px){.row{margin-top:40px}}.constrained-width{margin-left:auto;margin-right:auto;max-width:1280px;padding-left:20px;padding-right:20px}.constrained-width:before,.constrained-width:after{content:' ';display:table}.constrained-width:after{clear:both}@media (min-width: 920px){.constrained-width{padding-left:10px;padding-right:10px}}@supports (display: flex){.constrained-width{display:flex;flex-wrap:wrap}}@media (min-width: 920px){.constrained-width>.col{padding-left:10px;padding-right:10px}}.col{width:100%}.col:not(.col--1-1){float:left}@supports (display: flex){.col:not(.col--1-1){float:unset}}.col+.col{margin-top:20px}@media (min-width: 640px){.col+.col{margin-top:40px}}@media (min-width: 920px){.col+.col{margin-top:0}}@media (min-width: 920px) and (max-width: 1023px){.col+.col--1-2,.col+.col--2-4{margin-top:40px}}@media (min-width: 1024px){.col--1-2,.col--2-4{width:50%}}@media (min-width: 920px) and (max-width: 1023px){.col--1-2.push--1-4,.col--2-4.push--1-4{width:66.666%}}@media (min-width: 920px){.col--1-4{width:33.333%}}@media (min-width: 1024px){.col--1-4{width:25%}}@media (min-width: 920px){.col--3-4{width:66.666%}}@media (min-width: 1024px){.col--3-4{width:75%}}@media (min-width: 1024px){.push--1-4{margin-left:25%}}@media (min-width: 920px){.push--1-2{margin-left:33.333%}}@media (min-width: 1024px){.push--1-2{margin-left:50%}}.u-text-up{text-transform:uppercase}.u-text-16-as{font-size:16px;font-size:1.6rem}:lang(ja) .u-text-16-as,:lang(zh) .u-text-16-as,:lang(ko) .u-text-16-as{font-size:15.2px;font-size:1.52rem}.u-mright-5{margin-right:5px}[hidden]{display:none}.u-visually-hidden{clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.user-touch a,.user-touch button{-webkit-tap-highlight-color:transparent;outline:0 none !important;text-decoration:none !important}
/*# sourceMappingURL=main.css.map */

Comments