Skip to content

Instantly share code, notes, and snippets.

@Sth0nian

Sth0nian/CV.css

Last active March 1, 2016 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Sth0nian/9781147 to your computer and use it in GitHub Desktop.
Save Sth0nian/9781147 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CV.css
body {
background-color: gray;
}
article {
width:720px;
margin:auto;
margin-top: -10px;
font-family:helvetica,
verdana, sans-serif;
padding-bottom:3em;
background-color:white;
padding:10px;
}
/* titles */
h1 {
color:#66CC00;
font-size:32px;
}
h2, h3 {
color:#003300;
}
a {
color:#003300;
text-decoration:none;
}
a:hover {
color:#003300;
text-decoration:underline;
}
/* table of content */
.toc h3 {
font-size:14px;
padding:0;
margin:0;
}
.toc li {
list-style-type:none;
font-size:12px;
}
.toc ul {
margin:0;
padding:10px 0;
width:220px;
}
.toc img {
width: 80%;
height: 80%;
margin-left: 10%;
margin-right:10%;
}
/* helpers */
.bordered {
border:1px black solid;
}
.smalltext {
font-size: 8px;
color:black;
}
.mediumtext {
font-size:15px;
color:black;
}
.largetext {
font-size:20px;
color:black;
}
.blue {
color:blue;
}
.red {
color:red;
}
.green {
color:#003300;
}
.orange {
color:#cc6600;
}
.small {
width:200px;
}
.big {
width:640px;
}
.left {
float:left;
margin:0 20px 20px 0;
}
.right {
float:right;
margin:0 0 20px 20px;
}
.tabletype0 ul {
width:200px;
margin:2px;
}
.tabletype0 li {
background-color:rgba(188,188,0,0.6);
margin:1px;
}
.tabletype1 ul {
margin:5px;
}
.tabletype1 li {
background-color:orange;
}
.frontelement {
display:inline-block;
margin-right:10px;
width: 95px;
border-right:1px solid gray;
}
.frontelement0 {
display:inline-block;
margin-right:10px;
width: 190px;
border-right:1px solid gray ;
}
.boxed0 {
width:500px;
border: 1px solid gray;
border-radius: 4px;
padding:5px;
}
.italic {
font-style: italic;
}
.righttext {
float:right;
}
.lefttext {
float:left;
}
/* blockquote */
blockquote {
background:#edf3ff;
font-family:serif;
font-size:1.2em;
width:160px;
padding:15px;
font-style:italic;
}
Raw
CV.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Curriculum Vitae : Spongebob Squarepants</title>
<link rel="stylesheet" href="CV.css">
</head>
<body>
<article>
<h1>Curriciulum Vitae</h1>
<h2>Spongebob Squarepants</h2>
<!--table of content -->
<div class="toc small right">
<h3>Table of content</h3>
<ul>
<li class="red"><a href="#anchor1">Personal Details</a></li>
<li class="green smalltext"><a href="#anchor2">Education</a></li>
<li class="blue mediumtext"><a href="#anchor3">Professional History</a></li>
<li class="red largetext"><a href="#anchor4">Proficiencies</a></li>
<li class="red largetext"><a href="#anchor5">Interests and Achievements</a></li>
<li class="red largetext"><a href="#anchor6">References</a></li>
</ul>
<img class="small right" src="http://upload.wikimedia.org/wikipedia/en/5/5c/Spongebob-squarepants.png">
</div>
<p class="boxed0">In 1971, a small group of activists set sail to the Amchitka island off Alaska to try and stop a US nuclear weapons test. The money for the mission was raised with a concert, their old fishing boat was called “The Greenpeace”. </p>
<h3 id="anchor1">Personal Details</h3>
<ul>
<li><div class="frontelement0">Name</div>Spongebob <span class="italic">Julius Squarepants</span></li>
<li><div class="frontelement0">DOB</div>21 September 2003</li>
<li><div class="frontelement0">Nationality</div>Indian</li>
<li><div class="frontelement0">Address</div>Pineapple Under the Sea 1, 1232ns, The Sea</li>
</ul>
<h3 id="anchor2">Education</h3>
<ul>
<li><div class="frontelement0">Klam-Kindergarten</div>2003-2005</li>
<li><div class="frontelement0">Harbour-Highschool</div>2005-2007</li>
<li><div class="frontelement0">Underwater-University</div>2007-2010</li>
</ul>
<h3 id="anchor3">Professional History </h3>
<ul>
<li><div class="frontelement0">Krusty Krab</div>2010-present</li>
</ul>
<h3 id="anchor4">Proficiencies</h3>
<ul>
<li><div class="frontelement0">Chief Burger Flipper</div>A-class Certified</li>
<li><div class="frontelement0">Patty Maker</div>B-class [Uncertified]</li>
<li><div class="frontelement0">Dive-Master</div>[Hobbyist]</li>
<li><div class="frontelement0">Trumpeteer</div>Underwater Philharmonic</li>
</ul>
<h3 id="anchor5">Interests and Achievements</h3>
<blockquote class="left small">"Well it's no secret that the best thing about a secret, is secretly telling someone your secret, thereby secretly adding another secret to their secret collection of secrets. Secretly!"</blockquote>
<h3 id="anchor2">Education</h3>
<p>"As it turned out, all my angst was unnecessary," he later wrote. “Time has proven my post-trip despair to be utterly mistaken. The trip was a success beyond anybody's wildest dreams.”</p>
<p>The nuclear bomb the group had come to stop went off, but the tests planned for after that were cancelled. Five months after the group’s mission, the US stopped the entire Amchitka nuclear test programme. The island was later declared a bird sanctuary.</p>
<p>"Whatever history decides about the big picture, the legacy of the voyage itself is not just a bunch of guys in a fishing boat, but the Greenpeace the entire world has come to love and hate."</p>
<p>Today, Greenpeace is the world’s most visible environmental organisation, with offices in more than 40 countries and over 2.9 million members worldwide. Amchitka, it has turned out, was only the beginning of what would come to be a much bigger story.</p>
<h3 id="anchor6">References</h3>
<ul style="width:580px">
<li><div class="frontelement0">Squidward</div>Manager Krusty Krab : <span class="righttext">029-29384922</span></li>
<li><div class="frontelement0">Patrick</div>A Rock : <span class="righttext">123-523524412</span></li>
</ul>
<table>
<tr>
<th>
Header0
</th>
<th>
Header1
</th>
<th>
Header2
</th>
</tr>
<tr>
<td>
An element
</td>
<td>
Another element
</td>
<td>
Final element
</td>
</tr>
</table>
</arcticle>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment