<!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> <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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Google Font API
Twitter Bootstrap
Normalize
jQuery
v3.1.1
