<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<section class="container">
<div class="content">
<div class="wrapper">
<h3>Lorem Ipsum Doler</h3>
<h1>Become a member</h1>
<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="social">
<div class="google"><figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="18" viewBox="0 0 17 18" version="1.1">
<title>Google</title>
<path d="M10.7 11.1C10.4 10.6 10 10.3 9.6 9.9 9.1 9.6 8.6 9.3 8.3 8.8 7.7 7.8 9.1 7 9.7 6.3 11.1 4.8 10.7 1.9 8.9 0.8 9.3 0.8 10 0.9 10.4 0.8 10.8 0.7 11.4 0.2 11.8 0L7.3 0C5.9 0 4.4 0.2 3.3 1.1 2 2.1 1.3 3.8 1.9 5.5 2.5 7.3 4.5 8.1 6.3 7.9 6.2 8.3 6 8.6 6 9 6.1 9.5 6.4 10 6.7 10.4 5 10.5 3 10.7 1.7 11.8 0.5 12.9 0.1 14.7 1.2 16 2.3 17.4 4.5 17.6 6.1 17.5 7.6 17.4 9 16.9 10 15.9 11.4 14.6 11.8 12.5 10.7 11.1 10.5 10.9 10.9 11.3 10.7 11.1L10.7 11.1ZM6.6 7.3C3.6 7.3 2.3 0.8 5.7 0.8 7.4 0.8 8.2 2.6 8.5 4.1 8.7 5.5 8.4 7.3 6.6 7.3L6.6 7.3ZM9.6 15.2C8.6 16.8 5.8 16.7 4.3 16 2.7 15.3 1.9 13.3 3.3 12 4 11.4 4.9 11.1 5.7 11 6.2 11 6.7 10.9 7.2 11 7.5 11 7.7 11.2 8 11.4 9.2 12.3 10.5 13.6 9.6 15.2 9.4 15.5 9.7 14.8 9.6 15.2L9.6 15.2Z" fill="#D34836"/>
<polygon points="17 2.3 14.7 2.3 14.7 0 13.5 0 13.5 2.3 11.1 2.3 11.1 3.5 13.5 3.5 13.5 5.8 14.7 5.8 14.7 3.5 17 3.5" fill="#D34836"/>
</svg>
</figure>Sign up using google +</div>
<div class="facebook">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="18" viewBox="0 0 8 18" version="1.1">
<title>Facebook</title>
<path d="M5.3 18L1.8 18 1.8 9 0 9 0 5.9 1.8 5.9 1.8 4C1.8 1.5 2.8 0 5.6 0L8 0 8 3.1 6.5 3.1C5.4 3.1 5.3 3.5 5.3 4.3L5.3 5.9 8 5.9 7.7 9 5.3 9 5.3 18 5.3 18Z" fill="#3B5998"/>
</svg>
</figure>Sign up using facebook</div>
<div class="twitter">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="18" viewBox="0 0 22 18" version="1.1">
<title>Twitter</title>
<path d="M22.9 15.8C22.1 15.5 21.2 15.2 20.3 15.1 21.3 15.7 22 16.5 22.3 17.6 21.4 17.1 20.5 16.7 19.4 16.5 18.6 17.4 17.5 17.9 16.2 17.9 13.7 17.9 11.7 15.9 11.7 13.4 11.7 13.1 11.7 12.7 11.8 12.4 8.1 12.6 4.7 14.4 2.5 17.1 2.1 16.4 1.9 15.7 1.9 14.8 1.9 13.3 2.7 11.9 3.9 11.1 3.2 11.1 2.5 11.3 1.9 11.7 1.9 11.7 1.9 11.6 1.9 11.6 1.9 9.4 3.4 7.6 5.5 7.2 5.1 7.1 4.7 7.1 4.3 7.1 4 7.1 3.7 7.1 3.5 7.1 4 5.4 5.7 4.1 7.7 4 6.1 2.8 4.2 2.1 2.1 2.1 1.7 2.1 1.4 2.1 1 2.2 3 0.9 5.4 0.1 7.9 0.1 16.2 0.1 20.7 7 20.7 12.9 20.7 13.1 20.7 13.3 20.7 13.5 21.5 14.1 22.3 14.9 22.9 15.8" transform="translate(11.954099, 9.033602) scale(1, -1) translate(-11.954099, -9.033602) " fill="#55ACEE"/>
</svg>
</figure>Sign up using twitter</div>
</div>
</div>
<hr>
<div class="wrapper">
<ul>
<li>You can also sign in using an email address</li>
<li>Use your Email <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="6" viewBox="0 0 8 6" version="1.1">
<title>Arrow</title>
<g transform="translate(-1213.000000, -948.000000)">
<path d="M1220.9 951.3L1218.3 953.9C1218.2 954 1218.1 954 1218 954 1217.8 954 1217.7 954 1217.7 953.9 1217.5 953.7 1217.5 953.5 1217.7 953.3L1219.6 951.4 1213.4 951.4C1213.2 951.4 1213 951.2 1213 951 1213 950.8 1213.2 950.6 1213.4 950.6L1219.6 950.6 1217.7 948.7C1217.5 948.5 1217.5 948.3 1217.7 948.1 1217.8 948 1218.1 948 1218.3 948.1L1220.9 950.7C1221 950.9 1221 951.1 1220.9 951.3" id="arrow-thin-right" fill="#A4CC5D"/>
</g>
</svg></li>
</ul>
</div>
</div>
<div class="picture"></div>
</section>
<div class="thanks">Inspired by <a href="https://dribbble.com/shots/2314157-Daily-UI-Day-1" target="_blank">Gil</a></div>
</body>
/* Typo */
@import "https://fonts.googleapis.com/css?family=Lato:700|Roboto:300,400";
/* Box settings */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* Main */
body {
background-color: #4D515E;
}
.container {
width: 800px;
height: 600px;
background-color: #FFFFFF;
margin: 40px auto 0 auto;
border-radius: 8px 10px 10px 8px;
box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.5);
}
/* Left side content */
.content {
width: 500px;
height: 100%;
float: left;
}
.content h3 {
font-family: 'Lato', sans-serif;
font-weight: 700;
letter-spacing: 1px;
margin-top: 50px;
text-transform: uppercase;
font-size: 10px;
color: #A4ABB8;
}
.content h1 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 0.5px;
margin-top: 20px;
font-size: 38px;
}
.content p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 30px;
color: #A5ADBB;
font-size: 12px;
line-height: 24px;
}
.wrapper {
width: 395px;
padding: 0 10px;
margin-left: 50px;
overflow: hidden;
position: relative;
}
/* Social buttons */
.social {
margin: 50px 0;
}
.social > div {
font-family: 'Lato', sans-serif;
font-weight: 700;
letter-spacing: 1px;
width: 100%;
height: 60px;
border: 1px solid #E3E7EC;
border-radius: 5px;
color: #5E6570;
text-transform: uppercase;
font-size: 10px;
line-height: 60px;
text-align: left;
padding-left: 120px;
position: relative;
}
.social > div:nth-child(2) {
margin: 15px 0;
}
.social > div figure {
width: 24px;
height: 18px;
position: absolute;
top: 50%;
left: 40px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.social > div figure svg {
display: block;
margin: 0 auto;
}
.social > div:hover {
border-radius: 0;
border: 0;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
}
/* Line */
hr {
width: 100%;
height: 1px;
border: 1px solid #E8EFF6;
border-bottom: none;
margin-bottom: 30px;
}
/* Footer */
ul li {
display: block;
overflow: hidden;
padding-bottom: 1px;
}
ul li:first-child {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 12px;
color: #545B67;
}
ul li:last-child {
font-family: 'Lato', sans-serif;
font-weight: 700;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;
color: #A4CC5D;
position: absolute;
bottom: 1px;
right: 10px;
}
ul li:last-child svg {
display: inline-block;
}
/* Right side picture */
.picture {
width: 300px;
height: 100%;
float: right;
background: url("https://images.unsplash.com/photo-1429823040067-2c31b1d637ae?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c83379b83bca5b31df6eedea52337afa") no-repeat;
background-size: cover;
border-radius: 0 8px 8px 0;
}
/* Thanks for inspiration */
.thanks {
font-family: "Verdana", sans-serif;
font-size: 14px;
width: 800px;
margin: 15px auto;
text-align: right;
padding-right: 15px;
color: #FFFFFF;
}
.thanks a:visited, .thanks a:link {
color: #FFFFFF;
}
