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

15 sep

Browse Source
This commit is contained in:
Daniel Heras Quesada committed 2023-09-15 16:02:08 +02:00
1 parent 14b32ac1ac
commit fe912888e4
6 files changed
+149 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/css/.DS_Store
Vendored
BIN
View File
Binary file not shown.
Natours/starter/css/style.css
+30
View File
@@ -213,6 +213,31 @@ body {
.feature-box:hover {
transform: translateY(-1.5rem) scale(1.03); }
.card {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem; }
.card__side {
color: #fff;
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden; }
.card__side--front {
background-color: #fff; }
.card__side--back {
transform: rotateY(180deg);
background-color: green; }
.card:hover .card__side--front {
transform: rotateY(180deg); }
.card:hover .card__side--back {
transform: rotateY(0); }
.header {
height: 95vh;
background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.801), rgba(40, 180, 133, 0.808)), url("../img/hero.jpg");
@@ -282,3 +307,8 @@ body {
transform: skewY(-7deg); }
.section-features > * {
transform: skewY(7deg); }
.section-tours {
background-color: #f7f7f7;
padding: 25rem 0 50rem 0;
margin-top: -10rem; }
Natours/starter/index.html
+75 -25
View File
@@ -1,23 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="./img/logo-white.png" alt="Logo" class="header__logo">
<img src="./img/logo-white.png" alt="Logo" class="header__logo" />
</div>
<div class="header__text-box">
<h1 class="heading--primary">
@@ -38,67 +41,114 @@
</div>
<div class="row">
<div class="col-1-of-2">
<h3 class="heading--terciary u-margin-bottom-small">You're going to fall n love with nature</h3>
<h3 class="heading--terciary u-margin-bottom-small">
You're going to fall n love with nature
</h3>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam, accusantium quo modi deserunt excepturi praesentium dolores dolorem cumque consequatur quod veniam!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
ipsum magnam, accusantium quo modi deserunt excepturi praesentium
dolores dolorem cumque consequatur quod veniam!
</p>
<h3 class="heading--terciary u-margin-bottom-small">Live adventure like never have before</h3>
<h3 class="heading--terciary u-margin-bottom-small">
Live adventure like never have before
</h3>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo ipsum magnam.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatibus non laboriosam sunt incidunt recusandae vitae nemo
ipsum magnam.
</p>
<a href="#" class="btn-text">Learn more &rarr;</a>
</div>
<div class="col-1-of-2">
<div class="composition">
<img src="img/nat-1-large.jpg" alt="Photo 1" class="composition__photo composition__photo--p1">
<img src="img/nat-2-large.jpg" alt="Photo 2" class="composition__photo composition__photo--p2">
<img src="img/nat-3-large.jpg" alt="Photo 3" class="composition__photo composition__photo--p3">
<img
src="img/nat-1-large.jpg"
alt="Photo 1"
class="composition__photo composition__photo--p1"
/>
<img
src="img/nat-2-large.jpg"
alt="Photo 2"
class="composition__photo composition__photo--p2"
/>
<img
src="img/nat-3-large.jpg"
alt="Photo 3"
class="composition__photo composition__photo--p3"
/>
</div>
</div>
</div>
</section>
<section class="section-features">
<div class="row">
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-world"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
<h3 class="heading-tertiary u-margin-bottom-small">
Explore the world
</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
tempora adipisci, laboriosam assumenda nostrum ab dicta.
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-compass"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
<h3 class="heading-tertiary u-margin-bottom-small">
Meet nature
</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
tempora adipisci, laboriosam assumenda nostrum ab dicta.
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-map"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
<h3 class="heading-tertiary u-margin-bottom-small">
Find your way
</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
tempora adipisci, laboriosam assumenda nostrum ab dicta.
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-heart"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
<h3 class="heading-tertiary u-margin-bottom-small">
Live a healthier life
</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
tempora adipisci, laboriosam assumenda nostrum ab dicta.
</p>
</div>
</div>
</div>
</section>
<section class="section-tours">
<div class="u-center-text u-margin-bottom-big">
<h2 class="heading--secondary">Most popular tours</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">TEXT</div>
<div class="card__side card__side--back">TEXT</div>
</div>
</div>
<div class="col-1-of-3">Col 1 of 3</div>
<div class="col-1-of-3">Col 1 of 3</div>
</div>
</section>
</main>
<!--
Natours/starter/sass/components/_card.scss
+37
View File
@@ -0,0 +1,37 @@
.card {
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 50rem;
&__side {
color: #fff;
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
background-color: green;
}
}
&:hover &__side--front {
transform: rotateY(180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
}
Natours/starter/sass/main.scss
+1
View File
@@ -10,6 +10,7 @@
@import "components/button";
@import "components/composition";
@import "components/feature-box";
@import "components/card";
@import "layout/header";
@import "layout/grid";
Natours/starter/sass/pages/_home.scss
+6
View File
@@ -16,3 +16,9 @@
transform: skewY(7deg);
}
}
.section-tours {
background-color: $color-grey-light-1;
padding: 25rem 0 50rem 0;
margin-top: -10rem;
}