[Agregar] estilos para responsive design

assets/styles/normalize.css

@@ -28,7 +28,6 @@
 
  html {
     font-size: 62.5%;
-    font-family: 'Poppins', sans-serif;
     line-height: 1.15; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
   }
@@ -41,6 +40,7 @@
    */
   
   body {
+    font-family: 'Poppins', sans-serif;
     margin: 0;
   }
   

assets/styles/pages/signup/signup-desktop.css

@@ -0,0 +1,26 @@
+.wrapper {
+    display: flex;
+    max-width: 900px;
+    box-shadow: 7px 10px 10px 2px rgba(0, 0, 0, .25);
+}
+
+.content {
+    flex-basis: 45%;
+    padding: 25px;
+    background-color: var(--color-background);
+}
+
+.form__image-container {
+    display: initial;
+    flex-basis: 55%;
+}
+
+.form__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sign-up__button {
+    box-shadow: initial;
+}

assets/styles/pages/signup/signup.css

@@ -1,16 +1,23 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+
 body {
-    background-color: hsla(197, 100%, 50%, 0.4);
-    background-image: url('../../../images/background-form.svg');
+    margin-bottom: 90px;
+    background-color: rgba(0, 183, 255, 0.4);
     background-size: cover;
     background-repeat: no-repeat;
-    background-blend-mode: overlay;
+    background-image: linear-gradient(180deg, rgba(255, 186, 255, 0.4) 0, rgba(247, 172, 255, 0.4) 25%, rgba(213, 157, 242,0.4) 50%, rgba(181, 142, 218, 0.4) 75%, rgba(153, 127, 196,0.4) 100%);
+    background-blend-mode: difference;
+    opacity: 0.8;
 }
 
 /* Contenedor */
 
 .wrapper {
     width: 90%;
-    max-width: 780px;
+    max-width: 550px;
     min-width: 300px;
     margin: 30px auto;
 }   
@@ -19,6 +26,10 @@ body {
 
 .header__logo-container {
     display: inline-block;
+    width: 35%;
+    min-width: 70px;
+    max-width: 126px;
+
 }
 
 .header__logo {
@@ -80,13 +91,14 @@ body {
     color: var(--color-black);
     outline: 0;
     border-radius: 10px;
-    border: 2px solid var(--color-secondary-green);
+    border: 2px solid var(--color-secondary-purple);
     background-color: var(--color-background);
 }
 
 .sign-up__input:-webkit-autofill {
     box-shadow: 0 0 0 100px var(--color-background) inset;
     -webkit-box-shadow: 0 0 0 100px var(--color-background) inset;
+    -moz-box-shadow: 0 0 0 100px var(--color-background) inset;
 }
 
 .name__field {
@@ -104,10 +116,9 @@ body {
 .sign-up__input:valid ~ span {
     top: 0;
     color: #FFF;
-    background-color: var(--color-secondary-green);
+    background-color: var(--color-secondary-purple);
 }
 
-
 .sign-up__button {
     display: block;
     margin: 20px auto;
@@ -119,18 +130,28 @@ body {
     border: 0;
     border-radius: 40px;
     color: #FFF;
-    background-color: var(--color-secondary-green);
+    background-color: var(--color-secondary-purple);
+    box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 50%);
     cursor: pointer;
 }
 
 .form__already {
     margin-top: 10px;
     text-align: center;
+    font-size: 1rem;
+}
+
+/* Oculatar imagen */
+.form__image-container {
+    display: none;
 }
 
 /* Cambios a los estilos del footer */
 
 .footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
     background-color: var(--color-black);
 }
 

views/pages/signup.php

@@ -5,7 +5,7 @@
     'pages/signup/signup.css',
 ) ?>
 <?php $desktop_styles = array(
-    array('pages/signup/signup-desktop.css', 'attributes' => ''),
+    array('pages/signup/signup-desktop.css', 'attributes' => 'media="screen and (min-width: 900px)"'),
 ) ?>
 <?php $scripts = array() ?>
 <?php require_once 'views/components/head.php' ?>
@@ -64,10 +64,9 @@
     </div>
     
     <picture class="form__image-container">
-        <img class="form__image" src="" alt="">
+        <img class="form__image" src="https://cdna.artstation.com/p/assets/images/images/017/677/304/large/kerasumi-1.jpg?1556911326" alt="">
     </picture>
 </div>
-
 <?php require_once 'views/components/footer.php' ?>
 
 <!--