Skip to content

Commit

Permalink
portfolio-fron-end
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvarodev12
alvarodev12 committed Aug 27, 2024
0 parents commit 5209863
Show file tree
Hide file tree
Showing 11 changed files with 697 additions and 0 deletions.
Binary file added img/foto.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/imagem.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/layout-do-projeto.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/logo brn.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/perfil (1).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/perfil (2).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/perfil 3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/pessoa.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
212 changes: 212 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="pt-BR">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="style.css">

<script src="./menu.js" defer></script>

<title>Portfólio Front End</title>
</head>

<body>
<header>
<div class="interface">
<div class="logo">
<a href="#">
<img src="./img/logo brn.png" alt="logo">
</a><!--link-->
</div><!--logo-->

<nav class="menu-desktop">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Especialidades</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Projetos</a></li>
</ul>
</nav>

<divi class="btn-contato">
<a href="#">
<button>Contato</button>
</a>
</divi><!--btn-contato-->

<div class="btn-abrir-menu" id="btn-menu">
<i class="bi bi-list"></i>
</div>

<div class="menu-mobile" id="menu-mobile">
<div class="btn-fechar">
<i class="bi bi-x-lg"></i>
</div>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Especialidades</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Projetos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>

</div><!--menu-mobile-->

<div class="overlay-menu" id="overlay-menu"></div>

</div><!--interface-->
</header>

<main>
<section class="topo-do-site">
<div class="interface">
<div class="flex">
<div class="txt-topo-site">
<h1>TRANSFORME IDEIAS EM REALIDADE DIGITAL<span>.</span></h1>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi magni consectetur optio
nesciunt ea eius error? Quo temporibus at nihil rem alias laudantium, ad excepturi, eaque
earum tempore voluptatum architecto?</p>
<div>
<a href="#">
<button>Entre em contato</button>
</a>
</div>
</div><!--txt-topo-site-->

<div class="img-topo-site">
<img src="./img/pessoa.png" alt="foto-alvaro">
</div><!--img-topo-site-->
</div><!--flex-->
</div><!--interface-->
</section><!--Topo do site-->

<section class="especialidades">
<div class="interface">
<h2 class="titulo">MINHAS <span>ESPECIALIDADES.</span></h2>
<div class="flex">

<div class="especialidades-box">
<i class="bi bi-code-slash"></i>
<h3>webSite</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit
eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam,
expedita sed. Eaque, quas corporis?</p>
</div><!--especialidade-box-->

<div class="especialidades-box">
<i class="bi bi-cart-check"></i>
<h3>Loja online</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit
eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam,
expedita sed. Eaque, quas corporis?</p>
</div><!--especialidade-box-->

<div class="especialidades-box">
<i class="bi bi-substack"></i>
<h3>Blog</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit
eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam,
expedita sed. Eaque, quas corporis?</p>
</div><!--especialidade-box-->

</div><!--flex-->
</div><!--interface-->
</section><!--Especialidades-->
<section class="sobre">
<div class="interface">
<div class="flex">

<div class="img-sobre">
<img src="./img/foto.png">
</div><!--img-sobre-->

<div class="txt-sobre">
<h2>MUITO PRAZER, <span>SOU ÁLVARO SOUZA.</span>
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta accusamus quibusdam
praesentium a voluptatum atque repellat aspernatur vero nobis quod maxime rerum quisquam
aliquid, quam autem fugiat asperiores voluptatem recusandae.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident in atque itaque,
asperiores dolore quia praesentium voluptas eveniet quae. Obcaecati quidem eum, quos quaerat
optio omnis? Ut dolorum eos et.</p>
<div class="btn-social">
<a href="#"><button><i class="bi bi-linkedin"></i></button></a>
<a href="#"><button><i class="bi bi-github"></i></button></a>
<a href="#"><button><i class="bi bi-instagram"></i></button></a>
</div><!--bnt-social-->

</div><!--txt-sobre-->
</div><!--flex-->
</div><!--interface-->
</section><!--Sobre-->

<section class="portfolio">
<div class="interface">

<h2 class="titulo">MEU <span>PORTFÓLIO.</span></h2>

<div class="flex">
<div class="img-port" style="background-image: url(img/imagem.jpg);">
<div class="overlay">Projeto 01</div>
</div>
<div class="img-port" style="background-image: url(img/imagem.jpg);">
<div class="overlay">Projeto 02</div>
</div>
<div class="img-port" style="background-image: url(img/imagem.jpg);">
<div class="overlay">Projeto 03</div>
</div>
</div><!--flex-->
</div><!--interface-->
</section><!--portforio-->

<section class="formulario">
<div class="interface">
<h2 class="titulo">FALE <span>COMIGO.</span></h2>

<form action="">
<input type="text" name="" id="" placeholder="Seu nome completo" required>
<input type="text" name="" id="" placeholder="Seu e-mail" required>
<input type="text" name="" id="" placeholder="Seu celular">
<textarea name="" id="" placeholder="Sua mensagem" required></textarea>
<div class="btn-enviar"><input type="submit" value="ENVIAR"></div>
</form>

</div><!--interface-->
</section><!--formulario-->
</main>

<footer>
<div class="interface">
<div class="line-foorter">
<div class="flex">
<div class="logo-footer">
<img src="./img/logo brn.png" alt="logo-agencia-brn">
</div><!--logo-footer-->
<div class="btn-social">
<a href="#"><button><i class="bi bi-linkedin"></i></button></a>
<a href="#"><button><i class="bi bi-github"></i></button></a>
<a href="#"><button><i class="bi bi-instagram"></i></button></a>
</div><!--bnt-social-->
</div>
</div><!--line-foorter-->

<div class="line-footer borda">
<p><i class="bi bi-globe"></i><a href="mailto:Desenvolvido por Álvaro Souza">Desenvolvido por Álvaro
Souza</a></p>
</div><!--line-foorter-->
</div><!--interface-->
</footer>

</body>

</html>
15 changes: 15 additions & 0 deletions menu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let btnMenu = document.getElementById('btn-menu')
let menu = document.getElementById('menu-mobile')
let overlay = document.getElementById('overlay-menu')

btnMenu.addEventListener('click', ()=> {
menu.classList.add('abrir-menu')
})

menu.addEventListener('click', ()=> {
menu.classList.remove('abrir-menu')
})

overlay.addEventListener('click', ()=> {
menu.classList.remove('abrir-menu')
})
Loading

0 comments on commit 5209863

Please sign in to comment.