.card
.card_left
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/h8fnwL1.png'}
.card_right
%h1 KILL BILL: VOL. 1
.card_right__details
%ul
%li 2003
%li 111 min
%li Action
.card_right__rating
.card_right__rating__stars
%fieldset.rating
%input#star10{:name => "rating", :type => "radio", :value => "10"}/
%label.full{:for => "star10", :title => "10 stars"}
%input#star9half{:name => "rating", :type => "radio", :value => "9 and a half"}/
%label.half{:for => "star9half", :title => "9.5 stars"}
%input#star9{:name => "rating", :type => "radio", :value => "9"}/
%label.full{:for => "star9", :title => "9 stars"}
%input#star8half{:name => "rating", :type => "radio", :value => "8 and a half"}/
%label.half{:for => "star8half", :title => "8.5 stars"}
%input#star8{:name => "rating", :type => "radio", :value => "8"}/
%label.full{:for => "star8", :title => "8 stars"}
%input#star7half{:name => "rating", :type => "radio", :value => "7 and a half"}/
%label.half{:for => "star7half", :title => "7.5 stars"}
%input#star7{:name => "rating", :type => "radio", :value => "7"}/
%label.full{:for => "star7", :title => "7 stars"}
%input#star6half{:name => "rating", :type => "radio", :value => "6 and a half"}/
%label.half{:for => "star6half", :title => "6.5 stars"}
%input#star6{:name => "rating", :type => "radio", :value => "6"}/
%label.full{:for => "star6", :title => "6 star"}
%input#star5half{:name => "rating", :type => "radio", :value => "5 and a half"}/
%label.half{:for => "star5half", :title => "5.5 stars"}
%input#star5{:name => "rating", :type => "radio", :value => "5"}/
%label.full{:for => "star5", :title => "5 stars"}
%input#star4half{:name => "rating", :type => "radio", :value => "4 and a half"}/
%label.half{:for => "star4half", :title => "4.5 stars"}
%input#star4{:name => "rating", :type => "radio", :value => "4"}/
%label.full{:for => "star4", :title => "4 stars"}
%input#star3half{:name => "rating", :type => "radio", :value => "3 and a half"}/
%label.half{:for => "star3half", :title => "3.5 stars"}
%input#star3{:name => "rating", :type => "radio", :value => "3"}/
%label.full{:for => "star3", :title => "3 stars"}
%input#star2half{:name => "rating", :type => "radio", :value => "2 and a half"}/
%label.half{:for => "star2half", :title => "2.5 stars"}
%input#star2{:name => "rating", :type => "radio", :value => "2"}/
%label.full{:for => "star2", :title => "2 stars"}
%input#star1half{:name => "rating", :type => "radio", :value => "1 and a half"}/
%label.half{:for => "star1half", :title => "1.5 stars"}
%input#star1{:name => "rating", :type => "radio", :value => "1"}/
%label.full{:for => "star1", :title => "1 star"}
%input#starhalf{:name => "rating", :type => "radio", :value => "half"}/
%label.half{:for => "starhalf", :title => "0.5 stars"}
.card_right__review
%p The lead character, called 'The Bride,' was a member <br/> of the Deadly Viper Assassination Squad, led by her <br/> lover 'Bill.' Upon realizing she was pregnant with Bill's<br/> child, 'The Bride' decided to escape her life as a killer.<br/> She fled to Texas, met a young man, who, on the day<br/> of their wedding rehearsal was gunned down by....
%a{:href => "http://www.imdb.com/title/tt0266697/plotsummary?ref_=tt_stry_pl", :target => "_blank"} Read more
.card_right__button
%a{:href => "https://www.youtube.com/watch?v=ot6C1ZKyiME", :target => "_blank"} WATCH TRAILER
View Compiled
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
body {
background:#e2e2e2;
width:98%;
height:100vh;
.card {
width:800px;
height:400px;
background:transparent;
position:absolute;
left:0;
right:0;
margin:auto;
top:0;
bottom:0;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
&_left {
width:40%;
height:400px;
float:left;
overflow:hidden;
background:transparent;
img {
width:100%;
height:auto;
border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
position:relative;
}
}
&_right {
width:60%;
float:left;
background:#000000;
height:400px;
border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
h1 {
color:white;
font-family: 'Montserrat', sans-serif;
font-weight:400;
text-align:left;
font-size:40px;
margin:30px 0 0 0;
padding:0 0 0 40px;
letter-spacing:1px;
}
&__details {
ul {
list-style-type:none;
padding:0 0 0 40px;
margin:10px 0 0 0;
li {
display:inline;
color:#e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight:400;
font-size:14px;
padding:0 40px 0 0;
}
}
}
&__rating {
&__stars {
position:relative;
right:160px;
margin:10px 0 10px 0;
fieldset, label { margin: 0; padding: 0; }
.rating {
border: none;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
display: inline-block;
content: "\f005";
font-family: FontAwesome;
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float:right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
&__review {
p {
color:white;
font-family: 'Montserrat', sans-serif;
font-size:12px;
padding:0 40px 0 40px;
letter-spacing:1px;
margin:10px 0 10px 0;
line-height:20px;
}
a {
text-decoration:none;
font-family: 'Montserrat', sans-serif;
font-size:14px;
padding:0 0 0 40px;
color:#ffda00;
margin:0;
}
}
&__button {
a {
color:#ffda00;
text-decoration:none;
font-family: 'Montserrat', sans-serif;
border:2px solid #ffda00;
padding:10px 10px 10px 40px;
font-size:12px;
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/COMdoWZ.png);
background-size:12px 12px;
background-repeat:no-repeat;
background-position: 7% 50%;
border-radius:5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
a:hover {
color: #000000;
background-color: #ffda00;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/rFQ5dHA.png);
background-size:12px 12px;
background-repeat:no-repeat;
background-position: 10% 50%;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
padding:0 0 0 40px;
margin:30px 0 0 0;
}
}
}
}
View Compiled
/* No Thanks! */
This Pen doesn't use any external CSS resources.