Implementando BEM

css/global.css

@@ -28,7 +28,7 @@ header{
     margin-bottom: 1em;
 }
 
-header > nav > ul{
+header > .header__menu > ul{
     display: flex;
     gap: 1em;
 }
@@ -37,11 +37,13 @@ header > .brand > a > img {
     width: 50px;
 }
 
-header > nav > ul > li > a{
+header > .header__menu > ul > li > a{
     color: var(--third-color);
     font-weight: bold;
+    transition: all .2s ease-in-out;
 }
 
+
 main{
     min-height: 85vh;
     width: 100%;

css/home.css

@@ -1,30 +1,31 @@
 @import url("./variables.css");
 
-.title{
+.container__title{
     text-align: center;
 }
 
-.title > h1 {
+.container__title > h1 {
     font-size: 4em;
     margin-bottom: 0.3em;
 }
 
-.title > h1 > span {
+.container__title > h1 > span {
     color: var(--third-color);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
-.title > h3{
+.container__title > h3{
     font-size: 2em;
     margin-bottom: 0.3em;
 }
 
-.title > h4{
+.container__title > h4{
     font-size: 2em;
     margin-bottom: 0.3em;
 }
 
-.title > h4 > a {
+.container__title > h4 > a {
     color: var(--third-color);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    text-decoration: underline;
 }

index.html

@@ -17,9 +17,9 @@
   
   <header>
 
-    <div class="brand"> <a href="#"><img src="./img/moeda.png" alt="img_coin"></a> </div>
+    <div class="header__logo"> <a href="#"><img src="./img/moeda.png" alt="img_coin"></a> </div>
 
-    <nav class="navbar">
+    <nav class="header__menu">
       <ul>
         <li> <a href="#">HOME</a> </li>
         <li> <a href="#">CLIENTES</a></li>
@@ -33,7 +33,7 @@
 
     <div class="container">
 
-      <div class="title">
+      <div class="container__title">
           <h1><span>Coin</span>Bank,</h1>
 
           <h3>O banco que cuida do seu dinherio!</h3>