Skip to content

Instantly share code, notes, and snippets.

@pbojinov

pbojinov/index.html

Forked from anonymous/index.html
Created December 31, 2015 06:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pbojinov/6aa85851e007d2ce4b29 to your computer and use it in GitHub Desktop.
Save pbojinov/6aa85851e007d2ce4b29 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/ferina
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
/* inspired by colors from http://scripteden.com/preview/?preview=274 */
h1, h2, p {
padding: 0;
margin: 0;
text-align: center;
}
section {
height: 200px;
color: white;
}
section, footer {
padding-top: 10px;
font-family: Verdana;
}
.purple {
background: linear-gradient(45deg, rgba(14,21,58,1) 0%,rgba(115,107,147,1) 48%,rgba(243,201,215,1) 100%)
}
.teal {
background: linear-gradient(135deg, rgba(24,42,115,1) 0%,rgba(33,138,174,1) 69%,rgba(32,167,172,1) 89%)
}
.white {
background: white;
color: rgba(0, 0, 0, 0.8);
}
footer {
height: 100px;
background: #1B1C1D;
}
footer h2 {
color: white;
font-size: 20px;
}
footer p {
color: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<section class="teal">
<h1>Hello There</h1>
<p>This is a teal section</p>
</section>
<section class="white">
<h1>Hello There</h1>
<p>This is a purple section</p>
</section>
<section class="purple">
<h1>Hello There</h1>
<p>This is a purple section</p>
</section>
<section class="white">
<h1>Hello There</h1>
<p>This is a purple section</p>
</section>
<footer>
<h2>This is a header in the footer</h2>
<p>THis is some stuff under it</p>
</footer>
<script id="jsbin-source-css" type="text/css">/* inspired by colors from http://scripteden.com/preview/?preview=274 */
h1, h2, p {
padding: 0;
margin: 0;
text-align: center;
}
section {
height: 200px;
color: white;
}
section, footer {
padding-top: 10px;
font-family: Verdana;
}
.purple {
background: linear-gradient(45deg, rgba(14,21,58,1) 0%,rgba(115,107,147,1) 48%,rgba(243,201,215,1) 100%)
}
.teal {
background: linear-gradient(135deg, rgba(24,42,115,1) 0%,rgba(33,138,174,1) 69%,rgba(32,167,172,1) 89%)
}
.white {
background: white;
color: rgba(0, 0, 0, 0.8);
}
footer {
height: 100px;
background: #1B1C1D;
}
footer h2 {
color: white;
font-size: 20px;
}
footer p {
color: rgba(255, 255, 255, 0.5);
}</script>
</body>
</html>
Raw
jsbin.ferina.css
/* inspired by colors from http://scripteden.com/preview/?preview=274 */
h1, h2, p {
padding: 0;
margin: 0;
text-align: center;
}
section {
height: 200px;
color: white;
}
section, footer {
padding-top: 10px;
font-family: Verdana;
}
.purple {
background: linear-gradient(45deg, rgba(14,21,58,1) 0%,rgba(115,107,147,1) 48%,rgba(243,201,215,1) 100%)
}
.teal {
background: linear-gradient(135deg, rgba(24,42,115,1) 0%,rgba(33,138,174,1) 69%,rgba(32,167,172,1) 89%)
}
.white {
background: white;
color: rgba(0, 0, 0, 0.8);
}
footer {
height: 100px;
background: #1B1C1D;
}
footer h2 {
color: white;
font-size: 20px;
}
footer p {
color: rgba(255, 255, 255, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment