Skip to content

Instantly share code, notes, and snippets.

@ma-henderson
Created August 18, 2020 11:20
Show Gist options
  • Save ma-henderson/03eba5b31a65d30584e2f5eaef201b59 to your computer and use it in GitHub Desktop.
Save ma-henderson/03eba5b31a65d30584e2f5eaef201b59 to your computer and use it in GitHub Desktop.
Card and Video practice 1
<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>
* {
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