Skip to content

Commit 9ff7bcf

Browse files
DemethriusSRDemethriusSR
committed
Add html-portifolio
1 parent a7aeb33 commit 9ff7bcf

File tree

4 files changed

+239
-0
lines changed

4 files changed

+239
-0
lines changed

Diff for: ‎html-portifolio/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="/style/main.css">
7+
<title>Login Form</title>
8+
</head>
9+
<body>
10+
11+
<div class="alerts">
12+
<h2><small id="textAlert"></small></h2>
13+
</div>
14+
<div class="form-container">
15+
16+
<p class="title">Login</p>
17+
<form class="form">
18+
<div class="input-group">
19+
<label for="username">Username</label>
20+
<input type="text" name="username" id="username" placeholder="">
21+
</div>
22+
<div class="input-group">
23+
<label for="password">Password</label>
24+
<input type="password" name="password" id="password" placeholder="">
25+
<div class="forgot">
26+
<a rel="noopener noreferrer" href="#">Forgot Password ?</a>
27+
</div>
28+
</div>
29+
<button class="sign">Sign in</button>
30+
</form>
31+
<div class="social-message">
32+
<div class="line"></div>
33+
<p class="message">Login with social accounts</p>
34+
<div class="line"></div>
35+
</div>
36+
<div class="social-icons">
37+
<button aria-label="Log in with Google" class="icon">
38+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
39+
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
40+
</svg>
41+
</button>
42+
<button aria-label="Log in with Twitter" class="icon">
43+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
44+
<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
45+
</svg>
46+
</button>
47+
<button aria-label="Log in with GitHub" class="icon">
48+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
49+
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
50+
</svg>
51+
</button>
52+
</div>
53+
<p class="signup">Don't have an account?
54+
<a rel="noopener noreferrer" href="#" class="">Sign up</a>
55+
</p>
56+
</div>
57+
<script src="script.js"></script>
58+
</body>
59+
</html>

Diff for: ‎html-portifolio/pexels-nikolina-11531569.jpg

1.02 MB
Loading

Diff for: ‎html-portifolio/script.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
let email = document.getElementById('username');
2+
let password = document.getElementById('password');
3+
let textAlert = document.getElementById('textAlert');
4+
let form = document.querySelector('form');
5+
6+
form.addEventListener('submit', (e)=>{
7+
if(email.value === '' && password.value === ''){
8+
textAlert.textContent = 'Preencha os campos'
9+
}else if (validatorEmail(email.value) == true
10+
&& validatorPassword(password.value) == true){
11+
console.log(email.value);
12+
console.log(password.value);
13+
}else{
14+
console.log("Requisição não atendida");
15+
}
16+
e.preventDefault()
17+
})
18+
19+
email.addEventListener('keyup', () =>{
20+
if (validatorEmail(email.value) != true){
21+
textAlert.textContent = 'Formato precisa ser [email protected]'
22+
}else{
23+
textAlert.textContent = ''
24+
}
25+
})
26+
27+
password.addEventListener('keyup', () =>{
28+
if (validatorPassword(password.value) != true){
29+
textAlert.textContent = 'Utilizar Maiúscula, minuscula, caracter especial e números 6 dígitos.'
30+
}else{
31+
textAlert.textContent = ''
32+
}
33+
})
34+
35+
function validatorEmail (email){
36+
let emailParttern = /\S+@\S+\.\S+/; // /^[a-z0-9.]+@[a-z0-9]+\.[a-z]+\.[a-z]?$/i;
37+
return emailParttern.test(email)
38+
}
39+
40+
function validatorPassword (password){
41+
let passwordParttern = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
42+
return passwordParttern.test(password)
43+
}

Diff for: ‎html-portifolio/style/main.css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
html{
2+
3+
--background-color: rgb(36, 35, 34);
4+
background-image: url('/pexels-nikolina-11531569.jpg');
5+
background-repeat: no-repeat;
6+
background-size: 1800px 1300px;
7+
background-attachment: fixed;
8+
text-align: center;
9+
}
10+
11+
.form-container {
12+
position: absolute;
13+
top: 50%;
14+
left: 50%;
15+
transform: translateX(-50%) translateY(-50%);
16+
width: 320px;
17+
border-radius: 0.75rem;
18+
background-color: rgba(17, 24, 39, 1);
19+
padding: 2rem;
20+
color: rgba(243, 244, 246, 1);
21+
box-shadow: 20px 18px 10PX rgb(82, 85, 84);
22+
backdrop-filter: blur();
23+
}
24+
25+
.title {
26+
text-align: center;
27+
font-size: 1.5rem;
28+
line-height: 2rem;
29+
font-weight: 700;
30+
}
31+
32+
.form {
33+
margin-top: 1.5rem;
34+
}
35+
36+
.input-group {
37+
margin-top: 0.25rem;
38+
font-size: 0.875rem;
39+
line-height: 1.25rem;
40+
}
41+
42+
.input-group label {
43+
display: block;
44+
color: rgba(156, 163, 175, 1);
45+
margin-bottom: 4px;
46+
}
47+
48+
.input-group input {
49+
width: 90%;
50+
border-radius: 0.375rem;
51+
border: 1px solid rgba(55, 65, 81, 1);
52+
outline: 0;
53+
background-color: rgba(17, 24, 39, 1);
54+
padding: 0.75rem 1rem;
55+
color: rgba(243, 244, 246, 1);
56+
}
57+
58+
.input-group input:focus {
59+
border-color: rgba(167, 139, 250);
60+
}
61+
62+
.forgot {
63+
display: flex;
64+
justify-content: flex-end;
65+
font-size: 0.75rem;
66+
line-height: 1rem;
67+
color: rgba(156, 163, 175,1);
68+
margin: 8px 0 14px 0;
69+
}
70+
71+
.forgot a,.signup a {
72+
color: rgba(243, 244, 246, 1);
73+
text-decoration: none;
74+
font-size: 14px;
75+
}
76+
77+
.forgot a:hover, .signup a:hover {
78+
text-decoration: underline rgba(167, 139, 250, 1);
79+
}
80+
81+
.sign {
82+
display: block;
83+
width: 100%;
84+
background-color: rgba(167, 139, 250, 1);
85+
padding: 0.75rem;
86+
text-align: center;
87+
color: rgba(17, 24, 39, 1);
88+
border: none;
89+
border-radius: 0.375rem;
90+
font-weight: 600;
91+
}
92+
93+
.social-message {
94+
display: flex;
95+
align-items: center;
96+
padding-top: 1rem;
97+
}
98+
99+
.line {
100+
height: 1px;
101+
flex: 1 1 0%;
102+
background-color: rgba(55, 65, 81, 1);
103+
}
104+
105+
.social-message .message {
106+
padding-left: 0.75rem;
107+
padding-right: 0.75rem;
108+
font-size: 0.875rem;
109+
line-height: 1.25rem;
110+
color: rgba(156, 163, 175, 1);
111+
}
112+
113+
.social-icons {
114+
display: flex;
115+
justify-content: center;
116+
}
117+
118+
.social-icons .icon {
119+
border-radius: 0.125rem;
120+
padding: 0.75rem;
121+
border: none;
122+
background-color: transparent;
123+
margin-left: 8px;
124+
}
125+
126+
.social-icons .icon svg {
127+
height: 1.25rem;
128+
width: 1.25rem;
129+
fill: #fff;
130+
}
131+
132+
.signup {
133+
text-align: center;
134+
font-size: 0.75rem;
135+
line-height: 1rem;
136+
color: rgba(156, 163, 175, 1);
137+
}

0 commit comments

Comments
 (0)