Skip to content

Commit 1ba5bc1

Browse files
brunorodrisbrunorodris
committed
Projeto do portfólio personalizado
Projeto realizado no canal Inteliogia.
1 parent 9d71381 commit 1ba5bc1

File tree

7 files changed

+686
-0
lines changed

7 files changed

+686
-0
lines changed

‎18 - portfólio personalizado/images/foto.png‎

380 KB
Loading

‎18 - portfólio personalizado/images/imagem.jpg‎

479 KB
Loading

‎18 - portfólio personalizado/images/logo.png‎

2.35 KB
Loading

‎18 - portfólio personalizado/images/pessoa.png‎

148 KB
Loading

‎18 - portfólio personalizado/index.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
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+
<!-- GOOGLE FONTS -->
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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
10+
<!-- FIM GOOGLE FONTES -->
11+
<!-- BOOTSTRAP ICONS -->
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
13+
<!-- FIM BOOTSTRAP ICONS -->
14+
<link rel="stylesheet" href="style.css">
15+
16+
<script src="menu.js" defer></script>
17+
18+
<title>Agência BRN</title>
19+
</head>
20+
<body>
21+
22+
<header>
23+
<div class="interface">
24+
<div class="logo">
25+
<a href="#">
26+
<img src="images/logo.png" alt="Logo da Agência BRN">
27+
</a>
28+
</div><!--logo-->
29+
30+
<nav class="menu-desktop">
31+
<ul>
32+
<li><a href="#">Início</a></li>
33+
<li><a href="#">Especialidades</a></li>
34+
<li><a href="#">Sobre</a></li>
35+
<li><a href="#">Projetos</a></li>
36+
</ul>
37+
</nav>
38+
39+
<div class="btn-contato">
40+
<a href="#">
41+
<button>Contato</button>
42+
</a>
43+
</div><!--btn-contato-->
44+
45+
<div class="btn-abrir-menu" id="btn-menu">
46+
<i class="bi bi-list"></i>
47+
</div>
48+
49+
<div class="menu-mobile" id="menu-mobile">
50+
<div class="btn-fechar">
51+
<i class="bi bi-x-lg"></i>
52+
</div>
53+
54+
<nav>
55+
<ul>
56+
<li><a href="#">Início</a></li>
57+
<li><a href="#">Especialidades</a></li>
58+
<li><a href="#">Sobre</a></li>
59+
<li><a href="#">Projetos</a></li>
60+
<li><a href="#">Contato</a></li>
61+
</ul>
62+
</nav>
63+
64+
</div><!--menu-mobile-->
65+
<div class="overlay-menu" id="overlay-menu"></div>
66+
</div><!--interface-->
67+
</header>
68+
69+
<main>
70+
<section class="topo-do-site">
71+
<div class="interface">
72+
<div class="flex">
73+
<div class="txt-topo-site">
74+
<h1>TRANSFORMANDO IDEIAS EM REALIDADE DIGITAL<span>.</span></h1>
75+
<p>Criatividade e inovação andam lado a lado. Com uma combinação única de design impactante, funcionalidade intuitiva e otimização para resultados, estou pronto(a) para criar a presença online dos seus sonhos.</p>
76+
77+
<div class="btn-contato">
78+
<a href="#">
79+
<button>Entre em contato</button>
80+
</a>
81+
</div>
82+
</div><!--txt-topo-site-->
83+
84+
<div class="img-topo-site">
85+
<img src="images/pessoa.png" alt="">
86+
</div><!--img-topo-site-->
87+
</div><!--flex-->
88+
</div><!--interface-->
89+
</section><!--topo-do-site-->
90+
91+
<section class="especiliadades">
92+
<div class="interface">
93+
<h2 class="titulo">MINHAS <span>ESPECIALIDADES.</span></h2>
94+
<div class="flex">
95+
<div class="especialidades-box">
96+
<i class="bi bi-code-square"></i>
97+
<h3>Website</h3>
98+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.</p>
99+
</div><!--especialidades-box-->
100+
101+
<div class="especialidades-box">
102+
<i class="bi bi-cart"></i>
103+
<h3>Loja online</h3>
104+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.</p>
105+
</div><!--especialidades-box-->
106+
107+
<div class="especialidades-box">
108+
<i class="bi bi-wordpress"></i>
109+
<h3>Blog</h3>
110+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.</p>
111+
</div><!--especialidades-box-->
112+
</div><!--flex-->
113+
</div><!--interface-->
114+
</section><!--especiliadades-->
115+
116+
<section class="sobre">
117+
<div class="interface">
118+
<div class="flex">
119+
<div class="img-sobre">
120+
<img src="images/foto.png" alt="">
121+
</div><!--img-sobre-->
122+
123+
<div class="txt-sobre">
124+
<h2>MUITO PRAZER, <span>SOU BRUNO RODRIGUES.</span></h2>
125+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At accusantium ducimus dicta suscipit, neque cumque sunt tenetur totam delectus magnam minus ratione. Quidem sequi velit voluptatibus eos omnis ullam officiis.</p>
126+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem quae iusto repellendus eaque, ipsum sed voluptate explicabo voluptas, dolorum porro sequi laudantium? Obcaecati quae, dolores illo officiis a numquam.</p>
127+
<div class="btn-social">
128+
<a href="#"><button><i class="bi bi-instagram"></i></button></a>
129+
<a href="#"><button><i class="bi bi-youtube"></i></button></a>
130+
<a href="#"><button><i class="bi bi-linkedin"></i></button></a>
131+
</div><!--btn-social-->
132+
</div><!--txt-sobre-->
133+
</div><!--flex-->
134+
</div><!--interface-->
135+
</section><!--sobre-->
136+
137+
<section class="portfolio">
138+
<div class="interface">
139+
<h2 class="titulo">MEU <span>PORTFÓLIO.</span></h2>
140+
<div class="flex">
141+
<div class="img-port" style="background-image: url(https://github.com/images/imagem.jpg);">
142+
<div class="overlay">Projeto 1</div>
143+
</div>
144+
<div class="img-port" style="background-image: url(https://github.com/images/imagem.jpg);">
145+
<div class="overlay">Projeto 2</div>
146+
</div>
147+
<div class="img-port" style="background-image: url(https://github.com/images/imagem.jpg);">
148+
<div class="overlay">Projeto 3</div>
149+
</div>
150+
</div><!--flex-->
151+
</div><!--interface-->
152+
</section><!--portfolio-->
153+
154+
<section class="formulario">
155+
<div class="interface">
156+
<h2 class="titulo">FALA <span>COMIGO.</span></h2>
157+
158+
<form action="">
159+
<input type="text" name="" id="" placeholder="Seu nome completo:" required>
160+
<input type="text" name="" id="" placeholder="Seu e-mail:" required>
161+
<input type="text" name="" id="" placeholder="Seu celular:">
162+
<textarea name="" id="" placeholder="Sua mensagem" required></textarea>
163+
<div class="btn-enviar"><input type="submit" value="ENVIAR"></div>
164+
</form>
165+
</div><!--interface-->
166+
</section><!--formulario-->
167+
168+
</main>
169+
170+
<footer>
171+
<div class="interface">
172+
<div class="line-footer">
173+
<div class="flex">
174+
<div class="logo-footer">
175+
<img src="images/logo.png" alt="Logotipo Agência BRN">
176+
</div><!--logo-footer-->
177+
<div class="btn-social">
178+
<a href="#"><button><i class="bi bi-instagram"></i></button></a>
179+
<a href="#"><button><i class="bi bi-youtube"></i></button></a>
180+
<a href="#"><button><i class="bi bi-linkedin"></i></button></a>
181+
</div><!--btn-social-->
182+
</div>
183+
</div><!--line-footer-->
184+
185+
<div class="line-footer borda">
186+
<p><i class="bi bi-envelope-fill"></i> <a href="mailto:[email protected]">[email protected]</a></p>
187+
</div><!--line-footer-->
188+
</div><!--interface-->
189+
</footer>
190+
191+
</body>
192+
</html>

‎18 - portfólio personalizado/menu.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
let btnMenu = document.getElementById('btn-menu')
3+
let menu = document.getElementById('menu-mobile')
4+
let overlay = document.getElementById('overlay-menu')
5+
6+
btnMenu.addEventListener('click', ()=>{
7+
menu.classList.add('abrir-menu')
8+
})
9+
10+
menu.addEventListener('click', ()=>{
11+
menu.classList.remove('abrir-menu')
12+
})
13+
14+
overlay.addEventListener('click', ()=>{
15+
menu.classList.remove('abrir-menu')
16+
})
17+

0 commit comments

Comments
 (0)