From 366161e0caeed0cab3a26ca6a44158316f560cef Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Wed, 5 May 2021 09:35:38 +0300
Subject: [PATCH] finished styling popup

---
 src/commons/popup/popup.jsx         |  5 ++++-
 src/commons/tours-section/tours.jsx |  6 ++---
 src/sass/abstracts/_variables.scss  |  1 +
 src/sass/components/_popup.scss     | 35 +++++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/commons/popup/popup.jsx b/src/commons/popup/popup.jsx
index d6158e6..8ab0249 100644
--- a/src/commons/popup/popup.jsx
+++ b/src/commons/popup/popup.jsx
@@ -4,13 +4,16 @@ import nat9 from "../images/nat-9.jpg";
 function Popup() {
   return (
     <div>
-      <div className="popup">
+      <div className="popup" id="popup">
         <div className="popup__content">
           <div className="popup__left">
             <img src={nat8} alt="Tour photo" className="popup__img" />
             <img src={nat9} alt="Tour photo" className="popup__img" />
           </div>
           <div className="popup__right">
+            <a href="#section-tours" className="popup__close">
+              &times;
+            </a>
             <h2 className="heading-secondary u-margin-bottom-small">
               Start booking now
             </h2>
diff --git a/src/commons/tours-section/tours.jsx b/src/commons/tours-section/tours.jsx
index 83bbec4..ffccdc7 100644
--- a/src/commons/tours-section/tours.jsx
+++ b/src/commons/tours-section/tours.jsx
@@ -31,7 +31,7 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$297</p>
                 </div>
-                <a href="#" className="btn btn--white">
+                <a href="#popup" className="btn btn--white">
                   Book now!
                 </a>
               </div>
@@ -63,7 +63,7 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$497</p>
                 </div>
-                <a href="#" className="btn btn--white">
+                <a href="#popup" className="btn btn--white">
                   Book now!
                 </a>
               </div>
@@ -95,7 +95,7 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$897</p>
                 </div>
-                <a href="#" className="btn btn--white">
+                <a href="#popup" className="btn btn--white">
                   Book now!
                 </a>
               </div>
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index d084381..b65c347 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/src/sass/abstracts/_variables.scss
@@ -23,6 +23,7 @@ $color-black: #000;
 $default-font-size: 1.6rem;
 $normal-font-size: 1.4rem;
 $medium-font-size: 3rem;
+$big-font-size: 5rem;
 
 // GRID background
 $grid-width: 114rem;
diff --git a/src/sass/components/_popup.scss b/src/sass/components/_popup.scss
index e68d232..dd37024 100644
--- a/src/sass/components/_popup.scss
+++ b/src/sass/components/_popup.scss
@@ -6,6 +6,9 @@
   top: 0;
   left: 0;
   z-index: 3000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
 
   &__content {
     @include center-horizontal-vertical;
@@ -15,6 +18,9 @@
     border-radius: 3px;
     display: table;
     overflow: hidden;
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.5);
+    transition: all 0.4s 0.2s;
   }
 
   &__left {
@@ -44,4 +50,33 @@
     column-rule: 1px solid $color-grey-light-2;
     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;
+    }
+  }
 }