From 7a317c66c343d0abb70d825a933acb5929fe6b76 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Tue, 4 May 2021 19:17:59 +0300
Subject: [PATCH] created popup component

---
 src/App.js                      |  2 ++
 src/App.scss                    |  1 +
 src/commons/popup/popup.jsx     | 47 +++++++++++++++++++++++++++++++++
 src/sass/components/_popup.scss | 47 +++++++++++++++++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 src/commons/popup/popup.jsx
 create mode 100644 src/sass/components/_popup.scss

diff --git a/src/App.js b/src/App.js
index 70fbc32..f17bd97 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Header from "./commons/header/header.jsx";
 import Main from "./commons/main/main";
 import Footer from "./commons/footer-section/footer";
 import Navigation from "./commons/navigation/navigation";
+import Popup from "./commons/popup/popup";
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
       <Header />
       <Main />
       <Footer />
+      <Popup />
     </div>
   );
 }
diff --git a/src/App.scss b/src/App.scss
index 54e570f..4b241c4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,6 +14,7 @@
 @import "./sass/components/story";
 @import "./sass/components/bg-video";
 @import "./sass/components/form";
+@import "./sass/components/popup";
 
 @import "./sass/layout/header";
 @import "./sass/layout/grid";
diff --git a/src/commons/popup/popup.jsx b/src/commons/popup/popup.jsx
new file mode 100644
index 0000000..d6158e6
--- /dev/null
+++ b/src/commons/popup/popup.jsx
@@ -0,0 +1,47 @@
+import nat8 from "../images/nat-8.jpg";
+import nat9 from "../images/nat-9.jpg";
+
+function Popup() {
+  return (
+    <div>
+      <div className="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">
+            <h2 className="heading-secondary u-margin-bottom-small">
+              Start booking now
+            </h2>
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Important &ndash; Please read these terms before booking
+            </h3>
+            <p className="popup__text">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+              Accusamus repellat quibusdam vero modi neque ipsum nihil rem
+              placeat maxime voluptatem. Maxime accusantium numquam non minima,
+              natus corrupti ex debitis dicta. Lorem ipsum dolor, sit amet
+              consectetur adipisicing elit. Quo deserunt, unde sunt sit quis
+              expedita accusamus, tempora, aliquid consectetur numquam beatae
+              nesciunt omnis velit eligendi cupiditate odit quae? Molestias,
+              officiis? Lorem ipsum dolor, sit amet consectetur adipisicing
+              elit. Modi, consequatur recusandae! Odio, dicta. Aspernatur ut aut
+              maxime officiis, quas dolorem beatae nam? Neque nisi in tempore.
+              Suscipit ex hic corrupti! Lorem ipsum dolor sit amet consectetur,
+              adipisicing elit. Hic recusandae accusamus omnis ad culpa rem, eum
+              obcaecati, cupiditate repellendus nemo, non expedita corrupti
+              totam nesciunt distinctio quibusdam consectetur necessitatibus
+              iure.
+            </p>
+            <a href="#" className="btn btn--green">
+              Book Now!
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Popup;
diff --git a/src/sass/components/_popup.scss b/src/sass/components/_popup.scss
new file mode 100644
index 0000000..e68d232
--- /dev/null
+++ b/src/sass/components/_popup.scss
@@ -0,0 +1,47 @@
+.popup {
+  background-color: rgba($color-black, 0.8);
+  height: 100vh;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3000;
+
+  &__content {
+    @include center-horizontal-vertical;
+    width: 75%;
+    background-color: $color-white;
+    box-shadow: $shadow-default;
+    border-radius: 3px;
+    display: table;
+    overflow: hidden;
+  }
+
+  &__left {
+    width: 33.33333333%;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  &__right {
+    width: 66.666666%;
+    display: table-cell;
+    vertical-align: middle;
+    padding: 3rem 5rem;
+  }
+
+  &__img {
+    display: block;
+    width: 100%;
+  }
+
+  &__text {
+    font-size: $normal-font-size;
+    margin-bottom: 4rem;
+
+    column-count: 2;
+    column-gap: 4rem;
+    column-rule: 1px solid $color-grey-light-2;
+    hyphens: auto;
+  }
+}