Skip to content

Commit 7894849

Browse files
eristonDeveristonDev
committed
Adicionando arquivos
1 parent 97a3744 commit 7894849

File tree

1,705 files changed

+135218
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,705 files changed

+135218
-0
lines changed

‎My-Form/css/style.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
*{
2+
margin: 0;
3+
border: 0;
4+
box-sizing: border-box;
5+
font-family: Ubuntu, sans-serif;
6+
}
7+
body{
8+
display: flex;
9+
width: 100vw;
10+
height: 100vh;
11+
}
12+
#container {
13+
display: flex;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
.welcome-box {
18+
display: flex;
19+
flex-direction: column;
20+
width: 50%;
21+
height: 100%;
22+
background-color: #0000ff;
23+
}
24+
.title {
25+
font-size: 20px;
26+
margin: 200px 0 10px 0;
27+
text-align: center;
28+
color: rgb(228, 228, 228);
29+
text-shadow: 2px 2px 4px #11111179;
30+
font-weight: lighter;
31+
}
32+
.content {
33+
display: flex;
34+
justify-content: center;
35+
margin-top: 30px;
36+
color: rgb(228, 228, 228);
37+
}
38+
.footer-box {
39+
display: flex;
40+
margin-top: 320px;
41+
font-size: 12px;
42+
color: rgba(250, 235, 215, 0.603);
43+
justify-content: center;
44+
}
45+
.form-box {
46+
display: flex;
47+
flex-direction: column;
48+
justify-content: center;
49+
width: 50%;
50+
height: 100%;
51+
padding: 20px;
52+
padding-left: 40px;
53+
background-color: #f9f9f9;
54+
}
55+
56+
.head-title {
57+
text-align: center;
58+
margin-top: 40px;
59+
margin-bottom: 20px;
60+
}
61+
.my-form {
62+
display: flex;
63+
width: 80%;
64+
flex-direction: column;
65+
margin-top: 20px;
66+
}
67+
68+
.form-group {
69+
display: flex;
70+
align-items: center;
71+
margin-bottom: 10px;
72+
}
73+
74+
.form-group label {
75+
width: 150px;
76+
text-align: left;
77+
}
78+
79+
.form-group {
80+
width: 100%;
81+
height: 20px;
82+
margin-bottom: 10px;
83+
}
84+
input {
85+
width: 100%;
86+
border: 1px solid #ccc;
87+
border-radius: 5px;
88+
outline: none;
89+
padding-left: 37px;
90+
height: 25px;
91+
}
92+
input[type='radio'] {
93+
width: 100%;
94+
border: 1px solid #ccc;
95+
border-radius: 5px;
96+
outline: none;
97+
padding-left: 37px;
98+
height: 10px;
99+
}
100+
.form-group [type="file"] {
101+
border: none;
102+
height: 35px;
103+
margin-top: 20px;
104+
}
105+
106+
.radio-group fieldset {
107+
display: flex;
108+
border: 1px solid #ccc;
109+
border-radius: 5px;
110+
width: 200px;
111+
margin-bottom: 20px;
112+
}
113+
.radio-group div {
114+
padding-right: 5px;
115+
}
116+
117+
.radio-group label {
118+
margin-right: 10px;
119+
}
120+
121+
.button-group {
122+
display: flex;
123+
justify-content: space-between;
124+
align-items: center;
125+
}
126+
127+
.submit{
128+
width: 100px;
129+
height: 35px;
130+
padding: 10px;
131+
border: none;
132+
border-radius: 5px;
133+
background-color: #6fb9eb;
134+
color: #fff;
135+
cursor: pointer;
136+
margin-top: 40px;
137+
margin-right: 20px;
138+
}
139+
140+
button[type="button"] {
141+
width: 100px;
142+
height: 35px;
143+
padding: 10px;
144+
border: none;
145+
border-radius: 5px;
146+
background-color: #ccc;
147+
color:#1b1b1b;;
148+
cursor: pointer;
149+
margin-top: 40px;
150+
margin-right: 20px;
151+
}
152+
153+
.submit:hover {
154+
background-color: #ccc;
155+
color: #1b1b1b;
156+
}
157+
button[type="button"]:hover {
158+
background-color: #6fb9eb;
159+
color:#fff;
160+
}
161+
i {
162+
display: block;
163+
align-items: center;
164+
width: 40px;
165+
height: 15px;
166+
position: relative;
167+
border-right: solid 1px #ccc;
168+
transform: translateX(110%);
169+
left: 5px;
170+
color: #3f3f3fa4;
171+
}
172+
.result-box {
173+
display: flex;
174+
width: 50%;
175+
height: 200px;
176+
justify-content: center;
177+
align-items: center;
178+
}
179+
.status {
180+
display: flex;
181+
width: 50%;
182+
height: 200px;
183+
align-items: center;
184+
justify-content: space-between;
185+
margin: 200px auto;
186+
}
187+
img{
188+
width: 70px;
189+
height: 70px;
190+
border-radius: 50%;
191+
}
192+
.status span {
193+
font-size: 20px;
194+
color: #0000ff;
195+
}
196+
.btn {
197+
display: flex;
198+
margin-top: -250px;
199+
justify-content: center;
200+
}
201+
.btn button {
202+
width: 100px;
203+
height: 35px;
204+
border: none;
205+
border-radius: 5px;
206+
background-color: #ccc;
207+
color:#000000;;
208+
cursor: pointer;
209+
}
210+
.error {
211+
border: 1px solid #f80909;
212+
}
213+
214+
215+
216+

‎My-Form/index.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="/css/style.css">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="/src/fontes/fontawesome-free-5.15.4-web/css/all.css">
11+
<title>Meu formulário</title>
12+
</head>
13+
<body>
14+
<div id="container">
15+
<div class="welcome-box">
16+
<div class="title">
17+
<h1>Bem vindos</h1>
18+
</div>
19+
<div class="content">
20+
<span>
21+
Crie agora mesmo seu cadastro em nossa plataforma<br>
22+
e faça parte de uma comunidade incrível!
23+
</span>
24+
</div>
25+
<div class="footer-box">
26+
<span>
27+
&copy; Desenvolvido por JT4K-desenvolvimentos
28+
</span>
29+
</div>
30+
</div>
31+
<div class="form-box">
32+
<div class="head-title">
33+
<h2>Faça seu cadastro</h2>
34+
</div>
35+
<form action="" id="my-form">
36+
<div class="form-group">
37+
<label for="name">Nome:</label>
38+
<i class="fas fa-user"></i>
39+
<input type="text" name="name">
40+
</div>
41+
<div class="form-group">
42+
<label for="address">Endereço:</label>
43+
<i class="fas fa-address-card"></i>
44+
<input type="text" name="address">
45+
</div>
46+
<div class="form-group">
47+
<label for="city">Cidade:</label>
48+
<i class="far fa-building"></i>
49+
<input type="text" name="city">
50+
</div>
51+
<div class="form-group">
52+
<label for="zip-code">CEP:</label>
53+
<i class="fas fa-mail-bulk"></i>
54+
<input type="text" name="zipcode">
55+
</div>
56+
<div class="form-group">
57+
<label for="number">Numero:</label>
58+
<i class="fas fa-map-marker-alt"></i>
59+
<input type="number" name="number">
60+
</div>
61+
<div class="form-group">
62+
<label for="state">Estado:</label>
63+
<i class="fas fa-globe"></i>
64+
<input type="text" name="state">
65+
</div>
66+
<div class="radio-group">
67+
<fieldset>
68+
<legend>Generos</legend>
69+
<div>
70+
<label for="masculine">Masculino:</label>
71+
<input type="radio" name="gender" id="masc">
72+
</div>
73+
<div>
74+
<label for="feminine">Feminino:</label>
75+
<input type="radio" name="gender" id="femen">
76+
</div>
77+
</fieldset>
78+
</div>
79+
80+
<div class="form-group">
81+
<label for="email">Email:</label>
82+
<i class="fas fa-envelope"></i>
83+
<input type="email" name="email">
84+
</div>
85+
<div class="form-group">
86+
<label for="telephone">Telefone:</label>
87+
<i class="fas fa-phone"></i>
88+
<input type="number" name="phone">
89+
</div class ="button-group">
90+
<div class="form-group">
91+
<label for="photo">Adicione uma foto:</label>
92+
<input type="file" name="photo" class="file">
93+
</div class ="button-group">
94+
<div>
95+
<input type="submit" value="Enviar" class="submit">
96+
<button type="button" class="cancel">Cancelar</button>
97+
</div>
98+
</form>
99+
</div>
100+
<div class="result-box" style="display: none;">
101+
<div class="status">
102+
<span>Cadastro feito com sucesso!</span>
103+
<div class="result">
104+
<img src="/src/img/sucesso-profissional-1200x900.jpg" alt="logo do result">
105+
</div>
106+
</div>
107+
<div class="btn">
108+
<button type="button">ok!</button>
109+
</div>
110+
</div>
111+
</div>
112+
113+
<script src="/js/script.js"></script>
114+
</body>
115+
</html>

0 commit comments

Comments
 (0)