05/08

Natours/starter/css/style.css

@@ -40,13 +40,13 @@ body {
     position: relative;
 }
 
-.logo-box {
+.header__logo-box {
     position: absolute;
     top: 4rem;
     left: 4rem;
 }
 
-.logo {
+.header__logo {
     height: 3.5rem;
 }
 
@@ -56,7 +56,7 @@ body {
 }
 */
 
-.text-box{
+.header__text-box{
     position: absolute;
     top: 40%;
     left: 50%;
@@ -69,13 +69,13 @@ body {
     text-align: center;
 }
 
-.heading-primary {
+.heading--primary {
     color: #fff;
     text-transform: uppercase;
     margin-bottom: 6rem;
 }
 
-.heading-primary-main {
+.heading--primary-main {
     display: block;
     font-size: 6rem;
     font-weight: 400;
@@ -86,7 +86,7 @@ body {
     animation-timing-function: ease-in;
 }
 
-.heading-primary-sub {
+.heading--primary-sub {
     display: block;
     font-size: 2rem;
     font-weight: 700;
@@ -153,7 +153,7 @@ body {
     font-size: 1.6rem;
 }
 
-.btn-animated {
+.btn--animated {
     animation: slideBottom 0.7s ease-out .75s;
     animation-fill-mode: backwards;
 }
@@ -168,7 +168,7 @@ body {
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
 }
 
-.btn-white {
+.btn--white {
     background-color: #fff;
     color: #777;
 }
@@ -186,7 +186,7 @@ body {
     transition: all 0.4s;
 }
 
-.btn-white::after{
+.btn--white::after{
     background-color: #fff;
 }
 

Natours/starter/index.html

@@ -14,16 +14,16 @@
     </head>
     <body>
         <header class="header">
-            <div class="logo-box">
+            <div class="header__logo-box">
-                <img src="./img/logo-white.png" alt="Logo" class="logo">
+                <img src="./img/logo-white.png" alt="Logo" class="header__logo">
             </div>
-            <div class="text-box">
+            <div class="header__text-box">
-                <h1 class="heading-primary">
+                <h1 class="heading--primary">
-                    <span class="heading-primary-main">outdoors</span>
+                    <span class="heading--primary-main">outdoors</span>
-                    <span class="heading-primary-sub">is where life happens</span>
+                    <span class="heading--primary-sub">is where life happens</span>
                 </h1>
 
-                <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
+                <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
             </div>
         </header>
     </body>