header.css
.header {
background-image: url("../img/destaque.jpeg") ;
background-size: cover;
padding: 1em 0;
width: 100%;
min-height: 300px;
}
.header .header_nav {
font-size: 16px;
text-align: center;
}
.header .header_nav .header_nav_ul_li{
display: inline-block;
padding: 1em 0.5em;
margin: 5 1em;
}
.header .header_nav .header_nav_ul_li .header_nav_ul_li_a {
color: #FFFFFF;
background-color: rgba(70,160,160, 0.1) ;
text-transform: uppercase;
text-decoration: none;
padding: 16px;
}
.header .header_nav .header_nav_ul_li .header_nav_ul_li_a:hover{
background-color: rgb(75, 185,122);
transition: background-color 1s;
}
.painel_principal {
font-size: 32px;
text-align: center;
}
.painel_principal .painel_nome{
font-size: 1em;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 5px 5px 5px #0F0F0F;
padding: 16px;
}
.painel_principal .painel_data{
font-size: 1em;
text-transform: uppercase;
color: #4bb97a;
text-shadow: 5px 5px 5px #0F0F0F;
padding: 0 16px 16px 0;
margin-bottom: 16px;
}
.painel_principal .painel_principal_a {
color: #FFFFFF;
background-color: #48A97A ;
border: solid 3px;
border-radius: 10px;
padding: 16px;
text-transform: uppercase;
text-decoration: none;
}
.painel_principal .painel_principal_a:hover{
background-color: #488868;
transition: background-color 1s;
}
@media screen and (min-width: 650px){
.header .painel_principal {
font-size : 28px
}
}
about.css
.panel_about{
margin-top: 20px;
font-size: 22px;
text-align: center;
}
.panel_about .title{
font-size: 2em;
}
.panel_about .subtitle{
font-size: 1.5em;
}
.panel_about .about_content{
font-size: 1.25em;
line-height: 1.5em;
}
@media screen and (min-width: 650px){
.panel_about {
font-size : 16px
}
}
base.css
.container{
width: 96%;
margin: 0 auto;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>AluraConf</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/about.css" rel="stylesheet">
<link href="css/bae.css" rel="stylesheet">
</head>
<body>
<header class="header">
<!--Header 1 - Cabeçalho
img src="./img/destaque.jpeg" alt="imagem destaque" -->
<nav class="header_nav">
<ul>
<li class="header_nav_ul_li"><a href="#" class="header_nav_ul_li_a">Sobre</a></li>
<li class="header_nav_ul_li"><a href="#" class="header_nav_ul_li_a">Palestrantes</a></li>
</ul>
</nav>
<div>
<section class="painel_principal">
<h1 class="painel_nome">AluraConf</h1>
<br>
<h2 class="painel_data">30MAIO|RIO</h2>
<br>
<a href="#" class="painel_principal_a">INSCREVA-SE</a>
</section>
</div>
</header>
<main>
<section class="panel_about">
<div class="container">
<h2 class="title">Muito conteúdo: do frontend ao backend</h2>
<br>
<h3 class="subtitle">30 de Maio de 2021- na Cidade Maravilhosa</h3>
<br>
<div class="about_content">
<p>Com a AluraConf abordaremos o que há de novidade e conhecimentos essenciais a um desenvolver mobile.</p>
<p>É uma grande chance de ficar por dentro dos assuntos de Android, iOS, Web mobile, desenvolvimento híbrido, UX, além da
parte backend com Rest, Microservices, e BigData. O desenvolvedor atualizado vai estar aqui.</p>
</div>
</div>
</section>
<section>
<h1>3 - Painel Palestrantes</h1>
<br>
</section>
<section>
<h1>4 - Formulário de inscrição</h1>
<br>
</section>
</main>
<footer >
FOOTER
</footer>
</body>
</html>
Saiu um pouco diferente, mas consegui fazer. Montar de zero é bem diferente de assistir e acompanhar. Esqueci muita coisa, pesquisei pelo internet , as vezes mais fácil de pesquisar no próprio curso com texto/ vídeo/ exercícios separados. (atualização) Entendendo melhor com cada "section" completado. As medidas do menu com e sem hover só corrigi depois de assistir a solução. Achei dif´cil, mas com pratica deveria ficar melhor e mais rápido.
