Natours project finished
This commit is contained in:
dqnid committed
1 parent
ddb3d951af
commit
a45d6208d5
5 files changed
+215
-8
No files matched your search
@@ -459,6 +459,74 @@ body {
|
||||
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
|
||||
opacity: 1; }
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.82);
|
||||
z-index: 4000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.4s; }
|
||||
.popup__content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: table;
|
||||
width: 75%;
|
||||
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: all 0.4s 0.2s; }
|
||||
.popup__left {
|
||||
width: 33.3333333%;
|
||||
display: table-cell;
|
||||
vertical-align: middle; }
|
||||
.popup__right {
|
||||
width: 66.6666667%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 3rem 5rem; }
|
||||
.popup__img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.popup__text {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 4rem;
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4rem;
|
||||
-moz-column-rule: 1px solid #999;
|
||||
column-count: 2;
|
||||
column-gap: 4rem;
|
||||
column-rule: 1px solid #999;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; }
|
||||
.popup:target {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
.popup:target .popup__content {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1); }
|
||||
.popup__close:link, .popup__close:visited {
|
||||
color: #777;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s; }
|
||||
.popup__close:hover {
|
||||
color: #55c57a; }
|
||||
|
||||
.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");
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
<p class="card__price-only">Only</p>
|
||||
<p class="card__price-value">$279</p>
|
||||
</div>
|
||||
<a href="#" class="btn btn--white">Book now!</a>
|
||||
<a href="#popup" class="btn btn--white">Book now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -236,7 +236,7 @@
|
||||
<p class="card__price-only">Only</p>
|
||||
<p class="card__price-value">$279</p>
|
||||
</div>
|
||||
<a href="#" class="btn btn--white">Book now!</a>
|
||||
<a href="#popup" class="btn btn--white">Book now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -266,7 +266,7 @@
|
||||
<p class="card__price-only">Only</p>
|
||||
<p class="card__price-value">$279</p>
|
||||
</div>
|
||||
<a href="#" class="btn btn--white">Book now!</a>
|
||||
<a href="#popup" class="btn btn--white">Book now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -443,5 +443,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="popup" id="popup">
|
||||
<div class="popup__content">
|
||||
<div class="popup__left">
|
||||
<img src="img/nat-8.jpg" alt="Tour photo" class="popup__img" />
|
||||
<img src="img/nat-9.jpg" alt="Tour photo" class="popup__img" />
|
||||
</div>
|
||||
<div class="popup__right">
|
||||
<a href="#section-tours" class="popup__close">×</a>
|
||||
<h2 class="heading--secondary u-margin-bottom-small">
|
||||
Start booking now
|
||||
</h2>
|
||||
<h3 class="heading--terciary u-margin-bottom-small">
|
||||
Important – Please read these terms before booking
|
||||
</h3>
|
||||
<p class="popup__text">
|
||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
|
||||
reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit
|
||||
ex esse exercitation amet. Nisi anim cupidatat excepteur officia.
|
||||
Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
|
||||
voluptate dolor minim nulla est proident. Nostrud officia pariatur
|
||||
ut officia. Sit irure elit esse ea nulla sunt ex occaecat
|
||||
reprehenderit commodo officia dolor Lorem duis laboris cupidatat
|
||||
officia voluptate. Culpa proident adipisicing id nulla nisi laboris
|
||||
ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo
|
||||
ex non excepteur duis sunt velit enim. Voluptate laboris sint
|
||||
cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
|
||||
</p>
|
||||
<a href="#" class="btn btn--green">Book now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,14 @@
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin absCenter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
background-color: rgba($color-black, 0.82);
|
||||
|
||||
z-index: 4000;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden; //NOTE: animable way of simulate a display: 0
|
||||
|
||||
transition: all 0.4s;
|
||||
|
||||
&__content {
|
||||
@include absCenter;
|
||||
|
||||
display: table;
|
||||
width: 75%;
|
||||
// height: 70%; //TODO: remove later
|
||||
|
||||
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
|
||||
background-color: $color-white;
|
||||
border-radius: 3px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
|
||||
transition: all 0.4s 0.2s; //NOTE: .2 seconds delay
|
||||
}
|
||||
|
||||
&__left {
|
||||
width: 33.3333333%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__right {
|
||||
width: 66.6666667%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 3rem 5rem;
|
||||
}
|
||||
|
||||
&__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 4rem;
|
||||
-moz-column-rule: 1px solid $color-gray-dark-2;
|
||||
|
||||
column-count: 2;
|
||||
column-gap: 4rem;
|
||||
column-rule: 1px solid $color-gray-dark-2;
|
||||
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; //NOTE: takes into account document language (html...)
|
||||
}
|
||||
|
||||
&:target {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:target &__content {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
&__close {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $color-gray-dark;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
font-size: 3rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,7 @@
|
||||
@import "components/story";
|
||||
@import "components/bg-video";
|
||||
@import "components/form";
|
||||
@import "components/popup";
|
||||
|
||||
@import "layout/header";
|
||||
@import "layout/grid";
|
||||
|
||||
Reference in new issue
Block a user