Skip to content

Commit e5bd26d

Browse files
brunorodrisbrunorodris
committed
Projeto: Menu Scroll
1 parent 773425c commit e5bd26d

File tree

3 files changed

+244
-0
lines changed

3 files changed

+244
-0
lines changed

‎menu-scroll/img/logo.png‎

3.74 KB
Loading

‎menu-scroll/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<script src="https://kit.fontawesome.com/6dda5f6271.js" crossorigin="anonymous"></script>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Menu personalizado</title>
10+
</head>
11+
<body>
12+
<header>
13+
<div class="container">
14+
<div class="logo"><img src="img/logo.png"></div>
15+
<div class="menu">
16+
<!-- Crie ID's para cada section e chame-as no menu -->
17+
<nav>
18+
<a href="#home">home</a>
19+
<a href="#sobre">sobre</a>
20+
<a href="#equipe">nossa equipe</a>
21+
<a href="#servicos">serviços</a>
22+
<a href="#contato">contato</a>
23+
</nav>
24+
</div>
25+
26+
<div class="social">
27+
<button><i class="fa-brands fa-instagram"></i></button>
28+
<button><i class="fa-brands fa-facebook-f"></i></button>
29+
<button><i class="fa-brands fa-youtube"></i></button>
30+
</div>
31+
</div>
32+
</header>
33+
34+
<section id="home">
35+
<div class="container1">
36+
<h2>Home</h2>
37+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum culpa et ad, itaque ipsum impedit ducimus vero fugit amet earum deserunt omnis possimus minima ipsam quia est quaerat illo quidem.</p>
38+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, repudiandae corporis possimus veritatis fugiat facilis nihil sapiente facere delectus ex vel voluptatibus cumque recusandae quaerat dignissimos. Illum, exercitationem recusandae? Cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias sapiente qui odio aspernatur vitae dolores ab optio accusamus sint pariatur, maxime facere ullam eveniet, reiciendis dolore quia rerum architecto.</p>
39+
</div>
40+
</section>
41+
42+
<section id="sobre">
43+
<div class="container1">
44+
<h2>Sobre</h2>
45+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum culpa et ad, itaque ipsum impedit ducimus vero fugit amet earum deserunt omnis possimus minima ipsam quia est quaerat illo quidem.</p>
46+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, repudiandae corporis possimus veritatis fugiat facilis nihil sapiente facere delectus ex vel voluptatibus cumque recusandae quaerat dignissimos. Illum, exercitationem recusandae? Cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias sapiente qui odio aspernatur vitae dolores ab optio accusamus sint pariatur, maxime facere ullam eveniet, reiciendis dolore quia rerum architecto.</p>
47+
</div>
48+
</section>
49+
50+
<section id="equipe">
51+
<div class="container1">
52+
<h2>Nossa Equipe</h2>
53+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum culpa et ad, itaque ipsum impedit ducimus vero fugit amet earum deserunt omnis possimus minima ipsam quia est quaerat illo quidem.</p>
54+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, repudiandae corporis possimus veritatis fugiat facilis nihil sapiente facere delectus ex vel voluptatibus cumque recusandae quaerat dignissimos. Illum, exercitationem recusandae? Cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias sapiente qui odio aspernatur vitae dolores ab optio accusamus sint pariatur, maxime facere ullam eveniet, reiciendis dolore quia rerum architecto.</p>
55+
</div>
56+
</section>
57+
58+
<section id="servicos">
59+
<div class="container1">
60+
<h2>Serviços</h2>
61+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum culpa et ad, itaque ipsum impedit ducimus vero fugit amet earum deserunt omnis possimus minima ipsam quia est quaerat illo quidem.</p>
62+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, repudiandae corporis possimus veritatis fugiat facilis nihil sapiente facere delectus ex vel voluptatibus cumque recusandae quaerat dignissimos. Illum, exercitationem recusandae? Cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias sapiente qui odio aspernatur vitae dolores ab optio accusamus sint pariatur, maxime facere ullam eveniet, reiciendis dolore quia rerum architecto.</p>
63+
</div>
64+
</section>
65+
66+
<section id="contato">
67+
<div class="container1">
68+
<h2>Contato</h2>
69+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum culpa et ad, itaque ipsum impedit ducimus vero fugit amet earum deserunt omnis possimus minima ipsam quia est quaerat illo quidem.</p>
70+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem, repudiandae corporis possimus veritatis fugiat facilis nihil sapiente facere delectus ex vel voluptatibus cumque recusandae quaerat dignissimos. Illum, exercitationem recusandae? Cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus molestias sapiente qui odio aspernatur vitae dolores ab optio accusamus sint pariatur, maxime facere ullam eveniet, reiciendis dolore quia rerum architecto.</p>
71+
</div>
72+
</section>
73+
</body>
74+
</html>

‎menu-scroll/style.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Titillium Web', sans-serif;
8+
}
9+
10+
html{
11+
scroll-behavior: smooth;
12+
}
13+
14+
.container{
15+
max-width: 1080px;
16+
margin: 0 auto;
17+
display: flex;
18+
align-items: center;
19+
}
20+
21+
.container1{
22+
max-width: 1080px;
23+
margin: 0 auto;
24+
}
25+
26+
header{
27+
background-color: black;
28+
width: 100%;
29+
padding: 15px 4%;
30+
position: sticky;
31+
top: 0;
32+
z-index: 9999;
33+
}
34+
35+
.logo{
36+
width: 25%;
37+
}
38+
39+
.logo img{
40+
width: 200px;
41+
cursor: pointer;
42+
}
43+
44+
.menu{
45+
width: 50%;
46+
}
47+
48+
.menu nav a{
49+
color: #c4c4c4;
50+
text-decoration: none;
51+
font-size: 18px;
52+
padding-right: 30px;
53+
padding-bottom: 8px;
54+
position: relative;
55+
}
56+
57+
.menu nav a::after{
58+
content: " ";
59+
width: 0px;
60+
height: 4px;
61+
background-image: linear-gradient(45deg , #FF2500, #FF7100);
62+
position: absolute;
63+
bottom: 0;
64+
left: 0;
65+
transition: width 0.5s;
66+
}
67+
68+
.menu nav a:hover::after{
69+
width: 30px;
70+
}
71+
72+
.menu nav a:hover{
73+
color: #ffffff;
74+
}
75+
76+
.social{
77+
width: 25%;
78+
}
79+
80+
.social button{
81+
width: 40px;
82+
height: 40px;
83+
margin-right: 20px;
84+
border: 0;
85+
cursor: pointer;
86+
background-image: linear-gradient(45deg , #FF2500, #FF7100);
87+
border-radius: 5px;
88+
transition: transform 0.5s;
89+
}
90+
91+
.social button i{
92+
font-size: 20px;
93+
text-align: center;
94+
color: #ffffff;
95+
}
96+
97+
.social button:hover{
98+
transform: scale(0.9);
99+
}
100+
101+
/* estilização do conteúdo */
102+
103+
section{
104+
padding: 90px 4%;
105+
border-bottom: 1px solid #ccc;
106+
}
107+
108+
section h2{
109+
font-size: 2em;
110+
margin-bottom: 25px;
111+
}
112+
113+
section p{
114+
font-size: 20px;
115+
}
116+
117+
#menu-mobile{
118+
background-color: #1111119f;
119+
backdrop-filter: blur(10px);
120+
position: absolute;
121+
top: 77px;
122+
right: 0;
123+
width: 100%;
124+
height: 0;
125+
visibility: hidden;
126+
z-index: 1000;
127+
transition: 0.5s;
128+
overflow: hidden;
129+
}
130+
131+
#menu-mobile nav a{
132+
display: block;
133+
color: #ffffff;
134+
padding: 20px 30px;
135+
font-size: 20px;
136+
text-decoration: none;
137+
}
138+
139+
#menu-mobile nav a:hover{
140+
background-color: #383838;
141+
}
142+
143+
#btn-menu,
144+
#btn-menu-close{
145+
color: #ffffff;
146+
font-size: 30px;
147+
cursor: pointer;
148+
display: none;
149+
}
150+
151+
@media screen and (max-width: 1110px) {
152+
.menu,
153+
.social{
154+
display: none;
155+
}
156+
157+
.logo{
158+
width: 100%;
159+
}
160+
161+
#btn-menu,
162+
#menu-mobile{
163+
display: block;
164+
}
165+
166+
#menu-mobile.active{
167+
height: calc(100vh - 77px);
168+
visibility: visible;
169+
}
170+
}

0 commit comments

Comments
 (0)