@charset="UTF-8";
@import url('https://fonts.googleapis.com/css?family=Krub');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
/* CSS Document */
header {
width:1900px;
height:100px;
margin:auto;
background-color:black;
font-family: 'Krub', sans-serif;
color:white;
}
body{
background-color: #363636;
}
nav {
width:1900px;
height:50px;
margin:auto;
background-color:#ff4425;
font-family: 'Krub', sans-serif;
position:absolute;
display:table;
top:100px;
right:0px;
border:none;
}
.button{
float:left;
color:black;
border:none;
background-color:#ff4425;
transition-duration:1s;
height:50px;
width:100px;
font-family: 'Krub', sans-serif;
align-content: center;
margin-left: auto;
margin-right: auto;
}
.computadores{
float:left;
color:black;
border:none;
background-color:#ff4425;
transition-duration:1s;
height:50px;
width:150px;
font-family: 'Krub', sans-serif;
}
.computadores:hover{
background-color:white;
color:black;
border: 0.5px solid #2f3542;
font-family: 'Krub', sans-serif;
cursor:pointer;
}
.button:hover{
background-color:white;
color:black;
border: 0.5px solid #2f3542;
font-family: 'Krub', sans-serif;
cursor:pointer;
-webkit-transition:1s; /*Chrome e Safari */
}
#crono {
color:#F26B38 ;
background-color:#2A2A2A;
font-family: 'Varela Round', sans-serif;
font-size: 30px;
border:none;
}
}
#destaque {
font-family: 'Varela Round', sans-serif;
background-color:white;
color:black;
display:table;
}
section{
height:1000px;
width:600px;
color:white;
}
atricle.crono{
height:500px;
width:300px;
font-family: 'Krub', sans-serif;
}
.saiba{
background-color:white;
color:black;
border:none;
width:200px;
height:100px;
font-size: 28px;
font-family: 'Krub', sans-serif;
transition:0.5s;
border:5px solid black;
}
.saiba:hover{
color:white;
background-color:black;
border:none;
width:200px;
height:100px;
}
#bulldog{
color:#e84118;
background-color:#2A2A2A;
font-family: 'Varela Round', sans-serif;
border:none;
margin-left:800px;
}
<!Doctype HTML>
<html>
<head>
<meta charset= "UTF-8"/>
<title>Alfa Hardware</title>
<link rel="stylesheet" type="text/css" href="_css/style.css">
</head>
<body>
<div>
<header>
<h1 align="center" >ALFA HARDWARE</h1>
</header>
<nav>
<a href="index.html"><button class="button">INÍCIO</button></a>
<a href="_sections\computers.html"><button class="computadores">COMPUTADORES</button></a>
<a href="index.html"><button class="button">NOTEBOOKS</button></a>
<a href="index.html"><button class="button">CELULARES</button></a>
<a href="index.html"><button class="button">PERIFÉRICOS</button></a>
<a href="index.html"><button class="button">SOFTWARES</button></a>
</nav>
<section>
<div id="destaque">
<article style="float:left;">
<div id="crono">
<h1 style="display:block;">
NZXT CRONOS
</h1>
<br>
<span>A NOVA GERAÇÃO DE COMPUTADORES</span>
<img style = "height:500px; width: 700px;"src= "_images/crono.png">
<a href=""><button class="saiba">SAIBA MAIS </button></a>
</div>
</article>
<article style="float:left;">
<div id="bulldog">
<img style= "height:500px; width: 700px;" src="_images/bulldog.png">
</div>
</article>
</div>
</section>
</div>
</body>
</html>