15 sep
This commit is contained in:
Daniel Heras Quesada committed
1 parent
14b32ac1ac
commit
fe912888e4
6 files changed
+219
-95
No files matched your search
Vendored
BIN
Binary file not shown.
@@ -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; }
|
||||
+145
-95
@@ -1,107 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<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">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="header__text-box">
|
||||
<h1 class="heading--primary">
|
||||
<span class="heading--primary-main">outdoors</span>
|
||||
<span class="heading--primary-sub">is where life happens</span>
|
||||
</h1>
|
||||
|
||||
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section-about">
|
||||
<div class="u-center-text u-margin-bottom-big">
|
||||
<h2 class="heading--secondary">
|
||||
Exciting tours for adventurous people
|
||||
</h2>
|
||||
</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>
|
||||
<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!
|
||||
</p>
|
||||
<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.
|
||||
</p>
|
||||
<a href="#" class="btn-text">Learn more →</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"
|
||||
/>
|
||||
</div>
|
||||
<div class="header__text-box">
|
||||
<h1 class="heading--primary">
|
||||
<span class="heading--primary-main">outdoors</span>
|
||||
<span class="heading--primary-sub">is where life happens</span>
|
||||
</h1>
|
||||
|
||||
<a href="#" class="btn btn--white btn--animated">Discover our tours</a>
|
||||
</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>
|
||||
<p class="feature-box__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
||||
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</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>
|
||||
<p class="feature-box__text">
|
||||
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>
|
||||
<p class="feature-box__text">
|
||||
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>
|
||||
<p class="feature-box__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
|
||||
tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main>
|
||||
<section class="section-about">
|
||||
<div class="u-center-text u-margin-bottom-big">
|
||||
<h2 class="heading--secondary">
|
||||
Exciting tours for adventurous people
|
||||
</h2>
|
||||
</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>
|
||||
<p class="paragraph">
|
||||
<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>
|
||||
|
||||
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>
|
||||
<p class="paragraph">
|
||||
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 →</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">
|
||||
</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>
|
||||
<p class="feature-box__text">
|
||||
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>
|
||||
<p class="feature-box__text">
|
||||
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>
|
||||
<p class="feature-box__text">
|
||||
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>
|
||||
<p class="feature-box__text">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est tempora adipisci, laboriosam assumenda nostrum ab dicta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
<section class="grid-test">
|
||||
<div class="row">
|
||||
<div class="col-1-of-2">
|
||||
@@ -162,5 +212,5 @@
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@
|
||||
@import "components/button";
|
||||
@import "components/composition";
|
||||
@import "components/feature-box";
|
||||
@import "components/card";
|
||||
|
||||
@import "layout/header";
|
||||
@import "layout/grid";
|
||||
|
||||
@@ -16,3 +16,9 @@
|
||||
transform: skewY(7deg);
|
||||
}
|
||||
}
|
||||
|
||||
.section-tours {
|
||||
background-color: $color-grey-light-1;
|
||||
padding: 25rem 0 50rem 0;
|
||||
margin-top: -10rem;
|
||||
}
|
||||
Reference in new issue
Block a user