cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <html>
<head>
<title>Darrell Callis Burks</title>

<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8"> 

<!-- Original Link Info from Site -->
<link type="text/css" rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300' rel='stylesheet' type='text/css'>

<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="cv" class="instaFade">
	<div class="mainDetails">
		<div id="headshot" class="quickFade">
			<img src="http://placehold.it/117x117" alt="dcb" />
		</div>
		
		<div id="name">
			<h1 class="quickFade delayTwo">DCB</h1>
			<h2 class="quickFade delayThree">Graphic Designer</h2>
		</div>
		
		<div id="contactDetails" class="quickFade delayFour">
			<ul>
				<li><a href="#aboutme">About Me</a></li>
				<li><a href="#contactlinks">Contact/Links</a></li>
				<li><a href="#keyskills">Key Skills</a></li>
				<li><a href="#projects">Projects</a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
	
	<div id="mainArea" class="quickFade delayFive">
		<section>
			<article>
				<div class="sectionTitle">
					<h1 id="aboutme">About Me</h1><img src="http://placehold.it/63x53">
				</div>
				<div class="sectionContent">
					<h2>Graphics geek that flies that flag proudly, loves design, never tires of learning, and has great customer service skills.
					Academic background includes emphasis on design and graphics for print and web.</h2>
					<br>
				</div>
			</article>
			<div class="clear"></div>
		</section>

		<section>
			<div class="sectionTitle">
				<h1 id="contactlinks">Contact / Links</h1><img src="http://placehold.it/63x53">
				</div>
				<div class="sectionContent">
					<h3><a href="https://www.freecodecamp.com/dcbghub" style="text-decoration: none">Free Code Camp</a></h3>
					<br>
					<h3><a href="https://codepen.io/DCBcodepen/#" style="text-decoration: none">Codepen</a></h3>
					<br>
		</div>
			<div class="clear"></div>
		</section>

	<section>
	<div class="sectionTitle">
		<h1 id="keyskills">Key Skills</h1><img src="http://placehold.it/63x53">
		
	</div>
		<div class="sectionContent">
		<ul class="keySkills">
			<div class="skillst">
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-1">
						<div class="title">InDesign</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-1">
						<div class="title">Photoshop</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-1">
						<div class="title">Illustrator</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-1">
						<div class="title">Acrobat</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="60%">
					<div style="width: 60%;" class="count-bar color-2">
						<div class="title">HTML/CSS</div>
						<div class="count"><span>60%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-2">
						<div class="title">CMS</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="30%">
					<div style="width: 30%;" class="count-bar color-2">
						<div class="title">Mag+</div>
						<div class="count"><span>30%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="100%">
					<div style="width: 100%;" class="count-bar color-3">
						<div class="title">Word</div>
						<div class="count"><span>100%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="90%">
					<div style="width: 90%;" class="count-bar color-3">
						<div class="title">Publisher</div>
						<div class="count"><span>90%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="90%">
					<div style="width: 90%;" class="count-bar color-3">
						<div class="title">PowerPoint</div>
						<div class="count"><span>90%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="90%">
					<div style="width: 90%;" class="count-bar color-4">
						<div class="title">QuarkExpress</div>
						<div class="count"><span>90%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="90%">
					<div style="width: 90%;" class="count-bar color-5">
						<div class="title">Corel Draw</div>
						<div class="count"><span>90%</span></div>
					</div>
				</div>
				<div class="skillbar" data-percent="50%">
					<div style="width: 50%;" class="count-bar color-6">
						<div class="title">Dreamweaver</div>
						<div class="count"><span>50%</span></div>
					</div>
				</div>
			</div>
		</ul></div>
	<div class="clear"></div>
	</section>
		
		<section>
			<div class="sectionTitle">
				<h1 id="projects">Projects:<br>Recent and Personal</h1><img src="http://placehold.it/63x53">
			</div>
			
			<div class="sectionContent">
				<article>
					<img src="http://placehold.it/536x268">
					<br>
					<img src="http://placehold.it/536x268">
					<br>
					<img src="http://placehold.it/536x268">
					<br>
					<img src="http://placehold.it/536x268">
					<br>
					<img src="http://placehold.it/536x268">
					<br>
					<img src="http://placehold.it/536x268">
				</article>
			</div>
			<div class="clear"></div>
		</section>
		
	</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3753241-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
            
          
!
            
              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;}

.clear {clear: both;}

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

#cv {
	width: 90%;
	max-width: 800px;
	background: #FFFFFF;
	margin: 100px auto;
}

.mainDetails {
	width: 100%;
	max-width: 800px;
	position: fixed;
	top: 0;
	z-index:1;
	border-bottom: 2px solid #FFD200;
	background: #005581;
}

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

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

h3 a {
	font-size: 1.75em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	color: #005581;
	text-decoration: none;
}

h3 a:hover {
	color: #FFD200;
}

#mainArea {
	padding: 0 40px;
}

#headshot {
	width: 13%;
	float: left;
	margin-top: 6px;
	margin-right: 30px;
	margin-left: 6px;
}

#headshot img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

#name {
	float: left;
}

#contactDetails {
	float: right;
}

#contactDetails ul {
	list-style-type: none;
	font-size: 0.9em;
	margin-top: 26px;
	margin-right: 23px;
}

#contactDetails ul li {
	margin-bottom: 3px;
	color: #FFFFFF;
}

#contactDetails ul li a, a[href^=tel] {
	color: #FFFFFF; 
	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: #FFD200;
}


section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
}

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

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

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

.sectionContent {
	float: right;
	width: 72.5%;
}

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

.sectionContent h2 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	margin-bottom: -2px;
}

.subDetails {
	font-size: 0.8em;
	font-style: italic;
	margin-bottom: 3px;
}

.keySkills {
	list-style-type: none;
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	margin-bottom: 20px;
	font-size: 1em;
	color: #005581;
	text-decoration: none;
}

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

@media all and (min-width: 602px) and (max-width: 800px) {
	#headshot {
		display: none;
	}
	
	.keySkills {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	}
}

@media all and (max-width: 601px) {
	#cv {
		width: 95%;
		margin: 10px auto;
		min-width: 280px;
	}
	
	#headshot {
		display: none;
	}
	
	#name, #contactDetails {
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.sectionTitle, .sectionContent {
		float: none;
		width: 100%;
	}
	
	.sectionTitle {
		margin-left: -2px;
		font-size: 1.25em;
	}
	
	.keySkills {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
	}
}

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

	
	.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-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}
 
.delayOne {
	-webkit-animation-delay: 0, .5s;
	-moz-animation-delay: 0, .5s;
	animation-delay: 0, .5s;
}

.delayTwo {
	-webkit-animation-delay: 0, 1s;
	-moz-animation-delay: 0, 1s;
	animation-delay: 0, 1s;
}

.delayThree {
	-webkit-animation-delay: 0, 1.5s;
	-moz-animation-delay: 0, 1.5s;
	animation-delay: 0, 1.5s;
}

.delayFour {
	-webkit-animation-delay: 0, 2s;
	-moz-animation-delay: 0, 2s;
	animation-delay: 0, 2s;
}

.delayFive {
	-webkit-animation-delay: 0, 2.5s;
	-moz-animation-delay: 0, 2.5s;
	animation-delay: 0, 2.5s;
}







/* Skills Style */

.skillst{
	width:100%;
	color:#ffffff;
}
.skillst .skillbar{
	width: 100%;
	height: 23px;
	position:relative;
	margin-bottom:13px;
}
.skillst .count-bar{
	height: 100%;
	width:0px;
	position:relative;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.skillst .count-bar.color-1{
	background-color: #98002E;

}
.skillst .count-bar.color-2{
	background-color: #005581;

}
.skillst .count-bar.color-3{
	background-color: #FFD200;

}
.skillst .count-bar.color-4{
	background-color: #5E5E5E;

}
.skillst .count-bar.color-5{
	background-color: #A3a3A3;

}
.skillst .count-bar.color-6{
	background-color: #C4C4C4;

}
.skillst .title{
	font-size:9px;
	font-weight:300;
	padding-left:12px;
	line-height:23px;
	text-transform:uppercase;
}
.skillst .count{
	position:absolute;
	top:0;
	right:12px;
	line-height:23px;
	font-size:9px;
	font-weight:300;
}
/* End of Skill Style */






/* anchor and anchor styles */
:target:before { 
  display: block; 
  content: " "; 
  margin-top: -123px; 
  height: 123px; 
  visibility: hidden; 
}
/* end of anchor and anchor styles */
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console