diff --git a/Building With Responsive Design/images/2021.png b/Building With Responsive Design/images/2021.png
new file mode 100644
index 0000000..c012892
Binary files /dev/null and b/Building With Responsive Design/images/2021.png differ
diff --git a/Building With Responsive Design/images/aliens-nasa.png b/Building With Responsive Design/images/aliens-nasa.png
new file mode 100644
index 0000000..15f6346
Binary files /dev/null and b/Building With Responsive Design/images/aliens-nasa.png differ
diff --git a/Building With Responsive Design/images/azure.jpg b/Building With Responsive Design/images/azure.jpg
new file mode 100644
index 0000000..930d182
Binary files /dev/null and b/Building With Responsive Design/images/azure.jpg differ
diff --git a/Building With Responsive Design/images/boost.png b/Building With Responsive Design/images/boost.png
new file mode 100644
index 0000000..f1c0b06
Binary files /dev/null and b/Building With Responsive Design/images/boost.png differ
diff --git a/Building With Responsive Design/images/coinbase.jfif b/Building With Responsive Design/images/coinbase.jfif
new file mode 100644
index 0000000..d27b8ae
Binary files /dev/null and b/Building With Responsive Design/images/coinbase.jfif differ
diff --git a/Building With Responsive Design/images/creative.png b/Building With Responsive Design/images/creative.png
new file mode 100644
index 0000000..5f14a52
Binary files /dev/null and b/Building With Responsive Design/images/creative.png differ
diff --git a/Building With Responsive Design/images/design.png b/Building With Responsive Design/images/design.png
new file mode 100644
index 0000000..4bb2ab7
Binary files /dev/null and b/Building With Responsive Design/images/design.png differ
diff --git a/Building With Responsive Design/images/distract.png b/Building With Responsive Design/images/distract.png
new file mode 100644
index 0000000..067ff55
Binary files /dev/null and b/Building With Responsive Design/images/distract.png differ
diff --git a/Building With Responsive Design/images/facebook.jpg b/Building With Responsive Design/images/facebook.jpg
new file mode 100644
index 0000000..7b70e9a
Binary files /dev/null and b/Building With Responsive Design/images/facebook.jpg differ
diff --git a/Building With Responsive Design/images/funding-1.png b/Building With Responsive Design/images/funding-1.png
new file mode 100644
index 0000000..6ebf721
Binary files /dev/null and b/Building With Responsive Design/images/funding-1.png differ
diff --git a/Building With Responsive Design/images/funding-2.png b/Building With Responsive Design/images/funding-2.png
new file mode 100644
index 0000000..72f458c
Binary files /dev/null and b/Building With Responsive Design/images/funding-2.png differ
diff --git a/Building With Responsive Design/images/funding-3.png b/Building With Responsive Design/images/funding-3.png
new file mode 100644
index 0000000..cec38f0
Binary files /dev/null and b/Building With Responsive Design/images/funding-3.png differ
diff --git a/Building With Responsive Design/images/godgila.jpg b/Building With Responsive Design/images/godgila.jpg
new file mode 100644
index 0000000..bdfbf64
Binary files /dev/null and b/Building With Responsive Design/images/godgila.jpg differ
diff --git a/Building With Responsive Design/images/hamburger-menu.svg b/Building With Responsive Design/images/hamburger-menu.svg
new file mode 100644
index 0000000..4ee11fa
--- /dev/null
+++ b/Building With Responsive Design/images/hamburger-menu.svg	
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#606060" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg>
\ No newline at end of file
diff --git a/Building With Responsive Design/images/image1.png b/Building With Responsive Design/images/image1.png
new file mode 100644
index 0000000..e9f5ac4
Binary files /dev/null and b/Building With Responsive Design/images/image1.png differ
diff --git a/Building With Responsive Design/images/image2.png b/Building With Responsive Design/images/image2.png
new file mode 100644
index 0000000..eb6b029
Binary files /dev/null and b/Building With Responsive Design/images/image2.png differ
diff --git a/Building With Responsive Design/images/image3.png b/Building With Responsive Design/images/image3.png
new file mode 100644
index 0000000..e3d3b75
Binary files /dev/null and b/Building With Responsive Design/images/image3.png differ
diff --git a/Building With Responsive Design/images/jbl.png b/Building With Responsive Design/images/jbl.png
new file mode 100644
index 0000000..7c218c4
Binary files /dev/null and b/Building With Responsive Design/images/jbl.png differ
diff --git a/Building With Responsive Design/images/launch.png b/Building With Responsive Design/images/launch.png
new file mode 100644
index 0000000..2ad6869
Binary files /dev/null and b/Building With Responsive Design/images/launch.png differ
diff --git a/Building With Responsive Design/images/lg.jfif b/Building With Responsive Design/images/lg.jfif
new file mode 100644
index 0000000..ea59ce2
Binary files /dev/null and b/Building With Responsive Design/images/lg.jfif differ
diff --git a/Building With Responsive Design/images/logo-tnw.png b/Building With Responsive Design/images/logo-tnw.png
new file mode 100644
index 0000000..6b9a27a
Binary files /dev/null and b/Building With Responsive Design/images/logo-tnw.png differ
diff --git a/Building With Responsive Design/images/nasa.jfif b/Building With Responsive Design/images/nasa.jfif
new file mode 100644
index 0000000..d90e482
Binary files /dev/null and b/Building With Responsive Design/images/nasa.jfif differ
diff --git a/Building With Responsive Design/images/nasa1.jpg b/Building With Responsive Design/images/nasa1.jpg
new file mode 100644
index 0000000..8ecf162
Binary files /dev/null and b/Building With Responsive Design/images/nasa1.jpg differ
diff --git a/Building With Responsive Design/images/negotiate.jfif b/Building With Responsive Design/images/negotiate.jfif
new file mode 100644
index 0000000..917667e
Binary files /dev/null and b/Building With Responsive Design/images/negotiate.jfif differ
diff --git a/Building With Responsive Design/images/patins.jfif b/Building With Responsive Design/images/patins.jfif
new file mode 100644
index 0000000..77389f5
Binary files /dev/null and b/Building With Responsive Design/images/patins.jfif differ
diff --git a/Building With Responsive Design/images/pixel6.jfif b/Building With Responsive Design/images/pixel6.jfif
new file mode 100644
index 0000000..bdb2e0c
Binary files /dev/null and b/Building With Responsive Design/images/pixel6.jfif differ
diff --git a/Building With Responsive Design/images/salesforce.jpg b/Building With Responsive Design/images/salesforce.jpg
new file mode 100644
index 0000000..70e79f0
Binary files /dev/null and b/Building With Responsive Design/images/salesforce.jpg differ
diff --git a/Building With Responsive Design/images/search-icon.jpg b/Building With Responsive Design/images/search-icon.jpg
new file mode 100644
index 0000000..6cdad35
Binary files /dev/null and b/Building With Responsive Design/images/search-icon.jpg differ
diff --git a/Building With Responsive Design/images/subatomic.jpg b/Building With Responsive Design/images/subatomic.jpg
new file mode 100644
index 0000000..1f17969
Binary files /dev/null and b/Building With Responsive Design/images/subatomic.jpg differ
diff --git a/Building With Responsive Design/images/xbox.png b/Building With Responsive Design/images/xbox.png
new file mode 100644
index 0000000..a1b58bc
Binary files /dev/null and b/Building With Responsive Design/images/xbox.png differ
diff --git a/Building With Responsive Design/index.html b/Building With Responsive Design/index.html
new file mode 100644
index 0000000..7c426e0
--- /dev/null
+++ b/Building With Responsive Design/index.html	
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="description" content="Building With Responsive Design Project" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="styles.css" />
+		<link rel="icon" href="images/icon.png" type="image/png" sizes="16x16" />
+		<title>TNW</title>
+		<!-- font awesome -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+	</head>
+	<body>
+		<!-- 							Header 									-->
+
+		<header>
+			<!-- 			 desktop navigation				 -->
+			<nav class="nav-top-desktop">
+				<ul>
+					<li>News</li>
+					<li>Events</li>
+					<li>Business</li>
+					<li>AMAs</li>
+					<li>Spaces</li>
+					<li>Terms & Conditions</li>
+				</ul>
+				<ul>
+					<li class="nav-top-desktop right"></li>
+					<li>About</li>
+					<li>Advertise</li>
+					<li>Jobs</li>
+					<li>Contact</li>
+				</ul>
+			</nav>
+
+			<nav class="second">
+				<ul>
+					<li>LATEST</li>
+					<li>HARD WORK</li>
+					<li>PLUGGED</li>
+					<li>README</li>
+					<li>GROWTH QUARTERS</li>
+					<li>SHIFT</li>
+					<li>NEURAL</li>
+				</ul>
+				<img id="search-second" src="images/search-icon.jpg" alt="search" />
+			</nav>
+			<!-- 			 desktop navigation				 -->
+
+			<nav class="nav-top-mobile">
+				<img class="logo" src="images/logo-tnw.png" alt="TNW Logo" />
+				<div>
+					<img class="search-icon" src="images/search-icon.jpg" alt="Search icon" />
+					<button class="menu-btn" aria-label="Menu button" title="Menu button">
+						<img class="hamburger" src="images/hamburger-menu.svg" alt="Hamburger menu icon" />
+					</button>
+				</div>
+			</nav>
+
+			<div class="yellow-add">
+				<h3>Connect with high-level marketing leaders. Join Boost online event →</h3>
+			</div>
+		</header>
+		<!-- 							Header									-->
+
+		<!-- 								Main								-->
+		<main>
+			<section class="top-articles">
+				<img class="top-article-image top-article-image-main" src="images/image1.png" alt="Article-image" />
+				<img class="top-article-image top-article-image-second" src="images/image2.png" alt="Article-image" />
+				<img class="top-article-image top-article-image-third" src="images/image3.png" alt="Article-image" />
+			</section>
+
+			<div class="desktop-left-right-margins">
+				<section class="latest-news">
+					<h2 class="section-title">Latest News &rang;</h2>
+					<div class="latest-news-desktop">
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/azure.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/negotiate.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/nasa.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/facebook.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/lg.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/subatomic.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/salesforce.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-news-img-desktop" src="images/godgila.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+					</div>
+				</section>
+
+				
+					<section class="latest-funding">
+						<div class="latest-funding-desktop-title-container">
+							<h2 class="section-title">Latest Funding rounds on Index.co &rang;</h2>
+							<ul class="section-link-list">
+								<li><a class="section-link" href="#">See more</a></li>
+								<li><a class="section-link section-link-middle-item" href="#">Get updates by email</a></li>
+								<li><a class="section-link" href="#">Add info</a></li>
+							</ul>
+						</div>
+
+						<div class="latest-funding-desktop-body-container">
+						<article class="latest-news-article">
+							<img class="funding-img" src="images/funding-1.png" alt="Article image" />
+						</article>
+
+						<article class="latest-news-article">
+							<img class="funding-img" src="images/funding-2.png" alt="Article image" />
+						</article>
+
+						<article class="latest-news-article">
+							<img class="funding-img" src="images/funding-3.png" alt="Article image" />
+						</article>
+
+						<article class="latest-news-article">
+							<img class="funding-img" src="images/funding-3.png" alt="Article image" />
+						</article>
+					</div>
+					</section>
+
+				<div class="middle-section-desktop-container">
+					<section class="hard-fork-container">
+						<h2 class="section-title">Hard Fork &rang;</h2>
+						<img class="hard-fork-main-image" src="images/coinbase.jfif" alt="Coinbase image" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Apps &rang;</h2>
+						<img class="hard-fork-main-image" src="images/xbox.png" alt="Xbox image" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Gear &rang;</h2>
+						<img class="hard-fork-main-image" src="images/jbl.png" alt="Jbl speakers" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Tech &rang;</h2>
+						<img class="hard-fork-main-image" src="images/aliens-nasa.png" alt="Nasa antenna" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Creative &rang;</h2>
+						<img class="hard-fork-main-image" src="images/creative.png" alt="Building from the sky" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Podium &rang;</h2>
+						<img class="hard-fork-main-image" src="images/2021.png" alt="Code" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Insights &rang;</h2>
+						<img class="hard-fork-main-image" src="images/nasa1.jpg" alt="Satellite" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Launch &rang;</h2>
+						<img class="hard-fork-main-image" src="images/launch.png" alt="Newspapers" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+
+					<section class="hard-fork-container">
+						<h2 class="section-title">Distract &rang;</h2>
+						<img class="hard-fork-main-image" src="images/distract.png" alt="VW Bus" />
+						<article class="sub-div">
+							<article class="sub-div-text">
+								<h4 class="sub-div-title">Sub div Title</h4>
+								<p class="sub-div-par">Sub div text Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, optio.</p>
+							</article>
+							<img class="latest-news-img" src="images/design.png" alt="random image" />
+						</article>
+						<ul class="hard-fork-list">
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+							<li class="hard-ford-list-item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore, officiis?</li>
+						</ul>
+					</section>
+				</div>
+
+				<section class="latest-news">
+					<div class="section-title-div">
+						<h2 class="section-title">Latest Deals &rang;</h2>
+						<p class="section-subtitle">See all Deals</p>
+					</div>
+					<div class="latest-deals-desktop">
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/azure.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/negotiate.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/nasa.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/facebook.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/lg.jfif" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/subatomic.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/salesforce.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+
+						<article class="latest-news-article">
+							<img class="latest-news-img latest-deals-img-desktop" src="images/godgila.jpg" alt="Article image" />
+							<div class="latest-news-text-div">
+								<h3 class="latest-title">Microsoft Azure is adding AI services to its basic user tools. If you want to know Azure, this can get you started</h3>
+								<p class="latest-subtitle">TNW Deals &middot; 10 minutes ago</p>
+							</div>
+						</article>
+					</div>
+				</section>
+			</div>
+		</main>
+		<!-- 								Main								-->
+
+		<!--								Footer 							-->
+		<footer>
+			<div class="footer-links">
+				<div class="wrapper">
+					<ul class="footer-links-social">
+						<li>
+							<a
+								href="https://www.facebook.com/thenextweb"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="Facebook"
+								data-event-non-interaction="true"
+								><i class="fa fa-facebook"></i
+							></a>
+						</li>
+						<li>
+							<a
+								href="https://twitter.com/thenextweb"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="Twitter"
+								data-event-non-interaction="true"
+								><i class="fa fa-twitter"></i
+							></a>
+						</li>
+						<li>
+							<a
+								href="https://www.youtube.com/user/thenextweb"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="YouTube"
+								data-event-non-interaction="true"
+								><i class="fa fa-youtube"></i
+							></a>
+						</li>
+						<li>
+							<a
+								href="https://www.instagram.com/thenextweb"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="Instagram"
+								data-event-non-interaction="true"
+								><i class="fa fa-instagram"></i
+							></a>
+						</li>
+						<li>
+							<a
+								href="https://www.pinterest.com/thenextweb"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="Pinterest"
+								data-event-non-interaction="true"
+								><i class="fa fa-pinterest"></i
+							></a>
+						</li>
+						<li>
+							<a
+								href="https://thenextweb.com/feed/"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Social"
+								data-event-label="Feed"
+								data-event-non-interaction="true"
+								><i class="fa fa-rss"></i
+							></a>
+						</li>
+						<li>
+							<a data-modal="modalStayTuned" href="#" data-event-category="Footer" data-event-action="Social" data-event-label="Newsletter" data-event-non-interaction="true"
+								><i class="fa fa-envelope"></i
+							></a>
+						</li>
+					</ul>
+					<ul class="footer-links-menu">
+						<li>
+							<a href="/conference/" data-event-category="Footer" data-event-action="Conference" data-event-label="" data-event-non-interaction="true">EVENTS</a>
+						</li>
+						<li>
+							<a href="/about" data-event-category="Footer" data-event-action="About" data-event-label="" data-event-non-interaction="true">ABOUT</a>
+						</li>
+						<li>
+							<a href="/advertise" target="_blank" data-event-category="Footer" data-event-action="Advertise" data-event-label="" data-event-non-interaction="true">ADVERTISE</a>
+						</li>
+						<li>
+							<a
+								href="https://thenextweb.homerun.hr/"
+								target="_blank"
+								rel="noopener"
+								data-event-category="Footer"
+								data-event-action="Jobs"
+								data-event-label=""
+								data-event-non-interaction="true"
+								>JOBS</a
+							>
+						</li>
+						<li>
+							<a href="/about#contact" data-event-category="Footer" data-event-action="Contact" data-event-label="" data-event-non-interaction="true">CONTACT</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div class="footer-legal">
+				<div class="wrapper">
+					<span>
+						<a href="#"><img alt="The Next Web" class="footer-legal-logoTNW" src="https://cdn0.tnwcdn.com/wp-content/themes/cyberdelia/assets/img/tnw.svg" /></a>
+						© 2006–2021 The Next Web B.V.
+					</span>
+					<br />
+					<span>Made with &lt;3 in Amsterdam.</span>
+					<br />
+					<span>
+						Powered by
+						<a href="https://www.stackpath.com?utm_campaign=Partner%20Display&amp;utm_source=Partner%20Display&amp;utm_medium=thenextweb" target="_blank" rel="noopener"
+							><img alt="StackPath" class="footer-legal-logoStackPath" src="https://cdn0.tnwcdn.com/wp-content/themes/cyberdelia/assets/img/stackpath.svg"
+						/></a>
+					</span>
+				</div>
+			</div>
+		</footer>
+		<!--								Footer 							-->
+	</body>
+</html>
diff --git a/Building With Responsive Design/styles.css b/Building With Responsive Design/styles.css
new file mode 100644
index 0000000..023cc83
--- /dev/null
+++ b/Building With Responsive Design/styles.css	
@@ -0,0 +1,479 @@
+/* ?      custom properties     */
+:root {
+	--font-size-section-subtitle: 1rem;
+	--font-size-title: 0.875rem;
+	--font-size-paragraph: 0.75rem;
+
+	--font-size-sub-div-title: 0.75rem;
+	--font-size-sub-div-par: 0.85rem;
+
+	--text-color-orange: #f42;
+}
+
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: Helvetica, Arial, sans-serif;
+}
+
+button {
+	background-color: unset;
+	border: none;
+	outline: none;
+}
+
+button:hover {
+	cursor: pointer;
+}
+
+/* img {
+	width: 100%;
+	object-fit: cover;
+} */
+
+section {
+	margin-top: 4em;
+}
+
+h3 {
+	font-size: var(--font-size-title);
+	color: #3f3d3d;
+	font-family: helvetica;
+}
+
+p {
+	font-size: var(--font-size-paragraph);
+}
+
+a {
+	text-decoration: none;
+	color: unset;
+}
+
+/* ?								header							 */
+header {
+	position: sticky;
+	width: 100%;
+	top: -2.1em;
+}
+
+.nav-top-mobile {
+	padding: 0.5em;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	background-color: cornflowerblue;
+}
+
+@media (min-width: 780px) {
+	.nav-top-mobile {
+		display: none;
+	}
+}
+
+.logo {
+	background-color: black;
+	width: 110px;
+}
+
+.search-icon {
+	width: 30px;
+	height: 30px;
+	border-left: 1px solid rgba(0, 0, 0, 0.281);
+}
+
+.hamburger {
+	width: 24px;
+	height: 30px;
+	border-left: 1px solid rgba(0, 0, 0, 0.281);
+}
+
+.yellow-add {
+	background-color: rgb(248, 235, 48);
+	padding: 0.5em 1em;
+}
+
+/* ?						desktop		navbar							 */
+/*NavBar I */
+
+.nav-top-desktop,
+.second {
+	display: none;
+}
+@media (min-width: 780px) {
+	.nav-top-desktop {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: black;
+	}
+
+	.nav-top-desktop ul {
+		display: flex;
+		padding: 5px;
+		align-items: center;
+		height: 32px;
+	}
+
+	.nav-top-desktop li {
+		list-style: none;
+		color: #ffffff99;
+		font-size: 13px;
+		font-family: helvetica;
+		padding: 5px;
+	}
+
+	/*Navbar II */
+	.second {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 0.5em;
+		background-color: white;
+	}
+
+	.second ul {
+		display: flex;
+		padding: 5px 0;
+		align-items: center;
+	}
+
+	.second li {
+		list-style: none;
+		color: #413f3f99;
+		font-size: 13px;
+		font-family: helvetica;
+		padding: 5px;
+	}
+
+	#search-second {
+		width: 30px;
+	}
+}
+
+/* ?                  main               */
+
+main {
+	margin: 0 0.5em;
+}
+
+/* ?                  top-articles               */
+.top-articles {
+	margin-top: unset;
+}
+
+.top-article-image {
+	width: 100%;
+	/* height: 300px; */
+	object-fit: cover;
+}
+
+@media (min-width: 780px) {
+	.top-articles {
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		grid-template-rows: repeat(2, 1fr);
+		/* grid-template-rows: repeat(2, 20vh); */
+		/* gap: 0.5em; */
+		gap: 5px 8px;
+
+		/* height: 500px; */
+	}
+
+	.top-article-image {
+		/* height: 101%; */
+	}
+
+	.top-article-image-main {
+		grid-column: span 1;
+		grid-row: span 2;
+		height: 57vh;
+		/* height: 41vw; */
+		object-fit: fill;
+	}
+
+	.top-article-image-second {
+		grid-column: 2;
+		grid-row: 1;
+		height: 28vh;
+		object-fit: fill;
+	}
+	.top-article-image-third {
+		grid-column: 2;
+		grid-row: 2;
+		height: 28vh;
+		object-fit: fill;
+	}
+}
+
+/* ?            latest news section          */
+
+.section-title {
+	margin: 1em 0;
+	color: var(--text-color-orange);
+	font-weight: 900;
+}
+
+.latest-news-img {
+	width: 65px;
+	height: 70px;
+	object-fit: cover;
+}
+
+.latest-news-article {
+	margin: 1em 0;
+	display: flex;
+	gap: 1em;
+	align-items: flex-start;
+	justify-content: center;
+}
+
+.latest-title {
+	line-height: 1.2;
+	margin-bottom: 0.5em;
+}
+
+.latest-subtitle {
+	color: grey;
+}
+
+@media (min-width: 780px) {
+	.section-title {
+		margin: 0;
+	}
+	.latest-news-desktop {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 0 1em;
+	}
+	.latest-news-article {
+		flex-direction: column;
+		margin: 0;
+	}
+
+	.latest-news-img-desktop {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}
+
+/*?                   latest funding section              */
+
+.section-link-list {
+	list-style: none;
+}
+
+.section-link {
+	font-size: var(--font-size-section-subtitle);
+	color: var(--text-color-orange);
+}
+
+@media (min-width: 780px) {
+	.section-link-list {
+		margin: 1em 0;
+		display: flex;
+		gap: 0 1em;
+	}
+	.section-link-middle-item {
+		border-left: 1px solid var(--text-color-orange);
+		border-right: 1px solid var(--text-color-orange);
+		padding: 0 1em;
+	}
+
+	.latest-funding-desktop-title-container {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}
+
+	.latest-funding-desktop-body-container {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 0 1em;
+	}
+}
+
+/* ?								hard-fork-container					 */
+
+.hard-fork-container {
+	margin-top: 2em;
+}
+
+.sub-div {
+	margin-bottom: 1em;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #fff4f2;
+	color: var(--text-color-orange);
+}
+
+.sub-div-text {
+	padding: 1em;
+}
+
+.sub-div-title {
+	font-size: var(--font-size-sub-div-title);
+	font-weight: normal;
+	text-transform: uppercase;
+	margin-bottom: 0.5em;
+}
+
+.sub-div-par {
+	font-size: var(--font-size-sub-div-par);
+	font-weight: 700;
+}
+
+.hard-fork-list {
+	margin: 1em;
+}
+
+.hard-ford-list-item {
+	font-size: var(--font-size-sub-div-par);
+	color: #5c5c5c;
+	padding: 0.8em 0;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.096);
+}
+
+.hard-fork-main-image {
+	width: 100%;
+	height: 60vw;
+	object-fit: cover;
+}
+
+@media (min-width: 780px) {
+	.middle-section-desktop-container {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 0 1em;
+	}
+
+	.hard-fork-main-image {
+		height: 250px;
+	}
+}
+
+/* ?										Latest 	Deals											 */
+
+.section-title-div {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+
+.section-subtitle {
+	color: var(--text-color-orange);
+	font-size: var(--font-size-sub-div-par);
+}
+
+@media (min-width: 780px) {
+	.section-title {
+		margin: 0;
+	}
+	.latest-deals-desktop {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 1.5em;
+	}
+	.latest-news-article {
+		flex-direction: column;
+		margin: 0;
+	}
+
+	.latest-deals-img-desktop {
+		width: 100%;
+		height: 200px;
+	}
+}
+
+@media (min-width: 780px) {
+	.latest-news,
+	.middle-section-desktop-container,
+	.latest-funding,
+	.latest-deals {
+		margin-left: 1em;
+		margin-right: 1em;
+	}
+}
+
+@media (min-width: 780px) {
+	.desktop-left-right-margins {
+		max-width: 1147px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+/* ?                  Footer                      */
+
+footer {
+	margin-top: 4em;
+	text-align: center;
+	position: relative;
+	z-index: 4;
+	padding: 0;
+	border: 0;
+	display: block;
+	background-color: #131313;
+	font-family: helvetica;
+}
+
+.fa {
+	padding: 10px;
+	width: 40px;
+	text-align: center;
+	text-decoration: none;
+	border-radius: 50%;
+	background: #333333;
+	color: white;
+}
+/* Add a hover effect if you want */
+.fa:hover {
+	opacity: 0.7;
+}
+.footer-links-social {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 20px;
+	justify-content: center;
+}
+.footer-links-menu {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 5px;
+	justify-content: center;
+	padding-bottom: 40px;
+}
+.footer-links-menu a {
+	text-decoration: none;
+	font-size: 12px;
+	color: #aaaaaa;
+	padding: 5px;
+}
+.footer-links-social li,
+.footer-links-menu li {
+	padding: 3px;
+	list-style: none;
+}
+.footer-legal-logoTNW {
+	width: 47px;
+	height: 9px;
+}
+.footer-legal-logoStackPath {
+	width: 75px;
+	height: 9px;
+}
+.footer-legal {
+	background-color: black;
+	color: #aaaaaa;
+	font-size: 13px;
+	padding: 2.5em 0;
+	text-align: center;
+	line-height: 19px;
+}