Skip to content

Instantly share code, notes, and snippets.

@jlcarvalho

jlcarvalho/index.html

Last active August 29, 2015 14:18
Show Gist options
  • Save jlcarvalho/a7d4c2976d6e7d1f738e to your computer and use it in GitHub Desktop.
Save jlcarvalho/a7d4c2976d6e7d1f738e to your computer and use it in GitHub Desktop.
Download ZIP
Gistter: Header Layout
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gistter</title>
<!-- Necessary to insert the styles -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" type="text/css" media="all" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Vollkorn:400italic" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Your code here -->
<div class="neato-header">
<h2>Your Subtitle</h2>
<h1>Your Headline</h1>
</div>
<!-- Necessary to insert the javascript -->
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Raw
main.css
html, body {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
html {
background-image: url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?fit=crop&fm=jpg&h=700&q=75&w=1050);
background-position: center center;
background-size: cover;
}
body {
background-color: rgba(0, 0, 0, 0.1);
}
.neato-header {
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
min-width: 50%;
padding: 30px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
border: 3px solid white;
border-top: none;
}
.neato-header h1, .neato-header h2 {
letter-spacing: 0.05em;
}
.neato-header h1 {
font-size: 65px;
font-family: "Open Sans Condensed";
text-transform: uppercase;
}
.neato-header h2 {
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
font-family: "Vollkorn";
font-weight: italic;
font-size: 21px;
overflow: hidden;
margin: -30px -33px 0 -33px;
position: absolute;
width: calc( 100% + 6px );
}
.neato-header h2:before, .neato-header h2:after {
content: "";
position: absolute;
width: 100%;
margin-top: -2px;
border-top: 3px solid white;
top: 50%;
}
.neato-header h2:before {
-ms-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
margin-left: -30px;
}
.neato-header h2:after {
margin-left: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment