Created
June 15, 2018 17:43
-
-
Save philcryer/8d2f41784ff5efe969ffa44d86ab876c to your computer and use it in GitHub Desktop.
A simple, single page html site, with black background and centered text. Made from found objects, public domain license.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- Meta and title --> | |
<meta charset="utf-8"> | |
<title>Your Name</title> | |
<meta name="author" content="Your Name"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta name="description" content="The description for this page"> | |
<meta property="og:url" content="http://link-to-something-you-want-to-share" /> | |
<meta property="og:type" content="website" /> | |
<meta property="og:title" content="More specific description" /> | |
<meta property="og:description" content="" /> | |
<meta property="og:image" content="http://link-to-image-to-represent-this-page/foo.jpg" /> | |
<!-- Styles --> | |
<style> | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
a { | |
text-decoration: none; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
@font-face { | |
font-family: 'GTAmericaLight'; | |
src: url("../fonts/GT-America-Standard-Light.ttf") format("ttf"), url("../fonts/GT-America-Standard-Light.woff") format("woff"), url("../fonts/GT-America-Standard-Light.eot") format("eot"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
.header { | |
pointer-events: none; | |
z-index: 1000; | |
width: 100%; | |
height: 100%; | |
display: block; | |
top: 0; | |
left: 0; | |
position: fixed; | |
} | |
.header nav { | |
width: 100%; | |
height: 100%; | |
} | |
.header nav section { | |
text-align: center; | |
position: fixed; | |
width: 128px; | |
height: 100%; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.header nav section:first-child { | |
top: 0; | |
left: 0; | |
} | |
.header nav section:first-child > a { | |
transform: rotate(-90deg); | |
} | |
.header nav section:nth-child(2) { | |
top: 0; | |
right: 0; | |
} | |
.header nav section:nth-child(2) > a { | |
transform: rotate(90deg); | |
} | |
.header nav section > span { | |
color: #999999; | |
} | |
.header nav section > a { | |
pointer-events: all; | |
font-size: 16px; | |
font-family: "GTAmericaLight", Arial, sans-serif; | |
display: block; | |
width: auto; | |
} | |
.header nav section > a:first-child { | |
margin: 0 0 0 0; | |
} | |
@media screen and (max-width: 400px) { | |
.header nav { | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
height: 100%; | |
position: fixed; | |
width: 100%; | |
} | |
.header nav section { | |
display: flex; | |
flex-direction: row; | |
height: auto; | |
width: 100%; | |
position: relative; | |
margin: 28px 0; | |
} | |
.header nav section:first-child > a { | |
transform: rotate(0deg); | |
text-align: center; | |
} | |
.header nav section:nth-child(2) > a { | |
transform: rotate(0deg); | |
text-align: center; | |
} | |
} | |
@media screen and (max-width: 800px) { | |
.header nav { | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
height: 100%; | |
position: fixed; | |
width: 100%; | |
} | |
.header nav section { | |
display: flex; | |
flex-direction: row; | |
height: auto; | |
width: 100%; | |
position: relative; | |
margin: 36px 0; | |
} | |
.header nav section:first-child > a { | |
transform: rotate(0deg); | |
text-align: center; | |
} | |
.header nav section:nth-child(2) > a { | |
transform: rotate(0deg); | |
text-align: center; | |
} | |
} | |
.footer { | |
bottom: 0; | |
left: 0; | |
} | |
.entries { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
justify-content: space-around; | |
align-items: center; | |
width: 60%; | |
padding: 192px 20%; | |
} | |
.entries .entry { | |
margin: 0 0 20% 0; | |
} | |
.entries .entry > a { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
width: 100%; | |
min-width: 100%; | |
max-width: 100%; | |
} | |
.entries .entry > a .date { | |
text-align: center; | |
margin-top: 24px; | |
letter-spacing: 1.33333px; | |
font-size: 14px; | |
color: #999999; | |
} | |
.entries .entry > a:hover { | |
opacity: 1; | |
} | |
.entries .entry:last-child { | |
margin: 0 0 0 0; | |
} | |
.entries .entry img { | |
height: auto; | |
width: auto; | |
max-height: 800px; | |
max-width: 100%; | |
} | |
@media screen and (max-width: 400px) { | |
.entries { | |
width: 80%; | |
padding: 48px 10%; | |
} | |
.entries .entry { | |
margin: 0 0 80px 0; | |
} | |
.entries .entry img { | |
max-height: 480px; | |
} | |
} | |
@media screen and (max-width: 800px) { | |
.entries { | |
width: 90%; | |
padding: 96px 5%; | |
} | |
.entries .entry { | |
margin: 0 0 48px 0; | |
} | |
.entries .entry img { | |
max-height: 320px; | |
} | |
} | |
.single .content { | |
width: 60%; | |
height: 60%; | |
} | |
.single .content > img { | |
width: auto; | |
height: auto; | |
} | |
.archives { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
align-items: flex-start; | |
width: 80%; | |
padding: 5% 10%; | |
} | |
.archives .entry { | |
width: 12%; | |
margin: 0 0 10% 10%; | |
} | |
.archives .entry:last-child { | |
margin: 0 0 0 0; | |
} | |
.archives .entry img { | |
width: 100%; | |
height: auto; | |
} | |
body { | |
background: #000000; | |
color: #ffffff; | |
font-family: "GTAmericaLight", Arial, sans-serif; | |
font-size: 20px; | |
} | |
body a { | |
color: #ffffff; | |
} | |
body a:hover { | |
opacity: 0.4; | |
text-decoration: none; | |
} | |
body:not(.photos) { | |
background: #000000; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
} | |
body:not(.photos) section.index-container { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
height: 100%; | |
width: 55%; | |
max-width: 656px; | |
} | |
body:not(.photos) section.index-container section.index-text { | |
text-align: center; | |
} | |
body:not(.photos) section.index-container section.index-text h1 { | |
margin-bottom: 40px; | |
font-size: 24px; | |
} | |
body:not(.photos) section.index-container section.index-text p { | |
font-size: 40px; | |
line-height: 48px; | |
letter-spacing: -0.5px; | |
} | |
body:not(.photos) section.index-container section.index-text p a { | |
white-space: nowrap; | |
color: rgba(255, 255, 255, 0.6); | |
} | |
@media screen and (max-width: 400px) { | |
body:not(.photos) section.index-container { | |
width: 80%; | |
} | |
} | |
@media screen and (max-width: 800px) { | |
body:not(.photos) section.index-container { | |
width: 90%; | |
} | |
} | |
body.photos { | |
background: #ffffff; | |
color: #000000; | |
} | |
body.photos a { | |
color: #000000; | |
} | |
body.jotunheimen { | |
background: #000000; | |
color: #ffffff; | |
} | |
body.jotunheimen a { | |
color: #ffffff; | |
} | |
body.jotunheimen .entries { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
justify-content: space-around; | |
align-items: center; | |
width: 60%; | |
padding: 192px 20%; | |
} | |
body.jotunheimen .entries h1, body.jotunheimen .entries h2, body.jotunheimen .entries h3, body.jotunheimen .entries h4, body.jotunheimen .entries p { | |
width: 100%; | |
} | |
body.jotunheimen .entries img { | |
height: auto; | |
width: auto; | |
max-height: 800px; | |
max-width: 100%; | |
} | |
@media screen and (max-width: 400px) { | |
body.jotunheimen .entries { | |
width: 80%; | |
padding: 48px 10%; | |
} | |
body.jotunheimen .entries .entry { | |
margin: 0 0 80px 0; | |
} | |
body.jotunheimen .entries .entry img { | |
max-height: 480px; | |
} | |
} | |
@media screen and (max-width: 800px) { | |
body.jotunheimen .entries { | |
width: 90%; | |
padding: 96px 5%; | |
} | |
body.jotunheimen .entries .entry { | |
margin: 0 0 48px 0; | |
} | |
body.jotunheimen .entries .entry img { | |
max-height: 320px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<section class="index-container"> | |
<section class="index-text"> | |
<h1>Your Name</h1> | |
<p>Write content here, you can have <a href="http://google.com" title="title">links</a> too. And besides that, more <a href="http://google.com" title="title">links</a> and <a href="/path" title="title">links</a> of other stuff you want to share and highlight. Thanks.</p> | |
</section> | |
</section> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment