dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first 2 lectures

Browse Source
This commit is contained in:
dqnid committed 2023-07-11 00:11:30 +02:00
1 parent 2cf84f4efd
commit 98a7c96117
289 files changed
+14886
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/final-after-S06/sass/components/_card.scss
+214
View File
@@ -0,0 +1,214 @@
.card {
// FUNCTIONALITY
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 52rem;
&__side {
height: 52rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
&-1 {
background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark);
}
&-2 {
background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
}
&-3 {
background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark);
}
}
}
&:hover &__side--front {
transform: rotateY(-180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
// FRONT SIDE STYLING
&__picture {
background-size: cover;
height: 23rem;
background-blend-mode: screen;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
&--1 {
background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark),
url(../img/nat-5.jpg);
}
&--2 {
background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark),
url(../img/nat-6.jpg);
}
&--3 {
background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark),
url(../img/nat-7.jpg);
}
}
&__heading {
font-size: 2.8rem;
font-weight: 300;
text-transform: uppercase;
text-align: right;
color: $color-white;
position: absolute;
top: 12rem;
right: 2rem;
width: 75%;
}
&__heading-span {
padding: 1rem 1.5rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
&--1 {
background-image: linear-gradient(to right bottom,
rgba($color-secondary-light, .85),
rgba($color-secondary-dark, .85));
}
&--2 {
background-image: linear-gradient(to right bottom,
rgba($color-primary-light, .85),
rgba($color-primary-dark, .85));
}
&--3 {
background-image: linear-gradient(to right bottom,
rgba($color-tertiary-light, .85),
rgba($color-tertiary-dark, .85));
}
}
&__details {
padding: 3rem;
ul {
list-style: none;
width: 80%;
margin: 0 auto;
li {
text-align: center;
font-size: 1.5rem;
padding: 1rem;
&:not(:last-child) {
border-bottom: 1px solid $color-grey-light-2;
}
}
}
}
// FRONT SIDE STYLING
&__cta {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
text-align: center;
}
&__price-box {
text-align: center;
color: $color-white;
margin-bottom: 8rem;
}
&__price-only {
font-size: 1.4rem;
text-transform: uppercase;
}
&__price-value {
font-size: 6rem;
font-weight: 100;
}
//@include respond(tab-port) {
@media only screen and (max-width: 56.25em),
only screen and (hover: none) {
height: auto;
border-radius: 3px;
background-color: $color-white;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
&__side {
height: auto;
position: relative;
box-shadow: none;
&--back {
transform: rotateY(0);
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}
}
&:hover &__side--front {
transform: rotateY(0);
}
&__details {
padding: 1rem 3rem;
}
// FRONT SIDE STYLING
&__cta {
position: relative;
top: 0%;
left: 0;
transform: translate(0);
width: 100%;
padding: 7rem 4rem 4rem 4rem;
}
&__price-box {
margin-bottom: 3rem;
}
&__price-value {
font-size: 4rem;
}
}
}