diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
index 75e9841e..b0c20825 100644
--- a/week1/3-website/css/style.css
+++ b/week1/3-website/css/style.css
@@ -6,3 +6,376 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+ *{
+     margin: 0px;
+     padding: 0px;
+     box-sizing: border-box;
+ }
+ body{
+     height: 100vh;
+     background-color: #2F303A;
+ }
+ header{
+     padding-top: 5vh;
+ }
+ 
+  #blog-img1{
+      padding-bottom: 10vh;
+  }
+ 
+ .logoandtitle{
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+ .title{
+     color: #E5E5E5;
+     font-size: 60px;
+     
+     
+ }
+ .sub-title {
+     color: #E5E5E5;
+     font-size: 45px;
+ }
+ nav  {
+     display: flex;
+     justify-content: space-around;
+     align-items: center;
+    
+ }
+
+ ul{
+    display: flex;
+    
+
+ }
+li{
+    list-style: none;
+    padding-right: 10vh;
+    font-size: 25px;   
+}
+
+
+a{
+    color: #E5E5E5;
+    text-decoration: none;
+}
+a:hover{
+    color: gray;
+}
+.mainsection1{
+    height: 50vh;
+    display: flex;
+    justify-content: space-evenly;
+    padding-top: 3vh;
+    margin-top: 5vh;
+   
+}
+.main-article{
+    width: 30%;
+    padding-left: 5vh;
+   
+}
+.main-paragraph{
+    color: #E5E5E5;
+    font-size: 18px;
+    padding-top: 5vh;
+}
+.sec-section{
+    background: linear-gradient(#E5E5E5, #2F303A);
+    height: 180vh;
+    display: grid;
+    justify-content: center;
+    
+}
+
+#nature-img{
+    width: 45vh;
+    height: 33vh;
+    border-radius: 30px;
+}
+#blog1-paragraph{
+    
+    width: 30vh;
+}
+#blog2-paragraph{
+    
+    width: 30vh;
+}
+#blog3-paragraph{
+    
+    width: 30vh;
+}
+.first-blog-article {
+    
+    background-color: #2F303A;
+    width: 82vh;
+    height: 40vh;
+    border-radius: 30px;
+    display: flex;
+    padding: 3vh;
+    margin-top: 20vh;
+    align-items: center;
+   
+}
+.first-blog-article > p {
+    flex: 1;
+}
+
+.second-blog-article{
+    border: 1px solid white;
+    background-color: #2F303A;
+    width: 82vh;
+    height: 40vh;
+    border-radius: 30px;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding: 3vh;
+    
+}
+
+.third-blog-article{
+    border: 1px solid white;
+    background-color: #2F303A;
+    width: 82vh;
+    height: 40vh;
+    border-radius: 30px;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    padding: 3vh;
+    
+}
+.footer{
+    font-size: 15px;
+}
+footer{
+    
+    height: 20vh;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#med-ellipse{
+    position: absolute;
+    top: 42vh;
+    right: 17vh;
+}
+#small-ellipse{
+    position: absolute;
+    top: 59vh;
+    left: 19vh;
+    width: 10vh;
+    height: 10vh;
+    opacity: 1;
+    z-index: -1;
+   
+}
+#big-ellipse{
+    position: absolute;
+    top: 30vh;
+    right: 83vh;
+    width: 12vh;
+    height: 12vh;
+    
+}
+
+h3{
+    color: #E5E5E5;
+    font-size: 30px;
+    padding-bottom: 5vh;
+}
+p{
+    color: #e5e5e5;
+}
+.first-blog-article h3:first-child{
+    color: hotpink
+}
+
+
+@media screen and (max-width: 360px){
+   
+    body{
+        
+        align-items: center;
+        display: grid;
+    }
+    .title{
+        font-size: 40px;
+    }
+    nav {
+        
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 25px;
+         
+
+    }
+    .mainsection1 {
+        flex-direction: column;
+        font-size: 10px;
+       
+        
+       
+        
+    }
+    .header {
+        flex-direction: column;
+        
+        
+    }
+    #blog-img1 {
+       display: none;
+    }
+    .main-paragraph {
+        width: 50vh;
+        height: 50vh;
+        font-size: 15px;
+        overflow: hidden;
+    
+        
+
+    }
+    ul{
+        padding-top: 30px;
+    }
+    li{
+       font-size: 18px;
+       padding-left: 13px;
+    }
+    .sub-title{
+        font-size: 30px;
+       
+    }
+    .first-blog-article{
+       
+        width: 45vh;
+        height: 50vh;
+       
+    }
+    #nature-img{
+        display: none;
+    }
+    .second-blog-article{
+        
+        width: 45vh;
+        height: 50vh;    }
+    .third-blog-article{
+       
+        width: 45vh;
+        height: 50vh;
+    }
+    .footer{
+        display: block;
+    }
+    h3{
+        
+        padding-bottom: 1vh;
+    }
+
+}
+@media screen and (max-width: 1200px){
+  
+    .main-paragraph{
+       
+        max-height: 330px;
+        overflow: hidden;
+    }
+
+ }
+ @media screen and (max-width: 920px){
+     .sub-title{
+         display: none;
+     }
+    .main-paragraph{
+      display: none;
+    }
+
+ }
+
+
+@media (max-width: 768px) {
+    
+    nav {
+        display: block;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: 25px;
+         
+
+    }
+    li{
+        padding-top: 5vh;
+        padding-left: 4vh;
+    }
+    .mainsection1{
+        min-height: 80vh;
+       
+        display: block;
+    }
+    #blog-img1{
+        padding-left: 60px;
+    }
+    .main-paragraph{
+       display: block;
+        width: 65vh;
+        font-size: 20px;
+        
+        padding-top: 5px;
+    }
+    .sub-title{
+        display: block;
+        padding-left: 35px;
+        padding-bottom: 10px;
+    }
+    .first-blog-article{
+        width: 80vh;
+    }
+    article h3, p, a {
+        padding-left: 40px;
+    }
+}
+ 
+@media screen and (max-width: 360px){
+    nav {
+        display: block;
+    }
+    .logoandtitle{
+        display: flex;
+        justify-content: start;
+        padding-left: 40px;
+        
+    }
+    li{
+        padding-left: 0px;
+
+    }
+    ul{
+        padding-top: 0px;
+    }
+    .main-paragraph{
+        padding-right: 30px;
+    }
+    .first-blog-article, .second-blog-article, .third-blog-article{
+       
+        width: 60vh;
+        height: 60vh;
+       
+    }
+    .sec-section{
+        min-height: 250vh;
+        
+    }
+    #blog1-paragraph, #blog2-paragraph, #blog3-paragraph{
+        width: fit-content;
+        padding-left: 5px;
+    }
+    section h3{
+        padding-left: 5px;
+        padding-bottom: 30px;
+    }
+}
diff --git a/week1/3-website/images/autumn.jpg b/week1/3-website/images/autumn.jpg
new file mode 100644
index 00000000..3ac0ba54
Binary files /dev/null and b/week1/3-website/images/autumn.jpg differ
diff --git a/week1/3-website/images/bigEcllipse.png b/week1/3-website/images/bigEcllipse.png
new file mode 100644
index 00000000..e5491697
Binary files /dev/null and b/week1/3-website/images/bigEcllipse.png differ
diff --git a/week1/3-website/images/blog 1 image.png b/week1/3-website/images/blog 1 image.png
new file mode 100644
index 00000000..8488197b
Binary files /dev/null and b/week1/3-website/images/blog 1 image.png differ
diff --git a/week1/3-website/images/logo.png b/week1/3-website/images/logo.png
new file mode 100644
index 00000000..88b28587
Binary files /dev/null and b/week1/3-website/images/logo.png differ
diff --git a/week1/3-website/images/mediumEcllipse.png b/week1/3-website/images/mediumEcllipse.png
new file mode 100644
index 00000000..8c576119
Binary files /dev/null and b/week1/3-website/images/mediumEcllipse.png differ
diff --git a/week1/3-website/images/natur3.jpeg b/week1/3-website/images/natur3.jpeg
new file mode 100644
index 00000000..7c543d2a
Binary files /dev/null and b/week1/3-website/images/natur3.jpeg differ
diff --git a/week1/3-website/images/nature2.jpeg b/week1/3-website/images/nature2.jpeg
new file mode 100644
index 00000000..7628dec7
Binary files /dev/null and b/week1/3-website/images/nature2.jpeg differ
diff --git a/week1/3-website/images/smallEcllipse.png b/week1/3-website/images/smallEcllipse.png
new file mode 100644
index 00000000..973b4b1a
Binary files /dev/null and b/week1/3-website/images/smallEcllipse.png differ
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
index 67dfc7f5..b9ea69e8 100644
--- a/week1/3-website/index.html
+++ b/week1/3-website/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1.0"
     />
-    <title>My Blog</title>
+    <title>Blog | Website</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -16,7 +16,116 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header>
+        <nav>
+            <div class="logoandtitle">
+              <img id="main-img" src="./images/logo.png" alt="logo">
+              <h1 class="title">Blog Diary</h1>
+            </div>
+            
+            <ul>
+              <li><a href="#blog3-paragraph">Blogs</a></li>
+              <li><a href="#blog3-paragraph">About</a></li>
+              <li><a href="#blog3-paragraph">Contact</a></li>
+            </ul>
+      </nav>
+    </header>
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <main>
+
+      <section class="mainsection1">
+        <img id="blog-img1" src="./images/blog 1 image.png" alt="blog image">
+        
+        <article class="main-article">
+
+          <h2 class="sub-title">Welcome</h2>
+
+          <p class="main-paragraph">Lorem Ipsum is simply dummy text of the printing and 
+              typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
+              since the 1500s, when an unknown printer took a galley of type and scrambled it to 
+              make a type specimen book. It has survived not only five centuries, but also the leap 
+              into electronic typesetting, remaining essentially unchanged. It was popularised in 
+              the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
+              recently with desktop publishing software like Aldus PageMaker including versions of 
+              Lorem Ipsum.  
+          </p>
+
+        </article>
+
+      </section>
+
+      <section class="sec-section">
+        <img id="med-ellipse" src="./images/mediumEcllipse.png" alt="medium ellipse">
+        <img id="big-ellipse" src="./images/bigEcllipse.png" alt="medium ellipse">
+        <img id="small-ellipse" src="./images/smallEcllipse.png" alt="medium ellipse">
+        <section class="inner-sec-section">
+           
+          <article class="first-blog-article">
+              <section>
+                <h3>Blog 1 title</h3>
+
+                <p id="blog1-paragraph">Lorem Ipsum is simply dummy text of the printing and 
+                  typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
+                  since the 1500s, when an unknown printer took a galley of type and scrambled it to 
+                  make a type specimen book. It has survived not only five centuries, but also the leap.
+                   </p>
+                  <br>
+                  <a href="#blog3-paragraph">Read more</a>
+            </section>
+
+              <img id="nature-img" src="./images/nature2.jpeg" alt="nature picture">
+          </article>
+
+         
+
+        </section>
+        <section>
+          <article class="second-blog-article">
+            <section>
+              <h3>Blog 2 title</h3>
+
+              <p id="blog2-paragraph">Lorem Ipsum is simply dummy text of the printing and 
+                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
+                since the 1500s, when an unknown printer took a galley of type and scrambled it to 
+                make a type specimen book. It has survived not only five centuries, but also the leap.
+                 </p>
+                 <br>
+                 <a href="#blog-img1">Read more</a>
+          </section>
+
+            <img id="nature-img" src="./images/natur3.jpeg" alt="nature picture">
+        </article>
+
+        </section>
+          <section>
+            <article class="third-blog-article">
+              <section class="third">
+                <h3>Blog 3 title</h3>
+
+                <p id="blog3-paragraph">Lorem Ipsum is <em>today</em>simply dummy text of <em>yours</em>the printing and 
+                  typesetting <em>star</em>industry.
+                  Lorem Ipsum has been the industry's standard dummy text ever 
+                  since the 1500s, when an unknown printer took a galley of type and scrambled it to.
+                  </p>
+                  
+               
+                  <br>
+                  <a href="#blog1-paragraph">Read more</a>
+
+          </section>
+        <img id="nature-img" src="./images/autumn.jpg" alt="nature picture">
+        </article>
+     </section>
+    </main>
+   <footer>
+      <h3 class="footer">&copyCopyright 2020. Blog Diary by Sadat Akhtar.</h3>
+    </footer>
+   
+
+
   </body>
 </html>
diff --git a/week3/2-website/app.js b/week3/2-website/app.js
new file mode 100644
index 00000000..2df36a12
--- /dev/null
+++ b/week3/2-website/app.js
@@ -0,0 +1,27 @@
+//selectors
+const burger = document.querySelector('.burger');
+const nav = document.querySelector('.navlinks');
+const navLinks = document.querySelectorAll('.navlinks li');
+
+
+
+//event listeners
+
+//toggle the nav burger
+burger.addEventListener('click' , () => {
+    nav.classList.toggle('nav-active');
+
+    //animate the links
+    navLinks.forEach((link, index) =>{
+            if(link.style.animation){
+                link.style.animation = ''
+            }else{
+                link.style.animation = `navLinkFade 0.9s ease forwards ${index / 7 + 1}s`
+            }
+    });
+
+    //burger toggle
+    burger.classList.toggle('tog');
+
+
+});
\ No newline at end of file
diff --git a/week3/2-website/images/Cakes/.DS_Store b/week3/2-website/images/Cakes/.DS_Store
deleted file mode 100644
index f497e389..00000000
Binary files a/week3/2-website/images/Cakes/.DS_Store and /dev/null differ
diff --git a/week3/2-website/images/Cakes/cake-with-blackberries.jpg b/week3/2-website/images/Cakes/cake-with-blackberries.jpg
deleted file mode 100644
index 472d0891..00000000
Binary files a/week3/2-website/images/Cakes/cake-with-blackberries.jpg and /dev/null differ
diff --git a/week3/2-website/images/Cakes/cake-with-macarons.jpg b/week3/2-website/images/Cakes/cake-with-macarons.jpg
deleted file mode 100644
index 6683cf33..00000000
Binary files a/week3/2-website/images/Cakes/cake-with-macarons.jpg and /dev/null differ
diff --git a/week3/2-website/images/Cakes/cupcakes.jpg b/week3/2-website/images/Cakes/cupcakes.jpg
deleted file mode 100644
index 85128d1e..00000000
Binary files a/week3/2-website/images/Cakes/cupcakes.jpg and /dev/null differ
diff --git a/week3/2-website/images/Cakes/not-technically-a-cake.jpg b/week3/2-website/images/Cakes/not-technically-a-cake.jpg
deleted file mode 100644
index fe3e6f8e..00000000
Binary files a/week3/2-website/images/Cakes/not-technically-a-cake.jpg and /dev/null differ
diff --git a/week3/2-website/images/Cakes/wedding-cake.jpg b/week3/2-website/images/Cakes/wedding-cake.jpg
deleted file mode 100644
index da73530b..00000000
Binary files a/week3/2-website/images/Cakes/wedding-cake.jpg and /dev/null differ
diff --git a/week3/2-website/images/Ellipse 1.png b/week3/2-website/images/Ellipse 1.png
new file mode 100644
index 00000000..6db9802a
Binary files /dev/null and b/week3/2-website/images/Ellipse 1.png differ
diff --git a/week3/2-website/images/Ellipse 2.png b/week3/2-website/images/Ellipse 2.png
new file mode 100644
index 00000000..6e897e2e
Binary files /dev/null and b/week3/2-website/images/Ellipse 2.png differ
diff --git a/week3/2-website/images/Ellipse 3.png b/week3/2-website/images/Ellipse 3.png
new file mode 100644
index 00000000..780f6e44
Binary files /dev/null and b/week3/2-website/images/Ellipse 3.png differ
diff --git a/week3/2-website/images/Ellipse 4.png b/week3/2-website/images/Ellipse 4.png
new file mode 100644
index 00000000..5fa27b77
Binary files /dev/null and b/week3/2-website/images/Ellipse 4.png differ
diff --git a/week3/2-website/images/birthdaypic.png b/week3/2-website/images/birthdaypic.png
new file mode 100644
index 00000000..189bd2b0
Binary files /dev/null and b/week3/2-website/images/birthdaypic.png differ
diff --git a/week3/2-website/images/cake-hero.jpg b/week3/2-website/images/cake-hero.jpg
new file mode 100644
index 00000000..44ae5134
Binary files /dev/null and b/week3/2-website/images/cake-hero.jpg differ
diff --git a/week3/2-website/images/cake-image.png b/week3/2-website/images/cake-image.png
new file mode 100644
index 00000000..300db10f
Binary files /dev/null and b/week3/2-website/images/cake-image.png differ
diff --git a/week3/2-website/images/cake-logo.png b/week3/2-website/images/cake-logo.png
new file mode 100644
index 00000000..c538fade
Binary files /dev/null and b/week3/2-website/images/cake-logo.png differ
diff --git a/week3/2-website/images/cakehero2.jpg b/week3/2-website/images/cakehero2.jpg
new file mode 100644
index 00000000..0760bfc1
Binary files /dev/null and b/week3/2-website/images/cakehero2.jpg differ
diff --git a/week3/2-website/images/icons8-facebook-48.png b/week3/2-website/images/icons8-facebook-48.png
new file mode 100644
index 00000000..6f057c54
Binary files /dev/null and b/week3/2-website/images/icons8-facebook-48.png differ
diff --git a/week3/2-website/images/icons8-instagram.svg b/week3/2-website/images/icons8-instagram.svg
new file mode 100644
index 00000000..b31fae79
--- /dev/null
+++ b/week3/2-website/images/icons8-instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#304ffe" d="M32,42H16c-5.5,0-10-4.5-10-10V16c0-5.5,4.5-10,10-10h16c5.5,0,10,4.5,10,10v16 C42,37.5,37.5,42,32,42z"/><path fill="#304ffe" fill-opacity=".29" d="M6,16v16c0,5.5,4.5,10,10,10h16c5.5,0,10-4.5,10-10V16c0-1-0.1-1.9-0.4-2.8 C36,8.7,28.8,6,21,6c-3.7,0-7.3,0.6-10.7,1.8C7.7,9.6,6,12.6,6,16z"/><path fill="#6200ea" d="M21,8c-5,0-9.6,1.2-13.8,3.2C6.4,12.7,6,14.3,6,16v16c0,5.5,4.5,10,10,10h16c5.5,0,10-4.5,10-10 V16.2C36.5,11.1,29.1,8,21,8z"/><path fill="#673ab7" d="M42,19c-5.3-5.5-12.7-9-21-9c-5.4,0-10.5,1.5-14.8,4.1C6.1,14.7,6,15.3,6,16v16c0,5.5,4.5,10,10,10 h16c5.5,0,10-4.5,10-10V19z"/><path fill="#8e24aa" d="M42,22c-4.9-6.1-12.5-10-21-10c-5.6,0-10.7,1.7-15,4.6V32c0,5.5,4.5,10,10,10h16c5.5,0,10-4.5,10-10 V22z"/><path fill="#c2185b" d="M42,32v-6.6C37.5,18.6,29.8,14,21,14c-5.6,0-10.8,1.9-15,5v13c0,5.5,4.5,10,10,10h16 C37.5,42,42,37.5,42,32z"/><path fill="#d81b60" d="M42,32v-2.4C38.4,21.6,30.4,16,21,16c-5.7,0-11,2.1-15,5.6V32c0,5.5,4.5,10,10,10h16 C37.5,42,42,37.5,42,32z"/><path fill="#f50057" d="M41.6,34.8C39.7,25.2,31.2,18,21,18c-5.9,0-11.2,2.4-15,6.3V32c0,5.5,4.5,10,10,10h16 C36.5,42,40.4,39,41.6,34.8z"/><path fill="#ff1744" d="M39.9,38C39.4,28,31.2,20,21,20c-6.1,0-11.5,2.9-15,7.4V32c0,5.5,4.5,10,10,10h16 C35.2,42,38.1,40.4,39.9,38z"/><path fill="#ff5722" d="M21,22c-6.5,0-12.1,3.6-15,9v1c0,5.5,4.5,10,10,10h16c2.2,0,4.3-0.7,5.9-2c0-0.3,0.1-0.7,0.1-1 C38,29.6,30.4,22,21,22z"/><path fill="#ff6f00" d="M21,24c-7,0-12.8,4.7-14.5,11.2c1.3,4,5.1,6.8,9.5,6.8h16c1.4,0,2.6-0.3,3.8-0.8 c0.1-0.7,0.2-1.5,0.2-2.2C36,30.7,29.3,24,21,24z"/><path fill="#ff9800" d="M21,26c-6.9,0-12.5,5.3-12.9,12c1.8,2.4,4.7,4,7.9,4h16c0.6,0,1.1-0.1,1.7-0.2 C33.9,40.9,34,40,34,39C34,31.8,28.2,26,21,26z"/><path fill="#ffc107" d="M31.6,42c0.3-1,0.4-2,0.4-3c0-6.1-4.9-11-11-11s-11,4.9-11,11c0,0.3,0,0.7,0.1,1 c1.7,1.2,3.7,2,5.9,2H31.6z"/><path fill="#ffd54f" d="M21,30c-5,0-9,4-9,9c0,0.8,0.1,1.6,0.3,2.3c1.1,0.5,2.4,0.7,3.7,0.7h13.5c0.3-0.9,0.5-1.9,0.5-3 C30,34,26,30,21,30z"/><path fill="#ffe082" d="M21,32.1c-3.9,0-7,3.1-7,7c0,1,0.2,1.9,0.6,2.8C15.1,42,15.5,42,16,42h11.4c0.4-0.9,0.6-1.9,0.6-2.9 C28,35.2,24.9,32.1,21,32.1z"/><path fill="#ffecb3" d="M21,34.1c-2.8,0-5,2.2-5,5c0,1.1,0.4,2.1,1,2.9H25c0.6-0.8,1-1.8,1-2.9C26,36.3,23.8,34.1,21,34.1z"/><path fill="#fff" d="M30,38H18c-4.4,0-8-3.6-8-8V18c0-4.4,3.6-8,8-8h12c4.4,0,8,3.6,8,8v12C38,34.4,34.4,38,30,38z M18,12c-3.3,0-6,2.7-6,6v12c0,3.3,2.7,6,6,6h12c3.3,0,6-2.7,6-6V18c0-3.3-2.7-6-6-6H18z"/><path fill="#fff" d="M24 31c-3.9 0-7-3.1-7-7 0-3.9 3.1-7 7-7 3.9 0 7 3.1 7 7C31 27.9 27.9 31 24 31zM24 19c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5S26.8 19 24 19zM32 16c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1S32 15.4 32 16z"/></svg>
\ No newline at end of file
diff --git a/week3/2-website/images/icons8-twitter-48.png b/week3/2-website/images/icons8-twitter-48.png
new file mode 100644
index 00000000..91596a37
Binary files /dev/null and b/week3/2-website/images/icons8-twitter-48.png differ
diff --git a/week3/2-website/images/partypic.png b/week3/2-website/images/partypic.png
new file mode 100644
index 00000000..4f3cd241
Binary files /dev/null and b/week3/2-website/images/partypic.png differ
diff --git a/week3/2-website/images/people-cutting-cake-2038258.jpg b/week3/2-website/images/people-cutting-cake-2038258.jpg
new file mode 100644
index 00000000..ce7d533a
Binary files /dev/null and b/week3/2-website/images/people-cutting-cake-2038258.jpg differ
diff --git a/week3/2-website/images/person-holding-cupcake-with-white-icing-4099126.jpg b/week3/2-website/images/person-holding-cupcake-with-white-icing-4099126.jpg
new file mode 100644
index 00000000..357c088f
Binary files /dev/null and b/week3/2-website/images/person-holding-cupcake-with-white-icing-4099126.jpg differ
diff --git a/week3/2-website/images/person-holding-knife-slicing-3-layer-cake-1345574.jpg b/week3/2-website/images/person-holding-knife-slicing-3-layer-cake-1345574.jpg
new file mode 100644
index 00000000..a2577d2a
Binary files /dev/null and b/week3/2-website/images/person-holding-knife-slicing-3-layer-cake-1345574.jpg differ
diff --git a/week3/2-website/images/weddingpic.png b/week3/2-website/images/weddingpic.png
new file mode 100644
index 00000000..74bf40f8
Binary files /dev/null and b/week3/2-website/images/weddingpic.png differ
diff --git a/week3/2-website/images/white-and-blue-floral-table-lamp-1793037.jpg b/week3/2-website/images/white-and-blue-floral-table-lamp-1793037.jpg
new file mode 100644
index 00000000..0479e8f3
Binary files /dev/null and b/week3/2-website/images/white-and-blue-floral-table-lamp-1793037.jpg differ
diff --git a/week3/2-website/index.html b/week3/2-website/index.html
index 60b1afe1..9bb061c2 100644
--- a/week3/2-website/index.html
+++ b/week3/2-website/index.html
@@ -1,16 +1,88 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Responsive Cake webpage</title>
-    <!-- Add a link to your css file here -->
-</head>
+    <link rel="stylesheet" href="style.css" />
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
+      rel="stylesheet"
+    />
+    <script defer src="/2-website/app.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <nav>
+        <div class="logoandtitle">
+          <img id="logo" src="/2-website/images/cake-logo.png" alt="logo">
+          <h1>Pastel</h1>
+        </div>
+        <ul class="navlinks">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">Services</a></li>
+        </ul>
+        <div class="burger">
+          <div class="line1"></div>
+          <div class="line2"></div>
+          <div class="line3"></div>
+        </div>
+
+      </nav>
+    </header>
+    <main>
+      <section class="mainsection">
+        <div class="hero">
+          <!-- <img id="heropic" src="/2-website/images/cake-image.png" alt="cake image"> -->
+        </div>
+      </section>
+
+      <section>
+          <div class="section2">
+            <h3 class="welcome">Welcome</h3>
+            <p>We provide cakes for all occasions, from weddings to birthday parties. All our cakes are baked with quality ingredients guarenteeing satisfaction.</p>
+          </div>
+          <div class="threeimages">
+            <ul class="pics3">
+              <li>
+                <img id="lipics" src="/2-website/images/birthdaypic.png" alt="birthday cake">
+                <a href="#">Birthdays</a>
+              </li>
+              <li>
+                <img id="lipics" src="/2-website/images/partypic.png" alt="party cake">
+                <a href="#">Parties</a>
+              </li>
+              <li>
+                <img id="lipics" src="/2-website/images/weddingpic.png" alt="wedding cake">
+                <a href="#">Weddings</a>
+              </li>
+            </ul>
+          </div>
+          <img id="ellipse2" src="/2-website/images/Ellipse 2.png" alt="ellipse">
+          <img id="ellipse3" src="/2-website/images/Ellipse 3.png" alt="ellipse">
+          <img id="ellipse4" src="/2-website/images/Ellipse 4.png" alt="ellipse">
+          <img id="ellipse1" src="/2-website/images/Ellipse 1.png" alt="ellipse">
+      </section>
+    </main>
+    <footer>
+      <h3 class="join">Follow Us Now</h3>
+      <div class="social">
+        <ul id="footerul">
+          <li><div class="icon-container"><img id="socialicons" src="/2-website/images/icons8-twitter-48.png"></div></li>
+          <li><div class="icon-container"><img id="socialicons" src="/2-website/images/icons8-facebook-48.png"></div></li>
+          <li><div class="icon-container"><img id="socialicons" src="/2-website/images/icons8-instagram.svg"></div></li>
+        </ul>
+      </div>
+      <h5>&copy;Copyright 2020, Pastel Inc.</h5>
+    </footer>
+  </body>
+</html>
+
 
-<body>
-    <!-- Add your markup here -->
-</body>
 
-</html>
\ No newline at end of file
diff --git a/week3/2-website/style.css b/week3/2-website/style.css
index 6de1b356..8dcbb3ad 100644
--- a/week3/2-website/style.css
+++ b/week3/2-website/style.css
@@ -1 +1,747 @@
-/*  Add your styling here */
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    height: 115vh;
+    background: linear-gradient(#FBFBFB, #4F5455);
+    overflow: hidden;
+}
+nav{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 10px;
+    background-color: #4d2929;
+   
+}
+
+.logoandtitle{
+    display: flex;
+    align-items: center;
+    color: #FBFBFB;
+   
+}
+.navlinks{
+    position: absolute;
+    top: 10%;
+    right: 0%;
+    background-color: #4d2929;
+    height: 95vh;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    transform: translateX(100%);
+    transition: transform 1s ease-in;
+    opacity: 0.95;
+
+   
+}
+.nav-active{
+    transform: translateX(0%);
+}
+.navlinks li a{
+   color: whitesmoke;
+   font-size: 1.2rem;  
+}
+.navlinks li a:hover{
+    color: hotpink;
+}
+.navlinks li{
+    opacity: 0;
+}
+.burger{
+    display: block;
+    cursor: pointer;
+}
+@keyframes navLinkFade{
+    from{
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to{
+        opacity: 1;
+        transform: translateX(0px);
+    }
+}
+
+.line1, .line2, .line3{
+    width: 25px;
+    height: 3px;
+    background-color: #FBFBFB;
+    margin: 5px;
+}
+.tog .line1{
+    transform: rotate(-45deg) translate(-5px, 6px);
+}
+.tog .line2{
+    opacity: 0;
+}
+.tog .line3{
+    transform: rotate(45deg) translate(-5px, -6px);
+}
+.section2{
+   
+    padding: 20px 10px;
+    width: 90%;
+    margin: auto;
+    
+}
+.welcome{
+    font-size: 1rem;
+    font-weight: 400;
+    padding-bottom: 20px;
+   
+}
+p{
+    font-size: 0.875rem;
+}
+ul{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    width: 90%;
+    margin: auto;
+    
+ }
+li{
+    text-align: center;
+    width: 100%;
+    
+}
+#lipics{
+    border-radius: 5px;
+    border: 2px solid #FBFBFB;
+}
+a{
+    color: black;
+    text-decoration: none;
+}
+a:hover{
+    color: #FBFBFB;
+}
+footer{
+    
+    text-align: center;
+    padding-top: 2rem;
+   
+}
+#footerul{
+   
+    width: 40%;
+}
+.icon-container{
+   padding: 6px 0px;
+   
+}
+.join, h5{
+    font-weight: 400;
+    font-size: 0.875rem;
+}
+#socialicons{
+    width: 2rem;
+    height: 2rem;
+}
+
+#ellipse2{
+    position: absolute;
+    bottom: -5%;
+    right: 0%;
+}
+#ellipse3{
+    position: absolute;
+    bottom: 8%;
+    right: 40%;
+    z-index: -1;
+}
+#ellipse1{
+    position: absolute;
+    top: 50%;
+    z-index: -1;
+}
+#ellipse4{
+    position: absolute;
+    bottom: 5%;
+    left: 10%;
+}
+
+/*
+@media screen and (min-width: 1600px){
+    body{
+        height: 150vh;
+    }
+   .hero{
+       background-image: url(/2-website/images/cake-hero.jpg);
+       background-repeat: no-repeat;
+       background-position:  bottom;
+       background-size: cover;
+       height: 50vh;
+ 
+   }
+   .burger{
+       display: none;
+   }
+   .navlinks li{
+       opacity: 1;
+       display: flex;
+       flex-direction: row;
+   }
+   .navlinks{
+       
+       
+       height: 7.5vh;
+       position: absolute;
+       top: 0%;
+       right: 40%;
+       border: 1px solid red;
+
+   }
+   #heropic{
+       display: none;
+   }
+   
+}
+*/
+@media screen and (min-width: 320px){
+    body{
+        height: 80vh;
+    }
+    .navlinks{
+        width: 33%;
+    }
+    
+    footer{
+        padding-top: 50px;
+    }
+    .threeimages{
+        padding-top: 100px;
+    }
+    #ellipse3{
+        position: absolute;
+        top: 100%;
+        right: 40%;
+        z-index: -1;
+    }
+    #ellipse2{
+        position: absolute;
+        width: 150px;
+        height: 130px;
+        bottom: -50%;
+        right: 0%;
+        z-index: -1;
+    }.mainsection{
+        height: 30vh;
+        background-image: url(./images/cake-image.png);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    }
+    #ellipse4{
+        position: absolute;
+        bottom: -40%;
+        left: 10%;
+        z-index: -1;
+    }
+   
+}
+
+
+@media screen and (min-width: 360px){
+    body{
+        height: 80vh;
+    }
+
+    .mainsection{
+        height: 30vh;
+        background-image: url(./images/cake-image.png);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    }
+    .nav-active, .navlinks{
+       position: absolute;
+       top: 9%;
+    }
+    .section2{
+        padding-bottom: 50px;
+    }
+    footer{
+        padding-top: 100px;
+       
+    }
+    .threeimages{
+        padding-top: 150px;
+    }
+    #ellipse3{
+        position: absolute;
+        top: 100%;
+        right: 40%;
+        z-index: -1;
+    }
+    #ellipse4{
+        position: absolute;
+        top: 130%;
+        left: 10%;
+        z-index: -1;
+    }
+    #ellipse2{
+        position: absolute;
+        top: 130%;
+        right: 0%;
+        z-index: -1;
+    }
+}
+
+@media screen and (min-width: 375px){
+    body{
+        height: 80vh;
+    }
+    .nav-active, .navlinks{
+       position: absolute;
+       top: 6%;
+    }
+    #heropic{
+        width: 375px;
+    }
+    .section2{
+        padding-bottom:  100px;
+        padding-top: 40px;
+    }
+    footer{
+        padding-top: 100px;
+    }
+    #ellipse3{
+        position: absolute;
+        top: 115%;
+        right: 40%;
+        z-index: -1;
+    }
+}
+
+
+@media screen and (min-width: 411px){
+    body{
+        height: 80vh;
+    }
+     footer{
+        padding-top: 250px;
+    }
+    .section2{
+        width: 80%;
+        padding-bottom:  10px;
+        padding-top: 40px;
+    }
+   
+    .nav-active, .navlinks{
+     position: absolute;
+     top: 6%;
+     }
+     .threeimages{
+         padding-top: 50px;
+     }
+     #ellipse4{
+         position: absolute;
+         width: 70px;
+         height: 70px;
+         top: 130%;
+         left: 10%;
+         z-index: -1;
+     }
+     #ellipse2{
+         position: absolute;
+         width: 250px;
+         height: 230px;
+         bottom: 0%;
+         right: 0%;
+         z-index: -1;
+     }
+     #ellipse3{
+        position: absolute;
+        width: 150px;
+        height: 130px;
+        top:  90%;
+        right: 30%;
+        z-index: -1;
+    }
+ }
+ 
+ @media screen and (min-width: 768px){
+    body{
+        height: 150vh;
+    }
+    .mainsection{
+        height: 60vh;
+        background-image: url(./images/cakehero2.jpg);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    }
+    .welcome{
+        font-size: 20px;
+    }
+    p{
+        font-size: 25px;
+    }
+    .nav-active, .navlinks{
+       position: absolute;
+       top: 5%;
+    }
+    .navlinks li a{
+        font-size: 28px;
+    }
+    h1{
+        font-size: 50px;
+        letter-spacing: 2px;
+        padding-bottom: 12px;
+    }
+    #logo{
+        width: 70px;
+        height: 80px;
+    }
+   
+    .welcome{
+        font-size: 30px;
+    }
+    p{
+        font-size: 25px;
+    }
+    #lipics{
+        width: 160px;
+        height: 150px;
+        
+    }
+    .pics3 li{
+       
+        height: 150px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .pics3 li a{
+        font-size: 25px;
+        margin-top: 10px;
+    
+    }
+    .section2{
+        padding-bottom:  60px;
+        padding-top: 40px;
+    }
+    footer{
+        padding-top: 100px;
+    }
+    .join{
+        font-size: 28px;
+    }
+    #socialicons{
+        width: 60px;
+        height: 60px;
+    }
+    h5{
+        font-size: 18px;
+    }
+
+    #ellipse2{
+        position: absolute;
+        bottom: -5%;
+        right: 0%;
+        width: 202px;
+        height: 220px;
+    }
+    #ellipse3{
+        position: absolute;
+        bottom: 8%;
+        right: 40%;
+        z-index: -1;
+        width: 150px;
+        height: 150px;
+       
+
+    }
+    #ellipse1{
+        position: absolute;
+        top: 50%;
+        z-index: -1;
+        width: 290px;
+        height: 280px;
+    }
+    #ellipse4{
+        position: absolute;
+        bottom: 5%;
+        left: 10%;
+        width: 100px;
+        height: 100px;
+    }
+
+}
+
+@media screen and (min-width: 1024px){
+    
+    .mainsection{
+        height: 60vh;
+        background-image: url(./images/cakehero2.jpg);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    }
+    .welcome{
+        font-size: 20px;
+    }
+    p{
+        font-size: 25px;
+    }
+
+    .navlinks{
+        width: 33%;
+    }
+    h1{
+        font-size: 60px;
+        letter-spacing: 2px;
+    }
+    .threeimages{
+        height: 20vh;
+    }
+    .pics3 li{
+       
+        height: 270px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    #lipics{
+        width: 270px;
+        height: 240px;
+        
+    }
+
+    .pics3 li a{
+        font-size: 25px;
+        margin-top: 10px;
+    
+    }
+    .section2{
+        padding-bottom:  140px;
+        padding-top: 100px;
+    }
+    footer{
+        padding-top: 350px;
+    }
+    .join{
+        font-size: 28px;
+    }
+    #socialicons{
+        width: 60px;
+        height: 60px;
+    }
+    h5{
+        font-size: 18px;
+    }
+
+    #ellipse2{
+        position: absolute;
+        bottom: -5%;
+        right: 0%;
+        width: 402px;
+        height: 420px;
+    }
+    #ellipse3{
+        position: absolute;
+        bottom: 8%;
+        right: 40%;
+        z-index: -1;
+        width: 150px;
+        height: 150px;
+       
+
+    }
+    #ellipse1{
+        position: absolute;
+        top: 70%;
+        z-index: -1;
+        width: 290px;
+        height: 280px;
+    }
+    #ellipse4{
+        position: absolute;
+        bottom: 5%;
+        left: 10%;
+        width: 100px;
+        height: 100px;
+    }
+    
+
+}
+
+@media screen and (min-width: 1280px){
+    body{
+        height: 120vh;
+        overflow-y: visible;
+    }
+    .mainsection{
+        height: 60vh;
+        background-image: url(./images/cakehero2.jpg);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    }
+    
+    /* .hero{
+       background-image: url(/2-website/images/cakehero2.jpg);
+       background-repeat: no-repeat;
+       background-size: cover;
+       
+    } */
+    .navlinks{
+        width: 33%;
+    }
+    .welcome{
+        font-size: 25px;
+    }
+    p{
+        font-size: 20px;
+    }
+   
+    .section2{
+        width: 60%;
+        padding-bottom: 20px;
+    }
+    ul.pics3{
+        width: 80%;
+        padding-top: 0px;
+    }
+    #ellipse2{
+        position: absolute;
+       top: 180%;
+        right: 0%;
+        width: 402px;
+        height: 420px;
+    }
+    #ellipse3{
+        position: absolute;
+        top: 170%;
+        right: 40%;
+        z-index: -1;
+        width: 150px;
+        height: 150px;
+       
+
+    }
+    #ellipse1{
+        position: absolute;
+        top: 96%;
+        z-index: -1;
+        width: 490px;
+        height: 480px;
+    }
+    #ellipse4{
+        position: absolute;
+        top: 180%;
+        left: 10%;
+        width: 100px;
+        height: 100px;
+    }
+    footer{
+        padding-top: 100px;
+    }
+   
+
+}
+
+@media screen and (min-width: 1300px){
+    body{
+        height: 200vh;
+       
+       
+    }
+    .welcome{
+        font-size: 25px;
+    }
+    p{
+        font-size: 20px;
+    }
+    .hero{
+        height: 80vh;
+    }
+    /* .mainsection{
+        height: 80vh;
+        background-image: url(./images/cake-image.png);
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-size: cover;
+    } */
+    
+    #heropic{
+        display: none;
+        width: 1550px;
+        height: 50vh;
+       
+    }
+   
+    .threeimages{
+        height: 300px;
+    }
+    .welcome{
+        font-size: 25px;
+    }
+    p{
+        font-size: 20px;
+    }
+    .join{
+        padding-top: 120px;
+        font-weight: 200;
+        font-size: 25px;
+    }
+   
+    #footerul{
+        
+        width: 15%;
+
+    }
+    h5{
+        font-size: 15px;
+    }
+    .pics3{
+        
+        padding-top: 150px;
+    }
+    #ellipse2{
+        position: absolute;
+        bottom: -100%;
+        right: 0%;
+        width: 402px;
+        height: 420px;
+    }
+    #ellipse3{
+        position: absolute;
+        bottom: -86%;
+        right: 40%;
+        z-index: -1;
+        width: 150px;
+        height: 150px;
+       
+
+    }
+    #ellipse1{
+        position: absolute;
+        top: 96%;
+        z-index: -1;
+        width: 490px;
+        height: 480px;
+    }
+    #ellipse4{
+        position: absolute;
+        bottom: -85%;
+        left: 10%;
+        width: 100px;
+        height: 100px;
+    }
+
+
+
+
+}
+