adding footer

hajarLamharchi · Nov 19, 2023 · faf28e6 · faf28e6
1 parent 3ce9a48
commit faf28e6
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 7 deletions.
diff --git a/static/images/cp.png b/static/images/cp.png
diff --git a/static/images/fb.png b/static/images/fb.png
diff --git a/static/images/in.png b/static/images/in.png
diff --git a/static/images/insta.png b/static/images/insta.png
diff --git a/static/images/tt.png b/static/images/tt.png
diff --git a/static/styles/footer.css b/static/styles/footer.css
@@ -1,14 +1,88 @@
 footer {
-
-    bottom: 0;
-    left: 0;
     margin: 0;
-    padding: 0;
     background-color: rgb(34, 34, 34);
     width: 100%;
-    height: 60px;
+    height: fit-content;  
+    color: white;  
+}
+.footer_flex{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    padding:20px 100px 20px 100px;
+
+}
+.footer_flex_section1{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    flex-direction: column;
+}
+.line{
+    border-bottom: 1px solid white;
+    width: 100%;
+}
+.footer_flex_section1 h5{
+    flex: 1;
+    margin-right: auto;
+}
+.footer_flex_section2{
+    display: flex;
+    align-items: start;
+    flex-direction: column;
+    gap: 20px;
+}
+.footer_flex_section2 .last_item{
+    margin-top: auto;
+}
+
+.footer_flex_section3{
     display: flex;
+    gap: 10px;
+    align-items: start;
+    flex-direction: column;
     justify-content: center;
+}
+h1, h2, h3, h4, h5{
+padding: 0;
+margin: 0;
+}
+.footer_flex_section2 ul {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+.footer_flex_section2 li{
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    margin-right: auto;
+}
+.subscribe{
+    width: fit-content;
+    height: fit-content;
+    color:white ;
+    background-color: grey;
+    cursor: pointer;
+    border: none;
+    padding: 7px;
+    font-size: 12px;
+}
+
+.footer_flex_section3 .social {
+    gap: 20px;
+    display: flex;
+    flex-direction: row;
+}
+.copyrights{
+    display: flex;
+    flex-direction: row;
+    gap: 3px;
     align-items: center;
-
+    margin-top: auto;
+}
+.copyrights .img{
+    width: auto;
+    height: 10px;
 }
diff --git a/templates/home_page.html b/templates/home_page.html
@@ -104,6 +104,46 @@ <h2>(123) 456 7890</h2>
                 <img src="../static/images/lookbook.jpg" alt="Profile Picture" width="300">
             </div>
         </div>
-        <footer></footer>
+        <footer>
+            <div class="footer_flex">
+                <div class="footer_flex_section1">
+                    <h1>
+                        StoryShore
+                    </h1>
+                    <div class="line">
+
+                    </div>
+                    <h3>contact information</h3>
+                    <h5>privacy policy</h5>
+                </div>
+                <div class="footer_flex_section2">
+                    <h3>SITE MAP</h3>  
+                    <ul>
+                        <li>My business</li>
+                        <li>My products</li>
+                        <li>My services</li>
+                        <li>Gallery</li>
+                        <li>Contact</li>
+                        <li>Support</li>
+                    </ul> 
+                    <div class="copyrights">
+                        <h5>copyrights</h5>
+                        <img class="img" src="../static/images/cp.png">
+                        <h5>2023</h5> 
+                    </div>
+                </div>
+                <div class="footer_flex_section3">
+                    <input type="text" id="username" name="username" placeholder="Email address"/>
+                    <button class="subscribe">Subscribe</button>
+                    <div class="social">
+                        <img src="../static/images/fb.png">
+                        <img src="../static/images/insta.png">
+                        <img src="../static/images/in.png">
+                        <img src="../static/images/tt.png">
+                    </div>
+
+                </div>
+            </div>
+        </footer>
     </body>
 </html>