Skip to content

Instantly share code, notes, and snippets.

@matt-daniel-brown

matt-daniel-brown/index.html

Last active November 25, 2017 03:38
Show Gist options
  • Save matt-daniel-brown/be501a3d0475d4fba5bd7824fab8f85d to your computer and use it in GitHub Desktop.
Save matt-daniel-brown/be501a3d0475d4fba5bd7824fab8f85d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<!--[if lte IE 6]><html class="preIE7 preIE8 preIE9"><![endif]-->
<!--[if IE 7]><html class="preIE8 preIE9"><![endif]-->
<!--[if IE 8]><html class="preIE9"><![endif]-->
<!--[if gte IE 9]><!--><html><!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<style type="text/css">
* {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box !important;
clear: both !important;
}
html {
font-size: 18px;
}
body {
font-size: 1em;
font-weight: 500;
}
body, html, main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
article {
padding-top: 4rem;
padding-bottom: 6rem;
}
body, p {
line-height: 1.6;
}
.container, nav .navbar-content {
max-width: 750px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
header.page-header {
height: 16rem;
width: 100%;
background: #f5f8f7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom: rgba(106, 181, 184, 0.1) solid 1px;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#site-logo {
color: rgba(106, 181, 184, 0.73);
line-height: 1;
margin-top: 0;
height: 100%;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.95313em;
width: auto;
height: 100%;
vertical-align: middle;
margin: 0;
padding: 0;
border-radius: 25%;
}
#site-logo span {
margin: 0;
padding: 0;
position: relative;
top: -3px;
line-height: 1;
display: block;
vertical-align: middle;
opacity: 0.75;
}
nav {
margin: 0;
padding: 0;
height: 4rem;
background: #2e3441;
}
nav .navbar-content {
height: 100%;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
box-sizing: border-box;
height: 100%;
vertical-align: middle;
margin-right: 0 !important;
}
nav ul li {
margin-top: 0;
height: 100%;
margin-left: 4rem;
vertical-align: middle;
padding-top: 1rem;
}
nav ul li a {
vertical-align: middle;
line-height: 1;
margin: 0 !important;
padding: 0;
color: #6ab5b8;
text-decoration: none;
}
h1 {
font-weight: 700 !important;
line-height: 1.15 !important;
max-width: 750px;
width: 80%;
font-size: 2.7rem;
}
h4 {
font-size: 1.25em;
}
h3 {
font-size: 1.5625em;
}
h2 {
font-size: 2.2rem;
}
h1, h2, h3, h4, h5 {
line-height: 1.5;
margin-top: 0;
margin-bottom: 1rem;
letter-spacing: 1px;
font-weight: 600;
color: #274851;
}
p {
color: #626768;
margin-top: 0;
margin-bottom: 4rem;
}
h4 {
font-weight: 400;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1em;
}
section {
margin-bottom: 8rem;
}
a {
color: #6ab5b8;
}
.bullet-list {
margin: 0 !important;
padding: 0;
line-height: 1 !important;
}
.bullet-list li {
line-height: 1 !important;
margin: 0 !important;
padding: 0;
}
.bullet-list p {
margin: 1em;
line-height: 1 !important;
}
pre {
margin-bottom: 2rem !important;
min-height: 4rem !important;
font-weight: bold;
color: #43767c;
letter-spacing: normal !important;
background: #edf1f2;
border-radius: 4px;
display: block;
}
pre code {
display: block;
font-family: monospace !important;
padding: 2rem;
font-size: 16px;
font-weight: 500;
}
h6, h6.code-sample {
font-size: 0.8rem !important;
line-height: 2.5;
opacity: 0.5;
font-weight: 500;
}
.image-wrapper {
display: block;
margin: 2rem 0 4rem 0 !important;
padding: 2rem;
border-radius: 4px;
max-width: 800px;
height: auto;
border-radius: 0;
-webkit-backface-visibility: none;
backface-visibility: none;
}
.overlay-container {
position: relative;
width: 100%;
}
img {
border-radius: 6px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 100;
}
.image {
display: block;
width: 100%;
height: auto;
}
img.blurred {
margin: 0 !important;
padding: 0 !important;
-webkit-transform: scale(0.9) translatey(10%);
transform: scale(0.9) translatey(10%);
z-index: -100;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
-webkit-filter: blur(20px);
filter: blur(20px);
opacity: 0.9;
}
.image-title {
margin-top: 0.5rem;
font-size: 0.8em;
}
</style>
</head>
<body>
<nav>
<div class="navbar-content">
<div id="site-logo"><span>◈</span></div>
<ul class="container">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
<header class="page-header">
<h1>Styles For Documentation</h1>
</header>
<main>
<div class="container">
<article>
<header>
<h2>Article Title</h2>
</header>
<section>
<header>
<h3>Section One Title</h3>
</header>
<div class="section-content">
<h4>Section Paragraph Subtitle</h4>
<p>Optical connections between computer components will allow data to be transmitted faster than modern electronic ones, and over long distances.</p>
<h6 class="code-title">Code Sample:</h6>
<pre><code>&num;!/usr/bin/env node
'use strict';
// Main function as a variable.
var main = function() {
const someVariable = 'foo';
console.log(someVariable);
}
</code></pre>
<h4>Section Subtitle</h4>
<p>The main role in the work of the computer is played by electrons. "Settling" in the memory cells and registers of the processor, they form the information that the user is working with. But the electron velocity is finite and not very large. And the time that an electron needs to travel through the system becomes a decisive obstacle in the further increase of computer performance.</p>
</div>
<h4>Paragraph Subtitle</h4>
<p>The output can be found either in reducing the size of the devices, or in a new approach to their systems. And since it is infinitely impossible to reduce the size of the computer, new algorithms of work and attempts to replace electrons with other particles are being used.</p>
<h6>Impolrtant Points</h6>
<ul class="bullet-list">
<li>
<p>• Lorem ipsum dolor</p>
</li>
<li>
<p>• Sit amet, consectetur</p>
</li>
<li>
<p>• Adipisicing elit, sed</p>
</li>
<li>
<p>• Do eiusmod tempor</p>
</li>
<li>
<p>• Incididunt ut labore</p>
</li>
</ul>
</section>
<section>
<header>
<h3>Section Two Title</h3>
</header>
<div class="section-content">
<h4>Section Subtitle</h4>
<p>For tasks related to the calculation of probabilities, engineers of the American company Lyric Semiconductor suggest using processors that work on the principles of Bayesian probability. Information about the new operating system, inspired by the example of the "apple" company, has already started appearing in press releases. </p>
<div class="image-wrapper">
<div class="overlay-container"><img src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;s=b45d7cae7aa90d09797d368fb33ab430" alt="A Photo"/><img class="blurred" src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;s=b45d7cae7aa90d09797d368fb33ab430" alt="A Photo"/></div>
<p class="image-title">This is a nice photo.</p>
</div>
<h4>Section Subtitle</h4>
<p>I did not even have time to get off the Service Pack for Windows 7, as the Web was flooded with rumors about a new version of Windows. With an easy feed of bloggers, the OS was called the "eight", which, incidentally, was confirmed in an interview with representatives of Microsoft. Inspired by the general acceptance and commercial success of Windows 7, the Redmond people rolled up their sleeves and started creating something that could completely "take the brain out" even to the most sophisticated users, and at the same time to turn the public's view of the "windows".</p>
</div>
</section>
</article>
</div>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js" type="text/javascript"></script>
</body>
</html>
Raw
index.min.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>title</title> <meta name="author" content="name"> <meta name="description" content="description here"> <meta name="keywords" content="keywords,here"> <style type="text/css"> *{font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box !important; clear: both !important;}html{font-size: 18px;}body{font-size: 1em; font-weight: 500;}body, html, main{margin: 0; padding: 0; width: 100%; height: 100%;}article{padding-top: 4rem; padding-bottom: 6rem;}body, p{line-height: 1.6;}.container, nav .navbar-content{max-width: 750px; width: 80%; margin-left: auto; margin-right: auto;}header.page-header{height: 16rem; width: 100%; background: #f5f8f7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: rgba(106, 181, 184, 0.1) solid 1px;}ul, li{list-style: none; margin: 0; padding: 0;}#site-logo{color: rgba(106, 181, 184, 0.73); line-height: 1; margin-top: 0; height: 100%; vertical-align: middle; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1.95313em; width: auto; height: 100%; vertical-align: middle; margin: 0; padding: 0; border-radius: 25%;}#site-logo span{margin: 0; padding: 0; position: relative; top: -3px; line-height: 1; display: block; vertical-align: middle; opacity: 0.75;}nav{margin: 0; padding: 0; height: 4rem; background: #2e3441;}nav .navbar-content{height: 100%; vertical-align: middle; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}nav ul{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; box-sizing: border-box; height: 100%; vertical-align: middle; margin-right: 0 !important;}nav ul li{margin-top: 0; height: 100%; margin-left: 4rem; vertical-align: middle; padding-top: 1rem;}nav ul li a{vertical-align: middle; line-height: 1; margin: 0 !important; padding: 0; color: #6ab5b8; text-decoration: none;}h1{font-weight: 700 !important; line-height: 1.15 !important; max-width: 750px; width: 80%; font-size: 2.7rem;}h4{font-size: 1.25em;}h3{font-size: 1.5625em;}h2{font-size: 2.2rem;}h1, h2, h3, h4, h5{line-height: 1.5; margin-top: 0; margin-bottom: 1rem; letter-spacing: 1px; font-weight: 600; color: #274851;}p{color: #626768; margin-top: 0; margin-bottom: 4rem;}h4{font-weight: 400; opacity: 0.85; text-transform: uppercase; letter-spacing: 3px; font-size: 1em;}section{margin-bottom: 8rem;}a{color: #6ab5b8;}.bullet-list{margin: 0 !important; padding: 0; line-height: 1 !important;}.bullet-list li{line-height: 1 !important; margin: 0 !important; padding: 0;}.bullet-list p{margin: 1em; line-height: 1 !important;}pre{margin-bottom: 2rem !important; min-height: 4rem !important; font-weight: bold; color: #43767c; letter-spacing: normal !important; background: #edf1f2; border-radius: 4px; display: block;}pre code{display: block; font-family: monospace !important; padding: 2rem; font-size: 16px; font-weight: 500;}h6, h6.code-sample{font-size: 0.8rem !important; line-height: 2.5; opacity: 0.5; font-weight: 500;}.image-wrapper{display: block; margin: 2rem 0 4rem 0 !important; padding: 2rem; border-radius: 4px; max-width: 800px; height: auto; border-radius: 0; -webkit-backface-visibility: none; backface-visibility: none;}.overlay-container{position: relative; width: 100%;}img{border-radius: 6px; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; z-index: 100;}.image{display: block; width: 100%; height: auto;}img.blurred{margin: 0 !important; padding: 0 !important; -webkit-transform: scale(0.9) translatey(10%); transform: scale(0.9) translatey(10%); z-index: -100; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; -webkit-filter: blur(20px); filter: blur(20px); opacity: 0.9;}.image-title{margin-top: 0.5rem; font-size: 0.8em;}</style> </head> <body> <nav> <div class="navbar-content"> <div id="site-logo"><span>◈</span></div><ul class="container"> <li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul> </div></nav><header class="page-header"> <h1>Styles For Documentation</h1></header><main> <div class="container"> <article> <header> <h2>Article Title</h2> </header> <section> <header> <h3>Section One Title</h3> </header> <div class="section-content"> <h4>Section Paragraph Subtitle</h4> <p>Optical connections between computer components will allow data to be transmitted faster than modern electronic ones, and over long distances.</p><h6 class="code-title">Code Sample:</h6> <pre><code>#!/usr/bin/env node
'use strict';
// Main function as a variable.
var main = function() {
const someVariable = 'foo';
console.log(someVariable);
}
</code></pre> <h4>Section Subtitle</h4> <p>The main role in the work of the computer is played by electrons. "Settling" in the memory cells and registers of the processor, they form the information that the user is working with. But the electron velocity is finite and not very large. And the time that an electron needs to travel through the system becomes a decisive obstacle in the further increase of computer performance.</p></div><h4>Paragraph Subtitle</h4> <p>The output can be found either in reducing the size of the devices, or in a new approach to their systems. And since it is infinitely impossible to reduce the size of the computer, new algorithms of work and attempts to replace electrons with other particles are being used.</p><h6>Impolrtant Points</h6> <ul class="bullet-list"> <li> <p>• Lorem ipsum dolor</p></li><li> <p>• Sit amet, consectetur</p></li><li> <p>• Adipisicing elit, sed</p></li><li> <p>• Do eiusmod tempor</p></li><li> <p>• Incididunt ut labore</p></li></ul> </section> <section> <header> <h3>Section Two Title</h3> </header> <div class="section-content"> <h4>Section Subtitle</h4> <p>For tasks related to the calculation of probabilities, engineers of the American company Lyric Semiconductor suggest using processors that work on the principles of Bayesian probability. Information about the new operating system, inspired by the example of the "apple" company, has already started appearing in press releases. </p><div class="image-wrapper"> <div class="overlay-container"><img src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;s=b45d7cae7aa90d09797d368fb33ab430" alt="A Photo"/><img class="blurred" src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;s=b45d7cae7aa90d09797d368fb33ab430" alt="A Photo"/></div><p class="image-title">This is a nice photo.</p></div><h4>Section Subtitle</h4> <p>I did not even have time to get off the Service Pack for Windows 7, as the Web was flooded with rumors about a new version of Windows. With an easy feed of bloggers, the OS was called the "eight", which, incidentally, was confirmed in an interview with representatives of Microsoft. Inspired by the general acceptance and commercial success of Windows 7, the Redmond people rolled up their sleeves and started creating something that could completely "take the brain out" even to the most sophisticated users, and at the same time to turn the public's view of the "windows".</p></div></section> </article> </div></main> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js" type="text/javascript"></script> </body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment