Skip to content

Instantly share code, notes, and snippets.

@smykes

smykes/SassMeister-input-HTML.html

Created March 2, 2015 23:53
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 smykes/97b3e220660607a94270 to your computer and use it in GitHub Desktop.
Save smykes/97b3e220660607a94270 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="panel">
<h1>ScreenBlazer</h1>
<div class="img-circle"></div>
<div class="footer">
<div class="logo">rev<sup>4</sup></sup></sup></div>
<div class="copy"><a href="">Terms of Service</a> | <a href="#">Privacy Policy</a></div>
</div>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
body {
background: #4F555D;
padding: 50px;
font-family: 16px;
}
.panel {
height: 80vh;
min-height: 300px;
background-color: #D8D8D8;
width: 80%;
margin: 0 auto;
box-shadow: 0px 4px 4px 4px rgba(0,0,0,0.50);
border-radius: 8px;
padding-top: 3%;
font-family: Avenir Next;
position: relative;
.img-circle {
width: 200px;
height: 200px;
border-radius: 100px;
background: yellow;
margin: 0 auto;
border: 6px #7D4A88 solid;
}
h1 {
text-align: center;
font-weight: 400;
font-family: AvenirNext-Regular;
color: #7D4A88;
font-size: 3.5em;
}
.footer {
width: 100%;
background-color: #7D4A88;
bottom: 0;
height: 100px;
position: absolute;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
.copy {
text-align: center;
color: white;
padding-top: 45px;
a:link, a:hover, a:visited {
color: white;
text-decoration: none;
}
}
.logo {
font-family: AvenirNext-Regular;
font-size: 4em;
color: #FFFFFF;
padding: 0 3%;
position: absolute;
bottom: -22px;
sup {
font-size: .5em;
}
}
}
}
Raw
SassMeister-output.css
body {
background: #4F555D;
padding: 50px;
font-family: 16px; }
.panel {
height: 80vh;
min-height: 300px;
background-color: #D8D8D8;
width: 80%;
margin: 0 auto;
box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.5);
border-radius: 8px;
padding-top: 3%;
font-family: Avenir Next;
position: relative; }
.panel .img-circle {
width: 200px;
height: 200px;
border-radius: 100px;
background: yellow;
margin: 0 auto;
border: 6px #7D4A88 solid; }
.panel h1 {
text-align: center;
font-weight: 400;
font-family: AvenirNext-Regular;
color: #7D4A88;
font-size: 3.5em; }
.panel .footer {
width: 100%;
background-color: #7D4A88;
bottom: 0;
height: 100px;
position: absolute;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.panel .footer .copy {
text-align: center;
color: white;
padding-top: 45px; }
.panel .footer .copy a:link, .panel .footer .copy a:hover, .panel .footer .copy a:visited {
color: white;
text-decoration: none; }
.panel .footer .logo {
font-family: AvenirNext-Regular;
font-size: 4em;
color: #FFFFFF;
padding: 0 3%;
position: absolute;
bottom: -22px; }
.panel .footer .logo sup {
font-size: .5em; }
Raw
SassMeister-rendered.html
<body>
<div class="panel">
<h1>ScreenBlazer</h1>
<div class="img-circle"></div>
<div class="footer">
<div class="logo">rev<sup>4</sup></sup></sup></div>
<div class="copy"><a href="">Terms of Service</a> | <a href="#">Privacy Policy</a></div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment