<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="top-wrap"> <div class="row top"> <i class="fa fa-signal" aria-hidden="true"></i> <i class="fa fa-wifi" aria-hidden="true"></i> <p>06:29</p> <i class="fa fa-battery-half " aria-hidden="true"></i> </div> <div class="row first"> <i class="fa fa-chevron-left" aria-hidden="true"> </i> <i class="fa fa-share-alt" aria-hidden="true"></i> </div> <div class="row movie-name"> <h1 class="col-sm-12">SPIDERMAN:</h1> <h1 class="col-sm-12">HOMECOMING</h1> <span>PG-13</span> <span>133min</span> <span>Action/Advanture/Sci-fi </span> </div> <br/> <div class="row card"> <div class"col-sm-3"> <img src="https://ia.media-imdb.com/images/M/MV5BNTk4ODQ1MzgzNl5BMl5BanBnXkFtZTgwMTMyMzM4MTI@._V1_UX182_CR0,0,182,268_AL_.jpg" width="150px"> </div> <div class="col-sm-8"> <div class="col-xs-12"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/n9DwoQ7HWvI" allowFullScreen="allowFullScreen" frameBorder="0" ></iframe> </div </div> <div class="col-xs-12 form-inline"> <div class="block"> <p class="small"> IMDB</p> <small>8.3</small> </div> <div class="block"> <p class="small"> IMDB</p> <small>8.3</small> </div> <div class="block"> <p class="small"> IMDB</p> <small>8.3</small> </div> </div> </div> </div> <br/> <div class="col-sm-12 details"> </div> </div> </div>

body{ background-color:#f5f5f5; color:white; } .container{ margin-top:50px; max-width:450px; min-height:600px; background:#5eb2f6; background-image: url("https://www.sky.com/assets2/spider-man-homecoming-sky-cinema-tile-2189f517jpg"); background-position: 50% 50%; padding:0px; } .top-wrap{ background: linear-gradient(#64b5f6,#028eff00, #64b5f6); width:100%; padding:4px; } .top{ color:white; padding:15px; } .top p{ font-weight:bold; margin:0 auto; } .top i { color:white; margin-left:10px; } .first{ padding:5px; } .first i{ color:white; margin-left:20px; font-size:25px; } .fa-share-alt{ position:relative; right:-420px; } .movie-name{ margin-left:20px; margin-top:60px; } .movie-name h1{ color:white; transition: color 2s; font-size:40px; font-weight:bold; margin-bottom:0px; margin-left:0px; transition: margin-left 1s; cursor:pointer; } .movie-name span{ margin-left:20px; } h1:hover{ color:yellow; transition: color 1s; margin-left:10px; transition: margin-left 1s; } .card{ margin:0px auto; max-width:420px; height:400px; border-radius:10px; padding:10px; } .card img{ border-radius:10px; } .embed-responsive { border-radius:10px; } .col-xs-12{ display:inline-box; } .block{ margin-top:10px; border:1px #e6e6e6 solid; padding:5px; border-radius:5px; margin-left:5px; } .block i { } .block p { color:black; margin-top:px; margin-bottom:15px; } small{ font-weight:bold; color:yellow; font-size:40px; margin-bottom:0px; line-height:2px; } .block.heart { text-align:center; } .bloxk.heart p{ color: #ff5d72; } .details{ display:flex; }