Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
1,973 additions
and
0 deletions.
There are no files selected for viewing
135 changes: 135 additions & 0 deletions
135
04-JavascriptPráctico/store/Pantallas de autentificación/clase01_new-password.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,135 @@ | ||
<!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" /> | ||
<title>Document</title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<style> | ||
:root { | ||
--white: #fff; | ||
--black: #000; | ||
--very-light-pink: #c7c7c7; | ||
--text-input-field: #f7f7f7; | ||
--hospital-green: #acd9b2; | ||
--sm: 14px; | ||
--md: 16px; | ||
--lg: 18px; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
font-family: "Quicksand", sans-serif; | ||
} | ||
.Login { | ||
width: 100%; | ||
height: 100vh; | ||
display: grid; | ||
place-items: center; | ||
} | ||
.form-container { | ||
display: grid; | ||
grid-template-rows: auto 1fr; | ||
width: 300px; | ||
} | ||
.logo { | ||
width: 150px; | ||
margin-bottom: 48px; | ||
justify-self: center; | ||
display: none; | ||
} | ||
.title { | ||
font-size: var(--lg); | ||
font-weight: 700; | ||
margin-bottom: 12px; | ||
text-align: center; | ||
} | ||
.subtitle { | ||
color: var(--very-light-pink); | ||
font-size: var(--md); | ||
font-weight: 500; | ||
margin-top: 0; | ||
margin-bottom: 32px; | ||
text-align: center; | ||
} | ||
.label { | ||
font-style: var(--sm); | ||
font-weight: bold; | ||
margin-bottom: 4px; | ||
} | ||
.form { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
.input { | ||
background-color: var(--text-input-field); | ||
border: none; | ||
border-radius: 8px; | ||
height: 30px; | ||
font-size: var(--md); | ||
padding: 6px; | ||
margin-bottom: 12px; | ||
} | ||
.primary-button { | ||
background-color: var(--hospital-green); | ||
border-radius: 8px; | ||
border: none; | ||
color: var(--white); | ||
width: 100%; | ||
cursor: pointer; | ||
font-size: var(--md); | ||
font-weight: bold; | ||
height: 50px; | ||
} | ||
.login-button { | ||
margin-top: 12px; | ||
margin-bottom: 30px; | ||
} | ||
@media (max-width: 640px) { | ||
.logo { | ||
display: block; | ||
} | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div class="Login"> | ||
<div class="form-container"> | ||
<img src="../assets/logos/logo_yard_sale.svg" alt="logo" class="logo" /> | ||
<h1 class="title">Create a new password</h1> | ||
<p class="subtitle">Enter a new password for your account</p> | ||
|
||
<form action="/" class="form"> | ||
<label for="password" class="label">Password</label> | ||
<input | ||
type="password" | ||
class="input input-password" | ||
id="password" | ||
placeholder="*********" | ||
/> | ||
|
||
<label for="new-password" class="label">Re-enter password</label> | ||
<input | ||
type="password" | ||
class="input input-password" | ||
id="new-password" | ||
placeholder="*********" | ||
/> | ||
|
||
<input | ||
type="submit" | ||
value="Confirm" | ||
class="primary-button login-button" | ||
/> | ||
</form> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
129 changes: 129 additions & 0 deletions
129
04-JavascriptPráctico/store/Pantallas de autentificación/clase02_send-email.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
<!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" /> | ||
<title>Document</title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<style> | ||
:root { | ||
--white: #fff; | ||
--black: #000; | ||
--very-light-pink: #c7c7c7; | ||
--text-input-field: #f7f7f7; | ||
--hospital-green: #acd9b2; | ||
--sm: 14px; | ||
--md: 16px; | ||
--lg: 18px; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
font-family: "Quicksand", sans-serif; | ||
} | ||
.Login { | ||
width: 100%; | ||
height: 100vh; | ||
display: grid; | ||
place-items: center; | ||
} | ||
.form-container { | ||
display: grid; | ||
grid-template-rows: auto 1fr; | ||
width: 300px; | ||
justify-items: center; | ||
} | ||
.logo { | ||
width: 150px; | ||
margin-bottom: 48px; | ||
justify-self: center; | ||
display: none; | ||
} | ||
.title { | ||
font-size: var(--lg); | ||
font-weight: 700; | ||
margin-bottom: 12px; | ||
text-align: center; | ||
} | ||
.subtitle { | ||
color: var(--very-light-pink); | ||
font-size: var(--md); | ||
font-weight: 500; | ||
margin-top: 0; | ||
margin-bottom: 32px; | ||
text-align: center; | ||
} | ||
.email-image { | ||
width: 132px; | ||
height: 132px; | ||
border-radius: 50%; | ||
background-color: var(--text-input-field); | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
margin-bottom: 24px; | ||
} | ||
.email-image img { | ||
width: 80px; | ||
} | ||
.resend { | ||
font-size: var(--sm); | ||
} | ||
.resend span { | ||
color: var(--very-light-pink); | ||
} | ||
.resend a { | ||
color: var(--hospital-green); | ||
text-decoration: none; | ||
} | ||
.primary-button { | ||
background-color: var(--hospital-green); | ||
border-radius: 8px; | ||
border: none; | ||
color: var(--white); | ||
width: 100%; | ||
cursor: pointer; | ||
font-size: var(--md); | ||
font-weight: bold; | ||
height: 50px; | ||
} | ||
.login-button { | ||
margin-top: 12px; | ||
margin-bottom: 30px; | ||
} | ||
@media (max-width: 640px) { | ||
.logo { | ||
display: block; | ||
} | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div class="Login"> | ||
<div class="form-container"> | ||
<img src="../assets/logos/logo_yard_sale.svg" alt="logo" class="logo" /> | ||
<h1 class="title">Email has been sent</h1> | ||
<p class="subtitle"> | ||
Please ckeck your inbox for instructions on how to reset the password | ||
</p> | ||
|
||
<div class="email-image"> | ||
<img src="../assets/icons/email.svg" alt="email" /> | ||
</div> | ||
|
||
<button class="primary-button login-button">Login</button> | ||
|
||
<p class="resend"> | ||
<span>Didn't receive the email?</span><a href="/">Resend</a> | ||
</p> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
Oops, something went wrong.