<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 ----------> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <br> <br> <div class="container"> <div class="row underline"> <nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1">youtube</span></span> <div class="navbar-text "> <i class="fa fa-star" aria-hidden="true"></i> <p>Featured</p> </div> <div class="menu"> <div class="navbar-text "> <i class="fa fa-youtube-play" aria-hidden="true"></i> <p>Tv Serial</p> </div> <div class="navbar-text "> <i class="fa fa-film" aria-hidden="true"></i> <p>Movie</p> </div> <div class="navbar-text "> <i class="fa fa-smile-o" aria-hidden="true"></i> <p>Variety</p> </div> <div class="navbar-text "> <i class="fa fa-commenting" aria-hidden="true"></i> <p>Community</p> </div> <div class="navbar-text pull-right "> <img src="http://www.thehindu.com/migration_catalog/article16090501.ece/alternates/FREE_300/3bm_Dr-Strange-+GT1Q82TR.3.jpg.jpg" class="img-circle" > </div> <div class="navbar-text center pull-right "> <p>Mr.Strange</p> </div> </div> </nav> </div> <br> <div class="row"> <div class="block col-md-1"> <div class="box"> <h1>30</h1> <p>_</p> <p>NOV 2017</p> </div> </div> <div class="col-md-2 poster"> <img class="pswp__img" src="https://ia.media-imdb.com/images/M/MV5BNzQxNTIyODAxMV5BMl5BanBnXkFtZTgwNzQyMDA3OTE@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg" alt="Ashton Sanders in Moonlight (2016)"> </div> <div class="block col-md-1"> <div class="box-right"> <i class="fa fa-play" aria-hidden="true"></i> </div> </div> <div class="col-md-6 text-group"> <h1><B>MOONLIGHT</B></h1> <p>Same / American / English / 2017 / 1h22m</p> <div class="star-group"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i><b> 8.0</b></i> </div> <p></p> </div> </div> <br> </div>

body{ background-color:#e7e7e7; font-family: 'Comfortaa', cursive !important; } .container{ background-color:white; -webkit-box-shadow: 5px 13px 30px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 5px 13px 30px 0px rgba(50, 50, 50, 0.54); box-shadow: 5px 13px 30px 0px rgba(50, 50, 50, 0.54); } .navbar-brand{ font-family: 'Comfortaa', cursive; color:#3b7ac7; font-weight:700; margin-right:250px; } .navbar-text{ font-family: 'Comfortaa', cursive; text-align:center; color:#bbbbbb; font-weight:bold; } .navbar-text img{ height:30px; } .navbar-text:hover{ color:#3c8bed; cursor:pointer; } .navbar-text p { margin-bottom:0px; } .last{ position:relative; right:0px; } .center{ line-height: 35px; text-align: center; } .underline{ margin-top:0px; border-bottom:1px #e7e7e7 solid; } .poster{ po } .poster img{ width:400px; } .block{ width:60px; } .box{ position:relative; background-color:#3588f5; width:90px; height:130px; right:-50%; top:50px; z-index:999; padding:1px; text-align:center; color:white; cursor:pointer; } .box h1{ text-align:center; font-size:50px; margin-bottom:0px; padding-bottom:0px; } .box-right{ position:relative; background-color:#3588f5; width:80px; height:80px; left:165px; top:490px; z-index:999; padding:1px; text-align:center; color:white; cursor:pointer; font-size:30px; padding:20px; } .text-group{ margin-left:220px !important; } .text-group h1{ color:#07080f; } .text-group p{ color:#c1c0c0; } .text-group i{ color:#f0b932; font-style: normal; }