<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://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="side-menu col-md-2"> <center> <div class="logo"> <p><img src="https://www.free-vectors.com/images/Signs-Symbols/236-letter-s-logo.png">Naked<b>groov</b></p> </div> <p class="title">Brows Music</p> <ui> <li><i class="fas fa-stroopwafel"></i>Discover</li> <li><i class="fas fa-stroopwafel"></i>Discover</li> <li><i class="fas fa-stroopwafel"></i>Discover</li> <li><i class="fas fa-stroopwafel"></i>Discover</li> <li><i class="fas fa-stroopwafel"></i>Discover</li> </ui> </center> </div> <div class="main-area col-md-10"> <div class="row top"> <div class="col-md-12"> <div class="gener"> <span>ELECTRONIC</span> <span>FUTUREBASS</span> </div> </div> </div> <div class="row bottom"> <div class="col-md-12"> </div> </div> </div> </div> </div>

body{ background-color:#f1f1f1; font-family: 'Ubuntu', sans-serif; } .side-menu{ background:white; height:100%; } .logo{ font-family: 'Ubuntu', sans-serif; margin-top:20px; font-size:18px; } .logo img{ width:45px; } .title{ color:#b7b7b7; font-weight:bold; } .side-menu ui{ font-weight:bold; list-style-type:none; } .side-menu ui li { font-size:14px; line-height:40px; vertical-align:bottom; } .side-menu ui li i{ margin-right:12px; color:#b7b7b7; font-size:17px; } .main-area{ } .top{ padding-left:50px; height:500px; background:url("https://images.unsplash.com/photo-1486495550307-d7b19c890553?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=516c2b4f59ca8deb2ea42e3c987ccef1&auto=format&fit=crop&w=1050&q=80"); background-position-y:-180px; } .gener{ margin-top:40px; } .gener span { color:white; padding:10px; background:black; border-radius:50px; opacity:0.5; text-align:center; margin-right:5px; } .bottom{ background:#f5f6fa; }