Skip to content

Commit

Permalink
footer dos Icones
Browse files Browse the repository at this point in the history 
scroll-behavior
hover
transition
  • Loading branch information
@igorperobelli
igorperobelli committed Aug 27, 2024
1 parent 7d244b6 commit 4a9685d
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 47 deletions.
67 changes: 43 additions & 24 deletions Projeto01.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>Projeto Secret01</title>
<link rel="shortcut icon" href="Imagem/rooster-8515463_1280.jpg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/5729e0ff2e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
Expand All @@ -16,28 +17,28 @@
<nav>
<ul>
<li>
<a href="https://www.domboscopira.com.br/hist%C3%B3ria-de-dom-bosco">TOP SECRET</a>
<a href="#Topsecret">TOP SECRET</a>
</li>
<li>
<a href="https://www.monark.com.br/">TOP SECRET</a>
<a href="#Topsecret2">TOP SECRET</a>
</li>
<li>
<a href="https://caloi.com/">TOP SECRET</a>
<a href="#Topsecret3">TOP SECRET</a>
</li>
</ul>

</nav>
</div>
</header>
<main>
<section section class="section-1">
<section section class="section-1"id="Topsecret">
<a href="Tela2.html">

<button type="button">SAÌBA MAIS</button>
</a>
<a href="Tela2.html"></a>
</section>
<section class="section-2" section-1>
<section class="section-2"id="Topsecret2">
<div>
<h2>SAÌBA MAIS!</h2>
<p>A espionagem é a ação realizada por um agente adverso que busca obter, de maneira clandestina, acesso a informações sensíveis ou sigilosas do governo brasileiro e de instituições nacionais para beneficiar outros países, organizações, grupos de interesse ou empresas</p>
Expand All @@ -47,32 +48,50 @@ <h2>SAÌBA MAIS!</h2>
<img src="Imagem/golf-3685616_1280.jpg" alt="Icone Golfe">
</div>
</section>
<section class="section-3">
<section class="section-3"id="Topsecret3">
<p>
Espiões usam uma identidade secreta para passar por quem não são de modo a obter as informações que necessitam para completar as missões.
</p>
</section>
</main>

<footer>
<div>
<nav>
<ul>
<li>
<a href="Projeto01.html">INÍCIO </a>
</li>
<li>
<a href="">ESTE DIA É O MELHOR DIA !</a>
</li>
<li>
<a href="">ESTE DIA É O MELHOR DIA !</a>
</li>
<LI>
<a href="">ESTE DIA É O MELHOR DIA!</a>
</LI>
</ul>
</nav>
<footer class="rodape">

<div class="div-line">
<img src="Imagem/galo.png" alt="">
<hr class="line">
</div>

<div class="div-icons">

<h2>
NOSSAS REDES SOCIAIS
</h2>
<a href="">
<i class="fa-brands fa-whatsapp"></i>
</a>

<a href="">
<i class="fa-brands fa-instagram"></i>
</a>

<a href="">
<i class="fa-brands fa-twitter"></i>
</a>

<a href="">
<i class="fa-brands fa-github"></i>
</a>
</div>
</footer>








</footer>

</body>
Expand Down
46 changes: 26 additions & 20 deletions Tela2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,29 +18,29 @@
<nav>
<ul>
<li>
<a href="https://www.domboscopira.com.br/hist%C3%B3ria-de-dom-bosco">TOP SECRET</a>
<a href="#Topsecret">TOP SECRET</a>
</li>
<li>
<a href="https://www.monark.com.br/">TOP SECRET</a>
<a href="#Topsecret2">TOP SECRET</a>
</li>
<li>
<a href="https://caloi.com/">TOP SECRET</a>
<a href="#Topsecret3">TOP SECRET</a>
</li>
</ul>

</nav>
</div>
</header>
<main>
<section class="section-tela2">
<section class="section-tela2" id="Topsecret">
<p>
VISITTE NOSSA CENTRAL DE ATENDIMENTO <br>
E PARTICIPE DAS <span>PROMOÇOES
MENSAIS</span></p>


</section>
<section class="section-nova">
<section class="section-nova" id="Topsecret2">
<div class="div-pai1">

<div class="div-filho1"></div>
Expand All @@ -58,7 +58,7 @@
</div>
</section>

<section class="section-atual">
<section class="section-atual" id="Topsecret3">
<!-- Div- Mapa -->
<div class="div-iframe">
<iframe
Expand All @@ -84,26 +84,32 @@ <h2>SEGUE O NOSSO ENDEREÇO!</h2>


<footer class="rodape">
<div>

<div class="div-line">
<img src="Imagem/galo.png" alt="">
<hr class="line">
</div>
<div>
<a href="">
<i class="fa-brands fa-whatsapp"></i>
</a>

<a href="">
<i class="fa-brands fa-instagram"></i>
</a>
<div class="div-icons">

<h2>
NOSSAS REDES SOCIAIS
</h2>
<a href="">
<i class="fa-brands fa-whatsapp"></i>
</a>

<a href="">
<i class="fa-brands fa-instagram"></i>
</a>

<a href="">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="">
<i class="fa-brands fa-twitter"></i>
</a>

<a href="">
<i class="fa-brands fa-github"></i>
</a>
<a href="">
<i class="fa-brands fa-github"></i>
</a>
</div>
</footer>

Expand Down
44 changes: 41 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,46 @@ footer nav ul li a {
padding: 100px;
background-color: rgb(58, 4, 58);
display: flex;
justify-content: ;
justify-content: space-evenly;
}

.div-line{

.div-line img{
width: 100px;
}

.div-line .line {
width: 150px;/*largura da linha*/
height: 1.5px;/*altura da linha*/
background-color: white;
margin-top:12px;/*Distancia entre a linha e icone*/
}

.div-icons a{
text-decoration:none;/*Aqui estamos removendo o estilo padrão da ancora*/
color: white;/*cor da Âncora*/
}
.div-icons a i {
background-color: #5e3929;
padding: 15px;/*Aplicando um respiro()
border-radius: 10px;
font-size: 30px;/*Tamanho dos icones*/
}

.div-icons a i:hover{/*Mudança de cores*/
background-color: #5e39299f;/*usando a mesma cor */
transition: 0.6s;/*transição de cores 0.6segondos*/
}





.div-icons h2 {/*Estilizando o Titulo do Rodapé*/
color: white;/*Cor da Letra*/
font-size: 30px;/*Tamanho da Letra*/
margin-bottom: 20px;/*Margin inferior em relação o texto*/
}

header i {
/*Estilizando icone*/
color: white;
Expand Down Expand Up @@ -327,4 +361,8 @@ transition: 0.6s;

.div-iframe iframe {
border-radius: 15px;
}

html{
scroll-behavior: smooth;
}

0 comments on commit 4a9685d

Please sign in to comment.