diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..93a5bf0f3c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html>
+    <head>
+      	<!-- <meta charset="utf-8">
+      	<meta name="viewport" content="width=device-width, initial-scale=1"> -->
+    	 <title>
+  	  
+  	   </title>
+
+	       <link rel="stylesheet" type="text/css" href="style.css">
+         <link rel="stylesheet" type="text/css" href="mobile.css">
+         <link rel="stylesheet" type="text/css" href="mobile1300.css">
+         
+
+      
+    
+      
+  
+      <!-- Extranal css End -->
+
+      <!-- Google font link -->
+      <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=Lato:wght@700&family=Montserrat:wght@600&family=Open+Sans&family=Protest+Strike&display=swap" rel="stylesheet">
+
+
+      <!-- Load font awesome icons Start-->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+      <!-- Load font awesome icons Close -->
+
+
+
+
+      </head>
+
+  <body>
+
+
+  <section>
+    <div class="menu-container">
+      <div class="logo">
+        <img src="img/logo.png">
+      </div>
+        
+      <div class="menu-items">
+        <ul>
+          <li><a href=""> Home </a></li>
+          <li><a href="about.html"> About </a></li>
+          <li><a href="#Serviceclick"> Service <i style="position: absolute;top: 28px;padding-left: 6px;font-size: 22px;font-weight: bold;" class="fa fa-caret-down"></i> </a>
+             <ul>
+                <li><a href=""> Web <i class="fa-solid fa-caret-right"></i> </a>
+                  <ul>
+                    <li><a href=""> PHP</a></li>
+                    <li><a href=""> CSS Design</a></li>
+                  </ul>
+                </li>
+                <li><a href=""> Graphic </a></li>
+              </ul>
+          </li>
+          <li><a href="#Packegeclick"> Packege </a></li>
+          <li class="c"><a href="#Contactclick"> Contact </a></li>
+        </ul>
+      </div>
+
+      <div class="menu-icons">
+        <i class="fa-solid menuShow fa-bars"></i>
+        <i class="fa-solid menuHide fa-xmark"></i>
+      </div>
+    </div>
+
+  <div class="mobile-menu-items">
+        <ul>
+            <li><a href=""> Home </a></li>
+            <li><a href="about.html"> About </a></li>
+            <li><a href=""> Service </a>
+              <i class="fa-solid uparrow fa-arrow-up"></i>
+              <i class="fa-solid downarrow fa-arrow-down"></i>
+
+              <ul class="service-dropdown">
+            <li><a href=""> 1 </a></li>
+            <li><a href=""> 2 </a></li>
+            <li><a href=""> 2 </a></li>
+            <li><a href=""> 4 </a></li>
+        </ul>
+
+        </li>
+        <li><a href=""> Review </a></li>
+        <li style="border-bottom: 1px solid gray;"><a href="#Contactclick"> Contact </a></li>
+    </ul>
+  </div>
+
+
+    </section>
+
+
+  <section>
+  <div class="header-section">
+    <div class="header-text">
+    
+      <h1><span 
+        style="font-size: 25px;
+        color: #A44227;
+      ">Hello, I'm</span><br> <b>Anik <span style="color: green;">Das</span></b></h1>
+        <div class="job">
+          <p> A <span class="greenText">Web Designer</span> From <span class="purpleText">Feni, Bangladesh</span><br><br><br> <span style="color: #4A4949;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro pariatur impedit, ea necessitatibus vel itaque quidem dolore sed illum minima.
+          </p>
+        </div>
+          <button class="download"><i class="fa-regular fa-address-card"></i></i>&nbsp; About me </button>
+          <div class="social">
+            <ul>
+              <li style="color: #0866FF;"><i class="fa-brands fa-facebook-f"></i></li>
+              <li style="color: blue;"><i class="fa-brands fa-twitter"></i></li>
+              <li style="color: rgba(220,0,12);"><i class="fa-brands fa-instagram"></i></li>
+           </ul>
+           </div>
+    </div>
+    
+
+    <div class="header-img">
+    <img src="img/man.png">  
+    </div>
+
+  </div>
+</section>
+
+
+
+<section>
+
+<div class="container">
+     <div class="container-div">
+    <div class="title">
+      <h3>Pixel Perfect</h3>
+    </div>
+    <div class="text">
+      <p>Most common methods for designing websites that work well on desktop is responsive and adaptive design.</p>
+    </div>
+    </div>
+
+    <div class="container-div">
+    <div class="title">
+      <h3>High Quality</h3>
+    </div>
+    <div class="text">
+      <p>Most common methods for designing websites that work well on desktop is responsive and adaptive design.</p>
+    </div>
+    </div>
+
+
+    <div class="container-div">
+    <div class="title">
+      <h3>Awesome Idea</h3>
+    </div>
+    <div class="text">
+      <p>Most common methods for designing websites that work well on desktop is responsive and adaptive design</p>
+    </div>
+    </div>
+
+  </div>
+
+</section>
+
+
+<section>
+  
+<div class="container-1">
+  <div class="wrapper">
+    <div class="left">
+      <div class="image">
+        <img src="img/man2.png" alt="">
+          <div class="numbers year">
+            <div class="wrapper">
+              <h3><span>1</span></h3>
+                <span class="name">Years of<br>Success</span>
+            </div>
+          </div>
+            <div class="numbers project">
+              <div class="wrapper">
+                <h3><span>4</span></h3>
+                  <span class="name">Total<br>Projects</span>
+              </div>
+            </div>
+      </div>
+    </div>
+      <div class="right">
+        <div class="title">
+          <span>I'm a Web Designer</span>
+            <h3>I Can Design Anything You Want</h3>
+        </div>
+          <div class="text">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Voluptate, dicta, tenetur. Minus repellendus non mollitia, aut nostrum nulla porro nesciunt quibusdam aliquam distinctio consectetur perspiciatis ducimus quaerat sit labore quasi.
+            </p>
+          </div>
+            <div class="dizme_tm_button fadeInUp" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
+              <a class="anchor" href="#contact"><span>Hire Me</span></a>
+            </div>
+    </div>
+  </div>
+</div>
+
+</section>
+
+
+
+<section>
+  <div class="feature-heading aos-animate1" data-aos="zoom-in" data-aos-duration="1000">
+    <div  class="title"><h1> Our Amazing Features </h1></div>
+    <div  class="text">
+    <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime, perspiciatis, laborum odit,<br> quos ex quasi quas omnis reprehenderit minima alias, rem atque! 
+    </p> </div>
+  </div>
+</section>
+
+<section>
+<div class="feature-container">
+    <div class="fadeInUp" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
+      <i class="fas fa-lock" aria-hidden="true"></i>
+      <h1> Feature 1 </h1>
+      <p> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
+    </div>
+    <div class="fadeInUp" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
+      <i class="far fa-circle" aria-hidden="true"></i>
+      <h1> Feature 2 </h1>
+      <p> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
+    </div>
+    <div class="fadeInUp" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
+      <i class="fas fa-cogs" aria-hidden="true"></i>
+      <h1> Feature 3 </h1>
+      <p> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
+    </div>
+    <div class="fadeInUp" style="visibility: visible; animation-duration: 1s; animation-name: fadeInUp;">
+      <i class="far fa-edit" aria-hidden="true"></i>
+      <h1> Feature 4 </h1>
+      <p> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
+    </div>
+</div>
+</section>
+
+
+
+<section>
+  
+
+<div class="dizme_tm_section" id="Serviceclick">
+  <div class="dizme_tm_services">
+    <div class="container">
+      <div class="dizme_tm_main_title" data-align="center">
+        <span>Services</span>
+        <h3>What I Do for Clients</h3>
+        <p>Most common methods for designing websites that work well on desktop is responsive and adaptive design</p>
+      </div>
+        <div class="service_list">
+  <ul>
+    <li class="wow fadeInLeft" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; ; animation-name: fadeInLeft;">
+      <div class="list_inner tilt-effect" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
+        <span class="icon">
+        <img class="back" src="img/cd.jpg" alt="">
+        </span>
+          <div class="title">
+            <h3>Creative Design</h3>
+            <span class="price">Starts from <span>$<b>99</b></span></span>
+          </div>
+            <div class="text">
+              <p>Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development</p>
+            </div>
+              
+
+      </div>
+    </li>
+    <li class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInRight;">
+      <div class="list_inner tilt-effect" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
+        <span class="icon">
+        <img class="back" src="img/gp.jpg" alt="">
+        </span>
+          <div class="title">
+            <h3>Graphic Design</h3>
+            <span class="price">Starts from <span>$<b>199</b></span></span>
+          </div>
+            <div class="text">
+            <p>Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development</p>
+            </div>
+              
+
+      </div>
+    </li>
+    <li class="wow fadeInLeft" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInLeft;">
+      <div class="list_inner tilt-effect" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
+        <span class="icon">
+        <img class="back" src="img/ux.jpg" alt="">
+        </span>
+          <div class="title">
+            <h3>UI/UX Design</h3>
+            <span class="price">Starts from <span>$<b>299</b></span></span>
+          </div>
+            <div class="text">
+              <p>Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development</p>
+            </div>
+              
+
+      </div>
+    </li>
+    <li class="wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInRight;">
+      <div class="list_inner tilt-effect" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
+        <span class="icon">
+        <img class="back" src="img/web.jpg" alt="">
+        </span>
+          <div class="title">
+            <h3>Web Design</h3>
+            <span class="price">Starts from <span>$<b>399</b></span></span>
+          </div>
+            <div class="text">
+              <p>Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development</p>
+            </div>
+              
+
+      </div>
+    </li>
+  </ul>
+  </div>
+</div>
+        
+        </div>
+        </div>
+
+</section>
+
+
+<div class="dizme_tm_section" id="portfolio">
+  <div class="dizme_tm_portfolio">
+    <div class="container">
+      <div class="dizme_tm_main_title" data-align="center">
+        <span>Portfolio</span>
+        <h3>My Amazing Works</h3>
+        <p style="color: dimgray;">Most common methods for designing websites that work well on desktop is responsive and adaptive design</p>
+      </div>
+        <div class="portfolio_filter">
+          <ul>
+            <li><a href="#" class="current" data-filter="*">All</a></li>
+            <li><a href="#" data-filter=".youtube">Food</a></li>
+            <li><a href="#" data-filter=".vimeo">News</a></li>
+            <li><a href="#" data-filter=".soundcloud">Mobile</a></li>
+            <li><a href="#" data-filter=".popup">E-commerce</a></li>
+            <li><a href="#" data-filter=".detail">Detail</a></li>
+          </ul>
+        </div>
+          <!-- Images used to open the lightbox -->
+<div class="row">
+  <div class="column">
+    <img src="img/pt1.png" onclick="openModal();currentSlide(1)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img/pt2.png" onclick="openModal();currentSlide(2)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img/pt3.png" onclick="openModal();currentSlide(3)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img/pt4.png" onclick="openModal();currentSlide(4)" class="hover-shadow">
+  </div>
+</div>
+
+<!-- The Modal/Lightbox -->
+<div id="myModal" class="modal">
+  <span class="close cursor" onclick="closeModal()">&times;</span>
+  <div class="modal-content">
+
+    <div class="mySlides">
+      <div class="numbertext">1 / 4</div>
+      <img src="img/pt1.png" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">2 / 4</div>
+      <img src="img/pt2.png" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">3 / 4</div>
+      <img src="img/pt3.png" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">4 / 4</div>
+      <img src="img/pt4.png" style="width:100%">
+    </div>
+
+    <!-- Next/previous controls -->
+    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+    <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
+    <!-- Caption text -->
+    <div class="caption-container">
+      <p id="caption"></p>
+    </div>
+
+    <!-- Thumbnail image controls -->
+    <div class="column">
+      <img class="demo" src="img/pt1.png" onclick="currentSlide(1)" alt="Project">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img/pt2.png" onclick="currentSlide(2)" alt="E-commerce">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img/pt3.png" onclick="currentSlide(3)" alt="Parsonal-Website">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img/pt4.png" onclick="currentSlide(4)" alt="News">
+    </div>
+  </div>
+</div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+<section>
+<div id="team" class="team-heading fadeInUp" data-aos="zoom-in" data-aos-duration="1000">
+      <h1>
+        Meet With Our
+        <br> 
+        Hightly Expert Team Members
+      </h1>
+      <p> 
+        Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Alias rerum repudiandae eligendi quas unde eaque maxime magnteam-back-sidete volupta
+      </p>
+  </div>
+</section>
+
+
+<section>
+<div class="team-container">
+    <div class="team fadeInUp" data-aos="zoom-in" data-aos-duration="2000">
+      <div class="team-font-side">
+        <div class="name-plate">
+          <h1> Anik Das </h1>
+          <p> Web Design Expert </p>
+        </div>
+      </div>
+      <div class="team-back-side">
+        <img src="img/anik.jpg">
+        <h1> Anik Das </h1>
+        <p> Web Design Expert<br>Feni, Bangladesh </p>
+        <a href=""> <i style="color: blue;" class="fab fa-twitter" aria-hidden="true"></i> </a>
+        <a href=""> <i style="color: blue;" class="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
+        <a href=""> <i style="color: red;" class="fab fa-youtube" aria-hidden="true"></i></a>
+      </div>
+    </div>
+    <div class="team fadeInUp" data-aos="zoom-in" data-aos-duration="2000">
+      <div class="team-font-side2">
+        <div class="name-plate">
+          <h1> Angel Sadia </h1>
+          <p> Spoken English Expert </p>
+        </div>
+      </div>
+      <div class="team-back-side">
+        <img src="img/angel.png">
+        <h1> Angel Sadia </h1>
+        <p> Spoken English Expert <br>Feni, Bangladesh </p>
+        <a href=""> <i style="color: blue;" class="fab twitter fa-twitter" aria-hidden="true"></i> </a>
+        <a href=""> <i style="color: blue;" class="fa-brands facebook fa-facebook-f" aria-hidden="true"></i></a>
+        <a href=""> <i style="color: red;" class="fab youtube fa-youtube" aria-hidden="true"></i></a>
+      </div>
+    </div>
+    <div class="team fadeInUp" data-aos="zoom-in" data-aos-duration="2000">
+      <div class="team-font-side3">
+        <div class="name-plate">
+          <h1> Shuvo Ahmed </h1>
+          <p> Graphic Design Expert </p>
+        </div>
+      </div>
+      <div class="team-back-side">
+        <img src="img/shuvo.png">
+        <h1> Shuvo Ahmed </h1>
+        <p> Graphic Design Expert <br>Feni, Bangladesh </p>
+        <a href=""> <i style="color: blue;" class="fab fa-twitter" aria-hidden="true"></i> </a>
+        <a href=""> <i style="color: blue;" class="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
+        <a href=""> <i style="color: red;" class="fab fa-youtube" aria-hidden="true"></i></a>
+      </div>
+    </div>
+    <div class="team fadeInUp" data-aos="zoom-in" data-aos-duration="2000">
+      <div class="team-font-side4">
+        <div class="name-plate">
+          <h1> Rohim Ullah </h1>
+          <p> Web Developer Expert  </p>
+        </div>
+      </div>
+      <div class="team-back-side">
+        <img src="img/rohim.png">
+        <h1> Rohim Ullah </h1>
+        <p> Web Developer Expert <br>Feni, Bangladesh </p>
+        <a href=""> <i style="color: blue;" class="fab fa-twitter" aria-hidden="true"></i> </a>
+        <a href=""> <i style="color: blue;" class="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
+        <a href=""> <i style="color: red;" class="fab fa-youtube" aria-hidden="true"></i></a>
+      </div>
+    </div>
+  </div>
+ </section>
+
+
+
+
+
+<section>
+  <div class="client-container">
+    <div class="client-heading fadeInUp" data-aos="zoom-in" data-aos-duration="1000">
+      <h1>
+        Our Happy Clients
+      </h1>
+      <p> 
+        Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Alias rerum repudiandae eligendi quas unde eaque maxime magni iste volupta
+      </p>
+
+      <marquee onmouseover="this.stop()" onmouseout="this.start()" class="client-marquee aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1000">
+        <img src="img/twoinsoft.gif">
+        <img src="img/client2.png">
+        <img src="img/client3.png">
+        <img src="img/client4.png">
+        <img src="img/client5.png">
+        <img src="img/client6.png">
+        <img src="img/client7.png">
+        <img src="img/client8.png">
+        <img src="img/client9.png">
+        <img src="img/client1.png">
+      </marquee>
+    </div>
+  </div>
+</section>
+
+
+
+<section>
+  <div class="list-item">
+    <h4> 
+      <button>Feature</button>
+      <button>New Arrivals</button>
+      <button>Bestselling</button>
+      <button style="background: green;" class="onsale">On Sale</button>
+    </h4>
+  </div>
+</section>
+
+
+<section>
+  
+<div class="subscribe-section">
+  <div class="dizme_tm_subscribe">
+    <div class="container">
+      <div class="inner">
+        <div class="background">
+          <div class="dots" data-img-url="bg/bg8.jpg" style="background-image: url(&quot;bg/bg8.png&quot;);"> 
+          </div>
+            <div class="overlay"></div>
+        </div>
+            <div class="content">
+              <div class="left wow fadeInLeft" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInLeft;">
+                <span class="subtitle">Subscribe Now</span>
+                <h3 class="title">Get My Newsletter</h3>
+                <p class="text">Get latest news, updates, tips and trics in your inbox</p>
+              </div>
+                <div class="right wow fadeInRight" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInRight;">
+                  <div class="field">
+                  <input type="text" placeholder="Your email here" style="padding-right: 182.675px;">
+                  <input type="submit" value="Send Now">
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+   </div>
+</div>
+
+</section>
+
+
+
+<section>
+  <div class="footer-container">
+    <div data-aos="zoom-in" data-aos-duration="1000" class="aos-init aos-animate">
+      <img src="img/logo.png">
+      <p> 
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, voluptatibusem ipsum dolor sit amet consectetur.
+      </p>
+      <a href="#"><i style="color: red;" class="fab fa-instagram" aria-hidden="true"></i></a>
+      <a href="#"><i style="color: red;" class="fab fa-youtube" aria-hidden="true"></i></a>
+      <a href="#"><i style="color: #8787FA;" class="fab fa-facebook-f" aria-hidden="true"></i></a>
+      <a href="#"><i style="color: #CE0E0E;" class="fab fa-youtube" aria-hidden="true"></i></a>   
+    </div>
+    <div data-aos="zoom-in" data-aos-duration="1000" class="aos-init aos-animate">
+      <h1> Resourse </h1>
+      <li><a href=""> Help </a></li>
+      <li><a href=""> Events </a></li>
+      <li><a href=""> Live Support </a></li>
+      <li><a href=""> Open Sources </a></li>
+      <li><a href=""> Documentation </a></li> 
+    </div>
+    <div data-aos="zoom-in" data-aos-duration="1000" class="aos-init aos-animate">
+      <h1> Company </h1>
+      <li><a href="about.html"> About Us </a></li>
+      <li><a href=""> Career </a></li>
+      <li><a href=""> Customers </a></li>
+      <li><a href=""> Community </a></li>
+      <li><a href=""> Our Team </a></li>  
+    </div>
+    <div data-aos="zoom-in" data-aos-duration="1000" class="aos-init aos-animate">
+      <h1> Location </h1>
+      <li> <i class="fas fa-map-marker-alt" aria-hidden="true"></i>Feni, Bangladesh</li>
+      <li><i class="fas fa-mobile-alt" aria-hidden="true"></i> +8801 23456789</li>
+      <li><i class="far fa-envelope" aria-hidden="true"></i> contact@gamil.com</li>
+      <li><i class="fas fa-globe" aria-hidden="true"></i> www.yourdomain.com</li>
+      <li> </li>  
+    </div>
+  </div>
+</section>
+
+
+<section>
+  <div class="copyright-container">
+    <hr> 
+    <p> 2024 © Copyright | All Rights reserved by 
+      <a target="_blank" href="https://www.facebook.com/anik.feni.102"> Anik das </a>
+    </p>
+  </div> 
+</section>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <!-- JQuey start -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+
+  </body>
+
+</html>
\ No newline at end of file
