A Pen by ma-henderson on CodePen.
Created
August 18, 2020 11:20
-
-
Save ma-henderson/03eba5b31a65d30584e2f5eaef201b59 to your computer and use it in GitHub Desktop.
Card and Video practice 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link href="https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <section class="section-stories"> | |
| <div class="bg-video"> | |
| <video class="bg-video__content" autoplay loop muted> | |
| <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.ogv" type="video/ogg"> | |
| <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <h2 class="heading-secondary">Testimonials</h2> | |
| <div class="row"> | |
| <div class="col-1-of-2"> | |
| <div class="card"> | |
| <div class="card__side card__side-front"> | |
| <div class="story__heading">"These guys are top-notch, I've never had anything like it before!"</div> | |
| <p class="story__author">- Robert Polaski</p> | |
| </div> | |
| <div class="card__side card__side-back"> | |
| <div class="story"> | |
| <figure class="story__shape"> | |
| <img src="https://images.pexels.com/photos/210922/pexels-photo-210922.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="musicians" class="story__img"> | |
| <figcaption class="story__caption"> | |
| Robert Polaski | |
| </figcaption> | |
| </figure> | |
| <div class="story__title"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit amet minima aperiam aliquam. Voluptatibus libero.. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-1-of-2"> | |
| <div class="card"> | |
| <div class="card__side card__side-front"> | |
| <div class="story__heading">"I was hesitant at first but the free trial really convinced me"</div> | |
| <p class="story__author">- Julian Wells</p> | |
| </div> | |
| <div class="card__side card__side-back"> | |
| <div class="story"> | |
| <figure class="story__shape"> | |
| <img src="https://images.pexels.com/photos/935959/pexels-photo-935959.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="musicians" class="story__img"> | |
| <figcaption class="story__caption"> | |
| Julian Wells | |
| </figcaption> | |
| </figure> | |
| <div class="story__title"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit amet minima aperiam aliquam. Voluptatibus libero.. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-1-of-2"> | |
| <div class="card"> | |
| <div class="card__side card__side-front"> | |
| <div class="story__heading">"Absolutely incredible."</div> | |
| <p class="story__author">- Jonas Freitas</p> | |
| </div> | |
| <div class="card__side card__side-back"> | |
| <div class="story"> | |
| <figure class="story__shape"> | |
| <img src="https://images.pexels.com/photos/733767/pexels-photo-733767.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="musicians" class="story__img"> | |
| <figcaption class="story__caption"> | |
| Jonas Freitas | |
| </figcaption> | |
| </figure> | |
| <div class="story__title"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit amet minima aperiam aliquam. Voluptatibus libero.. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-1-of-2"> | |
| <div class="card"> | |
| <div class="card__side card__side-front"> | |
| <div class="story__heading">"I feel like I was able to fine-tune my approach"</div> | |
| <p class="story__author">- Victoria Smith</p> | |
| </div> | |
| <div class="card__side card__side-back"> | |
| <div class="story"> | |
| <figure class="story__shape"> | |
| <img src="https://images.pexels.com/photos/2531728/pexels-photo-2531728.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="musicians" class="story__img"> | |
| <figcaption class="story__caption"> | |
| Victoria Smith | |
| </figcaption> | |
| </figure> | |
| <div class="story__title"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit amet minima aperiam aliquam. Voluptatibus libero.. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: inherit; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| } | |
| .section-stories { | |
| font-family: Red rose, sans; | |
| margin: 2rem; | |
| padding: 3rem; | |
| // background: #ddd; | |
| height: 60rem; | |
| font-size: 1.6rem; | |
| position: relative; | |
| box-sizing: border-box; | |
| } | |
| .bg-video { | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| top: 0; | |
| left: 0; | |
| z-index: -2; | |
| opacity: 0.4; | |
| &__content{ | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| } | |
| .heading-secondary { | |
| padding: 1rem; | |
| color: white; | |
| text-align: center; | |
| font-size: 4rem; | |
| margin-bottom: 2rem; | |
| letter-spacing: 1rem; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| } | |
| // GRID | |
| @mixin clearfix { | |
| &::after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| } | |
| $gutter-horizontal: 5rem; | |
| $gutter-vertical: 3rem; | |
| .row { | |
| width: 90%; | |
| margin: 0 auto; | |
| &:not(:last-child) { | |
| margin-bottom: $gutter-vertical; | |
| } | |
| @include clearfix; | |
| } | |
| [class^=col-] { | |
| float: left; | |
| &:not(:last-child) { | |
| margin-right: $gutter-horizontal; | |
| } | |
| } | |
| .col-1-of-2 { | |
| // background: yellow; | |
| width: calc((100% - #{$gutter-horizontal})/2) | |
| } | |
| // CARD | |
| .card { | |
| position: relative; | |
| height: 20rem; | |
| &__side { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 20rem; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| width: 100%; | |
| margin-bottom: 0; | |
| box-shadow: 0 1rem 2.5rem rgba(0,0,0,.3); | |
| backface-visibility: hidden; | |
| transition: all 0.8s ease; | |
| &-front { | |
| background: rgba(0,0,0,.5); | |
| padding: 3rem; | |
| } | |
| &-back { | |
| transform: rotateY(180deg); | |
| &::after{ | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| left: 0; | |
| top: 0; | |
| background-image: linear-gradient(to right bottom, | |
| rgba(#23D1D1, 0.2) 20%, rgba(0,0,0,.2) 50%), | |
| url(https://images.pexels.com/photos/952670/pexels-photo-952670.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); | |
| background-size: 200%; | |
| opacity: .7; | |
| } | |
| } | |
| } | |
| &:hover &__side-front{ | |
| transform: rotateY(-180deg); | |
| } | |
| &:hover &__side-back{ | |
| transform: rotateY(0deg); | |
| } | |
| } | |
| // STORY | |
| .story { | |
| height: 100%; | |
| padding: 4rem 2rem; | |
| padding-left: 4.5rem; | |
| font-size: 1.6rem; | |
| color: white; | |
| font-weight: 300; | |
| &__heading { | |
| font-size: 2.2rem; | |
| margin-bottom: 2rem; | |
| font-weight: 700; | |
| color: #eee; | |
| } | |
| &__author { | |
| color: #eee; | |
| text-transform: uppercase; | |
| font-weight: 300; | |
| text-align: right; | |
| } | |
| &__shape{ | |
| margin: 0 auto; | |
| width: 12rem; | |
| height: 12rem; | |
| shape-outside: circle(50% at 50% 50%); | |
| clip-path: circle(50% at 50% 50%); | |
| float: left; | |
| transform: translate(-2rem); | |
| position: relative; | |
| } | |
| &__img { | |
| height: 100%; | |
| transform: translateX(-20%); | |
| z-index: 5; | |
| transition: all 0.3s ease; | |
| } | |
| &__caption { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| font-weight: 600; | |
| text-align: center; | |
| letter-spacing: 1px; | |
| color: white; | |
| z-index: 10; | |
| font-size: 1.6rem; | |
| transform: translate(-45%, 50%); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| &__shape:hover &__caption { | |
| opacity: 1; | |
| transform: translate(-45%, -50%); | |
| } | |
| &__shape:hover &__img{ | |
| filter: blur(4px) brightness(80%); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment