Skip to content

Instantly share code, notes, and snippets.

@upman

upman/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save upman/11564bf466d676256b9f to your computer and use it in GitHub Desktop.
Save upman/11564bf466d676256b9f to your computer and use it in GitHub Desktop.
Download ZIP
Illusion
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div class="logo">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAA5CAYAAADz5VMxAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMDDB4LMCDOVwAAAkJJREFUeNrtnNtuwyAMhueq11Wlvv8bturhBdhNIyHWg8lsAub7pWjaSjIaf9jGkEhK6QehUjtuAWoGhoiIRbvlc+31UKdgLAZMivgkIlK2ewdAIt41l1jf89zgr0B5BYQGGjQ4GBiXULI6nFxuj/Tpd+1naECPoTHq6XiQmnZoklmJFWBokFBinVvgMQKAQcIJGAgwEGAgBBgIMBBgIMBATtqvOWmrErZVid2jj5Z90+h0PIhlRbi8H+E8hohIjdHL8v1Im4I8K8KhwLjcHqmm8rqU7/OdYuXekZ6/KzmG0whaICh/lpD0CIj3+lHIUGIx4nIoZlz/GQYMjeusCSXaEZeHGsAYNEycjgepMeK3tguMM3qMfaQv8/QYajDeGTz3TrNuEgoFRoQNPR71jjWQU/lEgNFDfQAwCEeAgUg+w+tZ0Kr2GtFCEB7jLxTdlsEBYyPldY3ZH4OYdq2kl+sCRsNR7xHvax7SjjBlDhlKtFPOxQD/NYT1FLeHKfO0s5ISCu12wFmW4Uk+DfKOiNXSXUQv4J3DlC+HiVgtDbe1zxuOFqGE5NM5b/DyGNGhmDr53ML9Wxr9cnskHh9okECOBiO7xJ1Hb8upp7XH6AoMbYd6rwa2DiXWrr87j6HtUG31scecYPScphkYHvF4ph1TW3jRtf+zCgztAtUIlcAI1UrtszZr5+Xq4+f5JuFXx/l6T+frPZV/q7l+fs63c7XtWh15f1r16ZM9NO0+3UPhtZyI6SoCDAQYCDAQYCDAQP3pF4ogE6SSwRB3AAAAAElFTkSuQmCC"/>
</div>
<div class="description">
Awesome tagline about the company.
</div>
</div>
<div id="content">
<div id="sidebar">
<ul class="sidebar-list">
<li class="sidebar-element"><a class="sidebar-link">Archive</a></li>
<li class="sidebar-element"><a class="sidebar-link">Feed</a></li>
<li class="sidebar-element"><a class="sidebar-link">Contact</a></li>
<li class="sidebar-element"><a class="sidebar-link">Twitter</a></li>
<li class="sidebar-element"><a class="sidebar-link">More</a></li>
<li class="sidebar-element"><a class="sidebar-link">Much More</a></li>
</ul>
</div>
<div id="posts">
<div class="post">
<u class="post-title">
How to shoot a target from five miles away while laughing frantically
</u>
<p class="date">
Posted on - 3/3/2014
</p>
<div class="post-text">
<p>
Noster vidisse o graviterque ut non nescius non nostrud. E sunt veniam non
offendit se irure cupidatat ad esse dolore, est quem nulla an appellat,
cernantur nulla lorem officia multos do e quae admodum, ea incurreret
eruditionem o quo minim coniunctione ut nam nisi ullamco transferrem. Duis
philosophari commodo duis iudicem, probant e voluptate. An cillum ullamco
cupidatat. Nulla ut probant nam expetendis sunt illum commodo illum ubi lorem te
doctrina nam aliqua, dolore philosophari officia lorem nostrud et tamen
expetendis in aute quis quo proident noster aliqua ad quae, te tempor nam
consequat ut summis an ullamco. Aut malis mandaremus senserit. Quid quamquam
voluptate. Nam noster pariatur cohaerescant de eu quorum labore ea singulis et
incurreret cillum pariatur in si nisi ab cillum.
</p>
<p>
Tamen si in minim laboris quo nisi probant se cernantur, noster se probant quo
summis ab singulis lorem cernantur mentitum ad enim cupidatat cernantur te an
aliqua doctrina, quis do id esse excepteur, fabulas ipsum velit quamquam cillum.
Senserit velit varias nostrud aute nam ut proident ea possumus, quibusdam o enim
doctrina, malis ne incididunt in eram qui et ut imitarentur iis an quem nisi
aliqua arbitror quo ut non sunt tamen labore sed varias ingeniis sed cernantur.
O mandaremus in senserit te laboris ad anim. Noster nam o velit ingeniis, tamen
coniunctione consequat culpa offendit ne in quae praetermissum, non ita
concursionibus hic possumus do eram voluptate, vidisse veniam ea ingeniis
praetermissum, sed do sempiternum aut enim voluptatibus iudicem veniam singulis.
Te ea quae tempor. Si ad elit voluptate, qui minim quorum dolore proident. Quis
ab aliquip te eram, laboris amet dolore eiusmod quis, ab noster duis quid
admodum, e nulla iudicem quibusdam, do an praetermissum eu excepteur an
senserit, esse ullamco quo philosophari, arbitror duis sint iis nulla.
</p>
<p>
Singulis quis ingeniis vidisse id consequat o quae, ullamco minim nostrud
ingeniis, officia se lorem. Ubi anim quo enim eu quorum ex vidisse. Ut nostrud
ad iudicem in de occaecat familiaritatem, iis de multos quae quem, anim nescius
et sint elit. Te non magna esse aliqua ubi sint te singulis do o malis ut duis
ab ubi noster arbitrantur, nisi occaecat ad ullamco ea singulis illum cupidatat
tempor, nescius malis occaecat ita noster sempiternum vidisse velit deserunt.
Commodo sunt fabulas officia o vidisse nisi fugiat commodo noster o minim
eiusmod reprehenderit qui cillum deserunt do duis summis, singulis magna
nostrud, ut cillum vidisse illustriora, est do coniunctione, qui amet
graviterque. Admodum fore iis commodo exquisitaque aut fugiat appellat probant,
ad malis sed aliqua eu ne mentitum fidelissimae. Sunt adipisicing nostrud multos
tempor, id sint officia consectetur se elit doctrina sempiternum o expetendis
labore consequat consequat.
</p>
</div>
<div class="author">
<span class="hyphen">--</span>
<span class="author-name">Quick Gun Murugan</span>
</div>
</div>
<div class="post">
<u class="post-title">
What if the world was styled with css
</u>
<p class="date">
Posted on - 3/3/2014
</p>
<div class="post-text">
<p>
#big-bang::before {
content: "";
}
</p>
<br/>
<br/>
<p>
Officia e quid. Litteris duis te ullamco firmissimum qui laborum hic quorum an
iis sint nisi ex aliquip, te et comprehenderit. Nostrud do nulla aut sunt
quamquam nam coniunctione, fugiat eu mandaremus te non qui nisi cernantur. Te
dolore irure ubi cupidatat ab arbitror fore singulis admodum quo mandaremus se
quae nostrud, deserunt do illum appellat. Enim iis in summis fabulas, do sunt
nam elit, incurreret domesticarum de cernantur, laboris fore noster aut elit ut
tamen voluptate id vidisse iis quid relinqueret aliquip malis cupidatat, ne
singulis eruditionem a varias ne se quis fabulas. Expetendis si mentitum, velit
commodo efflorescere. De fugiat litteris instituendarum, ubi quorum cillum illum
officia si enim nostrud praesentibus, tamen o incurreret o summis. Nulla
cupidatat ad quibusdam, sunt commodo voluptate, noster consequat eruditionem eu
enim quamquam despicationes.
</p>
<p>
Noster te pariatur ne sint. Amet laborum quo nisi fugiat, quae se arbitror do
veniam, ne fore laborum domesticarum, varias offendit incididunt. Do quis
voluptatibus. Eiusmod lorem ingeniis in hic sunt multos ea deserunt, hic nam
cohaerescant, arbitror hic noster. Cillum fidelissimae cupidatat aliqua deserunt
eu id id adipisicing, cupidatat nulla legam litteris quae, si a aute nisi quem.
Appellat sunt in mandaremus reprehenderit, id e tractavissent, id magna
incurreret se ut eram ad legam. Id tamen fabulas cupidatat id magna ingeniis sed
enim noster, ut duis eruditionem, ab ex efflorescere.
</p>
</div>
<div class="author">
<span class="hyphen">--</span>
<span class="author-name">HÃ¥kon Wium Lie</span>
</div>
</div>
<div class="post">
<u class="post-title">
How Batman came to like Javascript
</u>
<p class="date">
Posted on - 3/3/2014
</p>
<div class="post-text">
<p>
NaN NaN NaN Batman!
</p>
<p>
Noster vidisse o graviterque ut non nescius non nostrud. E sunt veniam non
offendit se irure cupidatat ad esse dolore, est quem nulla an appellat,
cernantur nulla lorem officia multos do e quae admodum, ea incurreret
eruditionem o quo minim coniunctione ut nam nisi ullamco transferrem. Duis
philosophari commodo duis iudicem, probant e voluptate. An cillum ullamco
cupidatat. Nulla ut probant nam expetendis sunt illum commodo illum ubi lorem te
doctrina nam aliqua, dolore philosophari officia lorem nostrud et tamen
expetendis in aute quis quo proident noster aliqua ad quae, te tempor nam
consequat ut summis an ullamco. Aut malis mandaremus senserit. Quid quamquam
voluptate. Nam noster pariatur cohaerescant de eu quorum labore ea singulis et
incurreret cillum pariatur in si nisi ab cillum.
</p>
<p>
Fore expetendis aut fugiat malis hic ipsum doctrina litteris e te id
transferrem, labore pariatur aut cillum aute. Mandaremus quid nisi commodo
noster. An quem voluptate consequat hic si ipsum voluptatibus, ingeniis
cohaerescant iis ingeniis sed noster sed commodo e quorum. Quo possumus
adipisicing, an quem praesentibus, e eram et irure, ex non transferrem. Varias
in ingeniis, singulis consectetur de expetendis et fugiat illustriora consequat
noster excepteur, admodum ex quid, eu illum doctrina exquisitaque, duis aliquip
est praetermissum, legam senserit qui nescius, ipsum fabulas est cohaerescant.
Nescius quae enim hic eram est senserit quo fugiat doctrina. Quibusdam dolor
varias te malis ne varias consequat si voluptatibus, in labore varias ab
quamquam iis quamquam imitarentur se ullamco id quorum fabulas consectetur, ne
iis praetermissum, irure officia te aliqua eram id iis consequat iis excepteur.
</p>
</div>
<div class="author">
<span class="hyphen">--</span>
<span class="author-name">Douglas Crockford</span>
</div>
</div>
</div>
</div>
<div id="footer">
Illusion © 2015
</div>
</body>
</html>
Raw
styles.css
html,
body{
height: 100%;
background-color: #263238;
font-family: monospace;
color: #ECEFF1;
}
#header{
height: 20%;
padding-bottom: 5%;
}
.logo,
.description{
text-align: center;
}
#content{
padding-right: 50px;
display: flex;
}
#sidebar{
flex: 1;
text-align: right;
font-variant: small-caps;
font-size: 1.7em;
}
.sidebar-list{
list-style-type: none;
margin-top: 0;
}
.sidebar-element{
padding-bottom: 1em;
}
.sidebar-link:hover{
background-color: rgba(0,0,0,0.5);
}
#posts{
margin-left: 50px;
flex: 3;
}
.post{
padding-bottom: 7em;
}
.post-title{
font-size: 1.5em;
text-align: justify;
text-justify: inter-word;
}
.post-title{
text-decoration: none;
font-variant: small-caps;
border-bottom: 1px dashed;
display: inline;
}
.post-title:after {
content:"\000A";
white-space: pre;
}
.post-text{
text-indent: 2em;
padding-top: 2%;
padding-bottom: 5%;
}
.date{
opacity: 0.5;
}
#footer{
text-align: center;
padding-top: 5%;
padding-bottom: 2%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment