Use BEM to style the banner section #23

masakudamatsu · May 4, 2019 · 4bd47fd · 4bd47fd
1 parent 82bd042
commit 4bd47fd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -55,14 +55,14 @@ <h1 class="logo__word">Colmar<span class="logo__word-space">Academy</span></h1>
     <main class="main" role="presentation">
       <section class="banner desktop-section">
         <div class="desktop-left" role="presentation">
-          <figure class="desktop-figure" role="presentation">
+          <figure class="banner__image desktop-figure" role="presentation">
             <img class="responsive-image" src="resources/images/banner.jpg" alt="Aerial view of students studying together">
           </figure>
         </div>
-        <div class="banner-text desktop-right" role="presentation">
+        <div class="banner__text desktop-right" role="presentation">
           <h2 class="section-title">Learn something new everyday</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-          <a href="#" class = "button">Start here</a>
+          <p class="banner__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <a href="#" class="banner__button">Start here</a>
         </div>
       </section>
       <section class="information desktop-section">

diff --git a/resources/css/style.css b/resources/css/style.css
@@ -96,22 +96,24 @@ a:hover {
   color: #FDFEF8; /* Off white */
 }
 
-.banner figure {
+.banner__image {
   width: 100%;
 }
 
-.banner-text {
+.banner__text {
   padding: 2rem 1rem;
 }
 
-.banner-text p {
+.banner__paragraph {
   font-size: 1rem;
   padding-bottom: 1.5rem;
   padding-top: 2rem;
 }
 
-.button {
+.banner__button:link,
+.banner__button:visited {
   background-color: #7695B9;
+  color: #FDFEF8;
   display: block;
   font-size: 1.5rem;
   padding: 0.5rem 0;
@@ -120,9 +122,13 @@ a:hover {
   width: 100%;
 }
 
-.button,
-.button:hover{
-  color: #FDFEF8;
+.banner__button:hover,
+.banner__button:visited:hover {
+}
+
+/* TODO: choose the color to give the feedback to the user'a action  */
+.banner__button:active,
+.banner__button:visited:active {
 }
 
 /* Information section */
@@ -331,7 +337,7 @@ footer nav {
     align-items: center;
   }
 
-  .banner-text {
+  .banner__text {
     max-width: 341px; /* Without this, the banner message gets too long. At this width, the message breaks into two lines of "Learn something new" and "everyday". */
     padding: 0;
     width: 35%;