diff --git a/CSS/blog-post-style.css b/CSS/blog-post-style.css
new file mode 100644
index 0000000..7ba23ec
--- /dev/null
+++ b/CSS/blog-post-style.css
@@ -0,0 +1,471 @@
+/*---- POST SITE ---- */
+
+	* {box-sizing: border-box;}
+
+	.body { 
+		margin: 100px; 
+		font-family: Droid Sans, Arial, sans-serif; 
+		font-size: 13px; 
+		line-height: 1px;
+		display: block;	}  
+
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+    @media screen and (max-width: 800px) {
+      .leftcolumn, .rightcolumn {   
+          width: 100%;
+          padding: 0;   }  }   
+   
+	/* ---- HEADER ----*/
+
+    /* Style inputs for header and navbar */            
+	
+	.logo {
+		float: left;
+		margin-top: 26px;
+		padding-left: 269px;
+		padding-right: 379px;}
+		
+	.header {
+      color:#D4D4D4;
+      background-color: rgb(58,61,64);
+      width: 965px;
+      height: 10px;
+      padding: 50px 270px 33px 265px;
+      margin: 0px auto;
+      text-align: right;
+      font-size: 17px; }
+	
+/* ---- HEADER CONTAINER --- */
+
+	.container {
+		width: 100%;
+		background-color: #3a3d40;
+		color: #fff;
+		position: relative;
+		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 1);
+		padding-bottom: 6px;}
+            
+    #navbar a {
+      float: left;
+      vertical-align: right;
+      margin-top: 26px; }
+
+    .navbar { overflow: hidden; background-color: #555555 }
+            
+    .navbar-nav a { 
+      float: right;
+      color: white;
+      text-align: right;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 13px;
+      display: inline; }
+    
+    .a {text-decoration: none; }
+                    
+    .navbar a:hover { background-color: darkgrey; color: white;  }
+
+/* MAIN CONTENT */
+  			
+	.post-container {
+		width: 85%;
+		margin: 50px auto 50px;		}
+
+	.post-container .main-content {
+		width: 70%;
+		float: left;
+		padding-right: 10px;	}
+
+	.post-container .main-content .post {
+		width: 95%;
+		height: 270px;
+		margin: 10px auto;
+		text-decoration: none;	}
+
+	.post-container .main-content .post .post-image {
+		widows: 40%;
+		height: 100%;	}
+
+	.post-container .main-content .recent-post-title {
+		margin: 20px;
+		text-decoration: none;	}
+
+	.post-container .main-content .sidebar {
+		width: 30%;
+		float: right;
+		height: 300px;	}
+
+		
+	/* Fake image */
+	.fakeimg {
+		background-color: #aaa;
+		width: 100%;
+		padding: 20px;	}
+
+	
+/* ---- DIVIDER ----*/
+	.hr {
+		border: none;
+		background: transparent url(/index.html/images/full\ dotdiv.png) repeat-x;
+		height: 3px;
+		margin-top: 30px;
+		margin-bottom: 50px; }
+
+/* ---- IMAGE ----*/
+	.img {
+		float: left;
+		width: 159px;
+		height: 150px;
+		padding: 4px 19px 35px 17px;   	}
+
+	#fancybox-thumbs ul li img {
+		max-width: none;	}
+
+	img.left, img.alignleft {
+		float: left;
+		margin: 10px 20px 10px 0;	}
+
+	img.right, img.alignright {
+		float: right;
+		margin: 10px 0 10px 20px;	}
+
+	img.center, img.aligncenter {
+		text-align: center;
+		display: block;
+		margin: 0 auto;
+		padding: 0 0 20px 0;	}
+
+	.alignleft {
+		float: left;	}
+
+	.alignright {
+		float: right;	}
+
+	.aligncenter {
+		text-align: center;	}
+
+	.latest-blog {
+		width: 110%;
+		margin-bottom: -40px;
+		margin-right: -40px;	}
+	
+/* RELATED POSTS */
+	.post-container .related {
+		margin-top: 50px;
+		padding-bottom: 35px;	}
+			
+/* FORM */
+
+	.forms {
+		position: relative;
+		padding: 0;
+		width: 100%; }
+
+	.form-container .response {
+		color: #58a267;
+		display: none;
+		margin: 0 0 15px 0;	}
+
+	.forms ol {
+		margin:0;
+		padding:0;	}
+
+	.forms ol li {
+		line-height:auto;
+		list-style: none;	}
+
+	.forms li.form-row { 
+		margin-bottom: 10px;	}
+
+	.forms li.hidden-row {
+		display: none;		}
+
+	.forms fieldset .text-input,
+	.forms fieldset .text-area,
+	.comment-form input,
+	.comment-form textarea {
+		border: 1px solid #e3e3e3;
+		background: #f7f7f7;
+		height: 35px;
+		line-height: 1;
+		padding: 5px 10px;
+		color: #555555;
+		resize: none;		}
+
+	.forms fieldset .text-input:focus,
+	.forms fieldset .text-area:focus,
+	.comment-form input:focus,
+	.comment-form textarea:focus {
+		border: 1px solid #c5c5c5;	}
+
+	.forms fieldset .text-area,
+	.comment-form textarea {
+		min-height: 200px;
+		padding: 10px;
+		resize: vertical;	}
+
+	.forms li.error input, 
+	.forms li.error textarea {
+		border: 1px solid #d18282;	}
+
+	.footer .forms fieldset .text-input,
+	.footer .forms fieldset .text-area {
+		border: none;
+		background: #2d3032;
+		height: 35px;
+		line-height: 1;
+		padding: 5px 10px;
+		color: #bfbfbf;
+		resize: none;	}
+
+	.footer .forms fieldset .text-input:focus,
+	.footer .forms fieldset .text-area:focus {
+		background: #282b2d;	}
+
+	.footer .forms fieldset .text-area {
+		min-height: 140px;
+		padding: 10px;
+		resize: vertical;	}
+
+	.footer .forms li.error input, 
+	.footer .forms li.error textarea {
+		border: 1px solid #913434;		}
+
+	.footer .form-container .response {
+		color: #C9C9C9;		}
+
+	.forms span.error {
+		display: none;	}
+
+	.forms .button-row span.error {
+		padding: 0;
+		display: none;		}
+
+	.forms label {
+		display: block;
+		float: left;
+		width: 95px;
+		padding-top: 7px;
+		font-size: 13px;
+		clear: both;		}
+
+	.comment-form div {
+		position:relative;
+		margin-bottom: 20px;		}
+
+	.comment-form div label {
+		position:absolute; top:0; left:0		}
+
+	.form-container:after {
+		content: '';
+		display: block;
+		height: 0;
+		clear: both;
+		visibility: hidden;		}
+		
+/*SIDE BAR */
+
+	.sidebar {
+		background: transparent repeat-y left top;
+		padding-left: 30px;
+		margin-left: 30px;
+		width: 290px;
+		float: right;
+		box-sizing: border-box; }
+
+	.sidebox {
+		margin-top: 20px;
+		padding-top: 40px;
+		background: transparent center top repeat-x; } 
+
+	.sidebox:first-child {
+		background: none;
+		padding: 0;
+		margin: 0; } 
+
+	.sidebox h3 {
+		font-size: 14px;
+		text-transform: uppercase;
+		margin-bottom: 15px; }
+
+	.sidebox ul.posts-list {
+		color: #878787; }
+
+	.sidebox ul.posts-list:after {
+		content: '';
+		display: block;
+		height: 0;
+		clear: both;
+		visibility: hidden; } 
+
+	.sidebox ul.posts-list li {
+		clear: both;
+		background: none;
+		padding: 15px 0 0 0;
+		line-height: 17px; }
+
+	.sidebox ul.posts-list li:first-child {
+		padding: 0; }
+
+	.sidebox ul.posts-list li .featured {
+		float: left;
+		margin-right: 15px; }
+
+	.sidebox ul.posts-list li .meta {
+		overflow: hidden; }
+
+	.sidebox ul.posts-list li em {
+		display: inline-block;
+		font-style: normal;
+		font-size: 11px; }
+
+	.sidebox ul.posts-list li h6 {
+		margin-bottom: 5px;
+		font-weight: normal;
+		font-family: 'Droid Sans', sans-serif;
+		font-size: 13px;
+		line-height: 22px;  }
+
+	.sidebox ul.posts-list li h6 a {
+		color: #555555; }
+
+	.sidebox ul.posts-list li h6 a:hover {
+		color: #6b99b6; }
+
+	.sidebox ul.posts-list li em {
+		color: #999999; }
+
+	.sidebox .list {
+		overflow: hidden;
+		margin-bottom: -20px; }
+
+	.sidebox a {
+		color: #555555; }
+
+	.sidebox a:hover {
+		color: #6b99b6; }
+
+	.searchform input {
+		border: none;
+		background: #f7f7f7;
+		color: #999999;
+		padding: 7px 10px;
+		margin-bottom: 20px;
+		border: 1px solid #e3e3e3; 	}
+
+	.searchform input:focus {
+		border: 1px solid #c5c5c5;	}
+
+/*	COMMENTS */
+
+	.comments {
+		margin: 50px 0 0 0;
+		padding-bottom: 40px;
+		background: transparent  center bottom repeat-x; }
+
+	.comments ol.commentlist {
+		list-style:none;
+		margin: -5px 0 0 0; }
+
+	.comments ol.commentlist li {
+		padding:20px 0 0 0;
+		background: none; }
+
+	.comments .user {
+		float:left;
+		width: 70px;
+		height: 70px;
+		margin-right:20px; }
+
+	.comments .message {
+		overflow: hidden;
+		padding:15px 20px 0 20px;
+		background: #f7f7f7;
+		border: 1px solid #e3e3e3;
+		position: relative;
+	}
+	.comments ul.children {
+		margin:0;
+		overflow: inherit;
+		padding:0 0 0 40px;
+	}
+	.comments ol.commentlist ul.children li {
+		padding-right:0;
+		border:none;
+	}
+	.comments .info h2 {
+		font-size: 14px;
+		margin: 0;
+	}
+	.comments .info {
+		margin-bottom: 12px;
+	}
+	.comments .info h2 a {
+		color: #555555;
+	}
+	.comments .info .meta {
+		font-size: 11px;
+		color: #999999;
+	}
+	.comments .info a:hover {
+		color: #6b99b6;
+	}
+	.comments a.reply-link {
+		position: absolute;
+		right: 20px;
+		top: 20px;
+		line-height: 1;
+		font-size: 11px;
+		text-transform: uppercase;
+	}
+	.comment-form-wrapper {
+		margin-top: 50px;
+	}
+ 
+/* FOOTER */
+
+    .footer { overflow: hidden; background-color: #746f6f }
+
+    .footer {
+      padding: 10px;
+      text-align: left;
+      background-color: #746f6f;
+      color: white;
+      font-size: 13px;
+    } 
+
+    .footer header {
+      font-family: droid sans, sans-serif;
+      font-size: 10px;
+      box-sizing: 217px, 139px;
+    }
+			
+	.ul {
+		display: inline;
+		list-style: none; }
+
+	.li {
+		display: inline;
+		padding: 20px;
+		margin-left: -5px;
+		font-size: 13px; }
+
+	/* COPYRIGHT AND SOCIAL MEDIA BUTTONS */
+
+    .copyright {
+		float: left;
+		max-width: 500px;
+	}
+	
+	.copyright p {
+		padding: 3px 0 0 0;
+	}
+	
+	.social {
+		padding: 0;
+		margin-bottom: 4px;
+		float: right;
+	}
+	
+   
+    
\ No newline at end of file
diff --git a/CSS/style.css b/CSS/style.css
new file mode 100644
index 0000000..d0f1791
--- /dev/null
+++ b/CSS/style.css
@@ -0,0 +1,158 @@
+  .body { margin: 0px; font-family: Droid Sans, Arial, sans-serif; font-size: 13px; line-height: 22px;}
+  
+    * {box-sizing: border-box;}
+   
+      /* Style inputs for header and navbar */            
+    .header {
+      color:#D4D4D4;
+      background-color: rgb(58,61,64);
+      width: 965px;
+      height: 10px;
+      padding: 50px 270px 33px 265px;
+      margin: 0px;
+      text-align: right;
+      font-size: 17px; 
+    }
+            
+    #navbar a {
+      float: left;
+      vertical-align: right;
+      margin-top: 26px; }
+
+    .navbar { overflow: hidden; background-color: #555555 }
+            
+    .navbar-nav a { 
+      float: right;
+      color: white;
+      text-align: right;
+      padding: 14px 16px;
+      text-decoration: none;
+      font-size: 13px;
+      display: inline; }
+    
+    .a {text-decoration: none; }
+                    
+    .navbar a:hover { background-color: darkgrey; color: white;  }
+
+    /* Style inputs for Main Content Area */
+
+    .hr {
+      display: block;
+      unicode-bidi: isolate;
+      margin-block-start: 0.5em;
+      margin-block-end: 0.5em;
+      margin-inline-start: auto;
+      margin-inline-end: auto;
+      overflow: hidden;
+    }
+
+    /* Style the submit button with a specific background color etc */ 
+
+                          
+    .fas fa-comments {
+      float: right;     } 
+ 
+    .span {
+      float: right;     }
+
+
+    .footer { overflow: hidden; background-color: #746f6f }
+
+    .footer {
+      padding: 10px;
+      text-align: left;
+      background-color: #746f6f;
+      color: white;
+      font-size: 13px;
+    } 
+
+    .footer header {
+      font-family: droid sans, sans-serif;
+      font-size: 10px;
+      box-sizing: 217px, 139px;
+    }
+            
+    /* CONTACT FORM */
+    /* Style inputs with type="text", select elements and textareas */
+    .input text {
+      width: 219px;
+      height: 33px; 
+      padding: 9px; 
+      border: none;  
+      border-radius: 4px; 
+      margin-top: 10px; 
+      margin-bottom: 16px; 
+      resize: vertical 
+    }
+  
+    .input textarea {
+      width: 219px;
+      height: 139px;
+      font-size: 13px;
+      font-family: 'droid sans', sans-serif;
+      padding: 9px; 
+      border: none;  
+      border-radius: 4px; 
+      margin-top: 10px; 
+      margin-bottom: 16px; 
+      resize: vertical 
+    }
+    
+    ul {
+      display: inline;
+      list-style: none; }
+  
+    li {
+      display: inline;
+      padding: 20px;
+      margin-left: -5px; }
+
+ 
+   
+
+    /* Add a background color and some padding around the form */
+    .form-container {
+      display: block;
+      border-radius: 5px;
+      background-color:rgb(39,41,43);
+     } 
+
+    /* COPYRIGHT AND SOCIAL MEDIA BUTTONS */
+
+    .copyright {
+      float: left;
+      max-width: 500px;
+    }
+    
+    .copyright p {
+      padding: 3px 0 0 0;
+    }
+    
+    .social {
+      padding: 0;
+      margin-bottom: 4px;
+      float: right;
+    } 
+    
+       
+     /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+    @media screen and (max-width: 800px) {
+      .leftcolumn, .rightcolumn {   
+          width: 100%;
+          padding: 0;   }  }   
+   
+
+                           
+            
+                    
+            
+  
+            
+        
+     
+    
+          
+
+    
+    
+          
\ No newline at end of file
diff --git a/blog-post.png b/index.html/blog-images/blog-post.png
similarity index 100%
rename from blog-post.png
rename to index.html/blog-images/blog-post.png
diff --git a/index.html/blog-post.html b/index.html/blog-post.html
new file mode 100644
index 0000000..1971a8f
--- /dev/null
+++ b/index.html/blog-post.html
@@ -0,0 +1,379 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+        <title>Ikaros</title>
+
+        <link rel="stylesheet" href="./CSS/blog-post-style.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
+        <link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
+        <link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
+        <link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
+        <link href='http://fonts.googleapis.com/css?family=Ubuntu:700,700italic,300italic,300' rel='stylesheet' type='text/css'>
+        <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+        <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
+        
+        <style>
+             
+              #navbar a {
+                float: left;
+                vertical-align: right;
+                margin-top: 26px; }
+
+              .navbar { overflow: hidden; background-color: #555555 }
+                      
+              .navbar-nav a { 
+                float: right;
+                color: white;
+                text-align: right;
+                padding: 14px 16px;
+                text-decoration: none;
+                font-size: 13px;
+                display: inline; }
+
+              ul {
+                display: inline;
+                list-style: none; } 
+            
+              li {
+                display: inline;
+                padding: 20px;
+                margin-left: -5px;
+                font-size: 13px; }
+
+              .navbar a:hover { background-color: darkgrey; color: white;  }
+         
+              .post-container {
+                width: 85%;
+                height: 1850px;
+                margin: 50px auto 50px;		}
+
+              .post-container .main-content {
+                width: 80%;
+                float: left;
+                padding-right: 10px;	
+                display: flex;
+                flex-wrap: nowrap;    }
+      
+              .post-container .main-content .sidebar {
+                width: 40%;
+                float: left;
+                height: 300px; 
+                padding: 50px 50px;        	}
+
+              .post-container .related {
+                float: left;
+                padding-bottom: 35px;	}
+
+              #comments .user {
+                float:left;
+                width: 70px;
+                height: 70px;
+                margin-right:20px; }
+
+              #comments .message {
+                overflow: hidden;
+                padding:15px 20px 0 20px;
+                background: #f7f7f7;
+                border: 1px solid #e3e3e3;
+                position: relative;   }
+                
+              .footer { overflow: hidden; background-color: #746f6f }
+
+              /*.footer-container   */        
+                      
+              #footer {
+                padding: 10px;
+                text-align: left;
+                background-color: #746f6f;
+                color: white;
+                font-size: 13px; } 
+                
+              
+
+          </style>
+          
+    </head>
+      <body>
+       
+          <header>
+              <nav class="navbar navbar-expand-lg sticky-top pt-0 pb-0 navbar-white">
+                <div class="container">
+                    <!-- Brand/logo -->
+                    <a class="navbar-brand" href="#"><img src="./images/logo.png" alt="Ikaros logo" width="89px" height="32px"></a>
+                    
+                    <!-- Navigation Bar -->
+                    <ul class="navbar-nav">
+                      <li class="nav-item">
+                        <a class="nav-link active" href="#">HOME</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">
+                        <a class="nav-link" href="#">BLOG</a></li>
+                      <li class="nav-item">
+                        <a class="nav-link" href="#">CONTACT</a></li>
+                    </ul>
+                </div>
+              </nav>
+            <!-- End of Header and NavBar -->        
+
+          <!-- Content -->
+          <div class="post-container">
+
+          <!-- Main Content -->
+            <div class="main-content">
+              <div class="post" style="width: 85%;">
+                  <div class="title-meta">
+                    <img src="./images/jan23iconthumb.png" alt="January 23 Icon"><br>
+                    <h3 class="post-title">Ridiculus Mattis Lorem Dolor Inceptos</h3>
+                    <div class="meta">Posted by <a href="#">admin</a> in Journal, Photography, Web Design<a href="#"> | </a> <a href="#"> 9 Comments</a></div>
+                  </div>
+        
+                  <div class="post-image">
+                      <div class="featured" style="height: 200px; background-color: grey;"></div>
+                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam. Semper risus in hendrerit gravida rutrum. Integer enim neque volutpat ac tincidunt vitae semper quis.</p>
+                          
+                          <p>Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Neque convallis a cras semper auctor. Integer vitae justo eget magna fermentum iaculis eu. Vel facilisis volutpat est velit egestas dui id ornare. Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Faucibus nisl tincidunt eget nullam. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Egestas egestas fringilla phasellus faucibus. Leo vel orci porta non pulvinar neque laoreet suspendisse. </p>
+
+                          <p>Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. </p>
+                          
+                          <p>Velit sed ullamcorper morbi tincidunt. Leo duis ut diam quam nulla porttitor. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Pretium viverra suspendisse potenti nullam. Non enim praesent elementum facilisis leo vel fringilla. Habitasse platea dictumst quisque sagittis. Tempus urna et pharetra pharetra massa massa ultricies. Lectus sit amet est placerat in egestas erat imperdiet. </p>
+                      </div>
+                      <br>
+
+                      <div class="row">
+                        <div class="col-sm-3">
+                          <div class="featured"><a href="#"><img src="./images/post-divider.png" alt="" /></a></div>
+                        </div>
+                      </div>
+                      <br>
+
+                      <div class="related">
+                        <h5>Related Posts</h5>  
+                        
+                            <div class="row" style="margin-right: 0px;">
+                              <div class="col-sm-3">
+                                <div class="featured"><a href="#"><img src="./images/r3.jpg" alt=""></a></div>
+                              </div>
+                              
+                              <div class="col-sm-3">
+                                <div class="featured"><a href="#"><img src="./images/r3.jpg" alt=""></a></div>
+                              </div>
+
+                              <div class="col-sm-3">
+                                <div class="featured"><a href="#"><img src="./images/r3.jpg" alt=""></a></div>
+                              </div>
+
+                              <div class="col-sm-3">
+                                <div class="featured"><a href="#"><img src="./images/r3.jpg" alt=""></a></div>
+                              </div>
+                            </div>  
+                      </div>                                     
+                    <br>
+                    <br>
+                
+                      <div class="row">
+                        <div class="col-sm-3">
+                          <div class="featured"><a href="#"><img src="./images/post-divider.png" alt="" /></a></div>
+                        </div>
+                      </div>
+                      <br>
+
+                    <!-- Begin Comments -->
+                      <div id="comments">
+                          <h5>2 Responses to "Ridiculus Mattis Lorem Dolor Inceptos"</h5>
+                        <ol id="singlecomments" class="commentlist">
+                          <li class= "clearfix" style="padding-top: 5px;">
+                            <div class="user" style="padding-top: 18px;"><img alt="" src="./images/a3.jpg"></div>
+                              <div class="message" style="border: 3px solid #e1e1e1">
+                                  <div class="info">
+                                    <h6><a href="#">Barney Stinson</a></h6>
+                                  </div>
+                                  <p>Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare elit, quis mattis eros sodales ac.</p>
+                              </div>
+                          </li>   
+
+                            <ul class="children">
+                              <li class= "clearfix">
+                                <div class="user"><img alt="" src="./images/a3.jpg" class="avatar" /></div>
+                                <div class="message" style="border: 3px solid #e1e1e1">
+                                    <div class="info">
+                                    <h6><a href="#">Ted Evelyn Mosby</a></h6> </div>
+                                  <p>Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit amet quam sollicitudin vestibulum vitae malesuada libero. Mauris magna elit, suscipit non ornare et, blandit a tellus. Pellentesque dignissim ornare elit, quis mattis eros sodales ac.</p>
+                                </div>
+                              </li> 
+                            </ul>
+                        </ol>
+                      </div>
+                    <!-- End Comments --> 
+            
+                    <div class="row">
+                        <div class="col-sm-3">
+                          <div class="featured"><a href="#"><img src="./images/post-divider.png" alt="" /></a></div>
+                        </div>
+                      </div>
+                      <br>
+
+                    <!-- Begin Form -->
+                      <div class="comment-form-wrapper">
+                        <h5>Submit a Comment</h5>
+                          <p>Your email address will not be published. Required fields are marked *</p>
+                          <form class="comment-form" name="form_name" action="#" method="post">
+                              <div>
+                                <input type="text" name="first" title="Name*"/>
+                              </div>
+                              <div>
+                                <input type="text" name="first" title="Email*" />
+                              </div>
+                              <div>
+                                <input type="text" name="first" title="Website" />
+                              </div>
+                              <div>
+                                <textarea name="textarea" id="textarea" rows="5" cols="30"></textarea>
+                              </div>
+                              <input type="submit" value="Submit" name="submit" class="btn-submit" />
+                          </form>
+                      </div>
+                    </div>     
+                    
+                <!-- End of Main Content -->
+                
+                  <div class="sidebar">
+                      <div class="sidebox">
+                        <h5>Popular Posts</h5>
+                        <ul class="posts-list">
+                          <li> <div class="featured"><a href="#"><img src="./images/a3.jpg" alt="" /></a></div>
+                            <div class="meta">
+                              <h6><a href="#">Interior Design Workshop</a></h6>
+                              <em>02 Mar 2012</em>
+                            </div> 
+                          </li>
+                          <li> <div class="featured"><a href="#"><img src="./images/a3.jpg" alt="" /></a></div>
+                            <div class="meta">
+                              <h6><a href="#">Unbearable Waiting Hours in the Doctor's Office</a></h6>
+                              <em>23 Dec 2011</em> 
+                            </div> 
+                          </li>
+                          <li> <div class="featured"><a href="#"><img src="./images/a3.jpg" alt="" /></a></div>
+                            <div class="meta">
+                              <h6><a href="#">How to Eat Healthy</a></h6>
+                              <em>15 Nov 2011</em> 
+                            </div> 
+                          </li>
+                        </ul>
+                      </div>
+
+                      <div class="sidebox">
+                        <h5>Search</h5>
+                        <form class="searchform" method="get">
+                          <input type="text" id="s" name="s" value="type and hit enter" onfocus="this.value=''" onblur="this.value='type and hit enter'"/>
+                        </form>
+                      </div>
+                      <div class="sidebox">
+                        <h5>Custom Text</h5>
+                        <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 class="clear"></div>
+                  </div>
+            </div>
+          </div>       
+          <!-- End of Content --> 
+
+          <!-- Begin Footer -->
+          <footer style="background-color:#746f6f;">
+            <div class="container">
+                  <div class ="footer" id="footer"> 
+                      <div class="row">
+                        <div class="col-md-3">
+                          <h6 class="footer-header">POPULAR POSTS</h6>
+                          <ul class="popular-posts">
+                            <li>
+                              <div class="post-name" style="font-size: 13px;"><a href="#">Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</a></div>
+                              <div class="post-date" style="font-size: 11px;">14 Nov, 2012 </div>
+                            </li>
+                            <li>
+                              <div class="post-name" style="font-size: 13px;"> <a href="#">Scelerisque nisl consectetur et.</a></div>
+                              <div class="post-date" style="font-size: 11px;">15 Nov, 2012 </div>
+                            </li>
+                            <li>
+                              <div class="post-name" style="font-size: 13px;"><a href="#">Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus.</a></div>
+                              <div class="post-date" style="font-size: 11px;">18 Nov, 2012 </div>
+                            </li>
+                          </ul>
+                        </div>
+
+                        <div class="col-md-3">
+                          <h6 class="footer-header">TWITTER</h6>
+                          <ul class="twitter">
+                            <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                <a href="#"> Praesent commodo cursus magna Morbi leo risus nulla consectetur.</a> - <span class="twit-date" style="color: rgb(156, 203, 235);">21 hours ago</span></div><div></div></li>
+                            <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                <a href="#"> Vestibulum id ligula porta euismod semper. auctor dolor fermentum.</a> - <span class="twit-date" style="color: rgb(156, 203, 235);">2 days ago</span></li>
+                            <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                <a href="#"> Donec ullamcorper nulla non metus auctor.</a> - <span class="twit-date" style="color:rgb(156, 203, 235);">3 days ago</span></li>
+                          </ul>
+                        </div>
+
+                        <div class="col-md-3">
+                          <h6 class="footer-header">A LITTLE ABOUT ME</h6>
+                          <li><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></li>
+                          <li><p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p></li>
+                        </div>
+                    
+                        <div class="form-container">
+                          <div class="row">
+                            <div class="col-md-3">
+                              <h6 class="footer-header">CONTACT FORM</h6>
+                              <br>
+                                <form class="forms" action="/action_page.php">
+                                  <input type="text" id="fname" name="fname" style="background-color: #555555;"><br><br>
+                                  <input type="text" id="lname" name="lname" style="background-color: #555555;"><br><br>
+                                  <textarea id="message" name="message" rows="5" cols="21" style="background-color: #555555;"></textarea>           
+                                  <input type="submit" name="submit" value="Submit">
+                                </form>
+                            </div>
+                      </div>
+                  </div>
+              </div>
+            </div>
+           </div>
+          </footer>  
+
+                    <div class="container-wrapper" style="background-color: rgb(58,61,64);">
+                      <div class="container" style="background-color: rgb(58,61,64); color: white;">
+                        <div class="row">
+                          <div class="copyright col-sm-9">
+                            <p>&#169 2011 Ikaros. Theme by elemis<p></div>
+
+                          <div class="col-sm-3">
+                              <div class="social">
+                                <a href="#"><img src="./images/RSS-icon.png" alt="icon_rss"></a>
+                                <a href="#"><img src="./images/facebook-icon.png" alt="icon_facebook"></a>
+                                <a href="#"><img src="./images/twitter-icon.png" alt="icon_twitter"></a>
+                                <a href="#"><img src="./images/dribbble-icon.png" alt="icon_dribbble"></a>
+                                <a href="#"><img src="./images/Pinterest-icon.png" alt="icon_pinterest"></a>
+                                <a href="#"><img src="./images/LinkedIn-icon.png" alt="icon_linkedin"></a>
+                              </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+
+              <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+              <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+              <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+       
+    </body>
+</html>
diff --git a/index.html/images/LinkedIn-icon.png b/index.html/images/LinkedIn-icon.png
new file mode 100644
index 0000000..cabde47
Binary files /dev/null and b/index.html/images/LinkedIn-icon.png differ
diff --git a/index.html/images/Pinterest-icon.png b/index.html/images/Pinterest-icon.png
new file mode 100644
index 0000000..88563cb
Binary files /dev/null and b/index.html/images/Pinterest-icon.png differ
diff --git a/index.html/images/RSS-icon.png b/index.html/images/RSS-icon.png
new file mode 100644
index 0000000..1516b09
Binary files /dev/null and b/index.html/images/RSS-icon.png differ
diff --git a/index.html/images/a3.jpg b/index.html/images/a3.jpg
new file mode 100644
index 0000000..ee0c979
Binary files /dev/null and b/index.html/images/a3.jpg differ
diff --git a/blog.png b/index.html/images/blog.png
similarity index 100%
rename from blog.png
rename to index.html/images/blog.png
diff --git a/index.html/images/datecalendar.png b/index.html/images/datecalendar.png
new file mode 100644
index 0000000..81f8105
Binary files /dev/null and b/index.html/images/datecalendar.png differ
diff --git a/index.html/images/dotteddivider.png b/index.html/images/dotteddivider.png
new file mode 100644
index 0000000..ba220be
Binary files /dev/null and b/index.html/images/dotteddivider.png differ
diff --git a/index.html/images/dribbble-icon.png b/index.html/images/dribbble-icon.png
new file mode 100644
index 0000000..77d46a4
Binary files /dev/null and b/index.html/images/dribbble-icon.png differ
diff --git a/index.html/images/facebook-icon.png b/index.html/images/facebook-icon.png
new file mode 100644
index 0000000..465d5bc
Binary files /dev/null and b/index.html/images/facebook-icon.png differ
diff --git a/index.html/images/footer dotdiv.png b/index.html/images/footer dotdiv.png
new file mode 100644
index 0000000..bf6e722
Binary files /dev/null and b/index.html/images/footer dotdiv.png differ
diff --git a/index.html/images/full dotdiv.png b/index.html/images/full dotdiv.png
new file mode 100644
index 0000000..ca7cdb4
Binary files /dev/null and b/index.html/images/full dotdiv.png differ
diff --git a/index.html/images/jan23iconthumb.png b/index.html/images/jan23iconthumb.png
new file mode 100644
index 0000000..88dba1f
Binary files /dev/null and b/index.html/images/jan23iconthumb.png differ
diff --git a/index.html/images/logo.png b/index.html/images/logo.png
new file mode 100644
index 0000000..5ae2d66
Binary files /dev/null and b/index.html/images/logo.png differ
diff --git a/index.html/images/post-divider-vertical.png b/index.html/images/post-divider-vertical.png
new file mode 100644
index 0000000..0128cef
Binary files /dev/null and b/index.html/images/post-divider-vertical.png differ
diff --git a/index.html/images/post-divider.png b/index.html/images/post-divider.png
new file mode 100644
index 0000000..66680f1
Binary files /dev/null and b/index.html/images/post-divider.png differ
diff --git a/index.html/images/r3.jpg b/index.html/images/r3.jpg
new file mode 100644
index 0000000..55df5ea
Binary files /dev/null and b/index.html/images/r3.jpg differ
diff --git a/index.html/images/twitter-icon.png b/index.html/images/twitter-icon.png
new file mode 100644
index 0000000..75d9523
Binary files /dev/null and b/index.html/images/twitter-icon.png differ
diff --git a/index.html/index.html b/index.html/index.html
new file mode 100644
index 0000000..b359f48
--- /dev/null
+++ b/index.html/index.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width; initial-scale=1.0;">
+      
+      <title>Ikaros</title>
+
+      <link rel="stylesheet" href="./style.css"> 
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+      
+      <link rel="stylesheet" type="text/css" href="style.css" media="all" />
+      <link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
+      <link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
+      <link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
+      <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+      <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
+
+      <style>
+
+      * {box-sizing: border-box;}
+         
+        .body { margin: 0px; font-family: Droid Sans, sans-serif; font-size: 13px; line-height: 22px;}
+                
+        .header {
+          color:#D4D4D4;
+          background-color: rgb(58,61,64);
+          width: 965px;
+          height: 10px;
+          padding: 50px 270px 33px 265px;  }
+
+          #navbar a {
+            float: left;
+            vertical-align: right;
+	          margin-top: 26px; }
+
+          .navbar { overflow: hidden; background-color: #555555 }
+                  
+          .navbar-nav a { 
+            float: right;
+            color: white;
+            text-align: right;
+            padding: 14px 16px;
+            text-decoration: none;
+            font-size: 13px;
+            display: inline; }
+         
+          ul {
+            display: inline;
+            list-style: none; }
+
+          li {
+            display: inline;
+            padding: 20px;
+            margin-left: -5px;
+            font-size: 13px; }
+
+          .a {text-decoration: none; }
+
+                        
+          .navbar a:hover { background-color: darkgrey; color: white;  }
+                  
+          .footer { overflow: hidden; background-color: #746f6f }
+
+          #footer {
+            padding: 10px;
+            text-align: left;
+            background-color: #746f6f;
+            color: white;
+            font-size: 13px; }
+                  
+      </style>
+        
+    </head>
+
+    <body>
+      <div class="container-blog">
+        <header>
+          <nav class="navbar navbar-expand-lg sticky-top pt-0 pb-0 navbar-white">
+            <div class="container">
+                <!-- Brand/logo -->
+                <a class="navbar-brand" href="#"><img src="./images/logo.png" alt="logo" width="89px" height="32px"></a>
+                
+                <!-- Navigation Bar -->
+                <ul class="navbar-nav">
+                  <li class="nav-item">
+                    <a class="nav-link active" href="#">HOME</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">
+                    <a class="nav-link" href="#">BLOG</a></li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">CONTACT</a></li>
+                </ul>
+          </nav>
+      </div>
+        </header> 
+
+        <section>
+          <!-- Main Content -->
+            <br>              
+              <div class="container">
+                <div class="card-columns">
+                    <div class="card">
+
+                      <div class="fakeimg" style="height:199px; background-color: grey;"></div>
+                        <div class="card-body">
+                          ​<h5 class="card-title">Aenean vulputate in quam</h5>
+                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                                <img src="./images/datecalendar.png"></i> <span>17 January, 2012</span>
+                                <div class='fas fa-comments' style="float: right;"> <span>15</span> </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                      <div class="fakeimg" style="height:220px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Donec tincidunt in enim porttitor. </h5>
+                          <p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et 
+                            ultrices posuere cubilia curae; Phasellus eleifend euismod fringilla. Aenean 
+                            efficitur urna ac nisi accumsan, sit amet ullamcorper eros varius.</p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                                <img src="./images/datecalendar.png"> <span>9 January, 2012</span>
+                                <div class='fas fa-comments' style="float: right;"> <span>13</span> </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card">
+                      <div class="fakeimg" style="height: 199px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Donec tincidunt in enim porttitor. </h5>
+                          <p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et 
+                            ultrices posuere cubilia curae; Phasellus eleifend euismod fringilla. Aenean 
+                            efficitur urna ac nisi accumsan, sit amet.</p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>1 January, 2012</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>17</span> </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card">
+                      <div class="fakeimg" style="height:220px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Pellentesque ornare tempus eros.</h5>
+                          <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. Nam id dapibus dui, nec volutpat mauris. Suspendisse 
+                            dolor. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>15 January, 2012</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>21</span> </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card">
+                      <div class="fakeimg" style="height:190px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Aenean vulputate in quam</h5>
+                          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. Nam id dapibus. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>5 January, 2012</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>11</span> </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                      <div class="fakeimg" style="height:229px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Pellentesque ornare tempus eros.</h5>
+                          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. Nam id dapibus. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>29 December, 2011</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>11</span> </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                      <div class="fakeimg" style="height:189px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Donec tincidunt in enim porttitor.</h5>
+                          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. Nam id dapibus. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>11 January, 2012</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>23</span> </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                      <div class="fakeimg" style="height:199px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Aenean vulputate in quam</h5>
+                          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                            Aenean vitae vestibulum arcu. Nulla ipsum ante, consequat quis lacus quis, 
+                            iaculis laoreet quam. Nam id dapibus. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>3 January, 2012</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>13</span> </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card">
+                      <div class="fakeimg" style="height:218px; background-color: grey;"></div>
+                        <div class="card-body">
+                          <h5 class="card-title">Donec tincidunt in enim porttitor.</h5>
+                          <p class="card-text"> Vestibulum ante ipsum primis in faucibus orci luctus et 
+                            ultrices posuere cubilia curae; Phasellus eleifend euismod fringilla. Aenean 
+                            efficitur urna ac nisi accumsan, sit amet ullamcorper eros varius. </p>
+
+                            <img src="./images/dotteddivider.png" alt="dotted divider"><br>
+
+                            <div>
+                              <img src="./images/datecalendar.png"> <span>25 December, 2011</span>
+                              <div class='fas fa-comments' style="float: right;"> <span>49</span> </div>
+                            </div>
+                        </div>
+                    </div>
+                </div> 
+                    
+                    <div>
+                      <img src="./images/full dotdiv.png" style="margin: 50px;">
+                      <button class="blog-button">OLDER POSTS</button>
+                   
+                    </div>
+              </div>            
+          </section>
+          <br>
+          <br>
+
+              <!-- Begin Footer -->
+            <footer id="footer"> 
+                <div class="container" style="background-color:#746f6f;" id="footer">
+                      <div class="row">
+                          <div class="col-md-3">
+                            <h6 class="footer-header">POPULAR POSTS</h6>
+                            <ul class="popular-posts">
+                              <li>
+                                <div class="post-name" style="font-size: 13px;"><a href="#">Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</a></div>
+                                <div class="post-date" style="font-size: 11px;">14 Nov, 2012 </div>
+                              </li>
+                              <li>
+                                <div class="post-name" style="font-size: 13px;"> <a href="#">Scelerisque nisl consectetur et.</a></div>
+                                <div class="post-date" style="font-size: 11px;">15 Nov, 2012 </div>
+                              </li>
+                              <li>
+                                <div class="post-name" style="font-size: 13px;"><a href="#">Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus.</a></div>
+                                <div class="post-date" style="font-size: 11px;">18 Nov, 2012 </div>
+                              </li>
+                            </ul>
+                          </div>
+
+                          <div class="col-md-3">
+                            <h6 class="footer-header">TWITTER</h6>
+                            <ul class="twitter">
+                              <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                  <a href="#"> Praesent commodo cursus magna Morbi leo risus nulla consectetur.</a> - <span class="twit-date" style="color: rgb(156, 203, 235);">21 hours ago</span></div></li>
+                              <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                  <a href="#"> Vestibulum id ligula porta euismod semper. auctor dolor fermentum.</a> - <span class="twit-date" style="color: rgb(156, 203, 235);">2 days ago</span></div></li>
+                              <li><div class="tweet"><a href="#"><img src="./images/twitter-icon.png" alt="" /></a>
+                                  <a href="#"> Donec ullamcorper nulla non metus auctor.</a> - <span class="twit-date" style="color:rgb(156, 203, 235);">3 days ago</span></div></li>
+                            </ul>
+                          </div>
+
+                          <div class="col-md-3">
+                            <h6 class="footer-header">A LITTLE ABOUT ME</h6>
+                            <li><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></li>
+                            <li><p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p></li>
+                          </div>
+                      
+                          <div class="form-container">
+                            <div class="row">
+                              <div class="col-md-8">
+                                <h6 class="footer-header">CONTACT FORM</h6>
+                                <br>
+                                  <form class="forms" action="/action_page.php">
+                                    <input type="text" id="fname" name="fname" style="background-color: #555555;"><br><br>
+                                    <input type="text" id="lname" name="lname" style="background-color: #555555;"><br><br>
+                                    <textarea id="message" name="message" rows="5" cols="21" style="background-color: #555555;"></textarea>           
+                                    <input type="submit" name="submit" value="Submit">
+                                  </form>
+                              </div>
+                          </div>
+                      </div>
+                </div>
+            </footer>  
+
+                  <div class="container-wrapper" style="background-color: rgb(58,61,64);">
+                    <div class="container" style="background-color: rgb(58,61,64); color: white;">
+                      <div class="row">
+                        <div class="copyright col-sm-9">
+                          <p>&#169 2011 Ikaros. Theme by elemis<p></div>
+
+                        <div class="col-sm-3">
+                            <div class="social">
+                              <a href="#"><img src="./images/RSS-icon.png" alt="icon_rss"></a>
+                              <a href="#"><img src="./images/facebook-icon.png" alt="icon_facebook"></a>
+                              <a href="#"><img src="./images/twitter-icon.png" alt="icon_twitter"></a>
+                              <a href="#"><img src="./images/dribbble-icon.png" alt="icon_dribbble"></a>
+                              <a href="#"><img src="./images/Pinterest-icon.png" alt="icon_pinterest"></a>
+                              <a href="#"><img src="./images/LinkedIn-icon.png" alt="icon_linkedin"></a>
+                            </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+ 
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+        <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+    </div>
+  </body>
+</html>