Merge pull request #157 from apala7778/country

amazon logo and countries list is added to the footer.
Kanika637 · Mar 12, 2023 · aa538e3 · aa538e3
2 parents 76d559b + 7dbf070
commit aa538e3
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/src/components/footer/Footer.js b/src/components/footer/Footer.js
@@ -2,7 +2,11 @@ import React from 'react'
 import "./footer.css"
 import { useState } from 'react';
 import Divider from '@material-ui/core/Divider';
+
+import amnLogo from '../src/assets/amazon-logo.png';
+
 import logo from './amazon-logo.png';
+
 function Footer() {
 
   const d = new Date()
@@ -128,6 +132,32 @@ function Footer() {
       <div className='footer-line'>
       </div>
       <div className="rest-footer-2">
+
+        <img src={amnLogo} alt="logo"></img>
+        <div className='footer-countries'>
+          <div className='countries'>
+
+            <li>Australia</li>
+            <li>Brazil</li>
+            <li>Canada</li>
+            <li>China</li>
+            <li>France</li>
+            <li>Germany</li>
+            <li>Italy</li>
+            <li>Japan</li>
+            <li>Mexico</li>
+            <li>NetherLands</li>
+            <li>Poland</li>
+            <li>Singapore</li>
+            <li>Spain</li>
+            <li>Turkey</li>
+            <li>United Arab Emirates</li>
+            <li>United Kingdoms</li>
+            <li>United States</li>
+
+          </div>
+        </div>
+
         <ul>
           <li><img src={logo} alt="logo" /></li>
           <li><span>English</span></li>
@@ -153,6 +183,7 @@ function Footer() {
           <li>United Kingdom</li>
           <li>United States</li>
         </ul>
+
       </div>
       <div className="base">
         <div className='upper-base'>

diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
@@ -38,11 +38,42 @@ a {
     background-color: #222f3f;
     padding: 3% 10%;
     text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
     margin-bottom: -3.5rem;
+
+}
+
+.footer-countries {
+
+    font-size: 12px;
+    color: white;
+    padding: 2%;
+}
+.countries {
+    display: flex;
+    flex-direction: row;
+    flex-wrap:nowrap;
+
+}
+.countries >li {
+    list-style: none;
+    margin: 7px;
+    font-weight: 400;
+}
+
+.countries >li:hover {
+    text-decoration: underline;
 }
 
+
 .rest-footer-2 img {
     width: 7rem;
+
     height: 30px;
 }
 
@@ -88,6 +119,7 @@ a {
     padding: 8px;
     font-size: 1rem;
     font-weight: 500;
+
 }
 
 .footer-line {
@@ -114,4 +146,5 @@ a {
     text-align: center;
     color: white;
     padding-bottom: 2%;
-}
+}
+