<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <div class="container header"> <div class="row"> <div class="col-md-6 header-left"> <i class="fab fa-canadian-maple-leaf fa-3x"></i> </div> <div class="col-md-6 header-right"> <h4>Learn from the best.</h4> </div> </div> </div> <div class="container content"> <div class="form-content"> <h4>Please fill out the details to continue with our website.</h4> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Username</span> </div> <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon2">Password</span> </div> <input type="password" class="form-control" aria-label="Password" aria-describedby="basic-addon2"> </div> <div class="input-group mb-3"> <button type="button" class="btn btn-default">Submit</button> </div> </div> </div>

.header{ border-top: 3px solid #28a745; background: #495057; color: #fff; width: 70%; padding: 1%; } .header-left i{ margin-left: 5%; } .header-right h4{ text-align: right; margin-right: 10%; line-height: 2; } .content{ background: #28a745; width: 70%; } .content .form-content{ padding:10%; } .content .form-content .input-group .input-group-text{ background:#333; color:#fff; border:none; border-radius:0; font-weight: 600; } .content .form-content .input-group input{ border-radius: 0; } .content .form-content .input-group input:focus{ border-color: transparent; } .content .form-content h4{ margin-bottom:5%; } .content .form-content button{ background: #333; color: #fff; border-radius: 0; width: 20%; font-weight: 600; }