-
Notifications
You must be signed in to change notification settings - Fork 0
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
1 parent
80716ec
commit 39d11ef
Showing
4 changed files
with
199 additions
and
12 deletions.
There are no files selected for viewing
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
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 name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <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"> | ||
|
|
||
| <title>Yard Sale</title> | ||
|
|
||
| <style> | ||
| :root { | ||
| --black:#000000; | ||
| --white: #FFFFFF; | ||
| --very-light-pink: #C7C7C7; | ||
| --text-input-field: #F7F7F7; | ||
| --dark: #232830; | ||
| --hospital-green: #ACD9B2; | ||
| --sm: 14px; | ||
| --md: 16px; | ||
| --lg: 18px; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Quicksand', sans-serif; | ||
| } | ||
|
|
||
| .login{ | ||
| width: 100%; | ||
| height: 100vh; | ||
|
|
||
| /* This two lines center the items vertically and horizontally */ | ||
| display: grid; | ||
| place-items: center; | ||
| } | ||
|
|
||
| .form-container{ | ||
| display: grid; | ||
|
|
||
| /* Divides the space in 4 pieces and the middle row will have that height*/ | ||
| grid-template-rows: auto 1fr auto; | ||
| width: 300px; | ||
| } | ||
|
|
||
| .logo{ | ||
| width: 150px; | ||
| margin-bottom: 48px; | ||
| /* justify-self is used in CSS Grid Layout to align grid items inside their respective grid cells along the inline (row) axis. */ | ||
| justify-self: center; | ||
| display: none; | ||
| } | ||
|
|
||
| .title{ | ||
| font-size: var(--lg); | ||
| margin-bottom: 36px; | ||
| text-align: start; | ||
| } | ||
|
|
||
| .form{ | ||
| /* This property is used to specify the direction of the main axis in a flex container. In this case, column is specified, which means that the main axis runs vertically, from top to bottom. This arrangement stacks the flex items vertically within the flex container. */ | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .form div { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .label{ | ||
| font-size: var(--sm); | ||
| font-weight: bold; | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| .value{ | ||
| color: var(--very-light-pink); | ||
| font-weight: var(--md); | ||
| margin: 8px 0 32px 0; | ||
| } | ||
|
|
||
| .secondary-button{ | ||
| background-color: var(--white); | ||
| border-radius: 8px; | ||
| border: 1px solid var(--hospital-green); | ||
| color: var(--hospital-green); | ||
| width: 100%; | ||
| cursor: pointer; | ||
| font-size: var(--md); | ||
| font-weight: bold; | ||
| height: 50px; | ||
| } | ||
|
|
||
| .login-button{ | ||
| margin-top: 14px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| @media(max-width: 640px){ | ||
| .form-container{ | ||
| height: 100%; | ||
| } | ||
| .form{ | ||
| height: 100%; | ||
| justify-content: space-between; | ||
| } | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="login"> | ||
| <div class="form-container"> | ||
|
|
||
| <h1 class="title">My Account</h1> | ||
| <form action="/" class="form"> | ||
| <div> | ||
| <label for="name" class="label">Name</label> | ||
| <p class="value">Camila Yokoo</p> | ||
|
|
||
| <label for="email" class="label">Email</label> | ||
| <p class="value">camilayokoo@gmail.com</p> | ||
|
|
||
| <label for="password" class="label">Password</label> | ||
| <p class="value">***********</p> | ||
| </div> | ||
|
|
||
| <input type="submit" value="Edit" class='secondary-button login-button'> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.