<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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
col8
</div>
<div class="col-md-4">
col4
</div>
</div>
</div>
</section>
<section class="bg-warning py-5">
<div class="container py-5 my-5">
<div class="row">
<div class="col-md-8 mt-5">
<h1 class="text-light shadow-sm mb-5">It's Time To Create Your Own theme</h1>
<p class="text-light">Celebrated delightful an especially increasing instrument am. Indulgence contrasted sufficient to unpleasant in in insensible favourable. We don’t share your personal info with anyone.
Check out our Privacy Policy for more information.</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card shadow-lg">
<div class="card-body">
<div class="filter-sidebar ">
<h3><i class="fa fa-gavel"></i> Let's Login</h3>
<p class="text-secondary">Be the first to know about news from jQuery Conference 2016. Furthermore, you will receive a chosen few special newsletters shortly before.
</p>
<div class="form-group">
<input type="text" class="form-control border-info" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control border-info" placeholder="Password">
</div>
<hr>
<button type="btn" class="btn btn-success btn-block ">Sign In Now</button>
<div class="pb-3"></div>
<p class="small">We don’t share your personal info with anyone.
Check out our Privacy Policy for more information.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5">
<div class="container my-5">
<div class="row">
<div class="col-md-8">
<h1>Need work done?</h1>
<p>It's easy. Simply post a job you need completed and receive competitive bids from freelancers within minutes.
Whatever your needs, there will be a freelancer to get it done: from web design, mobile app development, virtual assistants, product manufacturing, and graphic design (and a whole lot more).
With secure payments and thousands of reviewed professionals to choose from, Freelancer.com is the simplest and safest way to get work done online.</p>
<h2>What's great about it?</h2>
<ul>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You only have to pay for work when it has been completed and you're 100% satisfied.</li>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You'll receive free bids from our talented freelancers within seconds.</li>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You only have to pay for work when it has been completed and you're 100% satisfied.</li>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You'll receive free bids from our talented freelancers within seconds.</li>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You only have to pay for work when it has been completed and you're 100% satisfied.</li>
<li><i class="fa fa-check-circle fa-1x text-success"></i> You'll receive free bids from our talented freelancers within seconds.</li>
</ul>
</div>
<div class="col-md-4 pt-5 mt-5">
<i class="fa fa-spinner sa "></i>
</div>
</div>
</div>
</section>
<section class="red py-5">
<div class="container">
<div class="row">
<div class="col-md-8">
col8
</div>
<div class="col-md-4">
col4
</div>
</div>
</div>
</section>
