off banner done

Author: alirezatayebinejad

index.html

@@ -192,6 +192,13 @@ <h4 class="price">$78</h4>
           </div>
         </div>
       </section>
+
+      <section id="off-banner">
+        <h4>Repaire Services</h4>
+        <h2>Up to 70% Off - All t-Shirts & Accessories</h2>
+        <button class="normal">Explore More</button>
+      </section>
+
     </main>
 
     <!--footer section-->

style.css

@@ -38,6 +38,23 @@ p {
 .section-m1 {
   margin: 40px 0;
 }
+
+button.normal{
+  font-size: 14px;
+  font-weight: 600px;
+  padding:15px 30px;
+  color:#000;
+  background-color: #fff;
+  border-radius: 4px;
+  cursor:pointer;
+  border:none;
+  outline: none;
+  transition: 0.2s;
+}
+button.normal:hover{
+  background-color: #088178;
+  color: #fff;
+}
 body {
   width: 100%;
 }
@@ -188,6 +205,7 @@ section#hero {
 }
 
 /* feature section styles */
+
 #f-products .pro-collection{
   display: flex;
   flex-wrap: wrap;
@@ -240,4 +258,25 @@ section#hero {
   position: absolute;
   right: 10px;
   bottom: 10px;
-}
+}
+
+/* off banner section styles */
+
+#off-banner{
+  background-image: url(images/banner/b2.jpg);
+  background-size:cover;
+  width: 100%;
+  height: 40vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+#off-banner h4{
+  color: #eaebf0;
+}
+#off-banner h2{
+  color: #eaebf0;
+  padding: 20px 0;
+}
+