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 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.

Quick-add: + add another resource

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.

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.

            
              <section id="home">  
	<div class="navicon">
	<a href="#" class="menu"><i class="fa fa-navicon"></i></a>
	<nav class="nav">
		<ul>
			<li><a href="#home">home</a></li>
			<li><a href="#bio">bio</a></li>
			<li><a href="#work">work</a></li>
			<li><a href="#contact">contact</a></li>
		</ul>
	</nav> 
	</div>      	
<header>
  	<h1>CHRIS PRICE</h1>
    <h2>Front End Web Developer</h2>
 </header>
 <div class="arrow circle"><i class="fa fa-chevron-down"></i></div> 
</section>

<section id="bio">
	<div class="wrap clearfix">
 		<div class="contentWrap">
    	<div class="bioImgContainer">
      	<div class="imgBio">
        	<img src="http://thepowerofchriscompelsyou.com/images/profile.jpg" alt="Chris Price, Front End Web Developer">
       </div>    
     </div>
     <div class="bioContainer">
     	<h3>Logical. Rational. Inquisitive.</h3>
      <p>I believe websites are like people. They have personalities with needs, wants, and goals. It's up to me to pull those out and communicate that message. Whether you need web design, web development, graphic design, or someone in your corner helping you achieve your goals, I'm there for you. I can help guide you through every step of the process. It can be confusing at times but that's why you're talking to me. I have a need to create and help others. So let's get started.</p>
			</div>
		</div>
    <div class="socialWrap">
    	<div class="socialContainer">
                    	<a href="https://www.linkedin.com/in/chris-price-19a554130" title="Linkedin" class="circle"><i class="fa fa-linkedin"></i></a>
    	</div>
      <div class="socialContainer">
                    	<a href="https://www.freecodecamp.com/chrislasais" title="Free Code Camp" class="circle"><i class="fa fa-free-code-camp"></i></a>
     </div>
     <div class="socialContainer">
                    	<a href="https://github.com/chrislasais" class="circle"><i class="fa fa-github" title="Github"></i></a>
     </div>
     <div class="socialContainer">
                    	<a href="https://codepen.io/chrislasais/" title="Code Pen" class="circle"><i class="fa fa-codepen"></i></a>
			</div>
			<div class="socialContainer">
                    	<a href="https://teamtreehouse.com/chrisprice" class="circle"><i class="fa fa-tree" title="Treehouse"></i></a>
			</div>
		</div>
	</div>
</section>
<section class="labels">
	<div class="wrap">
		<h4><span>Selected Work</span></h4>
	</div>
</section>
<section id="work">
	<div class="wrap clearfix">

		<div class="contentWrap">
			<div class="imgWrap">
				<div class="imgContainer">
					<figure class="even">
						<img src="http://thepowerofchriscompelsyou.com/images/rusticflair.jpg" alt="Rustic Flair on Floyd">
					</figure>
					<figcaption>
						<div class="link">
							<a href="http://wwww.rusticflaironfloyd.com/index.html">View Site</a>
						</div>
					</figcaption>
				</div>
				<div class="imgContainer">
					<figure class="odd">
						<img src="http://thepowerofchriscompelsyou.com/images/littlephillies.jpg" alt="Little Phillies">
					</figure>
					<figcaption>
						<div class="link">
							<a href="http://wwww.littlephilliesga.com/index.html">View Site</a>
						</div>
					</figcaption>
				</div>
				<div class="imgContainer">
					<figure class="even">
						<img src="http://thepowerofchriscompelsyou.com/images/cp.jpg" alt="Chris Price">
					</figure>
					<figcaption class="hack">
						<div class="link">
							<a href="http://wwww.thepowerofchriscompelsyou.com/index.html">View Site</a>
						</div>
					</figcaption>
				</div>
				<div class="imgContainer">
					<figure class="odd">
						<img src="http://thepowerofchriscompelsyou.com/images/poynte.jpg" alt="POYNTE">
					</figure>
					<figcaption class="hack">
						<div class="link">
							<a href="http://www.thepowerofchriscompelsyou.com/poynte/index.html">View Site</a>
						</div>
					</figcaption>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="labels clearfix">
	<div class="wrap">
		<h4><span>Skills</span></h4>
	</div>
</section>
<section id="skills">
	<div class="wrap clearfix">
		<div class="skillsWrap">
			<div class="skills">
				<i class="fa fa-html5"></i>
			</div>
			<div class="skills">
				<i class="fa fa-css3"></i>
			</div>
			<div class="skills">
				<i class="fa fa-code"></i>
			</div>
		</div>
		<p class="description">I know enough to be dangerous with:<br>HTML, CSS, JavaScript, jQuery, Sass, Adobe Creative Cloud, Copy Writing, Web Hosting, Sarcasm</p>
	</div>
</section>
<section class="labels clearfix">
	<div class="wrap">
		<h4><span>Process</span></h4>
	</div>
</section>
<section id="process">
	<div class="wrap clearfix">
		<div class="processWrap">
			<div class="processContainer">
				<i class="fa fa-users circle"></i>
				<h5>Research</h5>
				<p>Determine your audience and set goals.</p>
			</div>
			<div class="processContainer">
				<i class="fa fa-bar-chart circle"></i>
				<h5>Planning</h5>
				<p>Discovering the personality of your project and how to execute your goals.</p>   
			</div>
			<div class="processContainer">
				<i class="fa fa-cogs circle"></i>
				<h5>Wireframing</h5>
				<p>The blueprint of your project.</p>
			</div>
		</div>
		<div class="processWrap">
			<div class="processContainer">
				<i class="fa fa-pencil circle"></i>
				<h5>Mockups</h5>
				<p>The look and feel of your project.</p>   
			</div>
			<div class="processContainer">
				<i class="fa fa-file-code-o circle"></i>
				<h5>Building</h5>
				<p>Coding your project and hooking up the bells and whistles.</p>
			</div>
			<div class="processContainer">
				<i class="fa fa-rocket circle"></i>
				<h5>Launching</h5>
				<p>Delivering your project to the world.</p>
			</div>
		</div>
	</div>
</section>
<section class="labels clearfix">
	<div class="wrap">
		<h4><span>Contact</span></h4>
	</div>
</section>
<section id="contact">
	<div class="wrap clearfix">
		<div class="contactWrap">
			<div class="contactContainer">
				<div class="contactInfo">
					<a href="tel:+16785202024">(678) 520-2024</a>
				</div>
				<div class="contactInfo">
					<a href="mailto:hi@thepowerofchriscompelsyou.com">hi@thepowerofchriscompelsyou.com</a>
				</div>
			</div>
		</div>
		<div class="socialWrap">
			<div class="socialContainer">
				<a href="https://www.facebook.com/monnomestchrispricedoncjesuis" title="facebook" class="circle"><i class="fa fa-facebook"></i></a>
			</div>
			<div class="socialContainer">
				<a href="https://plus.google.com/u/0/+ChrisPriceCompelsYou" title="google+" class="circle"><i class="fa fa-google-plus"></i></a>
			</div>
			<div class="socialContainer">
				<a href="https://www.linkedin.com/in/chris-price-19a554130" title="Linkedin" class="circle"><i class="fa fa-linkedin"></i></a>
			</div>
			<div class="socialContainer">
				<a href="https://twitter.com/chrislasais" class="circle"><i class="fa fa-twitter" title="twitter"></i></a>
			</div>
			<div class="socialContainer">
				<a href="https://instagram.com/chrislasais" class="circle"><i class="fa fa-instagram" title="Instagram"></i></a>
			</div>
		</div>
	</div>
</section>
<footer>
	<div class="wrap clearfix">
		<div class="footWrap">
			<div class="footContainer">
				<h5>About:</h5>
				<p>Hi, I'm Chris Price. I live in Covington, GA with my dog, Lucy. I have a passion for coding and helping others achieve theier goals. In my spare time I like to play guitar and listen to vinyl. Some would say I'm a little obsessed with baseball. I'd love to speak to you about your ideas and goals. Or maybe just baseball.</p>
			</div>
			<div class="footContainer">
				<div class="contactInfo footInfo">
					<a href="mailto:hi@thepowerofchriscompelsyou.com">Hire Me</a>
				</div>
			</div>
		</div>
		<h6>Made with <i class="fa fa-heart"></i> in GA</h6>
	</div>
</footer>	
            
          
!
            
              * {margin:0; padding:0; outline:0; border:0; vertical-align:baseline; font-size: 1em; line-height: 1.5; box-sizing:border-box;}
html, body {height: 100%;}
body {margin: 0; font-family:"Poppins", sans-serif; color:#252327;}
.clearfix:after {content:''; display:block; clear:both;}
.wrap {width:60%; margin:0 auto;}
img, object {max-width:100%;}
a {text-decoration:none; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
ul li {list-style:none;}
p {font-family: "Open Sans", sans-serif;}

#home {background:linear-gradient(rgba(63, 91, 130, .4),rgba(63, 91, 130, .4)), url("http://thepowerofchriscompelsyou.com/images/bg.jpg") center center no-repeat; background-size:cover; max-width:100%; height:auto; min-height:100vh;}
header {display: -moz-box; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh;}
.navicon {display: -moz-box; display:flex; align-content:flex-end; float:right; top:0; right:0;}
.menu {z-index:999;}
.menu i {color:#e9f2f7; font-size:1.75em; margin:20px 20px 0 0;}
.nav {position:fixed; display:none; height:auto; min-height:100vh; top:0; right:0; background:rgba(37, 35, 39, .75); z-index:888;}
.nav ul {margin-top:40px;}
.nav li a {padding:20px 40px; text-align:center; color:#e9f2f7;} 
.nav li a:hover {color:#99b1cb;}
.nav li {padding:20px;}
h1 {font-size:6em; font-weight:600; border:solid 5px #e9f2f7; padding:30px;}
h2 {padding-top: 15px; font-size:3em; font-weight:400;}
h1, h2 {color:#e9f2f7;}
.arrow {z-index:888; color:#3f5b82; background:#e9f2f7; margin:-70px auto 0 auto;}
.circle {width:60px; height:60px; border-radius:50%; display: -moz-box; display:flex; justify-content:center; align-items:center; font-size:1.5em;}

#bio, #skills, #contact {background:#99b1cb;}
.contentWrap {display: -moz-box; display:flex; padding:2.5% 0;}
.bioImgContainer {width:32%; margin:2% 2% 2% 0;}
.bioContainer {display: -moz-box; display:flex; width:68%; margin:2% 0 2% 2%; font-size:1.25em; flex-direction:column;}
.socialWrap {display: -moz-box; display:flex; justify-content:space-between; align-items:center; padding-bottom:5%;}
.socialContainer a {color:#e9f2f7; background:#3f5b82;}
.socialContainer a:hover {color:#99b1cb; background:#e9f2f7;}
h3 {color:#3f5b82; margin-bottom:10px;}

#work, #process {background:#e9f2f7;}
.imgWrap {display: -moz-box; display:flex; flex-wrap:wrap; justify-content:space-between;}
.imgContainer {width:50%; margin:2.5% 0;}
.even {margin-right:10px;}
.odd {margin-left:10px;}
.link {display: -moz-box; display:flex; justify-content:center;}
.link  a {font-size:1.5em; color:#252327; border: solid 2px #252327; padding:20px; display: -moz-box; display:flex; justify-content:center; align-items:center; align-content:center;}
.link  a:hover {color:#252327; background:#fff;}
figcaption {margin:2.5% 0;}

.skillsWrap {display: -moz-box; display:flex; justify-content:space-between; padding:5% 0;}
.skills i {color:#e9f2f7; background:#3f5b82; width:120px; height:120px; border-radius:50%; display: -moz-box; display:flex; justify-content:center; align-items:center; font-size:4rem;}


.processWrap {display: -moz-box; display:flex; justify-content:space-between; padding:5% 0;}
.processContainer {display: -moz-box; display:flex; align-items:center; flex-direction:column; width:33.333333333%;}
.processContainer:nth-child(2) {margin-left:1.666666666667%; margin-right:1.666666666667%;}
.processContainer i {background:#252327; color:#e9f2f7; margin-bottom:20px;}
.processContainer h5 {border-bottom:dotted 2px #252327; padding-bottom:5px; font-size:1.5em;}
.processContainer p {font-size:1.25rem; margin-top:20px;}


.contactWrap, .footWrap {display: -moz-box; display:flex; justify-content:space-between; padding:10% 0;} 
.contactContainer, .footContainer {display: -moz-box; display:flex; justify-content:space-between; flex:1;} 
.contactInfo {margin:2.5% 0;}
.contactInfo a {color:#e9f2f7; font-size:1.25em; border: solid 2px #e9f2f7; padding:30px;}
.contactInfo a:hover {color:#99b1cb; background:#e9f2f7;}

h4 {padding:2.5% 0;}
h4 span {font-size:1.5em; color:#e9f2f7; border:solid 2px #e9f2f7; padding:15px 20px; display:inline-block;}
.labels{background:#3f5b82;}
.description {padding:5% 0; text-align:center;}

footer {background:#252327; color:#e9f2f7;}
.footContainer {flex-direction:column;}
.footInfo {align-self:flex-end;}
.footInfo a:hover {color:#252327;}
h6 {margin-top:5%; text-align:center;}

@media screen and (min-width:320px) and (max-width:480px) {
.wrap {width:90%;}
h1 {font-size:2em; padding:10px;}
h2 {padding-top: 10px; font-size:1em;}
.nav {width:100%;}
.nav li a {padding:10px 20px;} 
.bioContainer {width:100%;}
.contentWrap, .imgWrap, .processWrap, .contactContainer, .footWrap {flex-direction:column;}
h4 {padding:10px 0;}
h4 span {font-size:1em; padding:10px 15px;}
.imgContainer {width:100%;}
.link a {font-size:1em; padding:10px;}
.skills i {width:60px; height:60px; font-size:2rem;}
.processContainer {width:100%;}
.processContainer:nth-child(2) {margin-left:0; margin-right:0;}
.contactInfo {margin:15% 0;}
.contactInfo a {font-size:1em; padding:10px;}
.footInfo {align-self:center;}
}
@-moz-document url-prefix() {.hack {margin:2.5% 0 20% 0;}
@media screen and (min-width:481px) and (max-width:1150px) {
.wrap {width:95%;}
.nav {width:100%;}
h1 {font-size:4em; padding:10px;}
h2 {padding-top:10px; font-size:2em;}
h4 {padding:10px 0;}
h4 span {font-size:1em; padding:10px 15px;}
.link a {font-size:1.25em; padding:10px;}
.contactContainer {flex-direction:column;}
.contactInfo {margin:10% 0;}
} 
            
          
!
            
                 $(document).ready(function(){
      $("a").on('click', function(event) {
        if (this.hash !== "") {
          event.preventDefault();
          var hash = this.hash;
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function(){
            window.location.hash = hash;
          });
        } // End if
      });
    });
	$(document).ready(function($){
	  var toggle = 0;
	  $('.menu, .nav a').click(function(e){
		e.preventDefault();
		
		if(toggle == 0) {
		  $('.nav').show("fast"); 
		  $('.menu i').removeClass('fa-navicon').addClass('fa-times');
		  toggle++;
		} else {
		  $('.nav').hide("fast");
		  $('.menu i').removeClass('fa-times').addClass('fa-navicon');
		  toggle = 0;
		}
	  });
	});
            
          
!
999px
Loading ..................

Console