A Pen by Stephy

Thumbnail
This awesome code was written by blindingstars, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright blindingstars ©

Technologies

  • 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