I codded a button with font-awesome but it can’t show on screen. As i see there’s no misnamed codes or else. Please if you want to help, stay focus on
<nav class="mobile right">
<div class="botao-menu-mobile">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
and the css counterpart
.botao-menu-mobile{
font-size: 25px;
cursor: pointer;
color: white;```
thank you for your attention
<!DOCTYPE html>
<html>
<head>
<title> Projeto 01 </title>
<link rel="stylesheet" href="estilo/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet">
<link href="estilo/newstyle.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" contet="palavras-chave,do,meu,site">
<meta name="description" content="Descrição do meu site">
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=7EIEbE6FyvBhnC6RMMybEZsDj5NK9TvhLWvxWU1kg9rL7b2TxTrDOOPkUIUZKAk340C3KRZGwhoqstoLkvSoHQ4tzmK83sEEBzHkvieuTad4DkZFzTSNAuA669SlEzY8ye9rBSU7vtGVyQbYByGy4g" charset="UTF-8"></script><script type="text/javascript"
src="https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=9Hi4SycGxrKsvodboPOunLMhL6jMIorR2Fy1Gj0bwT6bF4YK0axbpvKmkJsiWBS_ZhIpeyT7phMvPJS49sRlHr1WgO4spSHKlIxImzE0IrZ6wZIIkxVHM9ZU974Awsup73sYZ3k5cFkQOtIH_ZE48Q"
charset="UTF-8"></script>
</head>
</head>
<body>
<header>
<div class="center">
<div class="logo left">Logomarca</div>
<!--logo-->
<nav class="desktop right">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Contato</a></li>
</ul>
</nav>
<nav class="mobile right">
<div class="botao-menu-mobile">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Contato</a></li>
</ul>
</nav>
<div class="clear"> </div>
</div>
<!--center-->
</header>
<section class="banner-principal">
<div class="overlay"></div>
<!--overlay-->
<div class="w50 right">
<form>
<h2>Qual o seu melhor email?</h2>
<input type="email" name="email" required />
<input type="submit" name="acao" value="Cadastrar!">
</div>
</form>
</section>
<!--banner-principal-->
<section class="descricao-autor">
<div class="center">
<div class="w50 left">
<h2>Guilherme C. Grillo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non
sed urna.
Curabitur iaculis rutrum dolor non lobortis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non
sed urna.
Curabitur iaculis rutrum dolor non lobortis.
</p>
</div>
<!--w50-->
<div class="center">
<div class="w50 right">
<!--pegar imagem depois-->
<img class=right src="images/mateuso.png" />
</div>
<!--w50-->
<div class="clear"> </div>
</div>
</div>
</section>
<section class="especialidades">
<div class="center">
<h2 class="especialidades"> Especialidades </h2>
<div class="box-especialidades">
</div>
<!--box-especialidade-->
<div class="center">
<div class="row">
<div class="col">
<div class="container-fluid">
<h3><i class="fa fa-html5" aria-hidden="true"></i></h3>
<h4>HTML5</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac
molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet
felis ut fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam
ullamcorper rutrum non sed urna.
Curabitur iaculis rutrum dolor non lobortis.
</p>
</div>
</div>
<div class="col">
<div class="container-fluid">
<div class="center">
<h3> <i class="fa fa-css3" aria-hidden="true"></i></h3>
<h4>CSS3</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris
ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit
amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam
ullamcorper rutrum non sed urna.
Curabitur iaculis rutrum dolor non lobortis.
</p>
</div>
</div>
<div class="col">
<div class="container-fluid">
<h3> <i class="fa fa-gg" aria-hidden="true"></i></h3>
<h4>Javascript</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales
mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula
sit amet felis ut fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut in
nisl ac quam ullamcorper rutrum non sed urna.
Curabitur iaculis rutrum dolor non lobortis.
</p>
</div>
</div>
</div>
</div>
</div>
<!--center-->
</section>
<!--especialidades-->
<section class="extras">
<div class="center">
<div class="w50 left depoimentos-container">
<h2 class="title"> Depoimentos</h2>
<div class="depoimento-single">
<p class="depoimento-descricao">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam
sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non
sed urna.
Curabitur iaculis rutrum dolor non lobortis"</p>
<p class="nome-autor">Lorem Ipsum</p>
<p class="depoimento-descricao">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam
sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non
sed urna.
Curabitur iaculis rutrum dolor non lobortis"</p>
<p class="nome-autor">Lorem Ipsum</p>
<p class="depoimento-descricao">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam
sodales mauris ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum non
sed urna.
Curabitur iaculis rutrum dolor non lobortis</p>
<p class="nome-autor">Lorem Ipsum</p>
</div>
<!--left-->
</div>
</div>
<!--depoimento single-->
<div class="p-2 bd-highlight">
<h2 class="title">Serviços</h2>
<div class="center">
<div class="servicos">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac
molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum
non sed urna.
Curabitur iaculis rutrum dolor non lobortis</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac
molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum
non sed urna.
Curabitur iaculis rutrum dolor non lobortis</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sodales mauris ac
molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc sodales sodales augue eu mattis. Nam interdum nisi tellus. Nunc vehicula sit amet felis ut
fermentum. Aliquam congue tincidunt mi sit amet varius.
Ut vel est tristique, tincidunt ipsum ut, luctus nisi. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Ut in nisl ac quam ullamcorper rutrum
non sed urna.
Curabitur iaculis rutrum dolor non lobortis</li>
</ul>
</div>
</div>
</div>
<!--center-->
<!--w50-->
<div class="clear"></div>
</section>
<!--extras-->
<footer>
<div class="center">
<p>Nenhum direito reservado, propriedade intelectual é roubo</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: "Open Sans";
}
/**Boot CSS**/
img{
width: 100%;
max-width: 500px;
}
.center{
max-width: 12800px;
padding:0 2%;
margin-right : 40px;
margin-left : 40px;
}
.w33{
width: 33.3%;
}
.w50{
padding:0 10px;
width: 50%;
}
.left{
float: left;
}
.right{
float: right;
}
.clear{
clear: both;
}
/**Estilização do site **/
header{
background: #3D437A;
padding:15px 0;
}
header .logo{
font-weight: 300;
font-size: 23px;
text-transform: uppercase;
color: white;
}
.mobile{
display: none;
}
nav.desktop ul{
list-style-type: none;
}
nav.desktop li{
font-size: 15px;
padding:0 30px;
text-transform: uppercase;
display: inline-block;
font-weight: 300;
}
nav.desktop a{
color: white;
text-decoration: none;
}
nav.desktop a:hover{
text-decoration: underline;
}
section.banner-principal{
width: 100%;
height: 600px;
background-image: url('../images/background.jpg');
background-size: cover;
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
background-color: rgba(51,51,51,0.7);
}
section.banner-principal form{
z-index: 2;
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
section.banner-principal form h2{
color: white;
font-weight: 300;
font-size: 30px;
text-align: center;
}
section.banner-principal form input[type=email]{
width: 98%;
height: 66px;
background: white;
margin-top:10px;
color: #333;
font-size: 22px;
padding-left: 10px;
}
section.banner-principal form input[type=submit]{
width: 100%;
height: 66px;
background: #00C59E;
margin-top:10px;
color: white;
cursor: pointer;
font-size: 22px;
padding-left: 10px;
border: 0px;
}
section.descricao-autor{
padding:30px 0;
}
section.descricao-autor h2{
font-size: 28px;
font-weight: 300;
color: #444
}
section.descricao-autor p{
font-size: 16px;
color: #444;
margin-top:10px;
font-weight: 380;
}
section.especialidades{
padding: 40px 0;
background: #E2E2E2;
}
section.especialidades h2 {
font-size: 30px;
text-align: center;
font-weight: 400;
color: #999;
}
.box-especialidades{
margin: 20px 0;
padding: 0 30px;
text-align: center;
}
.box-especialidades-h3{
margin: center;
font-size: 40px;
color: #404580;
}
.box-especialidades h4{
margin: 30px;
font-weight: 300;
color: #bababa;
font-size: 40px;
}
.box-especialidades p{
color: #444;
font-size: 15px;
margin-top: 10px;
}
section.extras{
padding: 0 50px;
background-color: #404580;
}
servicos-container,.depoimentos-container{
padding: 50p 0x;
border-bottom: 1px solid #5056A0
}
section.extras .title{
color: white;
font-weight: 300;
font-size: 25px;
margin-bottom: 15px;
}
.depoimentos-single{
padding: 15 0px;
border-bottom: 1px solid #505A
}
div.servicos ul{
margin:20 0px;
}
.servicos li{
margin-bottom: 15px;
font-size: 15px;
color: white;
font-weight: 300;
}
div.servicos ul{
margin:20 0px;
list-style-position: inside;
}
footer {
background: #313462;
padding: 30px 0;
}
footer p {
color:white;
text-align: center;
font-weight: 400;
font-size: 16px;
}
@media screen and (max-width: 700px){
nav.desktop {
display: none;
}
.botao-menu-mobile{
font-size: 25px;
cursor: pointer;
color: white;
}
nav.mobile{
display: block;
}
nav.mobile {
top:55px;
z-index: 3;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
text-align: center;
}
nav.mobile li{
font-weight: 300;
width: 100%;
display: block;
background: white;
border-bottom:1px solid #ccc;
font-size: 17px;
padding:8px 0;
}
nav.mobile a{
display: block;
background: #444;
text-decoration: none;
}
nav.mobile li a{
color: #444;
text-decoration: none;
}
}
p.depoimento-descricao{
font-size: 15px;
color: white;
font-weight: 300px;
}
p.nome-autor{
font-size: 15px;
color: white;
margin-top:5px;
font-weight: bold;
}
@media screen and (max-width: 768px){
img{
float: none !important;
display: block;
margin:0 auto;
max-width: 500px;
}
.w50{
padding:20px;
width: 100%;
}
.w33{
width: 100%;
padding: 20px;
}
}