Skip to content

Instantly share code, notes, and snippets.

@mdewey

mdewey/gist:963d50c11ee90054d1542fd4957e2e9e Secret

Created May 20, 2019 13:36
Show Gist options
  • Save mdewey/963d50c11ee90054d1542fd4957e2e9e to your computer and use it in GitHub Desktop.
Save mdewey/963d50c11ee90054d1542fd4957e2e9e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Octodex - Github Octodex</title>
<link rel="stylesheet" href="/screen.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
</head>
<body>
<nav class="header">
<img src="./images/logo (1).png" />
<div class="top-links">
<a>RSS</a>
<a>FAQ</a>
<a>Back to GitHub</a>
</div>
</nav>
<div class="container">
<section class="main-body">
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/octobiwan.jpg" />
<section class="caption">
<p>#3</p>
<div class="name-pic">
<p>the <em>Octobi Wan Catnobi</em> by</p>
<img src="https://github.com/cameronmcefee.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src=" https://octodex.github.com/images/stormtroopocat.png" />
<section class="caption">
<p>#86></p>
<div class="name-pic">
<p>the <em>Stormtroopocat</em> by</p>
<img src="https://github.com/jeejkang.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/doctocat-brown.jpg" />
<section class="caption">
<p>#68</p>
<div class="name-pic">
<p>the <em>Doctocat Brown</em> by</p>
<img src="https://github.com/jonrohan.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/octocat-de-los-muertos.jpg" />
<section class="caption">
<p>#56</p>
<div class="name-pic">
<p>the <em>Octocat De Los Muertos</em> by</p>
<img src="https://github.com/cameronmcefee.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/dunetocat.png" />
<section class="caption">
<p>#105</p>
<div class="name-pic">
<p>the <em>Dunetocat</em> by</p>
<img src="https://github.com/JohnCreek.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/daftpunktocat-thomas.gif" />
<section class="caption">
<p>#102</p>
<div class="name-pic">
<p>the <em>Daftpunktocat-Thomas</em> by</p>
<img src="https://github.com/jeejkang.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/heisencat.png" />
<section class="caption">
<p>#78</p>
<div class="name-pic">
<p>the <em>Heisencat</em> by</p>
<img src="https://github.com/jonrohan.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/boxertocat_octodex.jpg" />
<section class="caption">
<p>#143</p>
<div class="name-pic">
<p>the <em>Boxertocat</em> by</p>
<img src="https://github.com/rubyjazzy.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/justicetocat.jpg" />
<section class="caption">
<p>#136</p>
<div class="name-pic">
<p>the <em>Justicetocat</em> by</p>
<img src="https://github.com/heyhayhay.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/gobbleotron.gif" />
<section class="caption">
<p>#120</p>
<div class="name-pic">
<p>the <em>Gobble-o-tron</em> by</p>
<img src="https://github.com/JohnCreek.png" />
<img src="https://github.com/tonyjaramillo.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/xtocat.jpg" />
<section class="caption">
<p>#36</p>
<div class="name-pic">
<p>the X-tocat by</p>
<img src="https://github.com/cameronmcefee.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/saritocat.png" />
<section class="caption">
<p>#114</p>
<div class="name-pic">
<p>the Saritocat by</p>
<img src="https://github.com/JohnCreek.png">
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/yaktocat.png" />
<section class="caption">
<p>#109</p>
<div class="name-pic">
<p>the Yaktocat by</p>
<img src="https://github.com/jeejkang.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/dunetocat.png" />
<section class="caption">
<p>#105</p>
<div class="name-pic">
<p>the Dunetocat by</p>
<img src="https://github.com/JohnCreek.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/ironcat.jpg" />
<section class="caption">
<p>#25</p>
<div class="name-pic">
<p>the IronCat by</p>
<img src="https://github.com/cameronmcefee.png" />
</div>
</section>
</div>
<div class="outer-image">
<img class="image-area" src="https://octodex.github.com/images/murakamicat.png" />
<section class="caption">
<p>#83</p>
<div class="name-pic">
<p>the Murakamicat by</p>
<img src="https://github.com/billyroh.png" />
</div>
</section>
</div>
</section>
<footer>
<div class="bottom-links">
<p>RSS</p>
<p>FAQ</p>
</div>
<i class="fab fa-github"></i>
<div class="copyright">
<p>© 2013 – 2018 GitHub, Inc.</p>
<p>All rights reserved.</p>
</div>
</footer>
</div>
</body>
</html>
Raw
gistfile2.txt
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
font: 16px / 1 sans-serif;
}
.header {
background: #f3f3f3;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.header img,
.top-links {
padding: 15px 20px;
}
nav img {
height: 22px;
width: 177px;
}
.top-links a {
font-size: 13px;
font-weight: bold;
margin-left: 15px;
line-height: 25px;
}
.top-links a:hover {
color: #4183c4;
cursor: pointer;
}
.main-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.outer-image {
border-bottom: 1px solid #cacaca;
margin: 0 12px 22px;
}
.image-area {
width: 424px;
height: 424px;
padding: 10px;
border: 1px solid #cacaca;
border-radius: 3px;
}
/* .image-area::after {
content: '';
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: #cacaca;
float: right;
position: relative;
right: 6px;
top: 0;
} */
.caption {
display: flex;
justify-content: space-between;
}
.caption p {
color: #cacaca;
font-weight: bold;
font-size: 16px;
}
em {
color: black;
font-style: normal;
}
.name-pic {
display: flex;
align-items: center;
}
.name-pic p {
color: #777;
font-weight: bold;
}
.name-pic img {
height: 28px;
width: 28px;
border-radius: 3px;
margin-left: 10px;
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ddd;
padding: 15px 0;
padding-left: 15px;
padding-right: 15px;
}
.bottom-links {
display: flex;
align-items: center;
}
.bottom-links p {
font-size: 12px;
color: #4183c4;
margin: 12px 12px 12px 0;
}
i {
color: #ccc;
font-size: 24px;
}
.copyright {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.copyright p {
color: #777;
font-size: 12px;
margin: 0;
line-height: 18px;
margin-left: 5px;
}
@media only screen and (max-width: 460px) {
.header {
justify-content: center;
align-content: center;
}
.header img {
padding: 15px 0 0;
}
.top-links a {
margin: 0 15px;
}
.main-body {
display: flex;
justify-items: center;
width: 90vw;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment