Skip to content

Instantly share code, notes, and snippets.

@albacoretuna

albacoretuna/SassMeister-input-HTML.html

Created January 27, 2015 10:06
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 albacoretuna/efd7f01176c87daf3b76 to your computer and use it in GitHub Desktop.
Save albacoretuna/efd7f01176c87daf3b76 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!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>
Raw
SassMeister-input.scss
// ----
// 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;
}
Raw
SassMeister-output.css
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;
}
Raw
SassMeister-rendered.html
<!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