-
Notifications
You must be signed in to change notification settings - Fork 0
Feature/alvaroestebanherrera #14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
2012a69
93e3f44
0d96d1d
d4dfed6
50a921c
7c13d3a
77d8733
8d5b4d6
6a36417
940cc2a
5d82928
4e37199
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| /* Reset */ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| /* General Styles */ | ||
| html, body { | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| html { | ||
| background: url(background.jpg) no-repeat center center fixed; | ||
| -webkit-background-size: cover; | ||
| -moz-background-size: cover; | ||
| -o-background-size: cover; | ||
| background-size: cover | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| height: 100%; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| /* Form */ | ||
| .form-sign-in { | ||
| background: #ffff; | ||
| /*width: 400px;*/ | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @alvaroestebanherrera eliminar code que no se usa |
||
| padding: 30px; | ||
| margin: auto; | ||
| margin-top: 50px; | ||
| border-radius: 8px; | ||
| font-family: 'calibri'; | ||
| color: white; | ||
| box-shadow: -.5px 4px 15px .5px rgba(0,0,0,.19); | ||
| } | ||
|
|
||
| h1 { | ||
| color: #191919; | ||
| text-align: left; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| padding: 0px 0; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .stay-updated { | ||
| color:black; | ||
| font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-size: 14px; | ||
| padding: 5px 0; | ||
| } | ||
|
|
||
| .controls { | ||
| width: 100%; | ||
| background: #ffff; | ||
| padding: 15px; | ||
| border-radius: 4px; | ||
| margin-bottom: 12px; | ||
| margin-top: 12px; | ||
| border: 1px solid #666666; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-size: 18px; | ||
| color: #666666; | ||
| outline: none; | ||
| } | ||
|
|
||
| .form-sign-in a { | ||
| color: #0C65C2; | ||
| text-decoration: none; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| } | ||
|
|
||
| .form-sign-in a:hover { | ||
| color: #0C65C2; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .form-forgot-password { | ||
| font-weight: 900; | ||
| font-size: 16px; | ||
| padding: 4px 0; | ||
| } | ||
|
|
||
| .blue-button { | ||
| width: 100%; | ||
| height: 50px; | ||
| background: #0C65C2; | ||
| border: none; | ||
| padding: 12px; | ||
| color: white; | ||
| margin: 12px 0; | ||
| font-size: 16px; | ||
| border-radius: 30px; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| .or { | ||
| width: 100%; | ||
| height: 10px; | ||
| border-bottom: 1px solid #666666; text-align: center; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .or-span { | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| color:#666666; | ||
| font-size: 15px; | ||
| background-color: white; | ||
| padding: 0 5px; | ||
| } | ||
|
|
||
| .button-box { | ||
| padding: 12px; | ||
| width: 100%; | ||
| height: 40px; | ||
| border: 1px solid black; | ||
| border-radius: 30px; | ||
| cursor: pointer; | ||
| margin: 12px auto; | ||
| background: white; | ||
| color: #666666; | ||
| font-size: 16px; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| /* Center button objects */ | ||
| .button-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .google-image { | ||
| height: 25px; | ||
| width: 25px; | ||
| margin-left: 20%; | ||
| } | ||
| .google-heading { | ||
| color: #666666; | ||
| font-size: 16px; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| .apple-image { | ||
| height: 25px; | ||
| width: 35px; | ||
| margin-left: 50px; | ||
| } | ||
|
|
||
| .apple-heading { | ||
| color: #666666; | ||
| font-size: 16px; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @alvaroestebanherrera puedes refactorizar tu code y definir el font-family a nivel de raiz |
||
| font-weight: 900; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Sign In</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| <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=Press+Start+2P:wght@200;400;600&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <section class="form-sign-in"> | ||
| <h1>Sign in</h1> | ||
| <div class="stay-updated"> | ||
| <p>Stay updated on your professional world</p> | ||
| </div> | ||
| <form title="Sign In"> | ||
| <input class="controls" type="email" name="mail" id="mail" placeholder="Email or Phone" required> | ||
| <input class="controls" type="password" name="mail" id="pass" placeholder="Password" required> | ||
| <div class="form-forgot-password"> | ||
| <p> | ||
| <a href="#">Forgot password?</a> | ||
| </p> | ||
| </div> | ||
| <input class="blue-button" type="submit" value="Sign in"> | ||
| </form> | ||
| <div class="or"> | ||
| <p><span class="or-span"> | ||
| or | ||
| </p></span> | ||
| </div> | ||
|
|
||
| <div class="button-box"> | ||
| <a href="https://www.google.com"> | ||
| <div class="button-container"> | ||
| <img class="google-image" src="images/icon-google.png" alt=""> | ||
| <h6 class="google-heading"> | ||
| Sign in with Google | ||
| </h6> | ||
| </div> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="button-box"> | ||
| <a href="https://www.apple.com"> | ||
| <div class="button-container"> | ||
| <img class="apple-image" src="images/icon-apple.png" alt=""> | ||
| <h6 class="apple-heading"> | ||
| Sign in with Apple | ||
| </h6> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </section> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @alvaroestebanherrera arreglar este identado |
||
| </div> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,26 @@ | ||
| <!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"> | ||
| <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>Desafío 11</title> | ||
| </head> | ||
| <body> | ||
| <ul> | ||
| <li> | ||
| <a href="example/index.html">Ejemplo</a> | ||
| </li> | ||
| <li> | ||
| <a href="sefhirothxd/index.html">bryan Vera</a> | ||
| </li> | ||
| <li> | ||
| <a href="./juancotera/index.html">Juan Cotera</a> | ||
| </li> | ||
| <li> | ||
| <a href="./alvaroestebanherrera/index.html">Alvaro Esteban</a> | ||
| </li> | ||
| </ul> | ||
| </body> | ||
| </html> | ||
| </html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@alvaroestebanherrera esta imagen no existe