diff --git a/blog-post.html b/blog-post.html
new file mode 100644
index 0000000..6eeecba
--- /dev/null
+++ b/blog-post.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles/blog-post-css.css">
+
+    <!-- Twitter -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <title>Blog Post</title>
+  </head>
+  <body>
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <a class="navbar-brand ml-5 logo" href="#">Ikaros</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto mr-5">
+          <li class="nav-item">
+            <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">SERVICE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">PORTFOLIO</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">ABOUT</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="#">BLOG</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">CONTACT</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <!-- /navbar -->
+
+    <!-- card columns -->
+    <div class="container" id="main-article" height="500px">
+      <div class="card-columns row mx-auto">
+        <div class="card col-lg-8">
+          <div class="card-body">
+            <img src="images/calendar.png" alt="Calendar Icon" width="60px" height="60px" style="border-radius: 10%;" id="ridiculus-image">
+            <div class="main-banner">
+              <h5 class="card-title">Ridiculus Mattis Lorem Dolor Inceptos</h5>
+              <hr>
+              <h6>Posted by <a href="...">admin</a> in <a href="...">Journal</a>, <a href="...">Photography</a>, <a href="...">Web Design</a> | <a href="...">9 Comments</a></h6>
+            </div>
+            <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="250px">
+            <p class="card-text main-text mt-3">Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes ridiculus.</p>
+            <p class="card-text main-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+            <p class="card-text main-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
+            <p class="card-text main-text">Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          </div>
+        </div>
+
+        <div class="card" style="max-width: 250px; max-height: 750px;">
+          <div class="row no-gutters">
+            <div class="col-sm-12">
+              <div class="card-body">
+                <h5 class="card-title">POPULAR POSTS</h5>
+                <div class="container">
+                  <div class="row">
+                    <div class="col-sm-2">
+                      <img src="images/grey-block.jpg" class="card-img" alt="grey block" id="vestibum">
+                    </div>
+                    <div class="col-sm">
+                      <div class="card-body post-one">
+                       <p class="card-text">Vestibum Malesuada Etiam Magna</p>
+                       <p class="card-text"><small class="text-muted">22 Nov, 2012</small></p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-4">
+              <img src="images/grey-block.jpg" class="card-img" alt="grey block">
+            </div>
+            <div class="col-sm-8">
+              <div class="card-body">
+                <p class="card-text">Mattis Egestas Fringilla Consectetur</p>
+                <p class="card-text"><small class="text-muted">15 Nov, 2012</small></p>
+              </div>
+            </div>
+            <div class="col-sm-4">
+              <img src="images/grey-block.jpg" class="card-img" alt="grey block">
+            </div>
+            <div class="col-sm-8">
+              <div class="card-body">
+                <p class="card-text">Justo Lorem Fermentum Ultricies Pharetra</p>
+                <p class="card-text"><small class="text-muted">12 Nov, 2012</small></p>
+              </div>
+            </div>
+            <hr>
+            <div class="mr-5 pb-1 ml-3">
+              <label id="search">SEARCH</label><br>
+              <input type="text" id="search" name="search">
+            </div>
+            <br>
+            <hr>
+            <div>
+              <label class="custom-text">CUSTOM TEXT</label>
+              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+              <p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Fusce mauris condimentum.</p>
+            </div>
+          </div>
+        </div> 
+
+        <div class="card-columns row mx-auto">
+          <div class="card col-lg-8">
+            <div class="card-body" id="recent-posts-imgs">
+              <h5 class="card-title">Related Posts</h5><br>
+              <image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
+              <image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
+              <image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
+              <image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+        <div class="card-columns row mx-auto">
+          <div class="card col-lg-8">
+            <div class="card-body">
+              <h5 class="card-title">2 Responses to "Ridiculus Mattis Lorem Dolor Inceptos "</h5><br>
+              <div class="container">
+                <div class="row">
+                  <div class="col-md-2" id="barney-image">
+                    <img src="images/grey-block.jpg" class="card-img" alt="grey block" width="5%" height="75px">
+                  </div>
+                  <div class="col-md-10">
+                    <div class="card-body" id="barney-comment">
+                      <h6 class="card-title">Barney Stinson</h6>
+                      <p class="card-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula porta euismod semper.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="container">
+                <div class="row">
+                  <div class="col-md-2" id="ted-image">
+                    <img src="images/grey-block.jpg" class="card-img" alt="grey block" width="5%" height="75px">
+                  </div>
+                  <div class="col-md">
+                    <div class="card-body" id="ted-comment">
+                      <h6 class="card-title">Ted Evelyn Mosby</h6>
+                      <p class="card-text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-columns">
+          <div class="card col-lg">
+            <div class="card-body comment-form">
+              <h5 class="card-title">Submit a Comment</h5>
+              <p class="text-muted">Your email address will not be published. Required fields are marked *</p>
+              <form class="form-fields">
+                <input type="text" id="name" name="name" placeholder="Name *" size="85px" required><br>
+                <input type="email" id="email" name="email" placeholder="Email *" size="85px" required><br>
+                <input type="text" id="website" name="website" placeholder="Website" size="85px"><br>
+                <input type="textarea" id="message" name="message" size="85px"><br>
+                <button type="button" name="submit-button" id="submit-button" class="btn btn-info px-5">Submit</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /card columns -->
+
+    <!-- sub-footer -->
+    <div class="container sub-footer text-muted">
+      <div class="row m-5">
+        <div class="col-sm">
+          <h6>POPULAR POSTS</h6>
+          <p>Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</p>
+          <p>14 Nov, 2012</p>
+          <hr>
+          <p>Scelerisque nisl consectetur et.</p>
+          <p>22 May, 2012</p>
+          <hr>
+          <p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce</p>
+          <p>15 July, 2012</p>
+        </div>
+        <div class="col-sm twitter">
+          <h6>TWITTER</h6>
+          <i class="fa fa-twitter" style="line-height: 2.25;" class="text-muted">  Praesent commodo cursus magna Morbi leo risus nulla consectetur. -<a href="..." class="twitter-time">21 hours ago</a></i>
+          <hr>
+          <i class="fa fa-twitter" style="line-height: 2;" class="text-muted">  Vestibulum id ligula porta euismod semper, auctor dolor fermentum. -<a href="..." class="twitter-time">2 days ago</a></i>
+          <hr>
+          <i class="fa fa-twitter" style="line-height: 2;" class="text-muted">  Donec ullamcorper nulla non metus auctor. -<a href="..." class="twitter-time">3 days ago</a></i>
+        </div>
+        <div class="col-sm about-me">
+          <h6>A LITTLE ABOUT ME</h6>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+          <p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p>
+        </div>
+        <div class="col-sm">
+          <h6>CONTACT FORM</h6>
+          <div>
+            <input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
+            <input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
+            <input type="textarea" style="background-color: rgb(56, 51, 51); border: none;" class="sub-footer-form">
+            <button type="button" name="submit-button" id="submit-button-footer" class="btn btn-info px-4 mt-3">Submit</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /sub-footer -->
+
+    <!-- footer -->
+      <div class="footer d-flex">
+        <p class="mx-5 pt-3">&#169; 2011 Ikaros. Theme by <a href="...">elemis</a>.</p>
+        <div class="social-media mr-5">
+          <a href="...">
+            <img src="images/rss.png" alt="RSS" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/facebook.png" alt="Facebook" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/twitter.png" alt="Twitter" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/dribbble.png" alt="Dribbble" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/pinterest.png" alt="Pinterest" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/linkedin.png" alt="LinkedIn" width="30px" height="30px">
+          </a>
+        </div>
+      </div>
+    <!-- /footer -->
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/images/blog-post.png b/images/blog-post.png
new file mode 100644
index 0000000..d9fc637
Binary files /dev/null and b/images/blog-post.png differ
diff --git a/images/blog.png b/images/blog.png
new file mode 100644
index 0000000..c5e50c3
Binary files /dev/null and b/images/blog.png differ
diff --git a/images/calendar.png b/images/calendar.png
new file mode 100644
index 0000000..08f9423
Binary files /dev/null and b/images/calendar.png differ
diff --git a/images/dribbble.png b/images/dribbble.png
new file mode 100644
index 0000000..fcf9f41
Binary files /dev/null and b/images/dribbble.png differ
diff --git a/images/facebook.png b/images/facebook.png
new file mode 100644
index 0000000..6bbd4f7
Binary files /dev/null and b/images/facebook.png differ
diff --git a/images/grey-block.jpg b/images/grey-block.jpg
new file mode 100644
index 0000000..b620a64
Binary files /dev/null and b/images/grey-block.jpg differ
diff --git a/images/linkedin.png b/images/linkedin.png
new file mode 100644
index 0000000..5707988
Binary files /dev/null and b/images/linkedin.png differ
diff --git a/images/pinterest.png b/images/pinterest.png
new file mode 100644
index 0000000..a159d92
Binary files /dev/null and b/images/pinterest.png differ
diff --git a/images/rss.png b/images/rss.png
new file mode 100644
index 0000000..fea2a0c
Binary files /dev/null and b/images/rss.png differ
diff --git a/images/twitter.png b/images/twitter.png
new file mode 100644
index 0000000..fb0724f
Binary files /dev/null and b/images/twitter.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0b592ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles/index-css.css">
+
+    <!-- Twitter -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <!-- Calendar Icon Link -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <title>Blog</title>
+
+  </head>
+  <body>
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <a class="navbar-brand logo" href="#">Ikaros</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto mr-5">
+          <li class="nav-item">
+            <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">SERVICE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">PORTFOLIO</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">ABOUT</a>
+          </li>
+          <li class="nav-item active">
+            <a class="nav-link" href="#">BLOG</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">CONTACT</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <!-- /navbar -->
+
+    <!-- main content -->
+
+    <div class="card-group mx-5 main-content">
+      <div class="row p-3 mx-5">
+        <div class="card col-lg-3 mt-5 mx-1 posts">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="225px">
+          <div class="card-body">
+            <h5 class="card-title">Ullamcorper Nibh Parturient</h5>
+            <p class="card-text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 17 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 15</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-5 mx-1 posts">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="255px">
+          <div class="card-body">
+            <h5 class="card-title">Condimentum Ultricies Ullamcorper</h5>
+            <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 15 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 21</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-5 mx-1 posts">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="215px">
+          <div class="card-body">
+            <h5 class="card-title">Nibh Fusce Parturient Tristique</h5>
+            <p class="card-text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 11 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 23</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts post-four">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="255px">
+          <div class="card-body">
+            <h5 class="card-title">Nullam Mattis Sit Tellus</h5>
+            <p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 09 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 13</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="215px">
+          <div class="card-body">
+            <h5 class="card-title">Porta Condimentum Tellus</h5>
+            <p class="card-text">Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 05 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 11</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts post-six">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="225px">
+          <div class="card-body">
+            <h5 class="card-title">Consectetur Ligula Etiam</h5>
+            <p class="card-text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia eodio sem nec elit.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 03 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 13</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts post-seven">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="215px">
+          <div class="card-body">
+            <h5 class="card-title">Tortor Pharetra Fermentum</h5>
+            <p class="card-text">Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 01 January, 2012 <p class="comments"><i class="fa fa-comments-o"></i> 17</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts post-eight">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="255px">
+          <div class="card-body">
+            <h5 class="card-title">Ligula Inceptos Cursus Sit</h5>
+            <p class="card-text">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 29 December, 2011 <p class="comments"><i class="fa fa-comments-o"></i> 11</small></p></p>
+          </div>
+        </div>
+        <div class="card col-lg-3 mt-3 mx-1 posts post-nine">
+          <img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="250px">
+          <div class="card-body">
+            <h5 class="card-title">Ornare Elit Cursus Tellus</h5>
+            <p class="card-text">Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.</p>
+            <hr>
+            <p class="card-text"><small class="text-muted comment-date glyphicon">&#xe109; 25 December, 2011 <p class="comments"><i class="fa fa-comments-o"></i> 49</small></p></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr class="mt-5">
+    <button type="button" name="submit-button" id="submit-button" class="btn btn-info mt-3 px-5">Older Posts</button>
+    <!-- /main content -->
+
+    <!-- sub-footer -->
+    <div class="container sub-footer text-muted">
+      <div class="row m-5">
+        <div class="col-sm">
+          <h6>POPULAR POSTS</h6>
+          <p>Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</p>
+          <p>14 Nov, 2012</p>
+          <hr>
+          <p>Scelerisque nisl consectetur et.</p>
+          <p>22 May, 2012</p>
+          <hr>
+          <p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce</p>
+          <p>15 July, 2012</p>
+        </div>
+        <div class="col-sm twitter">
+          <h6>TWITTER</h6>
+          <i class="fa fa-twitter" style="line-height: 2.25;" class="text-muted">  Praesent commodo cursus magna Morbi leo risus nulla consectetur. -<a href="..." class="twitter-time">21 hours ago</a></i>
+          <hr>
+          <i class="fa fa-twitter" style="line-height: 2;" class="text-muted">  Vestibulum id ligula porta euismod semper, auctor dolor fermentum. -<a href="..." class="twitter-time">2 days ago</a></i>
+          <hr>
+          <i class="fa fa-twitter" style="line-height: 2;" class="text-muted">  Donec ullamcorper nulla non metus auctor. -<a href="..." class="twitter-time">3 days ago</a></i>
+        </div>
+        <div class="col-sm about-me">
+          <h6>A LITTLE ABOUT ME</h6>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+          <p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p>
+        </div>
+        <div class="col-sm">
+          <h6>CONTACT FORM</h6>
+          <div>
+            <input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
+            <input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
+            <input type="textarea" style="background-color: rgb(56, 51, 51); border: none;" class="sub-footer-form">
+            <button type="button" name="submit-button" id="submit-button-footer" class="btn btn-info px-4 mt-3">Submit</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /sub-footer -->
+
+    <!-- footer -->
+      <div class="footer d-flex">
+        <p class="mx-5 pt-3">&#169; 2011 Ikaros. Theme by <a href="...">elemis</a>.</p>
+        <div class="social-media mr-5">
+          <a href="...">
+            <img src="images/rss.png" alt="RSS" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/facebook.png" alt="Facebook" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/twitter.png" alt="Twitter" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/dribbble.png" alt="Dribbble" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/pinterest.png" alt="Pinterest" width="30px" height="30px">
+          </a>
+          <a href="...">
+            <img src="images/linkedin.png" alt="LinkedIn" width="30px" height="30px">
+          </a>
+        </div>
+      </div>
+    <!-- /footer -->
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles/blog-post-css.css b/styles/blog-post-css.css
new file mode 100644
index 0000000..6904e36
--- /dev/null
+++ b/styles/blog-post-css.css
@@ -0,0 +1,145 @@
+/* navbar */
+
+.logo {
+    font-family: 'Snell Roundhand', 'Brush Script', Damion, 'Ceviche One', cursive;
+}
+
+/* main article */
+
+#ridiculus-image {
+    float: left;
+}
+
+.main-banner {
+    float: right;
+    margin-right: 100px;
+}
+
+#main-article {
+    max-height: 500px;
+    font-size: smaller;
+}
+
+.main-text {
+    font-size: medium;
+}
+
+/* popular post sidebar */
+
+#vestibum {
+    float: left;
+    width: 86px;
+    margin-left: -35px;
+    margin-top: 25px;
+}
+
+.post-one {
+    margin-left: 15px;
+}
+
+/* recent posts */
+
+#recent-posts-imgs {
+    display: inline-block;
+}
+
+/* custom text sidebar */
+
+.custom-text {
+    font-size: smaller;
+}
+
+/* responses */
+
+#barney-image {
+    max-width: 100px;
+    float: left;
+    padding-top: 20px;
+}
+
+#barney-comment {
+    float: right;
+}
+
+#ted-image {
+    margin-left: 6em;
+    max-width: 100px;
+    float: left;
+    padding-top: 20px;
+}
+
+#ted-comment {
+    float: right;
+}
+
+/* submit a comment form */
+
+.comment-form {
+    width: 710px;
+    max-width: 750px;
+}
+
+.form-fields {
+    width: 700px;
+}
+
+#message {
+    height: 100px;
+}
+
+#submit-button {
+    margin-top: 20px;
+}
+
+#name {
+    margin-bottom: 20px;
+}
+
+#email {
+    margin-bottom: 20px;
+}
+
+#website {
+    margin-bottom: 20px;
+}
+
+/* sub-footer*/
+
+.sub-footer {
+    margin-top: 1500px;
+    background-color: #3C4752;
+    min-width: 1200px;
+    float: left;
+}
+
+.twitter-time {
+    color: rgba(77, 180, 206, 0.685);
+}
+
+.about-me {
+    line-height: 2;
+}
+
+.sub-footer-form {
+    height: 150px;
+}
+
+#submit-button-footer {
+    background-color: rgb(22, 116, 153);
+    border: none;
+}
+
+/* footer */
+
+.footer {
+    margin-top: 1000px;
+    background-color: #353835;
+    color: lightslategray;    
+    width: 100%;
+}
+
+.social-media {
+    float: right;
+    margin-top: 13px;
+    margin-left: 600px;
+}
\ No newline at end of file
diff --git a/styles/index-css.css b/styles/index-css.css
new file mode 100644
index 0000000..b062137
--- /dev/null
+++ b/styles/index-css.css
@@ -0,0 +1,103 @@
+/* navbar */
+
+.logo {
+    font-family: 'Snell Roundhand', 'Brush Script', Damion, 'Ceviche One', cursive;
+    margin-left: 50px;
+}
+
+#navbarNav {
+    float: right;
+    margin-left: 525px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* main content */
+
+.main-content {
+    width: 115%;
+}
+
+.comment-date {
+    float: left;
+    font-family: Calibri, 'Open Sans', 'Alégre Sans', 'Helvetica Neue', sans-serif;
+    font-size: inherit;
+    font-stretch: extra-condensed;
+}
+
+.comments {
+    float: right;
+}
+
+.posts {
+    height: fit-content;
+    display: inline-block;
+}
+
+.post-four {
+    top: -50px;
+}
+
+.post-six {
+    top: -80px;
+}
+
+.post-seven {
+    top: -50px;
+}
+
+.post-eight {
+    top: -80px;
+}
+
+.post-nine {
+    top: -130px;
+}
+
+hr {
+    border: 2px dotted;
+}
+
+#submit-button {
+    margin-left: 50px;
+}
+
+/* sub-footer*/
+
+.sub-footer {
+    margin-top: 50px;
+    background-color: #3C4752;
+    min-width: 1200px;
+    float: left;
+}
+
+.twitter-time {
+    color: rgba(77, 180, 206, 0.685);
+}
+
+.about-me {
+    line-height: 2;
+}
+
+.sub-footer-form {
+    height: 150px;
+}
+
+#submit-button-footer {
+    background-color: rgb(22, 116, 153);
+    border: none;
+}
+
+/* footer */
+
+.footer {
+    margin-top: 425px;
+    background-color: #353835;
+    color: lightslategray;    
+    width: 100%;
+}
+
+.social-media {
+    float: right;
+    margin-top: 13px;
+    margin-left: 600px;
+}
\ No newline at end of file
