Added Footer Code girlscript-blr#3

karshil2309 · Oct 5, 2020 · bc70618 · bc70618
1 parent ece0644
commit bc70618
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 61 deletions.
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
@@ -1,27 +1,22 @@
-*{ margin: 0; padding:0px;}
+*{ margin: 0;
+    padding:0px;
+}
+
 .div{
 
-    position: absolute;
-    width: 1440px;
-    height: 540px;
-    left: 0px;
-    top: 299px;
 
     background: #F1DDC9;
 
 }
 .font-footer{
-    position: absolute;
-    width: 231px;
-    height: 49px;
-    left: 604px;
-    top: 400px;
 
     font-family: Poppins;
     font-style: normal;
     font-weight: 600;
     font-size: 36px;
     line-height: 40px;
+    text-align: center;
+
     /* or 111% */
 
     letter-spacing: 0.02em;
@@ -30,48 +25,38 @@
 
 }
 @media(max-width: 768px){
-    .bottom p,.has-text-right{
-        text-align: center !important;
-    }
-}
-.fa{
-    padding-right: 10px;
-    font-size: 24px;
-    cursor: pointer;
-    position: absolute;
-    left: 0%;
-    right: 0%;
-    top: 0%;
-    bottom: 0%;
-
-    background: #D84727;
+
 }
-.back{
-    position: absolute;
-    width: 241px;
-    height: 30px;
-    left: 692px;
-    top: 759px;
+
+.navbar-item li{
+    list-style: none;
+    margin: 100px;
+    align-content: center;
 
     font-family: Poppins;
     font-style: normal;
     font-weight: 500;
-    font-size: 20px;
-    line-height: 30px;
-    /* identical to box height */
+    font-size: 24px;
+    line-height: 24px;
+    /* identical to box height, or 100% */
 
-    letter-spacing: 0.02em;
 
-    color: #333333;
+    color: #000000;
 
 }
-.front{
-    position: absolute;
-    width: 110px;
-    height: 30px;
-    left: 505px;
-    top: 759px;
+.fa-twitter { color: #D84727; }
+.fa-linkedin { color: #D84727;}
+.fa-telegram { color: #D84727;}
+.fa-facebook { color: #D84727;}
+.fa-medium { color: #D84727;}
+.fa-instagram { color: #D84727;}
 
+
+.fa-heart{
+    color: #E10404;
+}
+
+.fonts{
     font-family: Poppins;
     font-style: normal;
     font-weight: 500;
@@ -82,6 +67,12 @@
     letter-spacing: 0.02em;
 
     color: #333333;
+}
+.line{
 
+    width: 1236.01px;
+    height: 0px;
 
+    top: 737px;
+    border: 1px solid #EF7326;
 }
diff --git a/src/components/footer/footer.html b/src/components/footer/footer.html
@@ -5,41 +5,50 @@
     <link rel="stylesheet" type="text/css" href="footer.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
 
-<footer class="div">
-    <div class="font-footer content has-text-centered">Follow Us At</div>
-
-    <div>
-       <img src="/assets/social-images/twitter.svg">
-        <i class="fa fa-facebook"> </i>
-        <img src="assets/social-images/facebook.svg">
-        <img src="././assets/social-images/linkedin.svg">
-        <img src="./././assets/social-images/telegram.svg">
-        <img src="./././assets/social-images/instagram.svg">
-        <img src="./././assets/social-images/medium.svg">
-
-
+<footer>
+
+<div class="div">
+    <div class="font-footer ">Follow Us At</div>
+    <div class="icons ">
+<!--       <img src="/assets/social-images/twitter.svg">-->
+<!--        <img src="assets/social-images/facebook.svg">-->
+<!--        <img src="././assets/social-images/linkedin.svg">-->
+<!--        <img src="./././assets/social-images/telegram.svg">-->
+<!--        <img src="./././assets/social-images/instagram.svg">-->
+<!--        <img src="./././assets/social-images/medium.svg">-->
+        <ul class="navbar-item">
+       <li> <i class="fab fa-3x fa-twitter"></i></li>
+            <li> <i class="fab fa-3x fa-facebook"></i></li>
+            <li> <i class="fab fa-3x fa-linkedin" ></i></li>
+            <li> <i class="fab fa-3x fa-telegram" ></i></li>
+            <li> <i class="fab fa-3x fa-instagram"></i></li>
+            <li> <i class="fab fa-3x fa-medium"></i></li>
+        </ul>
 
 
     </div>
     <div>
-        <ul>
+        <ul class="navbar-item" >
             <li>Home</li>
             <li>About Us</li>
             <li>Contact Us</li>
             <li>Blog</li>
         </ul>
+        <div class="line"></div>
     </div>
-    <div class="content has-text-centered">
-        <p class="front">
-            Made with  </p><img src="assets/social-images/like.svg"/> <p class="back">By Girlscript Banglore</p>
+
+    <div class="content has-text-centered fonts" >
+
+            Made with &nbsp; <i class="fa fa-heart"></i> &nbsp; By Girlscript Banglore
 
     </div>
+</div>
 </footer>
 </body>
 </html>