se mejora estilo de form de suscripcion

SamirFront-End · Jan 26, 2024 · a297531 · a297531
1 parent eb11b56
commit a297531
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/assets/css/modales/subscription/container_modal.css b/assets/css/modales/subscription/container_modal.css
@@ -3,8 +3,8 @@
     position: fixed;
     width: 100%;
     height: 100%;
-    z-index: -1;
-    opacity: 0;
+    z-index: 1;
+    opacity: 1;
     top: 0;
     transition: all .5s ease-in;
 }

diff --git a/assets/css/modales/subscription/form_subscription.css b/assets/css/modales/subscription/form_subscription.css
@@ -1,7 +1,8 @@
 .subscrition-frm {
-    background-image: url(../../../images/Cloudy_subscription.svg);
+    /* background-image: url(../../../images/Cloudy_subscription.svg);
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: cover; */
+    background-color: var(--color5);
     width: 30%;
     margin: 100px auto;
     display: flex;
@@ -24,34 +25,49 @@
     font-weight: bolder;
 }
 .header-subscription {
-    width: 50%;
-    margin: 40px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 40px auto 10px auto;
+    background-color: var(--color5);
 }
 .image-header-subscription {
-    width: 100%;
-}
-.lbl-subscription {
-    width: 90%;
-    margin: auto;
-    font-family: var(--font2);
-    font-weight: bolder;
+    width: 50%;
 }
 .title-modal-subscription {
     width: 90%;
-    margin: 0px auto 30px auto;
+    margin: 10px auto 10px auto;
     font-family: var(--font2);
     font-weight: bolder;
     text-align: center;
 }
-/* .subtitle-modal-subscription {
+.subtitle-modal-subscription {
     width: 90%;
-    margin: 10px auto;
+    margin: 0px auto 20px auto;
     font-family: var(--font4);
-} */
+    text-align: justify;
+    font-size: small;
+    font-weight: lighter;
+}
+.footer-modal {
+    display: flex;
+    flex-direction: column;
+    background-image: url(../../../images/Cloudy_subscription.svg);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.lbl-subscription {
+    width: 90%;
+    margin: auto;
+    font-family: var(--font2);
+    font-weight: bolder;
+    /* background-color: green; */
+}
 .npt-subscription {
     width: 90%;
     height: 30px;
-    margin: 10px auto;
+    margin: 0px auto 10px auto;
     border: none;
     border-bottom: 1px solid var(--color4);
     font-family: var(--font4);

diff --git a/index.html b/index.html
@@ -414,16 +414,20 @@ <h2 class="title-follow">
             <i class="fa-regular fa-circle-xmark"></i>
             <div class="header-subscription">
                 <img src="assets/images/illustrations/inscription.svg" alt="" class="image-header-subscription">
+                <h2 class="title-modal-subscription">
+                    ¡Bienvenido al futuro digital!
+                </h2>
             </div>
-            <h2 class="title-modal-subscription">
-                ¡Bienvenido al futuro de tu negocio digital!
-            </h2>
-            <!-- <h4 class="subtitle-modal-subscription">
+
+            <h4 class="subtitle-modal-subscription">
                 Recibe las últimas novedades, ofertas exclusivas y descubre cómo podemos transformar tu presencia en línea.
-            </h4> -->
-            <label for="" class="lbl-subscription">Email de contacto</label>
-            <input type="email" class="npt-subscription" required placeholder="Correo electrónico">
-            <input type="submit" class="modal-btn-subscription" value="Suscribir">
+            </h4>
+            <div class="footer-modal">
+                <label for="" class="lbl-subscription">Email de contacto</label>
+                <input type="email" class="npt-subscription" required placeholder="Correo electrónico">
+                <input type="submit" class="modal-btn-subscription" value="Suscribir">
+            </div>
+
         </form>
     </div>