Item: A Pen by Stephy
Rating: 3.4
Author: blindingstars

0 Downloads
5 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Stephy</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="navbar navbar-light navbar-toggleable-sm mt-3">
  <div class="container"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">
      <span class="docker">Docker</span>&thinsp;<span class="weekly">Weekly</span>
    </a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link" href="#">Previous Issues</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-cta" href="#">Sign Up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

    <div class="container">
      <div class="jumbotron text-center mt-3">
        <div class="row">
        <div class="col-sm-8 offset-sm-2">
          <h2>Docker Weekly is a roundup of the week's top Docker news, delivered straight to your inbox</h2>
          
          <form class="row justify-content-center mt-5">
            <div class="form-group col-md-7 mb-0">
              <div class="d-flex mb-3">
                <label for="email" class="form-control-prefix">
                  <i class="fa fa-envelope-o"></i>
                </label>
                <input type="email" class="form-control form-control-suffix"
                       id="email" placeholder="Email address">
              </div>
              
              <button class="btn btn-primary">
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              Latest Posts
            </div>
            <div class="card-block">
              Dummy text
            </div>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              Latest Posts
            </div>
            <div class="card-block">
              Dummy text
            </div>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="card">
            <div class="card-header">
              Latest Posts
            </div>
            <div class="card-block">
              Dummy text
            </div>
          </div>
        </div>

      </div>
    </div>

<footer id="footer" class="text-center">
  <div class="container">
    Made with <i class="fa fa-heart"></i> in Australia
  </div>
</footer>
  <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>

  

</body>

</html>


/*Downloaded from https://www.codeseek.co/blindingstars/a-pen-by-stephy-OmGygm */
body {
  font-family: Roboto, sans-serif;
}

.navbar {
  background-color: #fff;
}

.navbar-brand {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Roboto Condensed', sans-serif;
}
.navbar-brand .docker {
  color: #297c96;
}
.navbar-brand .weekly {
  font-weight: 700;
  color: #159dcc;
}

.navbar-nav {
  width: 100%;
  justify-content: flex-end;
}
.navbar-nav .nav-item > .nav-link {
  color: #297c96;
  border-radius: 5px;
  border: 2px solid transparent;
  background: transparent;
}
.navbar-nav .nav-link.nav-cta {
  border-color: currentColor;
  padding-left: 1rem;
  padding-right: 1rem;
}

.form-control-prefix,
.form-control-suffix {
  height: 38px;
}

.form-control-prefix {
  border-radius: 5px 0 0 5px;
  background: #297c96;
  color: #fff;
  flex-basis: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-control-prefix .fa {
  margin-top: -5%;
}

.form-control-suffix {
  border-radius: 0 5px 5px 0;
  border-left: 0;
}

.jumbotron {
  background-color: #c2dde1;
}

.card, .card-header, .card-block {
  border-color: #b5c5ca;
}

.card-header {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Roboto Condensed', sans-serif;
  color: #35464b;
  background-color: #f0f4f5;
  border-bottom: 0;
}

.btn-primary {
  background-color: #159dcc;
  border-color: #159dcc;
  color: #fff;
}

footer {
  background: repeat-x url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 250 75" style="enable-background:new 0 0 250 75;" xml:space="preserve"><path fill="#fff" d="M248.9,0H1.1H0v8.9C0,45.4,56,75,125,75S250,45.4,250,8.9V0H248.9z"/></svg>') top center/70px, repeat-x url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 33.6" style="enable-background:new 0 0 250 33.6;" xml:space="preserve"><style type="text/css">.st0{fill:#895531;}.st1{fill:rgba(0,0,0,0.25);}</style><path class="st0" d="M252.7,33.6H-2.7V3c0,0,9.5,0,22.1,0s59.8-7.6,116.4,1.2C165.2,8.8,190.4,3,209.4,3s43.2,0,43.2,0V33.6z"/><g><circle class="st1" cx="31.7" cy="15.3" r="1.3"/><circle class="st1" cx="49.8" cy="6.7" r="0.8"/><circle class="st1" cx="60.5" cy="25.1" r="1.5"/><circle class="st1" cx="86.8" cy="12.1" r="1.8"/><circle class="st1" cx="133.3" cy="18.3" r="3"/><circle class="st1" cx="197.8" cy="16.8" r="1.5"/><circle class="st1" cx="222.1" cy="6.7" r="0.8"/><circle class="st1" cx="242.8" cy="25.1" r="1.5"/><circle class="st1" cx="218.8" cy="26.1" r="2.5"/><circle class="st1" cx="169.3" cy="21.9" r="0.7"/><circle class="st1" cx="234.2" cy="13" r="0.9"/><circle class="st1" cx="146.7" cy="24.6" r="2"/><circle class="st1" cx="150.1" cy="10.7" r="1.4"/><circle class="st1" cx="110" cy="8" r="1.3"/><circle class="st1" cx="99.2" cy="28" r="1.9"/><circle class="st1" cx="110.7" cy="25.8" r="0.8"/><circle class="st1" cx="77.2" cy="22.4" r="1.2"/><circle class="st1" cx="19.6" cy="24.2" r="1.6"/><circle class="st1" cx="34.1" cy="26.9" r="1.1"/><circle class="st1" cx="66.7" cy="10" r="0.7"/><circle class="st1" cx="124.6" cy="8.3" r="1.6"/><circle class="st1" cx="91.3" cy="3.6" r="1"/><circle class="st1" cx="188.6" cy="26" r="0.9"/><circle class="st1" cx="178.7" cy="11" r="1.1"/><circle class="st1" cx="15.3" cy="11.6" r="2.3"/><circle class="st1" cx="5.4" cy="18.2" r="1.4"/><circle class="st1" cx="2.4" cy="5.6" r="1"/><circle class="st1" cx="7.6" cy="27.8" r="0.8"/></g></svg>') bottom -8px center/120px, #159dcc;
  margin-top: 5rem;
  padding: 4.5rem 3rem 3rem;
}
footer .fa-heart {
  color: #fff;
  padding: 0.25rem;
  text-shadow: 1px 1px 1px #35464b;
}

Comments

More from blindingstars

A Pen by Stephy

Technologies

Comments

More from blindingstars

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

A Pen by Stephy

You Might Also Like

base for 3d graph dashboard widget

Background/Foreground Color Contrast

Using inline-block

transformation inheritance

Lesson 36

Pruebas con Three.js

Playback API Test

CSS Animation