<div class="container">
  <div class="cellphone-container">    
      <div class="movie">       
        <div class="menu"><i class="material-icons"></i></div>
        <div class="movie-img"></div>
        <div class="text-movie-cont">
          <div class="mr-grid">
            <div class="col1">
              <h1>Interstellar</h1>
              <ul class="movie-gen">
                <li>PG-13  /</li>
                <li>2h 49min  /</li>
                <li>Adventure, Drama, Sci-Fi,</li>
              </ul>
            </div>
          </div>
          <div class="mr-grid summary-row">
            <div class="col2">
              <h5>SUMMARY</h5>
            </div>
            <div class="col2">
               <ul class="movie-likes">
                <li><i class="material-icons">&#xE813;</i>124</li>
                <li><i class="material-icons">&#xE813;</i>3</li>
              </ul>
            </div>
          </div>
          <div class="mr-grid">
            <div class="col1">
              <p class="movie-description">A group of elderly people are giving interviews about having lived in a climate of crop blight and constant dust reminiscent of The Great 
              Depression of the 1930's. The first one seen is an elderly woman stating her father was a farmer, but did not start out that way. </p>
            </div>
          </div>
          <div class="mr-grid actors-row">
            <div class="col1">
              <p class="movie-actors">Matthew McConaughey, Anne Hathaway, Jessica Chastain</p>
            </div>
          </div>
          <div class="mr-grid action-row">
            <div class="col2"><div class="watch-btn"><h3><i class="material-icons">&#xE037;</i>WATCH TRAILER</h3></div>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE161;</i>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE866;</i>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE80D;</i>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
<a href="https://dribbble.com/geehm" target="_blank">
  <img class="dribbble-link" src="https://image.flaticon.com/icons/png/512/124/124037.png">
</a>
@import "compass";
$accent-color: #e7e7e7;
$brand-color:#fe4141;
$dark-color: #1e1b26;

body {  
  
  background:linear-gradient(
      rgba(30,27,38, 0.95), 
      rgba(30,27,38, 0.95)),
    url("https://i.ibb.co/FDGqCmM/papers-co-ag74-interstellar-wide-space-film-movie-art-33-iphone6-wallpaper.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
}

.container{
  width:100%;
  height:100%;
}
.cellphone-container{  
  width:375px;
  height:650px;
  background-color:#1e1b26;
  margin : 60px auto 0 auto;
  box-shadow:5px 5px 115px -14px black;
  border-radius: 4px;
}
.menu {
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 999;
  i {
    font-size: 40px;
    color: $brand-color;
    filter: drop-shadow(4px 4px 10px rgba(0,0,0,.5));
  }
}
.movie-img {
  width:100%;
  height:380px;
 background-image: url(https://i.ibb.co/FDGqCmM/papers-co-ag74-interstellar-wide-space-film-movie-art-33-iphone6-wallpaper.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  z-index:111 !important;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
			color-stop(0.00,  rgba(0,0,0,1)),
			color-stop(0.35,  rgba(0,0,0,1)),
			color-stop(0.50,  rgba(0,0,0,1)),
			color-stop(0.65,  rgba(0,0,0,1)),
			color-stop(0.85,  rgba(0,0,0,0.6)),
      color-stop(1.00,  rgba(0,0,0,0)));

  position:relative;

}

.movie{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+39,1e1b26+53&0+38,1+55 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 38%, rgba(255,255,255,0.06) 39%, rgba(30,27,38,0.88) 53%, rgba(30,27,38,1) 55%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 38%,rgba(255,255,255,0.06) 39%,rgba(30,27,38,0.88) 53%,rgba(30,27,38,1) 55%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 38%,rgba(255,255,255,0.06) 39%,rgba(30,27,38,0.88) 53%,rgba(30,27,38,1) 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1e1b26',GradientType=0 ); /* IE6-9 */

  position:absolute;
  background-size: contain;
  background-size: cover;
  z-index:1 !important;
  width:375px;
  height:660px;
  display:block;
  border-radius:4px;
}

.text-movie-cont{
  padding:0px 12px;
  text-align: justify;
}

.action-btn{
  text-align:right;
  i{
  color:$brand-color;
  font-size:28px;
  text-align:right;
  }  
}

.watch-btn {
  h3{
    i{
      font-size:14px;
      margin-right:2px;
      position: relative;
      float: left;
      line-height: 1;
    }
  }
  display:block;
  border:1px solid $brand-color;
  border-radius:5px;
  padding:4px;
  width:140px;
}

.action-row{
  margin-top:24px;
}

.summary-row{margin-top:12px;}

/* TYPOGRAPHY STARTS */

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic,700italic,800italic);

$heading-font-family: 'Montserrat', sans-serif;
$paragraph-font-family: 'Open Sans', sans-serif;

$light: 300;
$regular: 400;
$semi-bold: 600;
$bold: 700;
$font-regular: 400;
$mont-bold: 700;

$text-movie-title:36px;
$text-summary:12px;
$text-action-btn:14px;
$text-movie-description:12px;

h1,h2,h3,h4,h5 {
  font-family:$heading-font-family;
  color:$accent-color;
  margin:0px;
}

h1 {
  font-size:$text-movie-title;
  font-weight:$font-regular;
}

h3 {
  font-size:$text-action-btn;
  font-weight:$font-regular;
  color:$brand-color;
}

h5 {
  font-size:$text-summary;
  font-weight:$font-regular;
}

.movie-gen{
  margin:0px;
  padding:0px;
    li{
    font-family:$paragraph-font-family;
    font-size:$text-summary;
    color:darken( $accent-color, 40% );
    width:auto;
    display:block;
    float:left;  
    margin-right:6px;
    font-weight:$semi-bold;
  }
}

.movie-likes{
  @extend .movie-gen;
  float:right;
  li{
    color:$brand-color;
    &:last-child {
        margin-right: 0px;
    }
    i{
      font-size:14px;
      margin-right:4px;
      position: relative;
      float: left;
      line-height: 1;
    }
  }  
}

.movie-details {
  font-family:$paragraph-font-family;
  font-size:$text-summary;
  font-weight:$light;
  color:darken( $accent-color, 20% );
  @extend .elements-distance;
}

.movie-description {
  font-family:$paragraph-font-family;
  font-size:$text-movie-description;
  font-weight:$regular;
  color:darken( $accent-color, 30% );  
  @extend .elements-distance;
  text-align: justify;
  line-height: 1.3;
}

.movie-actors {
  font-family:$paragraph-font-family;
  font-size:$text-summary;
  font-weight:$light;
  color:$accent-color;
  font-style: italic;
  @extend .elements-distance;
}

/* TYPOGRAPHY ENDS */

/** GRID STARTS **/

.thegrid { margin: 0 auto; }

.elements-distance{margin:0px}

.mr-grid { width: 100%; }
    .mr-grid:before, .mr-grid:after { content: ""; display: table; }
    .mr-grid:after { clear: both; }
    .mr-grid { *zoom: 1; }

.col1, .col2, .col3, .col3rest, .col4, .col4rest, .col5, .col5rest, .col6, .col6rest{ 
	margin:0% 0.5% 0.5% 0.5%;
    padding:1%;
    float: left;
    display: block;
}

/* Columns match, minus margin sum. E.G. margin-left+margin-right=1%, col2=50%-1% - added padding:1%*/

.col1 { width: 98%; }
.col2 { width: 47%; }
.col3 { width: 30.3333333333%; }
.col4 { width: 22%; }
.col5 { width: 17%; }
.col6 {width:13.6666666667%;}

	
/* Columns match with their individual number. E.G. col3+col3rest=full width row */

.col3rest { width: 63.6666666667%; }
.col4rest { width: 72%; }
.col5rest { width: 77%; }
.col6rest { width: 80.3333333333%;}

.dribbble-link {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  border-radius: 50px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.