From 1a7706f2a2897e53ebc7c12f648873790c214ffa Mon Sep 17 00:00:00 2001
From: Daniel Heras Quesada <dani.heras@hotmail.com>
Date: Tue, 6 Feb 2024 13:28:27 +0100
Subject: [PATCH] book container done

---
 Natours/starter/css/style.css         | 14 ++++++++++
 Natours/starter/index.html            | 33 +++++++++++++++++++++++
 Natours/starter/sass/pages/_home.scss | 38 ++++++++++++++++++++++++---
 3 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
index 3dda9cd..bc74a7d 100644
--- a/Natours/starter/css/style.css
+++ b/Natours/starter/css/style.css
@@ -459,3 +459,17 @@ body {
 .section-stories {
   position: relative;
   padding: 15rem 0; }
+
+.section-book {
+  padding: 15rem 0;
+  background-image: linear-gradient(to right bottom, #7ed56f, #28b485); }
+
+.book {
+  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
+  background-size: 100%;
+  border-radius: 3px;
+  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
+  height: 50rem; }
+  .book__form {
+    width: 50%;
+    padding: 6rem; }
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
index 5f6c377..bb3298c 100644
--- a/Natours/starter/index.html
+++ b/Natours/starter/index.html
@@ -300,6 +300,39 @@
           <a href="#" class="btn-text">Read all stories &rarr;</a>
         </div>
       </section>
+      <section class="section-book">
+        <div class="row">
+          <div class="book">
+            <div class="book__form">
+              <form action="#" class="form">
+                <div class="u-margin-bottom-medium">
+                  <h2 class="heading--secondary">Start booking now</h2>
+                </div>
+                <div class="form__group">
+                  <input
+                    id="name"
+                    type="text"
+                    class="from__input"
+                    placeholder="Full Name"
+                    required
+                  />
+                  <label for="name" class="form__label">Full name</label>
+                </div>
+                <div class="form__group">
+                  <input
+                    id="email"
+                    type="email"
+                    class="from__input"
+                    placeholder="Email"
+                    required
+                  />
+                  <label for="email" class="form__label">Email address</label>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <!--
diff --git a/Natours/starter/sass/pages/_home.scss b/Natours/starter/sass/pages/_home.scss
index 0442af8..77b5cd6 100644
--- a/Natours/starter/sass/pages/_home.scss
+++ b/Natours/starter/sass/pages/_home.scss
@@ -6,16 +6,18 @@
 
 .section-features {
   padding: 20rem 0;
-  background-image: linear-gradient(to right bottom,
+  background-image: linear-gradient(
+      to right bottom,
       rgba($color-primary-light, 0.801),
-      rgba($color-primary-dark, 0.808)),
+      rgba($color-primary-dark, 0.808)
+    ),
     url("../img/nat-4.jpg");
   background-size: cover;
 
   margin-top: -10rem;
   transform: skewY(-7deg);
 
-  &>* {
+  & > * {
     transform: skewY(7deg);
   }
 }
@@ -30,3 +32,33 @@
   position: relative;
   padding: 15rem 0;
 }
+
+.section-book {
+  padding: 15rem 0;
+  background-image: linear-gradient(
+    to right bottom,
+    $color-primary-light,
+    $color-primary-dark
+  );
+}
+
+.book {
+  background-image: linear-gradient(
+      105deg,
+      rgba($color-white, 0.9) 0%,
+      rgba($color-white, 0.9) 50%,
+      transparent 50%
+    ),
+    url(../img/nat-10.jpg);
+  background-size: 100%;
+
+  border-radius: 3px;
+  box-shadow: 0 1.5rem 4rem rgba($color-black, 0.2);
+
+  height: 50rem;
+
+  &__form {
+    width: 50%;
+    padding: 6rem;
+  }
+}