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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                
<!DOCTYPE html>
<html>

<head>

<title>Eric's HTML Tracing Exercise</title>

<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="styles/styles.css">

</head>
<body>
<!--
    <section class="wrapper1"></section>
    <section class="wrapper2"></section>
    <section class="wrapper3"></section>
    <section class="wrapper4"></section>
    <section class="wrapper5"></section>
-->
    
<section class="wrapper1">
    <h1>Page Intro</h1>
    <h2>Donezo Donezo it's so funzo.</h2>
</section>

<section class="wrapper2">
    <h1>Section Title</h1>
    <section class="width1">
    <svg width="400" height="300">
        <rect width="400" height="300" style="fill:rgb(255,255,0);" />
    </svg>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod. Vivamus pulvinar posuere turpis congue laoreet. Suspendisse potenti. Sed fringilla, ex et dictum efficitur, augue nunc cursus elit, non lacinia diam ante et ipsum. Sed non commodo dolor. Sed vehicula aliquet nisl, sit amet convallis dolor posuere sed. Fusce consectetur quam diam, nec facilisis lectus congue non. Pellentesque sollicitudin mollis tempor. Vivamus mattis at quam a pretium. Aenean eget scelerisque mi, non rutrum felis. Maecenas facilisis imperdiet justo, ut sodales purus blandit vitae. Proin pellentesque laoreet lobortis. Sed feugiat ipsum eget lorem tempus commodo.</p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur lobortis, nisi pretium hendrerit tincidunt, ante erat tempor purus, id condimentum purus dolor ac urna. Nullam imperdiet, ipsum vitae posuere euismod, justo elit auctor augue, at molestie est nulla ut lorem. Nam eu aliquam ipsum, a pretium enim. Nulla non consectetur tortor, ac placerat turpis. Nam lobortis libero sed varius pellentesque. In dapibus arcu ut mauris accumsan, in tincidunt risus eleifend. Cras ut nulla vel eros iaculis rutrum eget sed felis.</p><p>
    Morbi et maximus ante, eu tincidunt ligula. Suspendisse elementum, leo quis sodales vehicula, velit enim hendrerit risus, vitae porttitor quam risus quis erat. Maecenas sed tellus et justo commodo tempor. Mauris augue nibh, varius nec faucibus sit amet, porttitor ut risus. Maecenas dapibus tellus felis, quis interdum magna lobortis at. Nam vel ornare turpis. Nulla facilisi. Morbi velit justo, vehicula vel tristique vitae, finibus sit amet eros. Quisque pellentesque erat quis enim vulputate posuere. Aliquam erat volutpat. Curabitur gravida mi at enim varius dignissim. Morbi vitae turpis ut ligula tincidunt varius eget ac lorem. Cras laoreet augue augue, non sodales libero elementum ultrices.
</p>
</section>
</section>

<section class="wrapper3">
    <h1>Section Title</h1>
<section class="width2">
<section class="collumn1">
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
</section>
<section class="collumn2">
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    </section>
    <section class="collumn1">
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
    <svg width="200" height="150">
    <rect width="200" height="150" style="fill:rgb(255,255,0);" />
    </svg>
</section>
<section class="collumn2">
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    <h3>Photo Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod.</p>
    </section>
</section>
</section>

<section class="wrapper4">
    <h1>Section Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan vitae massa quis euismod. Vivamus pulvinar posuere turpis congue laoreet. Suspendisse potenti. Sed fringilla, ex et dictum efficitur, augue nunc cursus elit, non lacinia diam ante et ipsum. Sed non commodo dolor. Sed vehicula aliquet nisl, sit amet convallis dolor posuere sed.</p>

</section>

<section class="wrapper5">
    <section class="footwrap">
        <section class="copyright">&copy; Copyright 2015</section>
        <section class="social"><i class="fa fa-facebook-square" aria-hidden="true"></i> <i class="fa fa-twitter-square" aria-hidden="true"></i> <i class="fa fa-linkedin-square" aria-hidden="true"></i></section>
    </section>
</section>

</body>

</html>
              
            
!

CSS

              
                body {
    font-family: Archivo Narrow, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-image: url("http://www.walkerteach.me/resources/html_tracing/images/bg.png");
	background-position: center top;
	height: 2315px;
}

.wrapper1 {
    height: 480px;
	background-color: rgba(255,0,0,0.5);
}

.wrapper1 h1 {
	font-size: 5rem;
	padding: 0;
	margin: 0;
	text-align: center;
	padding-top: 150px;
	/*color: red;*/
}

.wrapper1 h2 {
	font-size: 1.8rem;
	padding: 1px 0px 0px 0px;
	margin: 0;
	text-align: center;
	letter-spacing: .027rem;
}

.wrapper2 {
    height: 645px;
	background-color: rgba(255,255,0,0.5); 
}

.wrapper2 h1 {
    font-size: 2.45rem;
    letter-spacing: .03rem;
    padding: 0;
    margin: 0;
    padding-top: 40px;
    text-align: center;
    
}

.width1 {
    width: 960px;
    padding: 0; /* 30px 480px;*/
    margin: auto;
    margin-top: 33px;
}


.wrapper2 svg {
    float: right;
    padding: 0 0 10px 40px;
}

.wrapper2 p {
    font-size: 1.13rem;
    width: 960px;
    padding: 0; /* 30px 480px;*/
    margin: auto;
    letter-spacing: -.01px;
    line-height: 21px;
    margin-bottom: 14px;
    
}

.wrapper3 {
    height: 680px;
	background-color: rgba(0,255,0,0.5);
}

.wrapper3 h1 {
    font-size: 2.45rem;
    letter-spacing: .03rem;
    padding: 0;
    margin: 0;
    padding-top: 40px;
    text-align: center; 
}

.width2 {
    width: 960px;
    padding: 0; /* 30px 480px;*/
    margin: auto;
    margin-top: 30px;
}
   /* padding: 30px 480px;
    margin: 0;*/
.collumn1 {
    vertical-align: top;
    width: 20%;
    padding: 0 16px 0 0; /* 30px 480px;*/
    margin: 0;
    display: inline-block;
}

.collumn2 {
    vertical-align: top;
    width: 20%;
    padding: 0 72px 0 0; /* 30px 480px;*/
    margin: 0;
    display: inline-block;
}

.collumn1 svg {
    margin-bottom: 22px;
}

.collumn2 p {
    font-size: 1em;
    margin-bottom: 76px;
    line-height: 20px;
}

.collumn2 h3 {
    line-height: 0;
}

.wrapper4 {
    height: 412px;
	background-color: rgba(0,0,255,0.5);
}

.wrapper4 h1 {
    font-size: 2.45rem;
    letter-spacing: .03rem;
    padding: 0;
    margin: 0;
    padding-top: 40px;
    text-align: center;
    
}
.wrapper4 p {
    font-size: 1.75rem;
    width: 698px;
    padding: 0;
    margin: auto;
    margin-top: 32px;
    letter-spacing: -.35px;
    text-align: center;
    
}

.wrapper5 {
    height: 100px;
	background-color: rgba(0,255,255,0.5);
    padding: 0;
    margin: 0;
}
 
.footwrap {
    width: 959px;
    padding: 0;
    margin: auto;
}
.copyright {
    float: left;
    padding: 40px 0 0 1px;
    padding-top: 40px;
    font-size: 1.1rem;

}

.social {
    float: right;
    padding: 33px 0 0 0;
    font-size: 1.85rem;

}

/*    font-size: 1.13rem;
    width: 960px;
    padding: 0; 
    margin: auto;
    margin-top: 33px;
    letter-spacing: -.01px;
*/





              
            
!

JS

              
                
              
            
!
999px

Console