Skip to content

Instantly share code, notes, and snippets.

@myun2

myun2/denim.css

Last active February 14, 2018 19:43
Show Gist options
  • Save myun2/b31f9f181193215d68459369308df5b0 to your computer and use it in GitHub Desktop.
Save myun2/b31f9f181193215d68459369308df5b0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
denim.css
* { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont,
"Helvetica Neue", "Segoe UI", sans-serif;
letter-spacing: 0.01em;
background-color: #fefefe;
}
header { background-color: #080808; }
header.fixed { position: fixed; width: 100%; }
header.fixed + * { padding-top: 64px; }
header h1 { color: #eee; padding: 3px; font-size: 260%; }
h1 { font-size: 450%; }
main { padding: 16px; font-size: 0.86rem; }
Raw
denim.html
<!DOCTYPE html>
<html>
<head><link href="denim.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #060c17; color: #6caba1c4; padding-bottom: 140px; }
.boxes article { padding: 5px; border-radius: 26px; }
</style>
</head>
<body>
<header class="fixed">
<h1>Dnim</h1>
</header>
<main>
<h1>Denim</h1>
<ul>
<li>Example Text hello hello hello....</li>
</ul>
<div class="boxes">
<article style="background-color: #0000005c; height: 320px; width: 320px; display: inline-block; float: left"><h1>Denim</h1></article>
<div style="display: inline-block; float: left; ">
<article style="background-color: #3e1919fa; height: 140px; width: 320px; color: #c9fff6c4"><h1>Denim</h1></article>
<article style="background-color: #ffc800fa; height: 160px; width: 320px; color: #060d17; margin-top: 10px"><h1>Denim</h1></article>
</div>
<article style="background-color: #113140eb; height: 660px; width: 320px; color: #060d17; float: left; margin-left: 10px; margin-bottom: -330px"><h1>Denim</h1></article>
<article style="background-color: #c70303eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #396756eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #4bce9deb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #366b57eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #153e42eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #a56d1aeb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #88775deb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #b33ea0eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #ce4bb8eb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #4ba4ceeb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
<article style="background-color: #ce9a4beb; height: 120px; width: 650px; color: #060d17; clear: both; margin-top: 10px"><h1>Denim</h1></article>
</div></main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment