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.

            
              <!-- start topbar --> 
  <nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
      <div class="navbar-header">    
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" href="#">Naomi Maria</a>
      </div>
    <div class="collapse navbar-collapse" id="myNavbar">  
    <ul class="nav navbar-nav">
        <li class="active">
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://dribbble.com/naomimaria" target="blank"><i class="fa fa-dribbble"></i></a></li>
        <li><a href="http://diario.naomi-maria.com/" target="blank"><i class="fa fa-tumblr"></i></a></li>
        <li><a href="https://www.instagram.com/naomari/" target="blank"><i class="fa fa-instagram"></i></a></li>
        <li><a href="https://twitter.com/naomimaria" target="blank"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.linkedin.com/in/naomimaria/" target="blank"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="https://www.facebook.com/naomaria/" target="blank"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://www.pinterest.com/naomimaria/" target="blank"><i class="fa fa-pinterest-p"></i></a></li>
        <li><a href="https://www.freecodecamp.com/naomimaria" target="blank"><i class="fa fa-free-code-camp"></i></a></li>
        <li><a href="https://github.com/naomimaria/" target="blank"><i class="fa fa-github"></i></a></li>
      </ul>
    </div>
  </div>
  </nav>

<!-- portfolio section -->    
<div class="container-fluid" id="portfolio">  
<h2>Portfolio</h2>
<div class="container">

  <p>A few of many WordPress sites I have installed, customized, managed, and created content for. Site modifications were done with CSS, not child themes.</p>
    <div class="row">
      <div class="col-sm-6">
        <h3>EWB: Indianapolis</h3>
        <a href="http://www.ewb-indianapolis.org/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-ewb-indy.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install, <i class="fa fa-hand-pointer-o"></i> Site Management</p> 
        </div>
      <div class="col-sm-6"> 
        <h3>CoAES</h3>
        <a href="http://www.coaes.org/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-coaes.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install, <i class="fa fa-hand-pointer-o"></i> Site Management</p>
        </div> 
    </div>
    <div class="row">
      <div class="col-sm-6">
        <h3>My Portfolio Site</h3>
        <a href="http://naomi-maria.com/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-naomimaria.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install, <i class="fa fa-pencil"></i> CSS Editing, <i class="fa fa-paint-brush"></i> Content Creation</p>
        </div>
      <div class="col-sm-6">
        <h3>Proprius</h3>
        <a href="http://propri.us/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-proprius.jpg" style="width:100%"></a>
        <i class="fa fa-server"></i> Site Install, <i class="fa fa-hand-pointer-o"></i> Site Management, <i class="fa fa-paint-brush"></i> Content Creation</p>
        </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <h3>Pucha Cay!</h3>
        <a href="http://naomi-maria.com/comics/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-pucha-cay.jpg" style="width:100%"></a>
        <p><i class="fa fa-server" target="blank"></i> Site Install, <i class="fa fa-pencil"></i> CSS Editing, <i class="fa fa-paint-brush"></i> Content Creation</p>
        </div>
      <div class="col-sm-6">
        <h3>Oh, Olio!</h3>
        <a href="http://oh-olio.com/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-oh-olio.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install, <i class="fa fa-pencil"></i> CSS Editing, <i class="fa fa-paint-brush"></i> Content Creation</p>
        </div>
          <div class="row">
     <div class="col-sm-6">
        <h3>Yoga Dance Theater</h3>
        <a href="http://www.yogadancetheater.com/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-yogadancetheater.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install</p>
        </div>
      <div class="col-sm-6">
        <h3>Carmen Rosa Portfolio</h3>
        <a href="http://carmen-rosa.com/" target="blank"><img src="http://naomi-maria.com/freecodeschool/project2/mockup-carmenrosa.jpg" style="width:100%"></a>
        <p><i class="fa fa-server"></i> Site Install</p>
        </div>
    </div>
</div>
</div>

<!-- about section --> 
<div class="container-fluid" id="about"> 
  <h2>About</h2>
  <div class="container">
    <div class="row">
     <div class="col-sm-9">
       <p>Hey! I'm Naomi Maria. I'm a graphic designer, illustrator, and visual artist. </p>
         <p>I do lot of pro-bono WordPress installs and site management for non-profits, but it's about time to brush up on HTML and CSS starting back with the basics because I haven't stayed on top of regularly working on building sites. I'm also enjoying learning Bootstrap and Ruby. </p> 
       <p>And now it's time for some lorem ipsum. Lorem ipsum dolor sit amet, inermis facilis ei sea. Usu elit accusata quaerendum et. Vim te soleat facete tamquam. Ad elit porro singulis duo. Illum omnesque in mel. Iuvaret adolescens vel in, nullam cetero integre cu pri. Mea ne case prima brute, ocurreret scriptorem suscipiantur ex mea. Has nibh possit antiopam ei.</p> 
       <p>Id bonorum ponderum cum. Illud argumentum accommodare has et, elitr habemus ei sed, eripuit facilisis mel et. Eam ne brute persius moderatius, at munere constituto pri. Invenire recteque mel et!</p>
      </div>
     <div class="col-sm-3">
       <img class="img-responsive" src="http://naomi-maria.com/freecodeschool/project2/dribbble.jpg" style="width:100%"> 
      </div>
  </div> 
  </div>
</div>

<!-- contact section -->
<div class="container-fluid" id="contact">
  <h2>Contact</h2>
  <div class="container"> 
    <p>Not a functioning form. Just dummy field boxes and a styled button. If you really want to talk to me, find me on social media!</p>
  <div class="row">
   <div class="col-sm-4">
     <form>
       <div class="form-group">
         <label for="inputsm">Email</label>
          <input class="form-control input-sm" id="inputsm" type="text">
        </div>
       <div class="form-group">
          <label for="inputsm">Subject</label>
          <input class="form-control input-sm" id="inputsm" type="text">
       </div>
    </div>
    <div class="col-sm-8">
       <div class="form-group">
         <label for="comment">Message</label>
         <textarea class="form-control" rows="6" id="comment"></textarea>
       </div>
       <button class="btn btn-default" type="submit"><i class="fa fa-envelope"></i> Send</button>
     </form>
    </div>
   </div>
   </div>
</div>

<!-- footer -->
<footer class="container-fluid text-center">
<p><small><a href="https://www.freecodecamp.com">FreeCodeCamp</a> Personal Portfolio Project by <a href="https://www.freecodecamp.com/naomimaria">Naomi Maria</a>.</small></p>
</footer>  
</div>
            
          
!
            
              /* important injections */
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Poppins'); 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* this gets rid of all the rounded corners in panels */
* {
  border-radius: 0 !important;
}

/* ----- */
body {
    font-family: Josefin Slab, serif;
    font-color: #5e5e5e;
    font-size: 16px
}
#about {
  background-color: #d6d6d6;
}

/* additional text attributes - NO PADDING OR MARGINS, except footer */

  h1 {
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    } 
  h2 {
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center; 
    } 
  
  h3 {
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;  
    text-align: center;
    }

  small {
    font-family: Poppins, sans-serif;
    letter-spacing: 1px;  
    text-align: center;
    font-size: 10px;
    }

  .navbar-brand {
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    }

  .navbar-nav {
    font-family: Poppins, sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    }

  footer {
    background-color: #d6d6d6;
    padding: 10px;
    }

/* areas - DO ADJUST MARGINS & PADDING HERE*/

p {
  margin: 10px 10px 0px 0px
}

div {
  margin: 1px 1x 0px 0px;
  padding: 5px;
}
            
          
!
999px
Loading ..................

Console