From 884f6707f993d9deed58b40e3df048df24448df8 Mon Sep 17 00:00:00 2001
From: katsu-project <51054651+katsu-project@users.noreply.github.com>
Date: Tue, 20 Aug 2019 14:06:38 +0300
Subject: [PATCH] Add footer

---
 index.html                                  |  92 ++++++++++++++++----
 resources/css/index.css                     |  91 +++++++++++++++++--
 resources/images/background/add-divider.png | Bin 0 -> 833 bytes
 3 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 resources/images/background/add-divider.png

diff --git a/index.html b/index.html
index e28ede3..4ec121f 100644
--- a/index.html
+++ b/index.html
@@ -36,18 +36,18 @@ <h1 class="title"><a class="logo-link" href="#main-page">Lambda</a></h1>
         </div>
         <div class="socials">
           <ul class="social-menu">
-            <li class="social-button">
-              <a class="social-link" href="#twitter">
+            <li class="social-button social-button-menu">
+              <a class="social-link social-link-menu" href="#twitter">
                 <i class="fab fa-twitter" aria-hidden="true"></i>
               </a>
             </li>
-            <li class="social-button">
-              <a class="social-link" href="#youtube">
+            <li class="social-button social-button-menu">
+              <a class="social-link social-link-menu" href="#youtube">
                 <i class="fab fa-youtube" aria-hidden="true"></i>
               </a>
             </li>
-            <li class="social-button">
-              <a class="social-link" href="#facebook">
+            <li class="social-button social-button-menu">
+              <a class="social-link social-link-menu" href="#facebook">
                 <i class="fab fa-facebook-f" aria-hidden="true"></i>
               </a>
             </li>
@@ -55,21 +55,20 @@ <h1 class="title"><a class="logo-link" href="#main-page">Lambda</a></h1>
         </div>
       </div>
       </nav>
-      <main>
-        <div class="intro">
-          <div class="title main-title">
-            the right ingredients <br>
-            for the right food
-          </div>
-          <img class="divider" src="resources/images/background/divider.png">
-          <br>
-          <div class="button-group">
-            <a class="button button-book" href="#book">book a table</a>
-            <a class="button button-menu" href="#menu">see the menu</a>
-          </div>
+      <div class="intro">
+        <div class="title main-title">
+          the right ingredients <br>
+          for the right food
         </div>
-      </main>
+        <img class="divider" src="resources/images/background/divider.png">
+        <br>
+        <div class="button-group">
+          <a class="button button-book" href="#book">book a table</a>
+          <a class="button button-menu" href="#menu">see the menu</a>
+        </div>
+      </div>
     </div>
+  <div class="main-content">
     <section class="first-section">
       <div class="content-container">
         <div class="content">
@@ -265,5 +264,60 @@ <h2 class="form-title">Just the right food</h2>
       </div>
     </section>
   </div>
+    <footer class="additional-container">
+      <div class="additional-group">
+        <h2 class="title additional-title">About Us</h2>
+        <img class="divider additional-divider" src="resources/images/background/white-divider.png">
+        <p class="additional-content">Lambda's new and expanded Chelsea location represents a truly authentic <span class="bold">Greek</span> patisserie, featuring breakfasts of fresh croissants and steaming bowls of café.
+        Lamda the best restaurant in town
+        </p>
+      </div>
+      <div class="additional-group">
+        <h2 class="title additional-title">Opening Hours</h2>
+        <img class="divider additional-divider" src="resources/images/background/white-divider.png">
+        <p class="additional-content"><span class="bold">Mon-Thu:</span> 7:00am-8:00pm 
+        <span class="bold">Fri-Sun:</span> 7:00am-10:00pm
+        </p>
+        <ul class="payments-method">
+          <li class="payment-icon">
+            <i class="fab fa-cc-visa"></i>
+          </li>
+          <li class="payment-icon">
+            <i class="fab fa-cc-paypal"></i>
+          </li>
+          <li class="payment-icon">
+            <i class="fab fa-cc-mastercard"></i>
+          </li>
+          <li class="payment-icon">
+            <i class="fab fa-cc-amex"></i>
+          </li>
+        </ul>
+      </div>
+      <div class="additional-group">
+        <h2 class="title additional-title">Our Location</h2>
+        <img class="divider additional-divider" src="resources/images/background/white-divider.png">
+        <p class="additional-content bold">19th Paradise Street Sitia
+        128 Meserole Avenue
+        </p>
+        <ul class="additional-socials">
+          <li class="social-button additional-social-button">
+            <a class="social-link additional-social-link" href="#twitter">
+              <i class="fab fa-twitter" aria-hidden="true"></i>
+            </a>
+          </li>
+          <li class="social-button additional-social-button">
+            <a class="social-link additional-social-link" href="#youtube">
+              <i class="fab fa-youtube" aria-hidden="true"></i>
+            </a>
+          </li>
+          <li class="social-button additional-social-button">
+            <a class="social-link additional-social-link" href="#facebook">
+              <i class="fab fa-facebook-f" aria-hidden="true"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  </div>
 </body>
 </html>
diff --git a/resources/css/index.css b/resources/css/index.css
index f60a313..ea65b12 100644
--- a/resources/css/index.css
+++ b/resources/css/index.css
@@ -28,7 +28,11 @@ div {
 }
 
 .wrapper {
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
+  height: 100%;
+  justify-content: space-between;
   width: 1600px;
 }
 
@@ -146,20 +150,26 @@ div {
   font-size: 0;
  }
 
-.social-button {
-  display: inline-block;
+.social-button-menu {
   padding: 36px 0;
  }
 
-.social-button .social-link {
-  color: #dab33e;
+.social-button {
+  display: inline-block;
+}
+
+.social-link {
   display: block;
+  text-decoration: none;
+}
+
+.social-link-menu {
+  color: #dab33e;
   font-size: 21px;
   padding: 8px 5px;
-  text-decoration: none;
  }
 
-.social-button .social-link:hover {
+.social-link-menu:hover {
   color: #f0c955;
   text-shadow: 1px 1px 2px #000;
  }
@@ -470,6 +480,7 @@ div {
   color: #fff;
   font-size: 16px;
   padding: 10px 0;
+  transition: .3s background-color ease;
   margin: 0 auto;
   margin-top: 30px;
   width: 199px;
@@ -478,3 +489,71 @@ div {
 .submit-button:hover {
   background: #dcaf33;
 }
+
+.additional-container {
+  background-color: #191919;
+  display: flex;
+  padding: 50px 0;
+  justify-content: center;
+}
+
+.additional-group {
+  text-align: center;
+  padding: 5px 70px;
+  width: 370px;
+}
+
+.additional-group:first-child {
+  padding: 5px 8px;
+}
+
+.additional-title {
+  color: #fff;
+  font-size: 21px;
+}
+
+.additional-divider {
+  margin: 15px 0;
+  width: 200px;
+}
+
+.additional-content {
+  color: #fff;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.payments-method {
+  color: #fff;
+  margin-top: 45px;
+}
+
+.payment-icon {
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.payment-button:last-child {
+  margin-right: 0px;
+}
+
+.additional-socials {
+  margin-top: 40px;
+}
+
+.additional-social-link {
+  color: #fff;
+}
+
+.additional-social-button {
+  margin-right: 6px;
+}
+
+.additional-social-button:last-child {
+  margin-right: 0px;
+}
diff --git a/resources/images/background/add-divider.png b/resources/images/background/add-divider.png
new file mode 100644
index 0000000000000000000000000000000000000000..939feff484ec2f098ca73e2233dbcb07de04050a
GIT binary patch
literal 833
zcmeAS@N?(olHy`uVBq!ia0vp^$AMUwgBe7YygUn}@&kNAT!Hj|Is*O6Oc#Mxs+I)#
z1v3aJan!VRGv@>fHTOHnHI$_r@D!;?R(iRLYR6e6MNC$oZL;!<FY_b@2BsKK7sn8f
z<5#EMTz6GLr0xG*BQXtUcPsvV|BZLuQNLKRuv7fiOYsGaTx-_9Ui3iUc;$l$?GcYJ
zhP<70^H9+jVL2bu6++hc1KB<&Ok5T#m9nq8-K~|4f5|FO<yCCU&qf^fQIhWbqHoi6
z+u*K&Utqs(g9X$2ZMokL<lA&SIleB{ne~AQ-)aj+pPtXfDdz<yRz^<jal1Kd?M-&}
z<6F;1L|@g3nOgAhn3S=d<?g$cB1<-IoXWYZzemR7*t>b$lQbu~eu>KLJl|ucz9n?R
zMW3f>N_VzCI#O$)b3NeO9G59~3yXUF&q$<k85S*%(AQLsNjBlsmOpupRW(~~Zmw_R
z&HurIkwW@OvwrPc|61v+YwRDF@3{+>-MYHi%J8FWnqt<H#p;cdT+}XQ9O<2>ex)aK
zrH||7U3K|a_s(8d{oeKIn-_-aSy@&^vsSIt;_STd9C+z;seATw>!nwB7G6EQFE?uC
z+TOt2Q@<O#ukrV6d~DJ4uxSU2bc^Xc<MX!;wmTMFJ?9{|B<9G}3G1YkwF6sb&ewR`
zQ8lBGdz+`E%!ECHW(JBgM2|&OM<lk2$HZJo?}^Ua-|>3a8O0y2?$W|d{aQJ{S8SEr
zT%75*^0mjet5fP{&0bk0C@Q+@$nM-Yc@Kt@7P;LM)g_M}$`@&NGhq!|9681FP3#RB
z<-`-O_U`(%@#<~?6O-B}59}wsHDJDVJ}6&%nX=cEtQUp(QS-u>V=dfl8osAbIW>v*
zm*NzL&JA)0biRF$>3psr9=BlAzCQ)ok*&A%=l@>+ky~)~?S((<zUCTNFJe=8ymZ$4
fy>7Dg!H>1Mvb6Ho<@v4xCQJrTS3j3^P6<r_+#ImX

literal 0
HcmV?d00001