Skip to content

Instantly share code, notes, and snippets.

@harrisonmalone

harrisonmalone/index.html

Last active April 1, 2020 01:14
Show Gist options
  • Save harrisonmalone/b7a4009b7bb60ebda4bddd67adc60f6f to your computer and use it in GitHub Desktop.
Save harrisonmalone/b7a4009b7bb60ebda4bddd67adc60f6f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
<div class="icon"></div>
<div class="links">
<a href="#">Home</a> |
<a href="#">Products</a> |
<a href="#">Company</a> |
<a href="#">Blog</a>
</div>
</nav>
<section>
<div class="content">
<div class="hero">
<h3>Tom Dunstan | Web Developer</h3>
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
</body>
</html>
Raw
style.css
body {
margin: 0px;
}
nav {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid black;
box-sizing: border-box;
}
nav .icon {
width: 40px;
height: 40px;
background: coral;
margin: 0px 10px;
}
nav .links {
width: 60%;
display: flex;
justify-content: flex-end;
}
nav .links a {
display: inline-block;
margin: 0px 10px;
}
section {
height: calc(100vh - 60px);
max-width: 700px;
margin: 0 auto;
}
section .content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero {
height: 60%;
background: url("https://images.theconversation.com/files/141932/original/image-20161017-14847-1a7gm58.jpg?ixlib=rb-1.1.0&rect=0%2C0%2C3008%2C1458&q=45&auto=format&w=1356&h=668&fit=crop");
background-size: cover;
background-position: center;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment