diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e6b12d5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coffee Shop Website</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header " >
+        <a href="#" class="logo">
+            <img src="logo2.jpeg" id="logopng" alt=""  height="100px" width="100px" style="mix-blend-mode: multiply;">
+        </a>
+        <nav class="navbar " class="active" >
+            <a href="#home">home</a>
+            <a href="#about">about</a>
+            <a href="#menue">Menue</a>
+            <a href="#product">Product</a>
+            <a href="#review">review</a>
+            <a href="#contact">contact</a>
+            <a href="#blogs">blogs</a>
+        </nav>
+        <div class="icons">
+            <div class="fas fa-search" id="search-btn"></div>
+             <div class="fas fa-shopping-cart" id="cart-btn"></div>
+            <div class="fas fa-bars " id="menue-btn"></div>
+        </div>
+        <div class="search-form">
+            <input type="search" id="search-box" placeholder="search here...">
+            <label for="search-box" class="fas fa-search"></label>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-items">
+          <span class="fas fa-times"></span>
+          <img src="seeds1.jpg" alt="">
+          <div class="content">
+            <h3>cart Item 01</h3>
+            <div class="price">$15.99</div>
+          </div>
+            </div>
+            <div class="cart-items">
+          <span class="fas fa-times"></span>
+          <img src="seeds2.jpeg">
+          <div class="content">
+            <h3>cart Item 02</h3>
+            <div class="price">$12.67</div>
+          </div>
+            </div>
+            <div class="cart-items">
+          <span class="fas fa-times"></span>
+          <img src="seeds3.jpeg" alt="">
+          <div class="content">
+            <h3>cart Item 03</h3>
+            <div class="price">$17.99</div>
+          </div>
+            </div>
+            <a href="#" class="btn">Check Out</a>
+        </div>
+    </header>
+    <!-- header section ends -->
+    <!-- Home section starts -->
+    <section class="home" id="home">
+      <div class="content">
+      <h3>Fresh Coffe in the Morning</h3>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laboriosam facilis quis molestiae deserunt necessitatibus, error odio, quidem sunt optio quo maiores expedita reprehenderit, minima ipsa. Numquam maxime distinctio eaque.</p>
+      <a href="#" class="btn">Get yours now</a>
+    </div>
+    </section>
+    <!-- about section -->
+    <section class="about" id="about">
+      <h1 class="heading">
+        <span>about</span>us
+      </h1>
+      <div class="row">
+        <div class="image">
+          <img src="about.jpeg" alt="">
+        </div>
+        <div class="content">
+          <h3>What makes our coffe special?</h3>
+          <p>Lorem ipsum tetur  dicta sit ipsam molestias ea doloremque! Veritatis suscipit maiores ab asperiores?</p>
+          <p>Lorem ipsum  repellendus ab tempora? Voluptatem quaerat reiciendis nemo natus!</p>
+          <a href="#" class="btn">learn more</a>
+        </div>
+      </div>
+    </section>
+    <!-- menue section -->
+    <section class="menue" id="menue">
+      <h1 class="heading">
+        our <span>menu</span>
+      </h1>
+      <div class="box-container">
+        <div class="box">
+           <img src="cup1.jpeg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+        <div class="box">
+           <img src="cup2.jpeg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+        <div class="box">
+           <img src="cup3.jpg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+        <div class="box">
+           <img src="cup4.jpeg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+        <div class="box">
+           <img src="cup5.jpg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+        <div class="box">
+           <img src="cup6.jpeg" alt="" height="70px" width="70px" style="border-radius: 50%;">
+           <h3>tasty and healthy</h3>
+           <div class="price">$15.99 <span>20.99</span></div>
+           <a href="#" class="btn">add to cart</a>
+        </div>
+      </div>
+    </section>
+    <!-- products section -->
+    <section class="product" id="product">
+      <h1 class="heading">our <span>products</span></h1>
+      <div class="box-container">
+        <div class="box">
+          <div class="icons">
+            <a href="#" class="fas fa-shopping-cart"></a>
+            <a href="#" class="fas fa-heart"></a>
+            <a href="#" class="fas fa-eye"></a>
+
+          </div>
+          <div class="image">
+            <img src="product1.jpeg" alt="" style="height:150px; width:150px;">
+          </div>
+          <div class="content">
+            <h3>Fresh coffee</h3>
+            <div class="stars">
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star-half-alt"></i>
+            </div>
+           <div class="price">$15.88 <span>$20.99</span></div>
+          </div>
+        </div>
+
+        <div class="box">
+          <div class="icons">
+            <a href="#" class="fas fa-shopping-cart"></a>
+            <a href="#" class="fas fa-heart"></a>
+            <a href="#" class="fas fa-eye"></a>
+
+          </div>
+          <div class="image">
+            <img src="product2.jpeg" alt="" style="height:150px; width:150px;">
+          </div>
+          <div class="content">
+            <h3>Fresh coffee</h3>
+            <div class="stars">
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star-half-alt"></i>
+            </div>
+           <div class="price">$15.88 <span>$20.99</span></div>
+          </div>
+        </div>
+        
+        <div class="box">
+          <div class="icons">
+            <a href="#" class="fas fa-shopping-cart"></a>
+            <a href="#" class="fas fa-heart"></a>
+            <a href="#" class="fas fa-eye"></a>
+
+          </div>
+          <div class="image">
+            <img src="product3.jpg" alt="" style="height:150px; width:150px;">
+          </div>
+          <div class="content">
+            <h3>Fresh coffee</h3>
+            <div class="stars">
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star"></i>
+             <i class="fas fa-star-half-alt"></i>
+            </div>
+           <div class="price">$15.88 <span>$20.99</span></div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Review section -->
+    <section class="review" id="review">
+      <h1 class="heading">
+        Customer's <span>Review</span> 
+      </h1>
+      <div class="box-container">
+        <div class="box">
+          <img src="" alt="" class="quote">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, perspiciatis expedita! Provident hic placeat suscipit modi molestiae. Corrupti earum adipisci ex, molestias inventore delectus, tenetur quos eligendi cupiditate, illo ipsa.
+         
+          </p>
+          <img src="man1.jpg" alt="" class="user" >
+          <h3>jhon deo</h3>
+          <h3>Fresh coffee</h3>
+          <div class="stars">
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star-half-alt"></i>
+          </div>
+        </div>
+        <div class="box">
+          <img src="" alt="" class="quote">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, perspiciatis expedita! Provident hic placeat suscipit modi molestiae. Corrupti earum adipisci ex, molestias inventore delectus, tenetur quos eligendi cupiditate, illo ipsa.
+         
+          </p>
+          <img src="man2.jpeg" alt="" class="user" >
+          <h3>jhon deo</h3>
+          <h3>Fresh coffee</h3>
+          <div class="stars">
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star-half-alt"></i>
+          </div>
+        </div>
+        <div class="box">
+          <img src="" alt="" class="quote">
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, perspiciatis expedita! Provident hic placeat suscipit modi molestiae. Corrupti earum adipisci ex, molestias inventore delectus, tenetur quos eligendi cupiditate, illo ipsa.
+         
+          </p>
+          <img src="man3.jpeg" alt="" class="user" >
+          <h3>jhon deo</h3>
+          <h3>Fresh coffee</h3>
+          <div class="stars">
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star"></i>
+           <i class="fas fa-star-half-alt"></i>
+          </div>
+        </div>
+      </div>
+
+    </section>
+    <!-- contact us -->
+    <section class="contact" id="contact">
+      <h1 class="heading"><span>Contact </span> us</h1>
+
+      <div class="row">
+
+        <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.1090913451126!2d73.03728040922387!3d19.146701449677444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7bf8412795381%3A0x8538b680b6debf93!2sMumbra!5e0!3m2!1sen!2sin!4v1701450903191!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+
+        <form action="">
+          <h3>get in touch</h3>
+          <div class="inputBox">
+            <span class="fas fa-user"></span>
+          <input type="text" placeholder="name">
+          </div>
+          
+          <div class="inputBox">
+            <span class="fas fa-envelope"></span>
+          <input type="email" placeholder="email">
+          </div>
+          <div class="inputBox">
+            <span class="fas fa-phone"></span>
+          <input type="number" placeholder="number">
+          </div>
+          <input type="submit" value="contact now" class="btn">
+
+        </form>
+      </div>
+    </section>
+    <!-- blogs -->
+
+    <section class="blogs" id="blogs">
+      <h1 class="heading">
+        our <spna>Blogs</spna>
+      </h1>
+      <div class="box-container">
+        <div class="box">
+          <div class="image">
+            <img src="cup6.jpeg" alt="">
+          </div>
+          <div class="content">
+            <a href="#" class="title">tasty and refreshing coffee</a>
+            <span>by admin / 21st may,2023</span>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
+            <a href="#" class="btn">read more</a>
+          </div>
+        </div>
+        <div class="box">
+          <div class="image">
+            <img src="cup7.jpeg" alt="">
+          </div>
+          <div class="content">
+            <a href="#" class="title">tasty and refreshing coffee</a>
+            <span>by admin / 21st may,2023</span>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
+            <a href="#" class="btn">read more</a>
+          </div>
+        </div>
+        <div class="box">
+          <div class="image">
+            <img src="cup8.jpeg" alt="">
+          </div>
+          <div class="content">
+            <a href="#" class="title">tasty and refreshing coffee</a>
+            <span>by admin / 21st may,2023</span>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
+            <a href="#" class="btn">read more</a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- footer -->
+
+    <section class="footer">
+      <div class="share">
+        <a href="#" class="fab fa-facebook-f"></a>
+        <a href="#" class="fab fa-twitter"></a>
+        <a href="#" class="fab fa-instagram"></a>
+        <a href="#" class="fab fa-linkedin"></a>
+        <a href="#" class="fab fa-pinterest"></a>
+      </div>
+      <div class="links">
+        <a href="#">home</a>
+        <a href="#">about</a>
+        <a href="#">menue</a>
+        <a href="#">products</a>
+        <a href="#">review</a>
+        <a href="#">contact</a>
+        <a href="#">blogs</a>
+      </div>
+
+      <div class="credit">created by <span>miss. web designer</span> all rights reserved</div>
+    </section>
+    <script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
