Small change to events - chapters heading to fit more content on the screen.

Removed black background under home page title image.
Added set of card to see how to implement chapters under the map.

Author: Tomasz-Kluczkowski

_sass/style.scss

@@ -275,6 +275,14 @@ a {
     url($background-url);
 }
 
+
+.upcoming-chapters-container {
+  background-size: cover;
+  background-position: center center;
+  padding-bottom: 1em;
+  min-height: 100vh;
+}
+
 .upcoming-chapters-container {
   @include base-background("../images/events/events-chapters_background_480x205px.jpeg");
 }
@@ -297,18 +305,6 @@ a {
     }
 }
 
-.upcoming-chapters-container {
-  background-size: cover;
-  background-position: center center;
-  padding-bottom: 1em;
-  min-height: 100vh;
-}
-
-.background {
-  height: 15vh;
-  background-color: black;
-}
-
 .upcoming {
 }
 
@@ -344,10 +340,10 @@ a {
   background-color: rgba(0, 0, 0, 0.5);
   width: 100%;
   color: $title-light;
-  margin-top: 2em;
+  margin-top: 1.5em;
   margin-bottom: 0;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
 }
 //
 //.upcoming__event-label {

index.html

@@ -57,12 +57,6 @@ <h2 class="navigation__subtitle">All About Open Source</h2>
         </div>
     </div>
 </div>
-<div class="container-fluid">
-    <div class="row">
-        <div class="background col-12"></div>
-    </div>
-</div>
-
 <div class="upcoming-chapters-container container-fluid">
     <div class="row">
         <div class="col-lg-6 no-padding-x">
@@ -181,6 +175,78 @@ <h2 class="chapters__title">Chapters</h2>
                                 <script async defer
                                   src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0NCzoIqGkYFdpRl-LmgWTKpxPBkqxxO0&callback=initMap">
                                 </script>
+
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-12">
+                                <!--place cards with chapter names here-->
+                                <div class="card-deck">
+                                    <div class="card">
+                                        <div class="card-header">
+                                            Featured
+                                        </div>
+                                        <img class="card-img-top" src="..."
+                                             alt="Card image cap">
+                                        <div class="card-block">
+                                            <h4 class="card-title">Card
+                                                title</h4>
+                                            <p class="card-text">This is a
+                                                longer card with supporting text
+                                                below as a natural lead-in to
+                                                additional content. This content
+                                                is a little bit longer.</p>
+                                            <p class="card-text">
+                                                <small class="text-muted">Last
+                                                    updated 3 mins ago
+                                                </small>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="card">
+                                        <div class="card-header">
+                                            Featured
+                                        </div>
+                                        <img class="card-img-top" src="..."
+                                             alt="Card image cap">
+                                        <div class="card-block">
+                                            <h4 class="card-title">Card
+                                                title</h4>
+                                            <p class="card-text">This card has
+                                                supporting text below as a
+                                                natural lead-in to additional
+                                                content.</p>
+                                            <p class="card-text">
+                                                <small class="text-muted">Last
+                                                    updated 3 mins ago
+                                                </small>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="card">
+                                        <div class="card-header">
+                                            Featured
+                                        </div>
+                                        <img class="card-img-top" src="..."
+                                             alt="Card image cap">
+                                        <div class="card-block">
+                                            <h4 class="card-title">Card
+                                                title</h4>
+                                            <p class="card-text">This is a wider
+                                                card with supporting text below
+                                                as a natural lead-in to
+                                                additional content. This card
+                                                has even longer content than the
+                                                first to show that equal height
+                                                action.</p>
+                                            <p class="card-text">
+                                                <small class="text-muted">Last
+                                                    updated 3 mins ago
+                                                </small>
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>