Bootstrap Landing Page

bootstrap-landing-page.markdown

Bootstrap Landing Page

A Pen by Mike Cavaliere on CodePen.

License.

index.html

<section id="welcome" class="jumbotron">
  <div class="container text-center">
    <h1>My Portfolio.</h1>
    <p>Write a sentence about what you do. Sell it well. Make the world know you're awesome.</p>
    <p><a class="btn btn-a btn-lg" href="#services" role="button">Learn more</a></p>
  </div>
</section>

<section id="services" class="section-services">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2>Services</h2>
        <h3 class="text-muted">Here are my specialties. I'm a badass at all of them. </h3>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-4">
        <span class="glyphicon glyphicon-menu-hamburger gi-5x"></span>
        <h4>Responsive Web Design</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      </div>
      <div class="col-md-4">
        <span class="glyphicon glyphicon-phone gi-5x"></span>
        <h4>Mobile Applications</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      </div>
      <div class="col-md-4">
        <span class="glyphicon glyphicon-cog gi-5x"></span>
        <h4>Full-Stack Development</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 text-center">
      <p><a class="btn btn-b btn-lg" href="#contact" role="button">Contact me.</a></p>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="section-contact">
  <div class="container">
    <div class="row text-center">
      <div class="col-md-8 col-md-offset-2">
        <h2>Contact Me</h2>
        <p>I'm available for full-time consulting work. Drop me a line, and let's start a conversation. </p>
      </div>
      <div class="col-xs-12">
        <a href="mailto:[email protected]" class="btn btn-c btn-lg">
          <span class="glyphicon glyphicon-envelope"></span>
          <span>[email protected]</span>
        </a>
      </div>
    </div>
  </div>
</section>

scripts

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

.btn {
  border-width: 0;
  border-radius: 3px;
  color: #2B3335;
}

.btn-a {
  background-color: #CFBBA9;
}

.btn-b {
  background-color: #AC9785;
}

.btn-c {
  background-color: #4E5356;
}

.btn-c span,
.btn-c {
  color: #C5B1A7;
  font-weight: normal;
  font-size: 1em;
  line-height: 1em;
  display: inline-block;
  vertical-align: middle;
}

section {
  padding: 150px 0;
  color: #2B3335;
}

.section-services {
  background: #EBEDEC;
}

.section-contact {
  background: #C5B1A7;
}

.section-contact a {
  color: #2B3335;
  font-size: 1.5em;
}

.font-weight-normal {
  font-weight: normal;
}

.font-weight-bold {
  font-weight: bold;
}

section.jumbotron {
  background-image: url(http://previews.123rf.com/images/rido/rido1506/rido150600049/41262919-Closeup-shot-of-laptop-with-digitaltablet-and-smartphone-on-desk-Modern-devices-on-desk-at-office-Th-Stock-Photo.jpg);
  background-size: cover;
  background-position: center center;
  color: white;
  position: relative;
  margin: 0;
}

section.jumbotron .container {
  padding: 200px 0;
}

section.jumbotron:before {
  content: "";
  position: absolute;
  opacity: .5;
  background: #000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

section.jumbotron .container {
  position: relative;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />