Bootstrap 4 Startup Homepage

bootstrap-4-startup-homepage.markdown

Bootstrap 4 Startup Homepage

A Pen by Pila Louis on CodePen.

License.

index.html

<section id="introduction">
 <div class="container">
   <div class="row fill-viewport align-items-center">
     <div class="col-12 col-md-6">
       <h1 class="text-white">Coding on steroids</h1>
       <p class="lead text-white-70">Stop hiring engineers to write your code. Just use the 1kb script that magically solves all your problems and algorithms.</p>
       <a class="btn btn-primary" href="#" role="button">Try it yesterday</a>
     </div>
   </div>
 </div>
</section>





<section id="info--1">
  <div class="container">
    <div class="row fill-80-viewport pt-5 align-items-center">
      <div class="col d-none d-md-block align-self-end">
       <img src="http://bit.ly/2fyUtlS" class="img-fluid"/>
      </div>
      <div class="col">
       <h6 class="text-uppercase text-black-40">
        million dollar info
      </h6>
       <h2>We do what our competitors do, but with 500% more</h2>
       <p>Sed ut perspiciatis unde omnis iste natus error
        sit voluptatem accusantium doloremque laudantium,
        totam rem aperiam..</p>
      <!-- columns can be nested -->
      <div class="row">
        <div class="d-none d-md-block col">
          <h5>killer feature</h5>
          <p>veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.</p>
          <a href="#">learn more</a>
        </div>
        <div class="d-none d-lg-block col">
          <h5>second killer feature</h5>
          <p>veritatis et quasi architecto beatae vitae
            dicta sunt explicabo.</p>
          <a href="#">learn more</a>
        </div>
      </div>
    </div>
    </div>
  </div>
</section>





<section id="info-2" class="bg-dark">
 <div class="container">
   <div class="row align-items-center fill-80-viewport">
     <div class="col-12 col-md-6 my-5 order-2 order-md-1">
       <p class="text-uppercase text-white-40"><strong>faster development</strong></p>
       <h2 class="text-white">Coding has never been this fast. It's almost magical</h2>
       <p class="lead text-white-70">Stop hiring engineers to write your code. Just install one script that magically solves all your problems.</p>
       <a class="btn btn-light d-block d-md-inline-block py-3" href="#" role="button">Read the docs</a>
     </div>
     <pre class="col-12 col-md-6 my-5 order-1 order-md-2 py-4 border border-info rounded text-info">
      <span>1</span> <span> //codingSteroids.js</span> 
      <span>2</span>
      <span>3</span>   const data = {
      <span>4</span>        "purpose": {
      <span>5</span>        "getId": "#element",
      <span>6</span>        "companyName": "coolStartup",
      <span>7</span>      }
      <span>8</span>    }
      <span>9</span>     
      <span>10</span>   function codingSteroids(  
      <span>11</span>       data,
      <span>12</span>       getSteroidsType
      <span>13</span>   ) 
      <span>14</span>     
      <span>15</span>   function getSteroidsType() {
      <span>16</span>     return "codeHellish!"
      <span>17</span>   }
      </pre>
   </div>
 </div>
</section>






<section id="info-3">
  <div class="container">
    <div class="row fill-80-viewport align-items-center justify-content-end text-white">
      <div class="col-12 basis-md-50">
        <h6 class="text-white-40">
          what others think
        </h6>
        <h3>"Coding on Steroids is breath taking. I focus less on writing codes 
          while taking model shots around the world."</h3>
        <p class="text-uppercase text-white-70">Founder, The Ocumpious Startup</p>
      </div>
  </div>
  </div>
</section>






<section id="featured-on" class="bg-primary">
  <div class="container">
    <div class="row py-5 text-center text-white">
      <div class="col-12">
          <i class="fa fa-3x fa-free-code-camp my-3 mx-5" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-twitter my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-facebook my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-quora my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-reddit my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-pied-piper my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-paypal my-3 mx-4" 
             aria-hidden="true"></i>
          <i class="fa fa-3x fa-product-hunt my-3 mx-4" 
             aria-hidden="true"></i>
      </div>
    </div>
  </div>
</section>






<section id="feature-rundown">
  <div class="container">
    <div class="row mt-5">
      <div class="col-12 col-md-6 mx-auto mt-5 text-center">
        <h6 class="text-black-40 text-uppercase">
          The bitter truth
        </h6>
        <h3 class="text-black-70">On a scale of 1 to 10, we make your life easier 10/10, period.</h3>
      </div>
    </div>
    <div class="row mb-5">
        <div class="col-12 col-md-4 text-center">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">24/7 support</strong>  For
            your sake, we do not sleep.
          </p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">Fast</strong>  Like flash.
          </p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">Reliable</strong>  We never have a server downtime.
          </p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">Computational Analysis</strong>  like no other.
          </p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">Analytics</strong>  like no other.
          </p>
        </div>
        <div class="col-12 col-md-4 text-center mb-5">
          <img src="http://bit.ly/2yE6Z8h" class="mt-4"/>
          <p>
            <strong class="text-info">Affordable</strong> as coffee.
          </p>
        </div>
    </div>
  </div>
</section>






<section id="pricing" class="bg-light">
    <div class="container fill-80-viewport">
        <div class="row">
          <div class="col-12 col-md-6 mx-auto text-center my-5">
              <h6 class="text-black-40 text-uppercase">
                pricing
              </h6>
              <h3 class="text-black-70">we are very affordable</h3>
            </div>
        </div>   
        <div class="row pb-5">
        <div class="col-12 col-md-4 px-2 my-4 text-center">
        <h6 class="text-black-40 text-uppercase">
            Personal
          </h6>
        <img src="http://bit.ly/2y9EpP2" class="my-4"/>
        <p>Good enough power</p>
        <ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">     
          <li class="py-2"><strong>10k</strong> monthly requests</li>
          <li class="py-2"><strong>9am-5pm</strong> 
            technical support</li>
          <li class="py-2"><strong>Public</strong> 
            API access</li>
        </ul>
        <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>
        </div>   
        
        <div class="col-12 col-md-4 px-2 my-4 text-center">
          <h6 class="text-black-40 text-uppercase">
              Business
            </h6>
          <img src="http://bit.ly/2xKjVeS" class="my-4">
          <p>Perfect for small 
            businesses.</p>
          <ul class="list-unstyled  list-border-black-20 list-border-y text-left text-black-70">     
            <li class="py-2"><strong>100k</strong> monthly requests</li>
            <li class="py-2"><strong>9am-5pm</strong> 
              technical support</li>
            <li class="py-2"><strong>Public and Private</strong> 
              API access</li>
          </ul>
          <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>
        </div>  
        
        <div class="col-12 col-md-4 px-2 my-4 text-center">
          <h6 class="text-black-40 text-uppercase">
              Corporate
            </h6>
          <img src="http://bit.ly/2wjsVEl" class="my-4"/>
          <p>Unlimited super powers</p>
          <ul class="list-unstyled list-border-black-20 list-border-y text-left text-black-70">     
            <li class="py-2"><strong>10,000k</strong> monthly requests</li>
            <li class="py-2"><strong>9am-5pm</strong> 
              technical support</li>
            <li class="py-2"><strong>Public and Private</strong> 
              API access</li>
          </ul>
          <a class="btn btn-block btn-primary border-0 text-white py-3" href="#">Start</a>
        </div>
      </div>
      </div>  
</section>






<section id="footer" class="bg-dark">
  <div class="container">
    <div class="row fill-40-viewport py-5 text-white-70 align-items-center">
        <div class="col-12 col-md-6">
          <ul class="list-unstyled">
            <li><h6 class="text-white">ABOUT</h6></li>
            <li>We’ve been working on Coding on Steroids 
              for the all our lives. 
              A groundbreaking tech deserves such dedication, huh?  
              If you’d like to learn more, or are interested in a job, 
              contact us anytime at 
              <a class="text-white" href="https://twitter.com/OhansEmmanuel" target="_blank">@ohansemmanuel</a></li>
          </ul>
        </div>
        <div class="col-12 col-md-2">
          <ul class="list-unstyled">
            <li><h6 class="text-white">PRODUCT</h6></li>
            <li>Features</li>
            <li>Examples</li>
            <li>Tour</li>
            <li>Gallery</li>
          </ul>
        </div>
        <div class="col-12 col-md-2">
          <ul class="list-unstyled">
            <li><h6 class="text-white">APIS</h6></li>
            <li>Rich data</li>
            <li>Simple</li>
            <li>Real time</li>
            <li>Social</li>
          </ul>
        </div>
        <div class="col-12 col-md-2">
        <ul class="list-unstyled">
          <li><h6 class="text-white">LEGAL</h6></li>
          <li>Terms</li>
          <li>Legal</li>
          <li>Privacy</li>
          <li>License</li>
        </ul>
      </div>   
    </div>
  </div> 
</section>

style.css

#introduction {
  background: linear-gradient(rgba(100,181,246 ,1), rgba(0,0,0,0.8)), url('http://bit.ly/2fBj6OJ') 0% 0%/cover 
}


#info-3 {
  background: linear-gradient(rgba(100,181,246 ,0.3), rgba(0,0,0,0.8)),url("http://bit.ly/2xMHeVk") 0% 0%/cover;
}


#feature-rundown img {
  width: 120px;
}

/*-===== dev ===== */
.debug {
  border: 2px solid red;
}
/*============ Utility classes. 
 Use coolstrap for faster ease of development ============*/

.fill-viewport {
  min-height: 100vh
}
.fill-40-viewport {
  min-height: 40vh
}
.fill-80-viewport {
  min-height: 80vh
}
.fill-90-viewport {
  min-height: 90vh
}
.jumbotron-transparent {
  background-color: transparent
}
.text-white-70 {
  color: rgba(255,255,255,0.7)
}
.text-black-70 {
  color: rgba(0,0,0,0.7)
}
.text-black-40 {
  color: rgba(0,0,0,0.4)
}
.text-white-40 {
  color: rgba(255,255,255,0.4)
}

/*== 1. 
  1. Borders along x an y
  2. Borders with colors i.e the shades of white and gray above
  3. Unordered list with borders all round
  4. Unordered list with borders along y, as in pricing table here
  5. Border size class*/

.list-border-y li {
  border-top: 1px solid
}
.list-border-y li:last-child {
  border-bottom: 1px solid
}
.list-border-black-20 li,
.list-border-black-20 li:last-child{
  border-color: rgba(0,0,0,0.2)
}




@media screen and (min-width: 768px ){
  /*need a 50% on medium devices and above */
  .w-md-50 {
    width: 50%
  }
  
  /*need to set flex-basis and have it dependent on size too
  usage tip: if you want the element to NOT be positioned in the
  center, add this class to a non `.container` div. Container divs in
  bootstrap are styled to seat in the center of the page. 
  */
  .basis-md-50 {
    flex-basis: 50%
  }  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />