marksumoto/index.haml

## index.haml
.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

## movie-card-interactive-ui-with-pure-css3-animation-rating.markdown

      
    Raw
  

              movie-card-interactive-ui-with-pure-css3-animation-rating.markdown
            
          
    Movie Card Interactive UI With Pure CSS3 Animation Rating

A CSS3 Animated Movie Card From Dribble Shot: https://dribbble.com/shots/2217767-Movie-Card
Using CSS3 only to animate and keep track of the rating
Thank you all so much for your kind support and getting my pen featured on the CSS Design Awards Design/Dev Feed : http://www.cssdesignawards.com/articles/design-dev-feed-38/251/
A Pen by Reece McDonald on CodePen.
License.

  
## script.js
/* No Thanks! */

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

## style.scss
@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;
    }
}
}
}
	.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
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	@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;
	}
	}
	}
	}