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.

            
              <!DOCTYPE html>
<html>
<head>
	<title>Sky Balloon Design</title>
	<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
  integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
  crossorigin="anonymous"></script>
<!-- FontAwesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- CSS Local Link -->
<link rel="stylesheet" type="text/css" href="fccPersonalPage.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#"><i class="fa fa-skyatlas" aria-hidden="true"></i> Sky Balloon Design</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
    </div>
  </nav
>

        <div id="home">
        <h1><i class="fa fa-skyatlas" aria-hidden="true"></i> We Take You Higher.</h1>
        <p>Web Development for Small Businesses</p>
        <button type="button" class="btn btn-default"><a href="#portfolio">Take Flight</button></a>
      </div>

<div id="portfolio">
  <h1><span class="glyphicon glyphicon-folder-open"></span> Portfolio</h1>
  <hr class="divider">
    <p>Sky Balloon Design provides web design and various services. <p>Working closely with clients to understand the contents of their vision is what we believe in. </p>Satisfaction arrives in a modern and elegant website that you will fall in love with.</p>
  </br>
    <p>Come see the websites I've made so far. <p>They were all created using the Divi Frameworks but I'm hoping to code my own website by hand in the near future. </p><p>Below are some of the current clients I work with.</p>
</div>
<div class="screenShots">
<div class="row">
  <div class="col-md-4 dbs">
    <img class="img-responsive center-block portfolio-pic" src="http://www.skyballoondesign.com/wp-content/uploads/2017/01/DBS-Home-Page.png" alt="Dulles Barber">       
  </div>

  <div class="col-md-4 swm">
    <img class="img-responsive center-block rounded portfolio-pic" src="http://www.skyballoondesign.com/wp-content/uploads/2017/01/SWM-Home-Page.png" alt="Sightsee With Me">
    </div>

  <div class="col-md-4 tot">
    <img class="img-responsive center-block portfolio-pic" src="http://www.skyballoondesign.com/wp-content/uploads/2017/01/ToT-Home-Page.png" alt="Talk of the Town Languages & Cultural Services">        
  </div>
</div>
</div>  

<div id="about">
  <h1><span class="glyphicon glyphicon-user"></span> About</h1>
  <hr class="divider">
    <div class="row">
      <div class="col-md-6">
        <img class="img-responsive img-me center-block" src="http://www.spiritedtravelpreneur.com/wp-content/uploads/2016/01/3a86af993310f9af355314caaec683a4.jpeg" alt="That's me!">
      </div>
      <div class="col-md-6">
          <h1>I love to learn.</h1>
          <p>I'm learning web development on FreeCodeCamp, Lynda, and UDEMY right now. I love meeting new people and traveling too.</p>
          <br>
          <h1>Languages and Tools</h1>
            <p>HTML/CSS/JavaScript</p>
            <p>Github and Git</p>
            <p>Adobe Photoshop</p>
            <p>Microsoft Office</p>
            <p>Wordpress</p>
            <p>Divi Theme</p>
      </div>
    </div>
</div>

<div id="contact">
  <h1><span class="glyphicon glyphicon-envelope"></span> Contact</h1>
  <hr class="divider">
      <p>If you'd like to get in touch with me, send me a message! Thanks for visiting!</p>
      <br>
      <br>
    <div class="row">
      <div class="col-md-6">
        <label>
            <input name="name" type="text" placeholder="Name" required id="nameBox"></input>
        </label>
      </div>
      <div class="col-md-6">
        <label>
          <input name="email" type="email" placeholder="Email" required id="emailBox"></input>
        </label>
      </div>
    </div>
      <br>
    <div class="row">
      <div class="col-md-12">
      <label>
        <input name="message" type="text" placeholder="Message" required id="messageBox"></input>
      </label>
    </div>
      <br>
       <button>Submit</button>
    </div>
    </div>
</div>

<div id="footer">
    <div class="row">
    <div class="col-md-4">
      <h1>About This Page</h1>
      <p>A personal portfolio project page for Timothy H.</p>
      <p>Visit me on Free Code Camp.</p>
      <a href="https://www.freecodecamp.com/timh1203" target="_blank"><button type="button" class="btn btn-primary btn-lg outline" id="fcc-button">My FCC Page</button></a>
    </div>
    <div class="col-md-4">
      <h1>Quick Links</h1>
      <a href="#home"><p>Home</p></a>
      <a href="#portfolio"><p>Portfolio</p></a>
      <a href="#about"><p>About</p></a>
      <a href="#contact"><p>Contact</p></a>
    </div>
    <div class="col-md-4">
        <h1>Follow Me</h1>
          <div class="col-md-4"><a href="https://github.com/timh1203"><i class="fa fa-github fa-5x" aria-hidden="true"></i></a></div>
          <div class="col-md-4"><a href="https://twitter.com/timh1203"><i class="fa fa-twitter-square fa-5x" aria-hidden="true"></i></a></div>
          <div class="col-md-4"><a href="https://www.instagram.com/timh1203"><i class="fa fa-instagram fa-5x" aria-hidden="true"></i></a></div>
    </div>
    </div>
</div>

</body>
</html>
            
          
!
            
              
body {
	text-align: center;
	font-family: 'Josefin San, sans-serif;
	font-size: 20px;
}

.navbar {
	background-color: #000000;
}

h1 {
	text-align: center;
}

#home {
	padding: 100px;
	background: url(https://static.pexels.com/photos/68806/pexels-photo-68806.jpeg);
	background-size: cover;
	background-position: center;
	height: 500px;	
}

#portfolio {
	padding: 40px;
  font-size: 20px;
}

.screenShots {
	padding-bottom: 40px;
}

#about {
	padding: 40px;
	background-color: #4C9CDD;
  font-size: 20px;
}

#loveLearning {
  font-size:40px;
}
#contact {
	padding: 40px;
  font-size: 20px;
}

#nameBox {
	width: 500px;
}

#emailBox {
	width: 500px;
}

#messageBox {
	width: 1000px;
	height: 200px;
}

#footer {
	color: #ffffff;
	padding: 5px;
	background-color: #000000;
}

.divider {border-color: black;
  border-width: 5px;
  margin-top: 15px;
  margin-bottom:25px;
  max-width: 500px;
}
            
          
!
999px
Loading ..................

Console