Merge pull request #2 from carolaverde/mayerly

Mayerly
carolaverde · Sep 16, 2020 · c3be6ee · c3be6ee
2 parents b227a03 + 2e1cf66
commit c3be6ee
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 3 deletions.
diff --git a/src/img/PELO.jpg b/src/img/PELO.jpg
diff --git a/src/login.html b/src/login.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Gayathri&display=swap" rel="stylesheet">
+
+</head>
+<body>
+    <section class="cajaPrincipal" id="mainBox">
+        <img class="logo" src="img/logo-newStyle.png" alt="logo-newStyle">
+
+        <h2 class="slogan">Un espacio para consentirte,<br>cuidarte y ser mas bella.</h2>
+        <div class="contenedor-form">
+            <div class="toggle">
+            </div>
+            <div class="formulario">
+                <h2>Iniciar Sesion</h2>
+                <form action="#">
+                    <input type ="text"placeholder="Usuario" required>
+                    <input type ="pasword" placeholder ="Contraseña" required>
+                    <input type ="submit" value="Iniciar Sesión">
+                </form>
+            </div>
+            <div class="reset-password">
+
+                <a href="#">Olvide mi contraseña</a> <br>
+                <a href="#">Ingresar con Facebook</a>  <br>
+                <a href="#">Ingresar con Google</a> <br>
+
+
+            </div>
+
+
+        </div>
+    </section>
+
+</body>
+</html>
diff --git a/src/registro.html b/src/registro.html
@@ -0,0 +1,41 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Registro</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Gayathri&display=swap" rel="stylesheet">
+
+</head>
+<body>
+    <section class="cajaPrincipal" id="mainBox">
+        <img class="foto" src="img/PELO.JPG" alt="pelo" >
+        <img class="logo" src="img/logo-newStyle.png" alt="logo-newStyle">
+
+        <h2 class="slogan">Un espacio para consentirte,<br>cuidarte y ser mas bella.</h2>
+        <div class="contenedor-form">
+            <div class="toggle">
+            </div>
+            <div class="formulario">
+                <h2>Registro</h2>
+                <form action="#">
+                    <input type ="text"placeholder="Usuario" required>
+                    <input type ="email" placeholder ="Email" required>
+                    <input type ="name" placeholder ="Nombre" required>
+                    <input type ="lastName" placeholder ="Apellidos" required>
+                    <input type ="date" placeholder ="Fecha de nacimiento" required>
+                    <li>Acepto términos y condiciones.</li> 
+                    <br>
+                    <input type ="submit" value="Aceptar">
+                </form>
+            </div>
+
+
+        </div>
+    </section>
+
+</body>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -4,17 +4,20 @@
   padding: 0%;
   margin: 0%;
   font-family: 'Gayathri', sans-serif;
-}
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 
+}
 
 body {
   background-color: #DADADA;
   -webkit-background-size:cover;
   background-size: cover;
   background-attachment: fixed;
-}
 
-.cajaPrincipal {
+}
+.cajaPrincipal{
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -25,6 +28,15 @@ body {
 .logo {
   width: 60%;
   padding: 5%;
+
+}
+.foto{
+  width:150px;
+  height:150px;
+  border-radius:150px;
+  border:10px solid #951B81 ;
+  display:flex;
+  flex-direction: column-reverse;
 }
 
 .mainPhoto {
@@ -81,6 +93,109 @@ transition: all 5.s ease;
   border-radius: 5px;
 }
 
+
+
+
+.contenedor-form{
+  position: relative;
+  background: #DADADA;
+  width: 100%;
+  max-width: 500px;
+  margin: 48px  auto;
+  color:  #951B81;
+  box-shadow: 0px 0px 10px 0px #333 inset;
+  border-radius: 5px;
+  padding-bottom: 3%;
+}
+
+/*.contenedor-form .toggle{
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 100px;
+  height: 30px;
+  font-size: 13px;
+  line-height: center;
+  border-top: 2px solid  #951B81;
+  border-bottom: 2px solid  #951B81;
+  transition: all  .5s ease;
+  cursor:pointer;
+  padding-top: 2%;
+
+}
+.contenedor-form .toggle{
+  letter-spacing: 2px;
+}
+.contenedor-form .toggle:hover{
+  border-top: 2px solid  #e40d78;
+  border-bottom: 2px solid  #e40d78;
+}*/
+.contenedor-form h2{
+  margin: 0 0 28px 0;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1;
+}
+.contenedor-form input[type="text"],
+.contenedor-form input[type="pasword"],
+.contenedor-form input[type="email"],
+.contenedor-form input[type="name"],
+.contenedor-form input[type="lastName"],
+.contenedor-form input[type="date"]{
+  outline: none;
+  background:white;
+  display:block;
+  width:100%;
+  padding: 10px 15px;
+  color:  #951B81;
+  border: none;
+  border-radius: 2px;
+  border-bottom: 4px solid #951B81;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0 0 20px 0;
+  transition: all .5s ease;
+
+}
+.contenedor-form input[type="text"]:focus,
+.contenedor-form input[type="pasword"]:focus,
+.contenedor-form input[type="email"]:focus,
+.contenedor-form input[type="name"]:focus,
+.contenedor-form input[type="lastName"]:focus,
+.contenedor-form input[type="date"]:focus{
+  border-bottom: 4px solid #e40d78;
+}
+
+.contenedor-form input[type="submit"]{
+  background:  #951B81;
+  color:white;
+  border:none;
+  width: 100%;
+  padding: 10px 0;
+  font-weight: normal;
+  letter-spacing: 1px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all .5s ease;
+}
+.contenedor-form input[type="submit"]:hover{
+  background: #e40d78; 
+}
+
+.contenedor-form .reset-password{
+  width: 100%;
+  text-align: center;
+
+}
+.contenedor-form .reset-password a{
+  color: #951B81;
+  text-decoration: none;
+  font-size: 16px;
+}
+.contenedor-form .formulario{
+  padding: 40px;
+}
+
 .contenedor-form input[type="email"],
 .contenedor-form input[type="password"]{
 padding: 10px 15px;