Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Week 3</title>
<script type="text/javascript" src="modernizr.js"></script>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Princess+Sofia" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Example</h1>
</header>
<nav>
<ul>
<li><a href="http://www.metropolia.fi/">Metropolia</a></li>
<li><a href="http://www.ampparit.com/">Ampparit</a><br /></li>
<li><a href="http://www.miniclip.com/games/en/">Miniclip</a><br /></li>
</ul>
</nav>
<article>
<img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg" alt="Homer" />
<h2>Content Header</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget sapien. Vestibulum ut velit. Fusce non magna. Sed at eros. Nam imperdiet interdum nunc. Nulla facilisi. Nam tincidunt. Pellentesque urna. Quisque vitae ipsum vel sem tristique ornare. Curabitur eget mi pellentesque dui porttitor placerat. Proin imperdiet dolor eu odio. </p>
<h3>Sub Header</h3>
<p>Donec eu nulla vitae massa suscipit suscipit. Phasellus pellentesque purus vel risus. Morbi diam tortor, placerat nec, facilisis vel, nonummy a, sapien. In at mauris. Morbi mollis accumsan est. Suspendisse vel risus. Aliquam odio neque, suscipit vel, tincidunt in, mattis vitae, ante. Nunc convallis egestas sem. Nullam vitae dui at metus mattis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla in neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam et est non odio eleifend ornare. Integer pharetra, massa interdum interdum gravida, lorem metus fermentum leo, a adipiscing metus nulla eget augue. </p>
<p>Nullam neque. Donec gravida lacinia diam. Donec ullamcorper sapien hendrerit ipsum. Proin lobortis sollicitudin sapien. Sed est. Morbi eros. Duis tincidunt condimentum quam. Etiam ut magna. Suspendisse luctus tristique dolor. Mauris convallis faucibus velit. Donec vitae purus. Morbi bibendum convallis eros. </p>
</article>
<footer>
©Footer
</footer>
</body>
</html>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
html {
background-image: linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-image: -moz-linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-image: -webkit-linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-size: cover;
height: 100%;
}
body {
width: 50em;
margin: auto;
font-family: Verdana;
font-size: 12px;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header, article, footer {
background-color: #eeeeee;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 640px;
border: 1px solid #000000;
margin-bottom: 4px;
padding: 8px;
}
header h1 {
font-family: 'Princess Sofia', cursive;
text-align: center;
font-size: 24px;
}
nav {
width: 640px;
clear: left;
float: left;
overflow: hidden;
ul {
height: 40px;
clear: left;
float: left;
position: relative;
left: 50%;
text-align: center;
li {
float: left;
position: relative;
right: 50%;
a {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: block;
line-height: 30px;
padding: 0 20px 0 20px;
margin: 0 4px 0 4px;
background-image: linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
background-image: -moz-linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
background-image: -webkit-linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
color: #ffffff;
text-decoration: none;
border: 2px outset #ffffff;
&:hover {
background-image: linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
background-image: -moz-linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
background-image: -webkit-linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
}
}
}
}
}
article {
float: left;
line-height: 140%;
img {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: right;
border: 2px solid #000;
margin-left: 8px;
}
h2 {
font-family: 'Princess Sofia', cursive;
font-size: 21.6px;
line-height: 140%;
}
h3 {
font-family: 'Princess Sofia', cursive;
font-size: 19.200000000000003px;
line-height: 140%;
margin-top: 8px;
}
p {
margin-bottom: 12px;
}
}
footer {
float: left;
text-align: center;
}
html {
background-image: linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-image: -moz-linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-image: -webkit-linear-gradient(bottom, #ffffff 24%, #dddddd 86%);
background-size: cover;
height: 100%;
}
body {
width: 50em;
margin: auto;
font-family: Verdana;
font-size: 12px;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header, article, footer {
background-color: #eeeeee;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 640px;
border: 1px solid #000000;
margin-bottom: 4px;
padding: 8px;
}
header h1 {
font-family: 'Princess Sofia', cursive;
text-align: center;
font-size: 24px;
}
nav {
width: 640px;
clear: left;
float: left;
overflow: hidden;
}
nav ul {
height: 40px;
clear: left;
float: left;
position: relative;
left: 50%;
text-align: center;
}
nav ul li {
float: left;
position: relative;
right: 50%;
}
nav ul li a {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
display: block;
line-height: 30px;
padding: 0 20px 0 20px;
margin: 0 4px 0 4px;
background-image: linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
background-image: -moz-linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
background-image: -webkit-linear-gradient(bottom, #4d7cf2 24%, #5c95ff 86%);
color: #ffffff;
text-decoration: none;
border: 2px outset #ffffff;
}
nav ul li a:hover {
background-image: linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
background-image: -moz-linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
background-image: -webkit-linear-gradient(bottom, #5c95ff 24%, #6caeff 86%);
}
article {
float: left;
line-height: 140%;
}
article img {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: right;
border: 2px solid #000;
margin-left: 8px;
}
article h2 {
font-family: 'Princess Sofia', cursive;
font-size: 21.6px;
line-height: 140%;
}
article h3 {
font-family: 'Princess Sofia', cursive;
font-size: 19.200000000000003px;
line-height: 140%;
margin-top: 8px;
}
article p {
margin-bottom: 12px;
}
footer {
float: left;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Week 3</title>
<script type="text/javascript" src="modernizr.js"></script>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Princess+Sofia" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Example</h1>
</header>
<nav>
<ul>
<li><a href="http://www.metropolia.fi/">Metropolia</a></li>
<li><a href="http://www.ampparit.com/">Ampparit</a><br /></li>
<li><a href="http://www.miniclip.com/games/en/">Miniclip</a><br /></li>
</ul>
</nav>
<article>
<img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg" alt="Homer" />
<h2>Content Header</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget sapien. Vestibulum ut velit. Fusce non magna. Sed at eros. Nam imperdiet interdum nunc. Nulla facilisi. Nam tincidunt. Pellentesque urna. Quisque vitae ipsum vel sem tristique ornare. Curabitur eget mi pellentesque dui porttitor placerat. Proin imperdiet dolor eu odio. </p>
<h3>Sub Header</h3>
<p>Donec eu nulla vitae massa suscipit suscipit. Phasellus pellentesque purus vel risus. Morbi diam tortor, placerat nec, facilisis vel, nonummy a, sapien. In at mauris. Morbi mollis accumsan est. Suspendisse vel risus. Aliquam odio neque, suscipit vel, tincidunt in, mattis vitae, ante. Nunc convallis egestas sem. Nullam vitae dui at metus mattis pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla in neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam et est non odio eleifend ornare. Integer pharetra, massa interdum interdum gravida, lorem metus fermentum leo, a adipiscing metus nulla eget augue. </p>
<p>Nullam neque. Donec gravida lacinia diam. Donec ullamcorper sapien hendrerit ipsum. Proin lobortis sollicitudin sapien. Sed est. Morbi eros. Duis tincidunt condimentum quam. Etiam ut magna. Suspendisse luctus tristique dolor. Mauris convallis faucibus velit. Donec vitae purus. Morbi bibendum convallis eros. </p>
</article>
<footer>
©Footer
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment