done

idriss112 · Feb 22, 2024 · 325962d · 325962d
1 parent 2b66694
commit 325962d
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 1 deletion.
diff --git a/CSS/Kasper.css b/CSS/Kasper.css
@@ -1087,4 +1087,86 @@ header nav .form i {
 .pricing .contact-link:hover{
     scale: 1.1;
 }
-/*End Pricing*/
+/*End Pricing*/
+/*start subscribe*/
+.subscribe{
+    padding-top: var(--section-padding);
+    padding-bottom: var(--section-padding);
+    background-image: url("../images/subscribe.jpg");
+    background-size: cover;
+    position: relative;
+    color: white;
+}
+.subscribe:before{
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 50%);
+}
+.subscribe .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+}
+
+@media (max-width:991px){
+    .subscribe .container{
+        flex-direction: column;
+    }
+}
+.subscribe form {
+    display: flex;
+    position: relative;
+    width: 500px;
+    max-width: 100%;
+}
+.subscribe form i{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    left: 25px;
+}
+.subscribe form input[type="email"]{
+    border: 1px solid white;
+    border-right: none;
+    background: none;
+    padding: 20px 20px 20px 60px;
+    caret-color: var(--main-color);
+    width: calc(100% - 130px);
+}
+.subscribe form input[type="submit"]{
+    width: 130px;
+    background-color: var(--main-color);
+    color: white;
+    padding: 10px 20px;
+    border: 1px solid white;
+    border-left: none;
+
+}
+.subscribe form input[type="email"]:focus,
+.subscribe form input[type="submit"]:focus{
+    outline: none;
+
+}
+.subscribe form ::placeholder{
+    color: white;
+
+}
+.subscribe p{
+    line-height: 2;
+    margin-left: 50px;
+}
+@media (max-width: 991px){
+    .subscribe p{
+        margin: 30px 0 0;
+    }
+}
+/*End subscribe*/
diff --git a/index.html b/index.html
@@ -428,6 +428,22 @@ <h3>Platinum</h3>
         </div>
     </div>
     <!-- End Pricing -->
+    <!-- start subscribe -->
+    <div class="subscribe">
+        <div class="container">
+            <form action="">
+                <i class="far fa-envelope fa-lg"></i>
+                <input type="email" name="mail">
+                <input type="submit" value="Subscribe">
+            </form>
+            <p>
+                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blan dit aliquet elit, eget
+                tincidunt.
+            </p>
+        </div>
+    </div>
+    <!-- End subscribe -->
+
 </body>
 
 </html>