Skip to content

Instantly share code, notes, and snippets.

@nmajor

nmajor/index.html

Created October 18, 2017 17:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nmajor/bcd142333923ae995c4d8aa8372ff2a5 to your computer and use it in GitHub Desktop.
Save nmajor/bcd142333923ae995c4d8aa8372ff2a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700i|Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="banner">
<div class="container">
<h1>How to copy Medium in 10 minutes</h1>
<h2>This is a cheap version of course</h2>
</div>
</div>
<div class="container">
<h2>Some title</h2>
<p>Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.</p>
<h2>Another title</h2>
<p>Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.</p>
<a href="#">This is how you really do it</a>
<h2>A final title</h2>
<p>Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.</p>
</div>
</body>
</html>
Raw
style.css
body { margin: 0; }
#banner {
padding: 180px 0;
color: white;
background: url("https://www.hunterandbligh.com.au/wp-content/uploads/2016/12/blade-runner-2049-ryan-750x375.png") no-repeat center center;
background-size: cover;
}
#banner h1 {
font-weight: 600;
font-size: 40px;
font-family: 'Roboto', sans-serif;
margin-bottom: 20px;
}
#banner h2 {
font-weight: 400;
font-size: 30px;
font-family: 'Droid Serif', serif;
font-style: italic;
color: #FFF;
}
.container {
margin: 0 auto;
width: 700px;
}
h2 {
font-family: 'Roboto', sans-serif;
margin: 35px 0;
font-size: 30px;
font-weight: 300;
color: #AAA;
}
p {
margin: 35px 0;
font-size: 16px;
line-height: 24px;
font-family: 'Droid Serif', serif;
color: #555;
}
a {
font-family: 'Droid Serif', serif;
font-style: italic;
text-decoration: none;
background-color: #d7fde7;
color: #555;
padding: 2px 5px;
font-size: 22px;
}
a:hover {
background-color: #77f3ae;
}
.content {
background: #EEE;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment