diff --git a/public/business.png b/public/business.png
new file mode 100644
index 0000000000000000000000000000000000000000..193b8afb778caffe5a94829381763a73c2b35e46
Binary files /dev/null and b/public/business.png differ
diff --git a/public/freeshipping.png b/public/freeshipping.png
new file mode 100644
index 0000000000000000000000000000000000000000..0624a92021dee2407239307134f94942a2c18c47
Binary files /dev/null and b/public/freeshipping.png differ
diff --git a/public/main.css b/public/main.css
index 6937478bd53851b2d481cfe9225c8a8835ce3f82..0e4b42dbcaa37c58efd8dabfb73c705320579108 100644
--- 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;
+}
+
+
+
+
diff --git a/public/promotion.png b/public/promotion.png
new file mode 100644
index 0000000000000000000000000000000000000000..377e914763da75f6e3ae68501a4b21ac5e2ffaee
Binary files /dev/null and b/public/promotion.png differ
diff --git a/public/shirt1.jpg b/public/shirt1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0038d1b36145fe0ec83efa393de123a00ba7c4e6
Binary files /dev/null and b/public/shirt1.jpg differ
diff --git a/public/socialmedia.png b/public/socialmedia.png
new file mode 100644
index 0000000000000000000000000000000000000000..8765212ec559ef0630e14d80921e9cafa3916e71
Binary files /dev/null and b/public/socialmedia.png differ
diff --git a/public/support.png b/public/support.png
new file mode 100644
index 0000000000000000000000000000000000000000..780fd3b2f7a0283e8f22c3325de84e34b189b640
Binary files /dev/null and b/public/support.png differ
diff --git a/views/index.ejs b/views/index.ejs
index 57069f7c72c2778d590d63ffeaaa7dde9c9b317f..aedcf1be5d0badd62657fc336ce505df2cf4400a 100644
--- 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>