Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Responsive HTML/CSS CV template -->
<!-- Originally by Thomas Hardy; adapted by William Chase and Leslie Myint -->

<!DOCTYPE html>
<html>
<head>
<title>Hermione Granger - Curriculum Vitae</title>

<meta name="viewport" content="width=device-width"/>
<meta name="description" content="The Curriculum Vitae of Hermione Granger."/>
<meta charset="UTF-8"> 

<link type="text/css" rel="stylesheet" href="../css/cv.css">
<link href='https://fonts.googleapis.com/css?family=Rokkitt:regular,bold|Lato:regular,black' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="top">
<div id="cv" class="instaFade">
	<div class="mainDetails">
		<div id="name">
			<h1 class="quickFade delayOne">Hermione Granger</h1>
		</div>
		
		<div id="contactDetails" class="quickFade delayTwo">
			<ul class="fa-ul">
				<li><i class="fa-li fa fa-envelope" id="icon"></i>Email: <a href="mailto:YOUR EMAIL" target="_blank">viktorkrumfan14@magic.com</a></li>
				<li><i class="fa-li fa fa-user" id="icon"></i>Website: <a href="pottermore.com" target="_blank">pottermore.com</a></li>
        <li><i class="fa-li fa fa-github" id="icon"></i>GitHub: <a href="YOUR GITHUB" target="_blank">github.com/hermione</a></li>
        <li><i class="fa-li fa fa-twitter" id="icon"></i>Twitter: <a href="twitter.com/hermionegranger" target="_blank">twitter.com/hermionegranger</a></li>
			</ul>
		</div>
		<br />
		<div class="clear"></div>
	</div>
	
	<div id="mainArea" class="quickFade delayThree">
		<section>
			<div class="sectionTitle">
				<h1>Executive Summary</h1>
			</div>

			<div class="sectionContent">
				<article>
					<ul class="executiveSummary">
						<li>Couragous and quick-witted witch with expertise in transfiguation, charms, and history of magic</li>
						<li>Successfully brewed polyjuice potion as a second-year student at Hogwarts</li>
						<li>Earned 10 outstanding O.W.L.s</li>
						<li>Found of the Society for the Promotion of Elvish Welfare and organizer of Dumbledoor's Army</li>
						<li>Played an instrumental part in the destruction of horcruxes and defeat of the dark lord Voldemort</li>
					</ul>
				</article>
			</div>
    		<div class="clear"></div>
			<br />
		</section>

    	<section>
			<div class="sectionTitle">
				<h1>Education</h1>
			</div>
			
			<div class="sectionContent">
				<article>
					<span class="contentHeader">PhD in witchcraft</span>
					<span class="contentDate">May 2006</span>
					<p class="subDetails">Hogwarts School of Witchcraft and Wizardry</p>
				</article>
				<article>
					<span class="contentHeader">BSc in muggle studies</span>
					<span class="contentDate">May 2004</span>
					<p class="subDetails">Hogwarts School of Witchcraft and Wizardry</p>
				</article>
			</div>
			<div class="clear"></div>
			<br />
		</section>

		<section>
			<div class="sectionTitle">
				<h1>Research Experience</h1>
			</div>
			
			<div class="sectionContent">
				
				<article>
					<span class="contentHeader">Sassy B</span>
					<span class="contentDate">1999 - present</span>
					<p class="subDetails">Advisor: me, myself, and I</p>
					<p class="subDetails">
						<ul>
							<li>"Are you doing magic? Well, let's see it then."</li>
							<li>"Are you sure that's a real spell? Well, it's not very good is it."</li>
						</ul>
					</p>
				</article>
				<br />
				<article>
					<span class="contentHeader">Tutor</span>
					<span class="contentDate">2004 - 2008</span>
					<p class="subDetails">Hogwarts</p>
					<p class="subDetails">
						<ul>
							<li>
								Frequently tutored fellow Gryffindor students, particularly Harry Potter and Ronald Weasley. 
							</li>
						</ul>
					</p>
				</article>

			</div>
			<div class="clear"></div>
		</section>

		<section>
			<div class="sectionTitle">
				<h1>Publications</h1>
			</div>

			<div class="publications">
				<article>
				<ol>
					<li><b>Granger, H.</b> (2001) It's leviOsa, not levioSA. </li>
					<li><b>Granger, H.</b>, Weasley, R., Potter H. (2020). Not-so-magical Me: The True Story of Gilderoy Lockhart.</li>
				</ol>
				</article>
			</div>
			<div class="clear"></div>
		</section>

		<section>
			<div class="sectionTitle">
				<h1>Awards</h1>
			</div>
			
			<div class="sectionContent">
				<article>
					<span class="contentHeader">Time turner</span>
					<span class="contentDate">August 2003</span>
					<p class="subDetails">Was entrusted with the use of a time turner to allow enrollment in overlapping courses at Hogwarts</p>
				</article>
			</div>

			<div class="clear"></div>
			<br />
		</section>

		<section>
			<div class="sectionTitle">
				<h1>Skills</h1>
			</div>
			
			<div class="sectionContent">
				<b>Magic Skills</b>
				<ul class="keySkills">
					<li>Petrificus totalus</li>
					<li>Proficient in polyjuice potion brewing</li>
					<li>Can cast a corporeal petronus charm</li>
					<li>Can cast a protean charm</li>
					<li>Expert in non-verbal magic</li>
				</ul>
				<b>Other Skills</b>
				<ul class="keySkills">
					<li>Highly skilled researcher</li>
					<li>Proficient in reading runes</li>
					<li>Expert on the history of magic</li>
			</div>
			<div class="clear"></div>
		</section>
		
		<section>
			<div class="sectionTitle">
				<h1>References</h1>
			</div>
				<article>
					<div class="container">
						<div class="box">
							<div class="vcard">
				  				<span class="fn"><b>Minerva McGonagall</b></span>
				  				<div class="title">Headmistress</div>
				  				<div class="org">Hogwarts School of Witchcraft and Wizardry</div>
				  				<div>Relationship: Professor</div>
				  					<a class="email" href="mailto:mcgonagall@hogwarts.edu">mcgonagall@hogwarts.edu</a>
				  				<div class="tel">(000) 000-0000</div>
				  				<div class="adr">
				    			<div class="street-address">Hogwarts Castle</div>
				   					<span class="locality">Highlands</span>, 
				    				<span class="region">Scotland</span>, 
				    				<span class="postal-code">00000</span>
				    				<span class="country-name">Great Brittain</span>
			 					</div>
							</div>
						</div>

					  	<div class="box">
							<div class="vcard">
				  				<span class="fn"><b>Harry James Potter</b></span>
				  				<div class="title">Head of Department of Magical Law Enforcement</div>
				  				<div class="org">The Ministry of Magic</div>
				  				<div>Relationship: Best friend :)</div>
				  					<a class="email" href="mailto:potter@magic.org">potter@magic.org</a>
				  				<div class="tel">(000) 000-0000</div>
				  				<div class="adr">
				    			<div class="street-address">Ministry of Magic</div>
				   					<span class="locality">Westminster</span>, 
				    				<span class="region">London</span>, 
				    				<span class="postal-code">00000</span>
				    				<span class="country-name">England</span>
				 				</div>
							</div>
						</div>

					<div class="box">
						<div class="vcard">
			  				<span class="fn"><b>Neville Longbottom</b></span>
			  				<div class="title">Professor of Herbology</div>
			  				<div class="org">Hogwarts School of Witchcraft and Wizardry</div>
			  				<div>Relationship: Friend :)</div>
			  					<a class="email" href="longbottom@hogwarts.edu">longbottom@hogwarts.edu</a>
			  				<div class="adr">
			    			<div class="street-address">Hogwarts Castle</div>
			   					<span class="locality">Highlands</span>, 
			    				<span class="region">Scotland</span>, 
			    				<span class="postal-code">00000</span>
			    				<span class="country-name">Great Brittain</span>
			 				</div>
						</div>
					</div>
					</div>
				</article>
			<div class="clear"></div>
		</section>
		
		<section>
			<p>
				<a href="#top">Back to top</a>
			</p>
		</section>
</body>
</html>

<!-- Responsive HTML/CSS CV template -->
<!-- Originally by Thomas Hardy; adapted by William Chase and Leslie Myint -->
              
            
!

CSS

              
                
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	border:0;
	font:inherit;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}

html, body {
	background: #181818;
	font-family: 'Lato', helvetica, arial, sans-serif;
	font-size: 16px;
	color: #222;
}

body em {
	font-weight: bold;
	text-decoration: underline;
}

body b {
	font-weight: bold;
}

body i {
	font-style: italic;
}

.clear {
	clear: both;
}

p {
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom: 20px;
	color: #444;
}

#cv {
	width: 90%;
	max-width: 800px;
	background: #f3f3f3;
	margin: 30px auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

.mainDetails {
	padding: 25px 25px;
	border-bottom: 2px solid #cf8a05;
	background: #ededed;
}

#name h1 {
	font-size: 3em;
	font-weight: 700;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	margin-bottom: -6px;
}

#name h2 {
	font-size: 2em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
	padding: 0px 25px;
}

#name {
	float: left;
}

#contactDetails {
	float: right;
}

#contactDetails ul {
	list-style-type: none;
	margin-top: 2px;
}

#contactDetails ul li {
	margin-bottom: 3px;
	color: #444;
  	font-size: 15px;
}

#icon {
  font-size: 15px;
  color: #444;
}

#contactDetails ul li a, a[href^=tel] {
	color: #444; 
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

#contactDetails ul li a:hover { 
	color: #cf8a05;
}

section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
	overflow: hidden;	
	word-wrap: break-word;	
}

section:first-child {
	border-top: 0;
}

section:last-child {
	padding: 20px 0 10px;
}

.sectionTitle {
	float: left;
	width: 25%;
}

.sectionContent {
	float: right;
	width: 72.5%;
	padding-top: 10px;
}

.sectionTitle h1 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 1.8em;
	color: #cf8a05;
}

.sectionContent h2 {
	font-weight: bold;
	margin-bottom: 1px;
}

.contentHeader {
	font-weight: bold;
}

.contentDate {
	float: right;
}

.sectionContent ol, ul {
	margin-left: 35px;
}

.subDetails {
	font-size: 0.95em;
	/*font-style: italic;*/
	margin-bottom: 2px;
}

.executiveSummary {
  	list-style-type: disc;
	margin-bottom: 10px;
	font-size: 1em;
	color: #444;
	list-style-position: inside;
	text-indent: -1.5em;
	padding-left: 1em;
 	margin-left: 10px;
}

.executiveSummary li {
  	margin:0 0 6px 0;
}

.publications {
  	float: right;
  	width: 72.5%;
  	padding-top: 10px;
}

.publications li {
  	margin:0 0 6px 0;
}

.publications ul, ol {
  	margin-left: 15px;
}

.keySkills {
	list-style-type: disc;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 50px;
	column-gap: 50px;
	-moz-column-gap: 50px;
	margin-bottom: 20px;
	font-size: 1em;
	color: #444;
	list-style-position: inside;
	text-indent: -1.5em;
	padding-left: 1em;

}

.keySkills ul li {
	margin-bottom: 3px;
}


/*--------------FLEX GRID-------------*/

.container {
	width: 72.5%;
	float: right;
	padding-top: 10px;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-flow: wrap;
}

.box {
	width: 48%;
	height: 55%;
	margin-right: 10px;
  	margin-bottom: 10px;
	box-sizing: border-box;
}


/*--------------RESPONSIVE ELEMENTS-------------*/
@media all and (min-width: 602px) and (max-width: 800px) {
	.keySkills {
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
	}

  .box {
		width: 90%;
	}

}

@media all and (max-width: 601px) {
	#cv {
		width: 95%;
		margin: 10px auto;
		min-width: 280px;
	}
	
  .box {
		width: 90%;
	}
  
	#name, #contactDetails {
		float: none;
		width: 100%;
		text-align: left;
	}
	
	.sectionTitle {
		margin-left: -2px;
		font-size: 1.25em;
	}
	
	.sectionTitle, .sectionContent, .publications, .container {
		float: none;
		width: 100%;
	}

	.keySkills {
		-moz-column-count:1;
		-webkit-column-count:1;
		column-count:1;
	}

}

@media all and (max-width: 480px) {
	.mainDetails {
		padding: 15px 15px;
	}
	
	section {
		padding: 15px 0 0;
	}
	
	#mainArea {
		padding: 0 25px;
	}

  .box {
		width: 90%;
	}
  
	.keySkills {
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
	}
	
	#name h1 {
		line-height: .8em;
		margin-bottom: 4px;
	}
}

@media print {
	#cv {
		width: 100%;
	}
}

@-webkit-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.instaFade {
	-webkit-animation-name: reset, fade-in;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
	-moz-animation-duration: 1.5s;
	-moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
}

.quickFade {
	-webkit-animation-name: reset, fade-in;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-timing-
              
            
!

JS

              
                
              
            
!
999px

Console