<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"></i>124</li>
<li><i class="material-icons"></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"></i>WATCH TRAILER</h3></div>
</div>
<div class="col6 action-btn"><i class="material-icons"></i>
</div>
<div class="col6 action-btn"><i class="material-icons"></i>
</div>
<div class="col6 action-btn"><i class="material-icons"></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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.