Skip to content

Commit aaf5c30

Browse files
heliocarlitosheliocarlitos
authored
Licença
1 parent 1a1d23a commit aaf5c30

File tree

8 files changed

+513
-0
lines changed

8 files changed

+513
-0
lines changed

‎8. Menu DropDown (Menu e SubMenu)/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Licença MIT
2+
3+
Este repositório contém projectos desenvolvidos com tecnologias como HTML, CSS, JavaScript e PHP. Neste repositório eu expresso meus conhecimentos nestas tecnologias. Esperamos que esses projectos sejam úteis para você.
4+
5+
### Termos de Uso e Licença dos Projetos
6+
7+
Os projetos e os arquivos de documentação associados são disponibilizados com permissão concedida, gratuitamente, a qualquer pessoa que obtenha uma cópia, sujeito às seguintes condições:
8+
9+
1. **Uso, Cópia e Modificação:** Você tem permissão para usar, copiar e modificar os projetos de acordo com suas necessidades.
10+
11+
2. **Mesclagem, Publicação e Distribuição:** Você pode mesclar os projetos em outros projetos, publicá-los e distribuí-los de acordo com suas preferências.
12+
13+
3. **Sublicença e Venda:** Você não tem o direito de sublicenciar e/ou vender cópias dos projetos.
14+
15+
**No entanto, você deve cumprir a seguintes condição:** Incluir o aviso de direitos autorais original em todas as cópias ou partes substanciais dos projectos.
16+
17+
***_O aviso de direitos autorais acima e este aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais dos projectos._***
18+
19+
### Isenções de Responsabilidade
20+
21+
Os projetos são fornecidos "como estão" e não vêm com garantias de qualquer tipo, expressas ou implícitas, incluindo, mas não se limitando a garantias de comercialização, adequação a uma finalidade específica e não infração. Em nenhum caso, os autores ou detentores de direitos autorais serão responsáveis por qualquer reclamação, danos ou qualquer outra responsabilidade, seja em acção de contrato, acto ilícito ou qualquer outra teoria legal, decorrente de, fora de ou em conexão com os projectos ou o uso ou outras interações com os mesmos.
22+
23+
Fique à vontade para usar, modificar e distribuir os projetos de acordo com os termos desta licença.
24+
25+
### Contribuições
26+
27+
Se deseja contribuir para este projecto, por favor, siga estas diretrizes:
28+
29+
1. Faça um fork deste repositório.
30+
2. Crie uma branch para sua contribuição: `git checkout -b minha-contribuicao`
31+
3. Faça suas modificações e adições.
32+
4. Envie um pull request descrevendo suas alterações.
33+
34+
### Contato
35+
36+
Se você tiver alguma dúvida ou precisar entrar em contato conosco, sinta-se à vontade para fazê-lo através do seguinte endereço de e-mail: [[email protected]](mailto:[email protected]).
37+
38+
Este projecto é licenciado sob os termos da [Licença MIT](LICENSE). Sinta-se à vontade para usar, modificar e distribuir este projecto de acordo com os termos da licença.

‎8. Menu DropDown (Menu e SubMenu)/cssdesnecessario.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
:root{
2+
--branco: #fff;
3+
--dark: #232323;
4+
}
5+
[data-theme="dark"]:root{
6+
--branco: #232323;
7+
--dark: #fff;
8+
}
9+
.conteudo {
10+
margin: 40px;
11+
margin-top: 90px;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
}
17+
.conteudo .bc{
18+
font-size: 2em;
19+
height: 100vh;
20+
width: 70%;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
margin-bottom: 30px;
25+
}
26+
.conteudo .a{
27+
color: var(--branco);
28+
background-color: var(--dark);
29+
}
30+
.conteudo .b{
31+
color: var(--dark);
32+
background-color: var(--branco);
33+
}
34+
.conteudo .c{
35+
color: var(--branco);
36+
background-color: var(--dark);
37+
}
38+
.conteudo .d{
39+
color: var(--dark);
40+
background-color: var(--branco);
41+
}

‎8. Menu DropDown (Menu e SubMenu)/estilo.css‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:ital,wght@0,1;0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,1;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
2+
@import url(cssdesnecessario.css);
3+
4+
*{
5+
padding: 0;
6+
margin: 0;
7+
box-sizing: border-box;
8+
}
9+
:root{
10+
--sempre-branca: #ffffff;
11+
--sempre-preta: #000000;
12+
--sempre-azul: #0092ed;
13+
--sempre-laranja: #ff7b00;
14+
15+
--cor-cinza-a: #d3d3d3;
16+
--cor-azul-a: #b2dffa;
17+
--cor-de-aviso-negativo: #ff0000;
18+
19+
--fundo-do-site: #ecebeb;
20+
--fundo-do-header: #fff;
21+
--fundo-dark: #252525;
22+
--fundo-btn-a: #0092ed;
23+
--fundo-btn-b: #014d7d;
24+
--fundo-sec-cookie: #000000aa;
25+
--fundo-cookie: #ffffff;
26+
--fundo-do-submenu: #e1e1e1;
27+
28+
--texto-ligth-dark: #000000;
29+
--texto-ligth-dark-a: #202020;
30+
--texto-quase-branco: #cacaca;
31+
32+
--btn-desativado: #505050;
33+
}
34+
[data-theme="dark"]:root{
35+
--sempre-branca: #ffffff;
36+
--sempre-preta: #000000;
37+
--sempre-azul: #0092ed;
38+
--sempre-laranja: #ff7b00;
39+
40+
--cor-cinza-a: ;
41+
--cor-azul-a: ;
42+
--cor-de-aviso-negativo: ;
43+
44+
--fundo-do-site: #000;
45+
--fundo-do-header: #141414;
46+
--fundo-dark: ;
47+
--fundo-btn-a: ;
48+
--fundo-btn-b: ;
49+
--fundo-sec-cookie:;
50+
--fundo-cookie: ;
51+
--fundo-do-submenu: #333333;
52+
53+
54+
--texto-ligth-dark: #fff;
55+
--texto-ligth-dark-a: ;
56+
--texto-quase-branco: ;
57+
58+
--btn-desativado: ;
59+
60+
}
61+
html{
62+
scroll-behavior: smooth;
63+
}
64+
body{
65+
font-family: 'Sofia Sans Semi Condensed', sans-serif;
66+
background-color: var(--fundo-do-site);
67+
}
68+
69+
.header{
70+
width: 100%;
71+
padding: 20px;
72+
background-color: var(--fundo-do-header);
73+
position: fixed;
74+
z-index: 999999;
75+
top: 0;
76+
display: flex;
77+
text-align: center;
78+
justify-content: space-evenly;
79+
}
80+
.header .seccao-menu-logo span{
81+
display: none;
82+
position: absolute;
83+
color: var(--texto-ligth-dark);
84+
right: 30px;
85+
top: 30px;
86+
&:hover{
87+
cursor: pointer;
88+
color: var(--sempre-azul);
89+
}
90+
}
91+
.header .seccao-de-logo img{
92+
width: 100px;
93+
transition: .2s;
94+
}
95+
.header .seccao-de-navegacao li{
96+
list-style: none;
97+
display: flex;
98+
}
99+
.header .seccao-de-navegacao{
100+
display: flex;
101+
align-items: center;
102+
}
103+
.header .links{
104+
display: flex;
105+
}
106+
107+
.header .links .mostrar_submenu{
108+
&:hover .sub-menu{
109+
display: block;
110+
}
111+
}
112+
.header .links .mostrar_submenu span{
113+
font-size: 1.1em;
114+
margin-top: 2.5px;
115+
transition: .2s;
116+
}
117+
.header .links .mostrar_submenu:hover span{
118+
transform: rotate(-180deg);
119+
}
120+
.header .links a{
121+
text-decoration: none;
122+
font-size: 1.1em;
123+
padding: 0 15px;
124+
color: var(--texto-ligth-dark);
125+
transform: .2s;
126+
127+
&:hover{
128+
opacity: 75%;
129+
}
130+
}
131+
132+
.header .links .material-symbols-outlined{
133+
position: absolute;
134+
transition: .2s;
135+
}
136+
.header .links .sub-menu{
137+
display: none;
138+
position: absolute;
139+
margin-top: 20px;
140+
background-color: var(--fundo-do-header);
141+
padding: 10px 0;
142+
transition: .2s;
143+
animation: subindo .5s;
144+
}
145+
.header .links .sub-menu a{
146+
padding: 4px 10px;
147+
}
148+
149+
150+
.header .seccao-de-btns-1{
151+
display: flex;
152+
justify-content: space-between;
153+
align-items: center;
154+
}
155+
.header .seccao-de-btns-1 .btn-singin-singup{
156+
padding-right: 30px;
157+
display: flex;
158+
justify-content: space-between;
159+
align-items: center;
160+
}
161+
.header .seccao-de-btns-1 .btn-singin-singup a,
162+
.header .login-mob a{
163+
text-decoration: none;
164+
transition: .2s;
165+
color: var(--sempre-azul);
166+
font-weight: 600;
167+
168+
&:hover{
169+
opacity: 75%;
170+
}
171+
}
172+
.header .seccao-de-btns-1 .btn-singin-singup .btn-sing{
173+
background-color: var(--sempre-azul);
174+
color: var(--sempre-branca);
175+
border-radius: 50px;
176+
padding: 7px 10px;
177+
margin-left: 30px;
178+
}
179+
.header .login-mob .btn-sing-2{
180+
background-color: var(--sempre-azul);
181+
color: var(--sempre-branca);
182+
border-radius: 50px;
183+
padding: 7px 10px;
184+
left: 10px;
185+
position: absolute;
186+
}
187+
.login-mob{
188+
display: none;
189+
}
190+
.header .seccao-de-btn-de-tema .ico-theme-1{
191+
display: block;
192+
color: var(--texto-ligth-dark);
193+
cursor: pointer;
194+
}
195+
.header .seccao-de-btn-de-tema .ico-theme-2{
196+
display: none;
197+
}
198+
199+
200+
@keyframes subindo {
201+
0%{
202+
margin-top: 70px;
203+
opacity: 0;
204+
}
205+
}
206+
207+
208+
209+
@media screen and (max-width: 760px){
210+
.header{
211+
justify-content: space-between;
212+
}
213+
214+
.header .seccao-menu-logo span{
215+
display: block;
216+
}
217+
.header .seccao-de-navegacao {
218+
overflow: hidden;
219+
z-index: -129999999;
220+
display: none;
221+
width: 100%;
222+
height: 100vh;
223+
position: fixed;
224+
box-shadow: -7px 10px 10px #00000035;
225+
background-color: var(--fundo-do-header);
226+
right: 0;
227+
margin-top: 60px;
228+
width: 200px;
229+
padding-bottom: 20px;
230+
animation: para_esquerda .5s;
231+
}
232+
.header .seccao-de-navegacao .links li{
233+
list-style: none;
234+
}
235+
.header .seccao-de-navegacao .links li a{
236+
text-decoration: none;
237+
margin: 5px 0;
238+
}
239+
.header .links{
240+
display: flex;
241+
flex-direction: column;
242+
width: 800px;
243+
}
244+
.header .seccao-de-navegacao .links .sub-menu{
245+
display: none;
246+
transition: .2s;
247+
padding: 5px 0 13px;
248+
position: relative;
249+
animation: none;
250+
margin-top: 30px;
251+
text-align: left;
252+
background-color: var(--fundo-do-submenu);
253+
left: -70px;
254+
}
255+
.header .links .mostrar_submenu{
256+
&:hover .sub-menu{
257+
display: block;
258+
}
259+
}
260+
.header .seccao-menu-aberto{
261+
display: none;
262+
}
263+
.header .seccao-de-btn-de-tema .ico-theme-2{
264+
display: block;
265+
}
266+
.conteudo:active ~ .seccao-de-navegacao{
267+
display: none;
268+
}
269+
@keyframes para_esquerda {
270+
0%{
271+
right: -170px;
272+
}
273+
}
274+
}
275+
276+
@media screen and (max-width: 450px){
277+
.header .login-mob{
278+
display: block;
279+
}
280+
.header .seccao-de-btns-1 .btn-singin-singup{
281+
display: none;
282+
}
283+
}
284+
@media screen and (max-width: 184px){
285+
.header .seccao-de-logo img{
286+
width: 50px;
287+
}
288+
.header .seccao-menu-logo span{
289+
top: 20px;
290+
}
291+
}

‎8. Menu DropDown (Menu e SubMenu)/imagens/favicon.png‎

23.4 KB
Loading

‎8. Menu DropDown (Menu e SubMenu)/imagens/logo-hca-azul.png‎

18.5 KB
Loading

‎8. Menu DropDown (Menu e SubMenu)/imagens/logo-hca-branco.png‎

18 KB
Loading

0 commit comments

Comments
 (0)