Skip to content

Instantly share code, notes, and snippets.

@ryanknutson
Created April 17, 2015 13:47
Show Gist options
  • Save ryanknutson/cf47384ebd1b3d30e8fb to your computer and use it in GitHub Desktop.
Save ryanknutson/cf47384ebd1b3d30e8fb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<!doctype html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/applenavbar.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<section class="topdiv">
<div class="block">
<div class="nav-wrap-ios7">
<ul class="nav-ios7">
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<header>
<h1>&nbsp;</h1>
<h1 class="headerdate"></h1>
<h1>&nbsp;</h1>
<h3>&nbsp;</h3>
</header>
</section>
<section class="aboutme">
<div class="contentwidth">
<img src="http://placekitten.com/640/481">
</div>
</section>
</body>
<footer>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/typed.min.js"></script>
<script>
$(function(){
$(".headerdate").typed({
strings: ["December 15th^1000, 1999"],
typeSpeed: 150,
showCursor: false,
});
});
</script>
</footer>
</html>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
//urls
$bgurl: url(../img/background.jpg);
$mepic: url(http://placekitten.com/640/481);
//colors
$emerald: #2ecc71;
$turq: #1abc9c;
//From clrs.cc
$navy: #001F3F;
$blue: #0074D9;
$aqua: #7FDBFF;
$teal: #39CCCC;
$olive: #3D9970;
$green: #2ECC40;
$lime: #01FF70;
$yellow: #FFDC00;
$orange: #FF851B;
$red : #FF4136;
$fuchsia : #F012BE;
$purple : #B10DC9;
$maroon : #85144B;
$white : #fff;
$gray : #aaa;
$silver : #ddd;
$black : #111;
body {
background: $bgurl no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", "Lucida Grande", sans-serif;
}
.nav-ios7 li {
background: linear-gradient($aqua, $teal);
}
.topdiv{
background-color: $teal;
header{
text-align: center;
h1{
text-transform: uppercase;
font-size: 8em;
margin-bottom: 10px;
}
h3{
margin-bottom: 0px;
}
.headerdate {
font-size: 8vw;
}
}
}
.contentwidth{
max-width:80em;
margin-left: auto;
margin-right: auto;
}
.aboutme{
background-color: $black;
}
body {
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
font-family: "Open Sans", "Lucida Grande", sans-serif;
}
.nav-ios7 li {
background: linear-gradient(#7FDBFF, #39CCCC);
}
.topdiv {
background-color: #39CCCC;
}
.topdiv header {
text-align: center;
}
.topdiv header h1 {
text-transform: uppercase;
font-size: 8em;
margin-bottom: 10px;
}
.topdiv header h3 {
margin-bottom: 0px;
}
.topdiv header .headerdate {
font-size: 8vw;
}
.contentwidth {
max-width: 80em;
margin-left: auto;
margin-right: auto;
}
.aboutme {
background-color: #111;
}
<!doctype html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/applenavbar.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<section class="topdiv">
<div class="block">
<div class="nav-wrap-ios7">
<ul class="nav-ios7">
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<header>
<h1>&nbsp;</h1>
<h1 class="headerdate"></h1>
<h1>&nbsp;</h1>
<h3>&nbsp;</h3>
</header>
</section>
<section class="aboutme">
<div class="contentwidth">
<img src="http://placekitten.com/640/481">
</div>
</section>
</body>
<footer>
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/typed.min.js"></script>
<script>
$(function(){
$(".headerdate").typed({
strings: ["December 15th^1000, 1999"],
typeSpeed: 150,
showCursor: false,
});
});
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment