newsletter completed

Author: alirezatayebinejad

index.html

@@ -348,6 +348,18 @@ <h5>New Trendy Prints</h4>
           </div>
         </div>
       </section>
+
+      <section id="newsletter">
+        <div class="newsletter-text">
+          <h3>Sign Up For Newsletters</h3>
+          <h5>get e-mail updates about out latest shop and <span>special offers</span></h5>
+        </div>
+        <div class="form">
+          <input type="email" placeholder="Your email address">
+          <button>Sign Up</button>
+        </div>
+      </section>
+
     </main>
 
     <!--footer section-->

style.css

@@ -285,6 +285,7 @@ section#hero {
 */
 
 /* banners section styles */
+
 #banners {
   margin: 0 60px;
 }
@@ -361,4 +362,54 @@ span {
 }
 #banners .small-banners h5{
   color: #771818;
-}
+}
+
+/* newsletter section styles */
+
+#newsletter{
+  background-image: url(images/banner/b14.png);
+  background-repeat: no-repeat;
+  background-position:  180px;
+  background-color: #041e42;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 75px;
+}
+#newsletter .newsletter-text h3{
+  color: white;
+  font-size: 30px;
+  padding: 0 0 15px 0;
+}
+#newsletter .newsletter-text h5{
+  color: rgb(151, 151, 151);
+  font-size: 17px;
+}
+#newsletter .newsletter-text h5 span{
+  color: rgb(216, 182, 29);
+}
+#newsletter .form input{
+  padding: 20px;
+  width: 350px;
+  height: 56px;
+  background-color: #d1d0d0;
+  border-radius: 6px 0 0 6px;
+  font-size: 18px;
+  
+  border: none;
+  outline: none;
+  margin-right: -4px;
+  margin-top: 1px;
+}
+#newsletter .form button{
+  margin-left: 0;
+  padding: 20px;
+  border: none;
+  width: 120px;
+  background-color: #088178;
+  color: white;
+  font-size: 17px;
+  border-radius: 0 6px 6px 0;
+  cursor: pointer;
+}