Styling the chapters card.

Added python sprints logo with no text to site_logo folder.

Author: Tomasz-Kluczkowski

_sass/style.scss

@@ -433,6 +433,26 @@ a {
   box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
 }
 
+.chapters__card-container {
+  margin-top: 1em;
+}
+
+.chapters__card-main {
+  background: rgba(0, 0, 0, 0.7);
+  box-shadow: rgba(0, 0, 0, 0.76) 5px 5px 5px 0;
+  border: black 1px solid;
+}
+
+.chapters__card-header {
+  border-bottom: rgba(129, 129, 129, 0.41) 1px solid;
+  background-color: $dark-blue;
+}
+
+.chapters__card-title {
+  @extend .title-light;
+  font-size: 1.1em;
+}
+
 .events {
   margin-top: 15%;
   background: $background-dark;

index.html

@@ -178,34 +178,16 @@ <h2 class="chapters__title">Chapters</h2>
 
                             </div>
                         </div>
-                        <div class="row">
+                        <div class="chapters__card-container 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 class="chapters__card-main card">
+                                        <div class="chapters__card-header card-header">
+                                            <h2 class="chapters__card-title">
+                                                <img src="static/images/site_logo/python_sprints_logo_triangles_no_text_dark_background.png" height="50">
+                                                London Python Sprints
+                                            </h2>
                                         </div>
                                         <img class="card-img-top" src="..."
                                              alt="Card image cap">

static/credits.txt

@@ -12,4 +12,6 @@ contact: <a href='https://www.freepik.com/free-photo/blank-business-cards-and-cu
 
 events photo: Photo by Alex Kotliarskyi on Unsplash
 
-passion photo: Photo by Jefferson Santos on Unsplash
+passion photo: Photo by Jefferson Santos on Unsplash
+
+