larnu-bootcamp · AntonyUre · Jun 27, 2022 · Jun 29, 2022 · Jun 30, 2022 · Jun 30, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.github
+.vscode
diff --git a/antonyure/index.html b/antonyure/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Antony Ur</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <a href="../index.html" class="btn-back">
+        <i class="fa-solid fa-chevron-left"></i>
+      </a>
+
+      <form action="" class="wrapper__login">
+        <div class="wrapper__login--text-container">
+          <h1 class="login-title">Sign in</h1>
+          <p class="login-description">
+            Stay updated on your professional world
+          </p>
+        </div>
+        <input
+          type="email"
+          class="wrapper__login--input"
+          placeholder="Email or Phone"
+        />
+        <input
+          type="password"
+          class="wrapper__login--input"
+          id="input-password"
+          placeholder="Password"
+        />
+        <span class="span span-show" onclick="showPassword()">Show</span>
+        <span class="span">Forgot password?</span>
+        <button class="wrapper__login--send sign">Sign in
+
+        </button>
+        <div class="wrapper__login--bar">
+          <hr />
+          <span>or</span>
+        </div>
+        <button class="wrapper__login--send">
+          <img src="https://api.iconify.design/logos:google-icon.svg" alt="">
+          Sing in width Google
+        </button>
+        <button class="wrapper__login--send">
+          <i class="fa-brands fa-apple"></i>Sing in width Apple
+        </button>
+      </form>
+    </div>
+  </body>
+  <script src="../js/main.js"></script>
+</html>
diff --git a/antonyure/style.css b/antonyure/style.css
@@ -0,0 +1,106 @@
+:root {
+  --primary: #ffffff;
+  --secondary: #0f66c2;
+  --tertiary: #666666;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.wrapper{
+  display: flex;
+  height: 100vh;
+}
+.wrapper__login {
+  align-items: center;
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  background: rgb(255, 255, 255);
+  margin: auto;
+  padding: 30px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+  border-radius: 15px;
+  position: relative;
+}
+.wrapper__login .span {
+  color: var(--secondary);
+  font-weight: bold;
+}
+.wrapper__login .span-show {
+  position: absolute;
+  right: 8%;
+  top: 193px;
+  z-index: 999;
+  padding: 15px 10px;
+  cursor: pointer;
+}
+.wrapper__login--text-container {
+  margin-bottom: 30px;
+}
+.wrapper__login--text-container .login-title {
+  padding-bottom: 10px;
+}
+.wrapper__login--text-container .login-description {
+  font-weight: bold;
+}
+.wrapper__login--input {
+  padding: 15px;
+  width: 100%;
+  border: none;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  border: 2px solid var(--tertiary);
+  font-size: 16px;
+}
+.wrapper__login--send {
+  padding: 15px;
+  width: 100%;
+  border-radius: 30px;
+  font-size: 16px;
+  font-weight: bold;
+  border: none;
+}
+.wrapper__login--bar {
+  margin: 20px 0;
+  position: relative;
+}
+.wrapper__login--bar span {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--primary);
+  padding: 0 20px;
+}
+.wrapper__login--send {
+  margin-bottom: 15px;
+  background: var(--primary);
+  border: 2px solid var(--tertiary);
+}
+.wrapper__login--send i {
+  padding-right: 5px;
+  font-size: 18px;
+}
+.sign {
+  margin-top: 20px;
+  background: var(--secondary);
+  color: var(--primary);
+  border: none;
+}
+
+.btn-back{
+  position: absolute;
+  left: 50%;
+  background: var(--secondary);
+  padding: 15px 18px;
+  text-decoration: none;
+  width: 50px;
+  height: 50px;
+  box-sizing: border-box;
+  color: #fff;
+  border-radius: 50%;
+  top: 100px;
+  transform: translateX(-550px);
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,27 @@
+:root {
+  --primary: #ffffff;
+  --secondary: #0f66c2;
+  --tertiary: #666666;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
+}
+body{
+  background: var(--secondary);
+}
+.box-btn{
+  position: absolute;
+  top:50%;
+  left: 50%; 
+  transform: translate(-50%, -50%);
+}
+.box-btn .btn{
+  text-decoration: none;
+  background: var(--primary);
+  color: var(--secondary);
+  padding: 15px 40px;
+  border-radius: 10px;
+}
diff --git a/index.html b/index.html
@@ -24,6 +24,9 @@
       <li>
         <a href="./Andres-Cuellar/index.html">Andrés Cuéllar</a>
       </li>
+      <li>
+        <a href="./antonyure/index.html">Antony Ureta</a>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,8 @@
+function showPassword() {
+  var x = document.getElementById("input-password");
+  if (x.type === "password") {
+    x.type = "text";
+  } else {
+    x.type = "password";
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,9 @@ @@
           <li>
             <a href="./Andres-Cuellar/index.html">Andrés Cuéllar</a>
           </li>
+          <li>
+            <a href="./antonyure/index.html">Antony Ureta</a>
+          </li>
         </ul>
       </body>
     </html>