yusufipek/natours-react
1
0
Fork 0
mirror of https://github.com/yusufipk/natours-react.git synced 2026-09-11 11:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

finished styling popup

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-05 09:35:38 +03:00
parent 7a317c66c3
commit 366161e0ca
4 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commons/popup/popup.jsx
+4 -1
View File
@@ -4,13 +4,16 @@ import nat9 from "../images/nat-9.jpg";
function Popup() { function Popup() {
return ( return (
<div> <div>
<div className="popup"> <div className="popup" id="popup">
<div className="popup__content"> <div className="popup__content">
<div className="popup__left"> <div className="popup__left">
<img src={nat8} alt="Tour photo" className="popup__img" /> <img src={nat8} alt="Tour photo" className="popup__img" />
<img src={nat9} alt="Tour photo" className="popup__img" /> <img src={nat9} alt="Tour photo" className="popup__img" />
</div> </div>
<div className="popup__right"> <div className="popup__right">
<a href="#section-tours" className="popup__close">
&times;
</a>
<h2 className="heading-secondary u-margin-bottom-small"> <h2 className="heading-secondary u-margin-bottom-small">
Start booking now Start booking now
</h2> </h2>
src/commons/tours-section/tours.jsx
+3 -3
View File
@@ -31,7 +31,7 @@ function Tours() {
<p className="card__price-only">Only</p> <p className="card__price-only">Only</p>
<p className="card__price-value">$297</p> <p className="card__price-value">$297</p>
</div> </div>
<a href="#" className="btn btn--white"> <a href="#popup" className="btn btn--white">
Book now! Book now!
</a> </a>
</div> </div>
@@ -63,7 +63,7 @@ function Tours() {
<p className="card__price-only">Only</p> <p className="card__price-only">Only</p>
<p className="card__price-value">$497</p> <p className="card__price-value">$497</p>
</div> </div>
<a href="#" className="btn btn--white"> <a href="#popup" className="btn btn--white">
Book now! Book now!
</a> </a>
</div> </div>
@@ -95,7 +95,7 @@ function Tours() {
<p className="card__price-only">Only</p> <p className="card__price-only">Only</p>
<p className="card__price-value">$897</p> <p className="card__price-value">$897</p>
</div> </div>
<a href="#" className="btn btn--white"> <a href="#popup" className="btn btn--white">
Book now! Book now!
</a> </a>
</div> </div>
src/sass/abstracts/_variables.scss
+1
View File
@@ -23,6 +23,7 @@ $color-black: #000;
$default-font-size: 1.6rem; $default-font-size: 1.6rem;
$normal-font-size: 1.4rem; $normal-font-size: 1.4rem;
$medium-font-size: 3rem; $medium-font-size: 3rem;
$big-font-size: 5rem;
// GRID background // GRID background
$grid-width: 114rem; $grid-width: 114rem;
src/sass/components/_popup.scss
+35
View File
@@ -6,6 +6,9 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 3000; z-index: 3000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
&__content { &__content {
@include center-horizontal-vertical; @include center-horizontal-vertical;
@@ -15,6 +18,9 @@
border-radius: 3px; border-radius: 3px;
display: table; display: table;
overflow: hidden; overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.5);
transition: all 0.4s 0.2s;
} }
&__left { &__left {
@@ -44,4 +50,33 @@
column-rule: 1px solid $color-grey-light-2; column-rule: 1px solid $color-grey-light-2;
hyphens: auto; hyphens: auto;
} }
&:target {
opacity: 1;
visibility: visible;
}
&:target &__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&__close {
&:link,
&:visited {
color: $color-grey-dark;
position: absolute;
top: 2.5rem;
right: 2.5rem;
font-size: $medium-font-size;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
line-height: 1;
}
&:hover {
color: $color-primary;
}
}
} }