Merge branch 'master' into 'main'

features section See merge request !3

Merge branch 'master' into 'main'
features section See merge request !3
4279eb4d · Sandesh Gurung · a9801031 · 01caf88e · 4279eb4d · 4279eb4d
Commit 4279eb4d authored 2 years ago by Sandesh Gurung
--- a/public/business.png
+++ b/public/business.png
--- a/public/freeshipping.png
+++ b/public/freeshipping.png
--- a/public/main.css
+++ b/public/main.css
@@ -30,7 +30,7 @@ h4 {
 h6 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
-  font-size: 12px;
+  font-size: 16px;
 }

 p{
@@ -141,7 +141,72 @@ p{
  font-size: 15px;
  background-color: #89a53a;
  padding: 15px 40px;
+}
+

+/* Fetures section at the bottom of the page */
+
+#feature{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }


+
+#feature .feature-box{
+  width: 180px;
+  text-align: center;
+  padding: 25px 15px;
+  box-shadow: 20px 20px 44px rgba(0, 0, 0, 0.03);
+  border: 1px solid #89a53a;
+  border-radius: 4px;
+  margin: 15px 0;
+}
+
+
+#feature .feature-box:hover{
+  box-shadow: 10px 10px 74px rgba(70,62,221,0.1);
+}
+
+#feature .feature-box h6{
+  padding: 9px 8px 6px 8px;
+  line-height: 1;
+  border-radius: 4px;
+  color:#ffffff ;
+  background-color: #89a53a;
+
+}
+
+
+#feature .f1_logo{
+  max-width: 100%;
+  margin-bottom: 10px;
+
+}
+
+#feature .f2_logo {
+  max-width: 100%;
+  margin-bottom: 15px;
+}
+
+#feature .f3_logo{
+  max-width: 100%;
+  margin-bottom: 15px;
+
+}
+
+#feature .f4_logo {
+  max-width: 100%;
+  margin-bottom: 15px;
+}
+
+#feature .f5_logo{
+  max-width: 100%;
+  margin-bottom: 15px;
+}
+
+
+
+
--- a/public/promotion.png
+++ b/public/promotion.png
--- a/public/shirt1.jpg
+++ b/public/shirt1.jpg
--- a/public/socialmedia.png
+++ b/public/socialmedia.png
--- a/public/support.png
+++ b/public/support.png
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,7 +7,7 @@
  <body>

  <section id = "header">
-      <a href="/."> <img src = "/public/logo.png"class ="logo" alt = ""> </a>
+      <a href="/."> <img src = "/public/logo.png" class ="logo" alt = ""> </a>
    <div>
      <ul id="navbar"> 
        <li><a href="about">About <%=shopName%></a></li>
@@ -31,14 +31,44 @@
    <button> Explore now</button>

  </section>
-  


+  <section id = "feature" class="section-p1">
+
+    <div class = "feature-box">
+      <img src = "/public/freeshipping.png" class = "f1_logo" alt="">
+      <h6> Zero shipping  </h6>
+    </div>
+
+    <div class = "feature-box">
+      <img src = "/public/promotion.png" class = "f2_logo" alt="">
+      <h6> Promotions </h6>
+    </div>
+
+    <div class = "feature-box">
+      <img src = "/public/socialmedia.png" class = "f3_logo" alt="">
+      <h6> Follow us </h6>
+    </div>
+    <div class = "feature-box">
+      <img src = "/public/business.png" class = "f5_logo" alt="">
+      <h6> Business </h6>
+    </div>
+
+    <div class = "feature-box">
+      <img src = "/public/support.png" class = "f4_logo" alt="">
+      <h6> Support </h6>
+    </div>
+
+
+
+
+  </section>
+




  </body>
-  <script src="/js/app.js"></script>
+

 </html>