Merge pull request #450 from Tereflech17/improved_blog_page_css_style

Improved blog page css style
zero-to-mastery · Oct 14, 2019 · 40a8020 · 40a8020
2 parents 57f1a33 + 032ce54
commit 40a8020
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -78,3 +78,7 @@ input.search-blog:focus {
 .searchbox-item {
     margin-left: auto;
 }
+
+.card-shadow {
+    box-shadow: 0 1rem 1rem rgba(0,0,0,0.2);
+}
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2,8 +2,11 @@
  * Following codeblocks are just starter code
  * Feel free to modify it in any way you like
  */
+
+
 html {
     scroll-behavior: smooth;
+
 }
 
  :root {
@@ -182,7 +185,7 @@ footer {
 
 .site-footer {
     padding: 100px 0; /*padding top and bottom 100px 0 padding left and right*/
-    margin-top: 10px;
+    margin-top: 8rem;
 }
 
 .site-footer a {

diff --git a/pages/blog.html b/pages/blog.html
@@ -73,7 +73,7 @@ <h1 class="title">Blog</h1>
 
     <div class="row mb-3 mt-4">
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."
@@ -91,7 +91,7 @@ <h5 class="card-title"><a href="#">Santa's Favorite Cookies</a></h5>
             </div>
         </div>
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."
@@ -109,7 +109,7 @@ <h5 class="card-title"><a href="#">How to Guide Santa's Sleigh</a></h5>
             </div>
         </div>
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."
@@ -129,7 +129,7 @@ <h5 class="card-title"><a href="#">How to Wrap Gifts</a></h5>
     </div>
     <div class="row mb-3">
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."
@@ -147,7 +147,7 @@ <h5 class="card-title"><a href="#">First Time Caroling</a></h5>
             </div>
         </div>
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."
@@ -165,7 +165,7 @@ <h5 class="card-title"><a href="#">Building a Gingerbread House</a></h5>
             </div>
         </div>
         <div class="col-sm-12 col-md-4">
-            <div class="card mx-3 mb-3 mb-md-0">
+            <div class="card mx-3 mb-3 mb-md-0 card-shadow">
                 <div class="card-body">
                     <img
                             alt="..."