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.

            
              <!doctype html>
<html lang="en">
  <head>
    <title>Prototype HTML Document</title>
    <!-- Declares Character Set-->
    <meta charset="utf-8" />
    <meta name="keywords" content="UALR, University of Arkansas at Little Rock, IT Amber" />
    <meta name="description" content="This is your elevator pitch" />
    <meta name="author" content="Thomas Wallace" />
    <link href="assets/css/screen.css" rel="stylesheet" />
      <link href="https://fonts.googleapis.com/css?family=Raleway|Slabo+27px" rel="stylesheet">
  </head>
  <body>
<div id="container"> 
  <div id="header">
<h1><a href="index.html">Midlife Crisis Koala</a></h1><!--(Document Title)-->
  </div><!--#header-->
  <div id="content">
<h2>Extra</h2> <!--(Primary Content Heading)-->
    
 <p><img src="http://ualr.edu/tswallace/assets/images/eit.jpg" alt="logo" class="alignright"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie varius dapibus. Sed porta tristique lectus ac luctus. Fusce condimentum ex sit amet mauris lacinia convallis. Praesent auctor tortor lectus, id vulputate neque tristique nec. Praesent vitae turpis viverra, aliquam urna pretium, tristique leo. <img src="http://ualr.edu/tswallace/assets/images/eit.jpg" alt="logo" class="alignleft"/>Mauris sodales velit ut ligula convallis, sit amet blandit nulla suscipit. Suspendisse vehicula lectus a enim rhoncus congue.

Quisque gravida lorem id ipsum fermentum, ut vestibulum erat hendrerit. Mauris nunc arcu, dapibus nec purus sit amet, convallis euismod quam. Quisque vitae dui eu quam sodales pulvinar. Nullam sit amet egestas velit. Praesent sem nisi, pharetra a cursus sit amet, volutpat nec lacus. <img src="http://ualr.edu/tswallace/assets/images/eit.jpg" alt="logo" class="aligncenter"/>Nulla eget sapien iaculis purus tempor dignissim sed nec nisl. <img src="http://ualr.edu/tswallace/assets/images/eit.jpg" alt="logo" class="aligncenter"/>Quisque non varius ipsum. Mauris quis semper mauris, sit amet dictum eros. Nunc dui neque, rhoncus et est id, ultricies pulvinar neque. Ut molestie lacus ac mi tincidunt fermentum. Nam eget enim quis diam finibus ultrices. Nunc non fringilla urna, in auctor nunc. Morbi eget felis ut nibh tincidunt luctus. Duis pharetra ex vel ligula dictum, ac luctus enim faucibus. Praesent ut sodales massa.

Aliquam tincidunt ut metus et dapibus. Nullam faucibus augue felis, eget euismod leo ultricies eu. Vivamus hendrerit ex arcu, eget fermentum nisi malesuada at. Ut a scelerisque lorem. Maecenas tempor lacinia est rutrum congue. Phasellus nunc felis, luctus ac cursus congue, pharetra eu lectus. Mauris congue nibh ligula, vitae dignissim urna accumsan sed. Fusce quam quam, aliquam in consequat quis, euismod ac arcu.

Cras euismod interdum nulla non egestas. Phasellus efficitur porta dolor et placerat. Praesent at finibus ligula, ut tristique eros. In sapien mi, fringilla sed gravida vitae, molestie eget augue. Nulla at ante nunc. Integer vehicula felis et massa finibus, et interdum neque mollis. Nam ac porttitor sem. Integer sed purus diam. Ut fermentum velit sem, eget sagittis lacus accumsan quis. Proin dictum porta rutrum. Fusce id tempor ipsum. Donec ut ante vitae ex varius dignissim. Cras ullamcorper arcu vel sem ultrices, non rutrum massa blandit.

Nam et elit cursus, dignissim arcu vel, consequat lectus. Duis efficitur risus ac dignissim laoreet. Etiam consectetur tortor id augue laoreet pretium id at mi. Vestibulum tortor mi, sagittis sed elementum a, ultrices sit amet magna. Nam porta eleifend tortor luctus sagittis. Phasellus et molestie metus, id fringilla lacus. Maecenas odio justo, viverra a nulla aliquet, finibus sagittis leo. Aenean tincidunt neque a ultrices tincidunt. Phasellus libero ante, laoreet sed magna vel, eleifend gravida purus. Etiam et sapien ut tortor mollis eleifend ut et nulla. Cras faucibus dolor vel vestibulum ornare. Nulla elementum, leo ut efficitur tristique, justo tortor cursus augue, vitae finibus tellus elit ac neque. Fusce porta feugiat malesuada. Etiam id ultrices est, id dignissim nunc.   </p>

  </div><!--#content-->
 <div id="sidebar"> 
   <div id="nav">
<ul>
  <li><a href="index.html" title="Take me Home!">Home</a></li>
  <li><a href="resources.html">Resources</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="extra.html">Extra</a></li>
</ul>
   </div><!--#nav-->
  </div><!--#sidebar-->
  <div id="footer">
<h6>&copy; 2017 Thomas Wallace</h6>
  </div><!--#footer-->
    </div><!--#container-->   
  </body> 
  
</html>  
            
          
!
            
              * {
margin:0;
padding:0;    
}

body{
background-color:#3E606F;
/* Trebuchet-based sans serif stack */
font-family: 'Slabo 27px', serif;   
line-height:1.6em;  
font-size:120%;    
}

#container{
width:960px;
background-color:#FCFFF5;
margin-left:auto;
margin-right:auto;    
margin-top:30px;
margin-bottom:30px;    
/* CSS Margin Shorthand */
margin: 60px auto;
/*Width,Stroke,Color*/
border: 5px solid lightgray;
border-radius:6px;    
-webkit-box-shadow: 3px 3px 28px 0px rgba(0,0,0,0.34);
-moz-box-shadow: 3px 3px 28px 0px rgba(0,0,0,0.34);
box-shadow: 3px 3px 28px 0px rgba(0,0,0,0.34);
}

#header{
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/7248/masthead.jpg");
height:220px;  
margin-bottom:30px;
}

#header h1 a{
display:block;
height:220px;
text-indent:100%;
white-space: nowrap;
overflow:hidden;    
}

h1, h2, h3, h4, h5, h6, caption, th{
font-family: 'Raleway', sans-serif;
}


#content{
width:620px;  
margin-left:30px;   
float:left;
}

#content h2{
    color:#3E606F;
    margin-top:12px;
    margin-bottom:18px;
    border-bottom:1px solid lightgray;
}

#content p{
    margin-top:12px;
    margin-bottom:18px;
}

table {
width:100%;
border:1px solid gray;
margin-top:12px;
margin-bottom:18px;
}
table caption{
font-style:normal;
margin-top:6px;
margin-bottom:9px;  
font-size:1.5em;  
font-weight:bold;
font-variant: small-caps;    
}
table tr:nth-child(odd){
background-color:#f2f2f2;
}

table tr:hover{
    background-color:lightgray;
}

table th{
border:1px solid gray;
background-color:#3E606F;   
padding: 7.5px 15px;
color:#ffffff;    
text-shadow: 3px 3px #000000;    
}
table td{
border:1px solid gray;  
padding: 7.5px 15px;
}

#content h3{
    margin-top:12px;
    margin-bottom:18px;
    border-left:5px solid #3E606F;
    padding-left: 10px;
}

#content ul, #content ol{
margin-top:12px;
margin-bottom:18px;
margin-left:2em;    
}

#content ul{
list-style: square;
}

#content ul ol{
    margin-top:0;
    margin-bottom:0
}

#content dl{
margin-top:12px;
margin-bottom:18px;
}
#content dt{
font-weight:bold;
}
#content dd{}

dd + dt {
margin-top:15px;
}

#content img{}

.shadow{
-webkit-box-shadow: -10px 18px 16px 0px rgba(0,0,0,0.23);
-moz-box-shadow: -10px 18px 16px 0px rgba(0,0,0,0.23);
box-shadow: -10px 18px 16px 0px rgba(0,0,0,0.23);
}

.aligncenter {
display:block;
margin: 12px auto 18px auto;    
}

blockquote{
margin:24px 60px 36px 60px;
border-left: solid 5px #3E606F;   
padding: 15px; 
font-size:1.4em;    
}
cite {display:block;
font-size:.5em;
text-align:right;
font-weight:bold;    
}

#sidebar{
width:250px;   
margin-left:30px;
float:left;    
}

#nav ul{}
#nav li{
list-style-type: none;
margin-bottom:15px;
}
#nav li a{
background-color:#3E606F;
display:block; 
color:#fff; 
padding:8px 15px;    
text-decoration:none; 
font-weight:bold;   
border-radius:6px 6px 0 0; 
border-bottom: 4px solid #000;    
background-color:#3E606F;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.89' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");    
}
#nav li a:hover{
background-color:#D1DBBD;
color:#3E606F;

}

#footer{
clear:both;
background-color:#D1DBBD;
padding:15px 30px;    
}

.alignright {
  float:right;
  margin: 10px 0 10px 30px;
  border: #ccc solid 5px;
  padding: 5px;
}

.alignleft {
  float:left;
  margin: 10px 30px 10px 0;
  border: #ccc solid 5px;
  padding: 5px;
}

.aligncenter{
  display:block;
  border: #ccc solid 5px;
  padding: 5px;
  margin: 10px auto;
  
}
            
          
!
999px
Loading ..................

Console

Open Chat