Skip to content

Feature/antonionce #10

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.

Sign up for GitHub

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

Open
T0ny-dev wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feature/antonionce #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9c00e24
correciones del formato y enlace
T0ny-dev Jun 28, 2022
8f8b4f9
formato index.html test :zap:
T0ny-dev Jun 28, 2022
9ab0c9e
actualizacion manual del index :zap:
T0ny-dev Jun 28, 2022
f477640
actualizacion de CSS
T0ny-dev Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions antonionce/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!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>Sign In</title>
</head>
<body>
<div class="form">
<div class="form--center">
<h1>Sign in</h1>
<p>Stay updated on your professional world</p>
<input type='email' id='name' placeholder='Email or Phone' />
<input type='password' id='name' placeholder='Password'>
<a href="#">Forgot password?</a>
<button class="form__btn__signin" type="submit" >Sign in</button>
<div class="form__or">
<div class="form__divisor">
<hr>
</div>
<span>or</span>
<div class="form__divisor">
<hr>
</div>
</div>
<div class="form--social">
<button class="form__btn__social">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.1354 5.75C14.0004 5.75 15.4794 6.396 16.4204 7.33L19.0744 4.676C17.3544 3 14.9584 2 12.1354 2C8.1984 2 4.8554 4.148 3.1704 7.302L6.2004 9.7C7.0974 7.39 9.3304 5.75 12.1354 5.75Z" fill="#E94435"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M5.7708 11.9896C5.7708 11.1806 5.9248 10.4106 6.2008 9.7006L3.1708 7.3016C2.4238 8.7006 1.9998 10.2946 1.9998 11.9896C1.9998 13.7206 2.4098 15.3266 3.1358 16.7256L6.1958 14.3026C5.9248 13.5956 5.7708 12.8206 5.7708 11.9896Z" fill="#F8BB15"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.8107 17.3084C14.8667 17.8694 13.6267 18.2294 12.0107 18.2294C9.3627 18.2294 7.1007 16.6654 6.1957 14.3034L3.1357 16.7254C4.7837 19.9024 8.0767 22.0004 12.0107 22.0004C14.7537 22.0004 17.0727 21.1524 18.7877 19.6654L15.8107 17.3084Z" fill="#34A751"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 11.9896C22 11.3086 21.931 10.6436 21.801 9.9996H12V13.9996H18.062L18.018 14.2496C17.784 15.4466 17.068 16.5606 15.811 17.3086L18.788 19.6656C20.818 17.9056 22 15.2466 22 11.9896Z" fill="#547DBE"></path>
</svg>
</div>Sing in with Google</button>
<button class="form__btn__social">
<div>
<svg width="24" height="24" viewBox="0 2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="transparent"></rect><path d="M17.569 12.6254C17.597 15.652 20.2179 16.6592 20.247 16.672C20.2248 16.743 19.8282 18.1073 18.8662 19.5166C18.0345 20.735 17.1714 21.9488 15.8117 21.974C14.4756 21.9986 14.046 21.1799 12.5185 21.1799C10.9915 21.1799 10.5142 21.9489 9.2495 21.9987C7.93704 22.0485 6.93758 20.6812 6.09906 19.4673C4.38557 16.9842 3.0761 12.4508 4.83438 9.39061C5.70786 7.87092 7.26882 6.90859 8.96311 6.88391C10.2519 6.85927 11.4683 7.753 12.2562 7.753C13.0436 7.753 14.5219 6.67821 16.0759 6.83605C16.7265 6.8632 18.5527 7.09947 19.7253 8.81993C19.6309 8.87864 17.5463 10.095 17.569 12.6254ZM15.058 5.1933C15.7548 4.34789 16.2238 3.171 16.0959 2C15.0915 2.04046 13.877 2.67085 13.1566 3.5158C12.5109 4.26404 11.9455 5.46164 12.0981 6.60946C13.2176 6.69628 14.3612 6.03925 15.058 5.1933Z" fill="black"></path>
</svg>
</div>Sing in with Apple</button>
</div>
</div>
</div>
</body>
</html>
100 changes: 100 additions & 0 deletions antonionce/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

h1 {
font-weight: 700;
font-size: 2rem;
}

p {
font-size: .9rem;
font-weight: 500;
}

a {
font-weight: 700;
color:#0a66c2;
text-decoration: none;

}

.form {
width: 352px;
margin-top: 30px;
padding: 24px;
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
background-color: #Fff;
}

.form--center {
display: flex;
flex-direction: column;
gap: 15px;
}

input {
height: 52px;
padding: 12px;
margin: 3px 0;
border: 1px solid rgb(17, 17, 17);
border-radius: 4px;
}

input::placeholder {
font-size: 1.2rem;
text-align: left; /* for Chrome, Firefox, Opera */
}


.form__btn__signin {
height: 52px;
line-height: 52px;
background-color: #0073b1;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 100px;
cursor: pointer;
}

.form__or {
display: flex;
justify-content: space-evenly;
align-items: center;
}

hr {
width: 120px;
border: 1px solid #eeeeee;
}

.form--social {
display: flex;
flex-direction: column;
gap: 15px;
}

.form__btn__social {
border: 1px solid rgb(17, 17, 17);
color: #00000099;
font-family: system-ui, -apple-system;
font-size: 1.1rem;
font-weight: 600;
padding: 8px 8px;
border-radius: 30px;
display: flex;
justify-content: center;
gap: 10px;
cursor: pointer;
background-color: transparent;
}
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<ul>
<li>
<a href="example/index.html">Ejemplo</a>
<a href="antonionce/index.html">antonionce</a>
Copy link
Contributor

@josseed josseed Jun 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@antonionce tiene ser un nuevo li.
li
a
/li
https://larnu-bootcamp.github.io/challenge_11/
esta es la idea

</li>
</ul>
</body>
Expand Down