diff --git a/src/Assignment-1/assignment1.css b/src/Assignment-1/assignment1.css
index 916fa6e..33acc8d 100644
--- a/src/Assignment-1/assignment1.css
+++ b/src/Assignment-1/assignment1.css
@@ -1,7 +1,29 @@
 /* Our CSS file. */
 
 
-.container, .content {
-width: 100%;
-height: 100%;
+.container,
+.content {
+    width: 100%;
+    height: 100%;
 }
+
+.full-width-div {
+    height: 50vh;
+    width: 100vw;
+}
+
+.left-div {
+    height: 100%;
+    width: 50vw;
+    float: left;
+}
+
+.right-div {
+    height: 100%;
+    width: 50vw;
+    float: right;
+}
+h1{
+    vertical-align: middle;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/Assignment-1/assignment1.html b/src/Assignment-1/assignment1.html
index ff998b9..2adf617 100644
--- a/src/Assignment-1/assignment1.html
+++ b/src/Assignment-1/assignment1.html
@@ -13,8 +13,28 @@
 
 	<!-- This is just a comment. Ignore this line.-->
 	<!-- Start your code from here -->
-	
-	
+	<div class="full-width-div" >
+		<div class="left-div">
+			<ul>
+				<li>List Item 1</li>
+				<li>List Item 2</li>
+				<li>List Item 3</li>
+				<ul><li>List Item 3.1</li>
+					<li>List Item 3.2</li>
+				</ul>
+			</ul>
+		</div>
+		<div class="right-div">
+			<img src="https://images.unsplash.com/photo-1648693956698-ad30bf033b35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image by Aedrian" width="100%" height="100%">
+	</div>	
+	<div class="full-width-div" >
+		<div class="left-div">
+			<img src="https://images.unsplash.com/photo-1647966524274-7accdc8b29f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image by Chandler Cruttenden" width="100%" height="100%">
+		</div>
+		<div class="right-div">
+			<h1>The largest community of photo enthusiasts</h1>
+		</div>
+	</div>
 	<!-- End your code -->
 
 	</div>
diff --git a/src/Assignment-2/assignment2.css b/src/Assignment-2/assignment2.css
index 916fa6e..3f4a6af 100644
--- a/src/Assignment-2/assignment2.css
+++ b/src/Assignment-2/assignment2.css
@@ -1,7 +1,131 @@
 /* Our CSS file. */
 
+.container,
+.content {
+  width: 100%;
+  height: 100%;
+}
+#page_header {
+  /* border: 1px solid black; */
+  width: 100%;
+  height: auto;
+}
+#head_block {
+  display: flex;
+  border: 1px solid black;
+  width: 100%;
+  height: 100px;
+  justify-content: space-between;
+  background-color: lightskyblue;
+}
+#logo {
+  margin-left: 50px;
+  align-self: center;
+  width: 100px;
+  height: 50px;
+  border: 1px solid black;
+}
 
-.container, .content {
-width: 100%;
-height: 100%;
+#search_box {
+  margin-right: 40px;
+  align-self: center;
+  border: 1px solid black;
+}
+#navbar {
+  display: block;
+  justify-content: center;
+  border: 1px solid black;
+  /* margin: 10px; */
+}
+#navItemList {
+  display: flex;
+  justify-content: space-evenly;
+  list-style-type: none;
+}
+.navItems {
+  display: inline-block;
+  /* margin-right: 20px;
+    margin-left: 20px; */
+}
+#contentDiv {
+  margin-top: 10px;
+  height: auto;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  /* border: 1px solid black; */
+}
+#aside_left {
+  height: auto;
+  width: 20%;
+  /* float: left; */
+  border: 1px solid black;
+}
+#asideLeftItemList {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  list-style-type: none;
+  align-items: center;
+  /* border: 1px solid black; */
+}
+.asideLeftItems {
+  /* border: 1px solid black; */
+  margin: 10px;
+  /* margin-right: 15px; */
+  padding: 5px;
+  text-align: center;
+  /* align-self: center; */
+}
+#main-content-section {
+  height: 100%;
+  width: 56%;
+  /* margin: 10px; */
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid black;
+}
+.sectionContentDiv {
+  height: fit-content;
+  width: 100%;
+  /* border: 1px solid black; */
+  margin: 1%;
+  align-self: center;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+.post-img {
+  flex-wrap: wrap;
+  height: 50%;
+  width: 25%;
+  border: 1px solid red;
+}
+#aside_right {
+  height: auto;
+  width: 20%;
+  /* float: rig; */
+  border: 1px solid black;
+}
+#right-sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  list-style-type: none;
+  align-items: center;
+}
+#page-footer {
+  width: auto;
+  height: fit-content;
+  border: 1px solid black;
+  margin-top: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+#logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: aqua;
 }
diff --git a/src/Assignment-2/assignment2.html b/src/Assignment-2/assignment2.html
index 4f014ce..506fd66 100644
--- a/src/Assignment-2/assignment2.html
+++ b/src/Assignment-2/assignment2.html
@@ -1,40 +1,142 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title></title>
-	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-	<meta http-equiv="Pragma" content="no-cache" />
-	<meta http-equiv="Expires" content="0" />
-	<script src="bundle.js" type="text/javascript"></script>
-</head>
+  <head>
+    <title></title>
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <script src="bundle.js" type="text/javascript"></script>
+  </head>
 
-<body>
-	<div id="container">
+  <body>
+    <div id="container">
+      <!-- Start your code from here -->
+      <header id="page_header">
+        <div id="head_block">
+          <div id="logo">logo</div>
+          <form action="" id="search_box">
+            <input type="text" name="searchBox" placeholder="search" />
+          </form>
+        </div>
+        <nav id="navbar">
+          <ul id="navItemList">
+            <li class="navItems">
+              <a href="https://www.google.com/" target="_blank">Section 1</a>
+            </li>
+            <li class="navItems">
+              <a href="https://www.google.com/" target="_blank">Section 2</a>
+            </li>
+            <li class="navItems">
+              <a href="https://www.google.com/" target="_blank">Section 3</a>
+            </li>
+            <li class="navItems">
+              <a href="https://www.google.com/" target="_blank">Section 4</a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <div id="contentDiv">
+        <aside id="aside_left">
+          <ul id="asideLeftItemList">
+            <li class="asideLeftItems">Section 1</li>
+            <li class="asideLeftItems">Section 2</li>
+            <li class="asideLeftItems">Section 3</li>
+            <li class="asideLeftItems">Section 4</li>
+            <li class="asideLeftItems">Section 5</li>
+            <li class="asideLeftItems">Section 6</li>
+            <li class="asideLeftItems">Section 7</li>
+            <li class="asideLeftItems">Section 8</li>
+            <li class="asideLeftItems">Section 9</li>
+            <li class="asideLeftItems">Section 10</li>
+          </ul>
+        </aside>
+        <section id="main-content-section">
+          <div class="sectionContentDiv">
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+          </div>
+          <div class="sectionContentDiv">
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+            <img
+              class="post-img"
+              src="https://images.unsplash.com/photo-1649446327104-b27f47d5f24b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1972&q=80"
+              alt=" photo by Rohit Tondon"
+            />
+          </div>
+        </section>
+        <section></section>
+        <aside id="aside_right">
+          <ul id="right-sidebar-menu">
+            <li class="asideLeftItems">Section 1</li>
+            <li class="asideLeftItems">Section 2</li>
+            <li class="asideLeftItems">Section 3</li>
+            <li class="asideLeftItems">Section 4</li>
+            <li class="asideLeftItems">Section 5</li>
+            <li class="asideLeftItems">Section 6</li>
+          </ul>
+        </aside>
+      </div>
+      <footer id="page-footer">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
+          laboriosam. Cum velit sint commodi dolore provident excepturi sed
+          exercitationem, quos enim corrupti minima ut, nobis aspernatur
+          dignissimos magni voluptates aliquam eaque. Deserunt ut fugit nulla
+          corporis rerum? Commodi laborum quis aperiam architecto dicta voluptas
+          totam neque porro! Provident magni quidem commodi ducimus, quaerat
+          quae, sint odio repellendus ipsam expedita soluta veniam culpa
+          distinctio illum officiis exercitationem. Alias dolore vero, facilis
+          repellat voluptatum est omnis commodi, ipsa sapiente natus
+          voluptatibus fuga consequuntur eos impedit, ut eveniet quidem illum
+          incidunt. Temporibus sed saepe sint non ad illo voluptate
+          exercitationem minima eius quia in voluptatum eaque iure a, magni
+          quae. Omnis eligendi ut ducimus dolore perferendis voluptatem quod
+          repellendus, debitis placeat aliquid! Repellat dolorem accusantium
+          aperiam dolor impedit ullam hic quis voluptatum perspiciatis.
+        </p>
+      </footer>
+      <!-- End your code -->
+    </div>
 
-	<!-- Start your code from here -->
-	
-
-	<!-- End your code -->
-
-	</div>
-
-	<script type="text/javascript">
-
-	</script>
-
-</body>
-<script>
-/* DO NOT EDIT THIS CODE- WRITTERN TO PREVENT CSS CACHING */	  
-	// Get HTML head element
-	var head = document.getElementsByTagName('HEAD')[0]; 
-	// Create new link Element
-	var link = document.createElement('link');
-	// set the attributes for link element 
-	link.rel = 'stylesheet'; 
-	link.type = 'text/css';
-	link.href = './assignment2.css?v='+ new Date().getTime(); 
-	// Append link element to HTML head
-	head.appendChild(link); 
-	/* DO NOT EDIT THIS CODE- WRITTERN TO PREVENT CSS CACHING */	  
-</script> 
-</html>
\ No newline at end of file
+    <script type="text/javascript"></script>
+  </body>
+  <script>
+    /* DO NOT EDIT THIS CODE- WRITTERN TO PREVENT CSS CACHING */
+    // Get HTML head element
+    var head = document.getElementsByTagName("HEAD")[0];
+    // Create new link Element
+    var link = document.createElement("link");
+    // set the attributes for link element
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = "./assignment2.css?v=" + new Date().getTime();
+    // Append link element to HTML head
+    head.appendChild(link);
+    /* DO NOT EDIT THIS CODE- WRITTERN TO PREVENT CSS CACHING */
+  </script>
+</html>