diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 60b1afe13..ff0a9ac2a 100644
--- a/index.html
+++ b/index.html
@@ -6,11 +6,74 @@
     <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 -->
+    <link rel="stylesheet" href="style.css" />
+ 
+
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- google font family -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Zeyada&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
+
 </head>
 
 <body>
-    <!-- Add your markup here -->
-</body>
 
-</html>
\ No newline at end of file
+    <header>
+
+      <div class="logo"> 
+        <h1>Onur's Cake Bakery</h1>
+      </div>
+      
+    
+      <nav class="navbar">
+          <ul>
+            <li> <a href="#home"> homee </a></li>
+            <li> <a href="#"> contact </a></li>
+            <li> <a href="#"> about </a></li>
+          </ul>
+     </nav>
+
+
+     <div class="hamburger-menu">
+    
+           <a class="menu" href="menu"><i class="fa-solid fa-bars"></i></a>
+     </div>
+
+      <div class="header-content">
+        <h2>best cakes in town</h2>
+      </div>
+    </header>    
+
+   <section class="hero-banner">
+     <div class="content-section">
+    
+        <p> our cake is a sweet baked dessert made from flour, sugar, eggs, and butter, often flavored and decorated. It's served at special occasions and comes in many different varieties.</p2>
+      </div>
+    
+   </section>
+
+
+  
+     
+
+      <section class="cake-images">
+        
+              <div class="victorian-sponge-cake cake-item"> <h1>victorian-sponge-cake</h1> </div>
+              <div class="chocolate-cake cake-item"> <h1>chocolate-cake</h1> </div>
+              <div class="carrot-cake cake-item"> <h1>carrot-cake</h1> </div>
+           
+      </section>
+          
+     
+    
+   
+
+    <footer>
+      <p>© 2023 Cake, Inc.</p>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
index 6de1b3567..247c93686 100644
--- a/style.css
+++ b/style.css
@@ -1 +1,186 @@
-/*  Add your styling here */
+
+
+body{
+    background-color: whitesmoke;
+    font-family: 'Quicksand', sans-serif;
+}
+
+
+
+
+header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+/* 1440px */
+/****************** #navbar#logo#content******************/
+.logo h1{
+    font-family: 'Zeyada', cursive;
+}
+
+.navbar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.navbar ul {
+    display: flex;
+
+}
+
+
+.navbar ul li {
+display: flex;
+flex-direction: row;
+padding: 0 16px;
+text-decoration: none;
+}
+
+
+.navbar a {
+    text-decoration: none;
+    font-style: none;
+    color: black;
+}
+
+.header-content{
+    font-family: 'Babylonica', cursive;
+    font-size: 1.6rem;
+    letter-spacing: 12px;
+
+}
+
+.hamburger-menu{
+    display: none;
+}
+
+/****************** navbar ******************/
+
+
+
+
+.hero-banner{
+    background-image: url("https://tinyurl.com/dw3xbar6");
+    height:500px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+
+
+/****************** images ******************/
+
+.cake-images{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+   
+
+}
+.cake-item{
+
+    height: 23rem;
+    width: 30rem;
+    background-position: center;
+    background-size: cover;
+    border-radius: 50%; 
+    display: flex;
+    align-items: center;
+    justify-content: center;   
+}
+
+
+
+.victorian-sponge-cake{
+    background-image: url("https://tinyurl.com/4j87s64d");
+   
+}
+ 
+.chocolate-cake{
+    background-image: url("https://tinyurl.com/yxb8r9me");
+    
+  
+}
+ 
+.carrot-cake{
+    background-image: url("https://tinyurl.com/y9tv4y4u");
+
+}
+
+.cake-item h1{
+
+    color: white;
+    border: solid #e15b8d;
+    background-color: #e15b8d;
+  
+}
+
+/****************** images ******************/
+
+
+
+  footer{
+    text-align: center;
+  }
+
+
+
+
+
+
+  @media screen and (max-width: 900px) {
+.hamburger-menu{
+    display: block;
+}
+
+.menu:target {
+    transform: translateY(0);
+}
+    .navbar{
+        display: none;
+    }
+
+    .cake-images {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .header-content {
+        font-family: 'Babylonica', cursive;
+        font-size: 1rem;
+        letter-spacing: 5px;
+    }
+
+    .content-section p{
+        width: 600px;
+    }
+
+    .cake-item{
+        margin: 1rem;
+    }
+
+
+  }
+
+
+
+
+
+
+  @media screen and (max-width: 540px) {
+    .content-section p {
+        width: 400px;
+    }
+  }
\ No newline at end of file
