Estilo diferente | Front-end: Projeto de conclusão

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.