hero section completed

Author: alirezatayebinejad

index.html

@@ -38,7 +38,15 @@
 
     <!--main section-->
 
-    <main></main>
+    <main>
+      <section class="hero">
+        <h4>Trade-in-offer</h4>
+        <h2>Super value deals</h2>
+        <h1>On all products</h1>
+        <p>save more coupons & up to 70% off!</p>
+        <button>Shop now</button>
+      </section>
+    </main>
 
     <!--footer section-->
 

style.css

@@ -98,4 +98,40 @@ body {
     position: absolute;
     bottom: -4px;
     left: 20px;
+}
+
+/* home main styles */
+
+/* hero section styles */
+
+section.hero{
+  background-image: url(images/hero4.png);
+  width: 100%;
+  height: 90vh;
+  background-size: cover;
+  background-position: top 25% right 0;
+  display: flex;
+  flex-direction: column;
+  align-items:flex-start;
+  justify-content: center;
+  padding: 0 80px;
+}
+
+section.hero h4{
+  padding-bottom: 15px;
+}
+section.hero h1{
+color: #088178;
+}
+section.hero button{
+background-color: transparent;
+background-image: url(images/button.png);
+background-repeat: no-repeat;
+background-size: cover;
+border: 0;
+cursor: pointer;
+font-size: 15px;
+font-weight: 700;
+color: #088178;
+padding: 14px 65px 14px 65px;
 }