<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href='http://fonts.googleapis.com/css?family=Oswald:700|Lobster|Pacifico|Armata|Josefin+Sans|Lobster|Shadows+Into+Light|Black+Ops+One' rel='stylesheet' type='text/css'> <div class="row"> <div class="col-md-6"> <form> <div class="row"> <div class="col-md-6"><h1>Please Login</h1></div> <div class="col-md-6"><h2>Metro look login site</h1><br /></div> </div> <div class='input'> <label for='username'><span class='glyphicon glyphicon-user'></span></label> <input type='text' class='input' placeholder='Username' name='username'/><br /> </div> <div class='input'> <label for='username'><span class='glyphicon glyphicon-lock'></span></label> <input type='password' class='input' placeholder='Password' /><br /> </div> <input type="submit" class='button' value='Login' /> </form> </div> <div class="col-md-6"> <div class="css-shapes-preview"> <h1 class='headng'>PORTFOLIO</h1> <p>A new login portfolio for website</p> </div> </div>

body{background: #006AD1; } form{ margin: 100px auto; width: 400px; } h1{ font-family: 'Lobster', calibri, arial; color: white; border-right: 5px solid white; font-size: 25px; letter-spacing: 2px; } h2{ font-family:'Pacifico',arial; font-size: 20px; color: white; font-weight: normal; } div.input{ background: #E0E0E0; border: 3px solid white; font-famil: 'Oswald', calibri; margin-bottom: 10px; color: #006AD1; } input.input{ color: #006AD1; border: none; font-family: '#006AD1', calibri; background: transparent; width: 95%; } .button{ background:#006AD1; border: none; color: #F7F7F7; padding: 5px 20px; font-weight: bold; font-family: 'Josefin Sans',calibri; font-size: 20px; transition-duration: 0.5s; } .button:hover{ color:#006AD1; border: none; background: #F7F7F7; transition-duration: 0.5s;} *, *:before, *:after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .css-shapes-preview{ position: relative; height: 200px; width: 200px; background-color: ; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 100px; } .headng{ font-family:'Black Ops One'; border:none; text-align:center; font-size:30px; font-weight: 900; text-decoration:underline; } p{ font-family:'Shadows Into Light'; color:#E0E0E0; text-align:center; }