diff --git a/index.html b/index.html
index 1a429961..4060db06 100644
--- a/index.html
+++ b/index.html
@@ -1,248 +1,314 @@
<!DOCTYPE html>
<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="stylesheet" href="style.css" />
+ <title>My Website</title>
+ </head>
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="style.css">
- <title>My Website</title>
-</head>
-
-<body>
- <!-- Header -->
- <section id="header">
- <div class="header container">
- <div class="nav-bar">
- <div class="brand">
- <a href="#hero">
- <h1><span>S</span>haif <span>A</span>rfan</h1>
- </a>
- </div>
- <div class="nav-list">
- <div class="hamburger">
- <div class="bar"></div>
- </div>
- <ul>
- <li><a href="#hero" data-after="Home">Home</a></li>
- <li><a href="#services" data-after="Service">Services</a></li>
- <li><a href="#projects" data-after="Projects">Projects</a></li>
- <li><a href="#about" data-after="About">About</a></li>
- <li><a href="#contact" data-after="Contact">Contact</a></li>
- </ul>
+ <body>
+ <!-- Header -->
+ <section id="header">
+ <div class="header container">
+ <div class="nav-bar">
+ <div class="brand">
+ <a href="#hero">
+ <h1><span>S</span>haif <span>A</span>rfan</h1>
+ </a>
+ </div>
+ <div class="nav-list">
+ <div class="hamburger">
+ <div class="bar"></div>
+ </div>
+ <ul>
+ <li><a href="#hero" data-after="Home">Home</a></li>
+ <li><a href="#services" data-after="Service">Services</a></li>
+ <li><a href="#projects" data-after="Projects">Projects</a></li>
+ <li><a href="#about" data-after="About">About</a></li>
+ <li><a href="#contact" data-after="Contact">Contact</a></li>
+ </ul>
+ </div>
</div>
</div>
- </div>
- </section>
- <!-- End Header -->
+ </section>
+ <!-- End Header -->
-
- <!-- Hero Section -->
- <section id="hero">
- <div class="hero container">
- <div>
- <h1>Hello, <span></span></h1>
- <h1>My Name is <span></span></h1>
- <h1>Arfan <span></span></h1>
- <a href="#projects" type="button" class="cta">Portfolio</a>
- </div>
- </div>
- </section>
- <!-- End Hero Section -->
-
- <!-- Service Section -->
- <section id="services">
- <div class="services container">
- <div class="service-top">
- <h1 class="section-title">Serv<span>i</span>ces</h1>
- <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda quas
- magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque molestias
- voluptatum explicabo!</p>
- </div>
- <div class="service-bottom">
- <div class="service-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
- <h2>Web Design</h2>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
- architecto placeat beatae tenetur officia quod</p>
- </div>
- <div class="service-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
- <h2>Web Design</h2>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
- architecto placeat beatae tenetur officia quod</p>
- </div>
- <div class="service-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
- <h2>Web Design</h2>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
- architecto placeat beatae tenetur officia quod</p>
- </div>
- <div class="service-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
- <h2>Web Design</h2>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
- architecto placeat beatae tenetur officia quod</p>
+ <!-- Hero Section -->
+ <section id="hero">
+ <div class="hero container">
+ <div>
+ <h1>Hello, <span></span></h1>
+ <h1>My Name is <span></span></h1>
+ <h1>Arfan <span></span></h1>
+ <a href="#projects" type="button" class="cta">Portfolio</a>
</div>
</div>
- </div>
- </section>
- <!-- End Service Section -->
+ </section>
+ <!-- End Hero Section -->
- <!-- Projects Section -->
- <section id="projects">
- <div class="projects container">
- <div class="projects-header">
- <h1 class="section-title">Recent <span>Projects</span></h1>
- </div>
- <div class="all-projects">
- <div class="project-item">
- <div class="project-info">
- <h1>Project 1</h1>
- <h2>Coding is Love</h2>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
- rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
- harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
- </div>
- <div class="project-img">
- <img src="./img/img-1.png" alt="img">
- </div>
+ <!-- Service Section -->
+ <section id="services">
+ <div class="services container">
+ <div class="service-top">
+ <h1 class="section-title">Serv<span>i</span>ces</h1>
+ <p>
+ Welcome to my services section. Here you will find a variety of
+ offerings that can help your business thrive. From web design to
+ development, my goal is to provide top-notch services to ensure your
+ success.
+ </p>
</div>
- <div class="project-item">
- <div class="project-info">
- <h1>Project 2</h1>
- <h2>Coding is Love</h2>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
- rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
- harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
+ <div class="service-bottom">
+ <div class="service-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/services.png"
+ />
+ </div>
+ <h2>Web Design</h2>
+ <p>
+ I specialize in creating visually appealing and user-friendly web
+ designs. My designs are tailored to meet the specific needs of
+ each client, ensuring a unique and professional look.
+ </p>
</div>
- <div class="project-img">
- <img src="./img/img-1.png" alt="img">
+ <div class="service-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/services.png"
+ />
+ </div>
+ <h2>Web Development</h2>
+ <p>
+ From front-end to back-end development, I provide comprehensive
+ web development services. My goal is to build robust and scalable
+ websites that perform well across all devices and platforms.
+ </p>
</div>
- </div>
- <div class="project-item">
- <div class="project-info">
- <h1>Project 3</h1>
- <h2>Coding is Love</h2>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
- rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
- harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
+ <div class="service-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/services.png"
+ />
+ </div>
+ <h2>SEO Optimization</h2>
+ <p>
+ Improve your website's visibility on search engines with my SEO
+ optimization services. I use the latest techniques to help your
+ site rank higher and attract more organic traffic.
+ </p>
</div>
- <div class="project-img">
- <img src="./img/img-1.png" alt="img">
+ <div class="service-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/services.png"
+ />
+ </div>
+ <h2>Graphic Design</h2>
+ <p>
+ Enhance your brand's visual identity with my graphic design
+ services. From logos to marketing materials, I create designs that
+ communicate your brand's message effectively.
+ </p>
</div>
</div>
- <div class="project-item">
- <div class="project-info">
- <h1>Project 4</h1>
- <h2>Coding is Love</h2>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
- rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
- harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
+ </div>
+ </section>
+ <!-- End Service Section -->
+
+ <!-- Projects Section -->
+ <section id="projects">
+ <div class="projects container">
+ <div class="projects-header">
+ <h1 class="section-title">Recent <span>Projects</span></h1>
+ </div>
+ <div class="all-projects">
+ <div class="project-item">
+ <div class="project-info">
+ <h1>Project 1</h1>
+ <h2>Coding is Love</h2>
+ <p>
+ This project showcases a sophisticated web application designed
+ for a tech company. It features an intuitive user interface,
+ seamless navigation, and robust functionality to enhance user
+ experience.
+ </p>
+ </div>
+ <div class="project-img">
+ <img src="./img/img-1.png" alt="img" />
+ </div>
</div>
- <div class="project-img">
- <img src="./img/img-1.png" alt="img">
+ <div class="project-item">
+ <div class="project-info">
+ <h1>Project 2</h1>
+ <h2>Creative Design</h2>
+ <p>
+ A creative design project that involved rebranding a local
+ business. The project included logo design, website redesign,
+ and marketing materials, all aimed at creating a cohesive and
+ modern brand identity.
+ </p>
+ </div>
+ <div class="project-img">
+ <img src="./img/img-1.png" alt="img" />
+ </div>
</div>
- </div>
- <div class="project-item">
- <div class="project-info">
- <h1>Project 5</h1>
- <h2>Coding is Love</h2>
- <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
- rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
- harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
+ <div class="project-item">
+ <div class="project-info">
+ <h1>Project 3</h1>
+ <h2>E-commerce Platform</h2>
+ <p>
+ Developed an e-commerce platform with advanced features like
+ product filtering, secure payment gateways, and user accounts.
+ The platform is designed to provide a seamless shopping
+ experience.
+ </p>
+ </div>
+ <div class="project-img">
+ <img src="./img/img-1.png" alt="img" />
+ </div>
+ </div>
+ <div class="project-item">
+ <div class="project-info">
+ <h1>Project 4</h1>
+ <h2>Marketing Campaign</h2>
+ <p>
+ Led a comprehensive digital marketing campaign for a startup.
+ The campaign included social media marketing, email marketing,
+ and SEO strategies to increase brand awareness and drive traffic
+ to the website.
+ </p>
+ </div>
+ <div class="project-img">
+ <img src="./img/img-1.png" alt="img" />
+ </div>
</div>
- <div class="project-img">
- <img src="./img/img-1.png" alt="img">
+ <div class="project-item">
+ <div class="project-info">
+ <h1>Project 5</h1>
+ <h2>Mobile App</h2>
+ <p>
+ Designed and developed a mobile application for a healthcare
+ provider. The app includes features like appointment scheduling,
+ patient records, and health tracking, aimed at improving patient
+ care.
+ </p>
+ </div>
+ <div class="project-img">
+ <img src="./img/img-1.png" alt="img" />
+ </div>
</div>
</div>
</div>
- </div>
- </section>
- <!-- End Projects Section -->
+ </section>
+ <!-- End Projects Section -->
- <!-- About Section -->
- <section id="about">
- <div class="about container">
- <div class="col-left">
- <div class="about-img">
- <img src="./img/img-2.png" alt="img">
+ <!-- About Section -->
+ <section id="about">
+ <div class="about container">
+ <div class="col-left">
+ <div class="about-img">
+ <img src="./img/img-2.png" alt="img" />
+ </div>
+ </div>
+ <div class="col-right">
+ <h1 class="section-title">About <span>me</span></h1>
+ <h2>Front End Developer</h2>
+ <p>
+ I am a passionate front-end developer with over 5 years of
+ experience in creating dynamic and responsive websites. I enjoy
+ turning complex problems into simple, beautiful, and intuitive
+ designs. When I'm not coding, you'll find me exploring new
+ technologies and working on my personal projects. I am always eager
+ to learn and take on new challenges to expand my skill set.
+ </p>
+ <a href="#" class="cta">Download Resume</a>
</div>
</div>
- <div class="col-right">
- <h1 class="section-title">About <span>me</span></h1>
- <h2>Front End Developer</h2>
- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, velit alias eius non illum beatae atque
- repellat ratione qui veritatis repudiandae adipisci maiores. At inventore necessitatibus deserunt
- exercitationem cumque earum omnis ipsum rem accusantium quis, quas quia, accusamus provident suscipit magni!
- Expedita sint ad dolore, commodi labore nihil velit earum ducimus nulla quae nostrum fugit aut, deserunt
- reprehenderit libero enim!</p>
- <a href="#" class="cta">Download Resume</a>
- </div>
- </div>
- </section>
- <!-- End About Section -->
+ </section>
+ <!-- End About Section -->
- <!-- Contact Section -->
- <section id="contact">
- <div class="contact container">
- <div>
- <h1 class="section-title">Contact <span>info</span></h1>
- </div>
- <div class="contact-items">
- <div class="contact-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
- <div class="contact-info">
- <h1>Phone</h1>
- <h2>+1 234 123 1234</h2>
- <h2>+1 234 123 1234</h2>
- </div>
+ <!-- Contact Section -->
+ <section id="contact">
+ <div class="contact container">
+ <div>
+ <h1 class="section-title">Contact <span>info</span></h1>
</div>
- <div class="contact-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" /></div>
- <div class="contact-info">
- <h1>Email</h1>
- <h2>info@gmail.com</h2>
- <h2>abcd@gmail.com</h2>
+ <div class="contact-items">
+ <div class="contact-item">
+ <div class="icon">
+ <img src="https://img.icons8.com/bubbles/100/000000/phone.png" />
+ </div>
+ <div class="contact-info">
+ <h1>Phone</h1>
+ <h2>+1 234 123 1234</h2>
+ <h2>+1 234 123 1234</h2>
+ </div>
</div>
- </div>
- <div class="contact-item">
- <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" /></div>
- <div class="contact-info">
- <h1>Address</h1>
- <h2>Fatikchhari, Chittagong, Bangladesh</h2>
+ <div class="contact-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/new-post.png"
+ />
+ </div>
+ <div class="contact-info">
+ <h1>Email</h1>
+ <h2>info@gmail.com</h2>
+ <h2>abcd@gmail.com</h2>
+ </div>
+ </div>
+ <div class="contact-item">
+ <div class="icon">
+ <img
+ src="https://img.icons8.com/bubbles/100/000000/map-marker.png"
+ />
+ </div>
+ <div class="contact-info">
+ <h1>Address</h1>
+ <h2>Fatikchhari, Chittagong, Bangladesh</h2>
+ </div>
</div>
</div>
</div>
- </div>
- </section>
- <!-- End Contact Section -->
+ </section>
+ <!-- End Contact Section -->
- <!-- Footer -->
- <section id="footer">
- <div class="footer container">
- <div class="brand">
- <h1><span>S</span>haif <span>A</span>rfan</h1>
- </div>
- <h2>Your Complete Web Solution</h2>
- <div class="social-icon">
- <div class="social-item">
- <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png" /></a>
- </div>
- <div class="social-item">
- <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
- </div>
- <div class="social-item">
- <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png" /></a>
+ <!-- Footer -->
+ <section id="footer">
+ <div class="footer container">
+ <div class="brand">
+ <h1><span>S</span>haif <span>A</span>rfan</h1>
</div>
- <div class="social-item">
- <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
+ <h2>Your Complete Web Solution</h2>
+ <div class="social-icon">
+ <div class="social-item">
+ <a href="#"
+ ><img
+ src="https://img.icons8.com/bubbles/100/000000/facebook-new.png"
+ /></a>
+ </div>
+ <div class="social-item">
+ <a href="#"
+ ><img
+ src="https://img.icons8.com/bubbles/100/000000/instagram-new.png"
+ /></a>
+ </div>
+ <div class="social-item">
+ <a href="#"
+ ><img src="https://img.icons8.com/bubbles/100/000000/twitter.png"
+ /></a>
+ </div>
+ <div class="social-item">
+ <a href="#"
+ ><img src="https://img.icons8.com/bubbles/100/000000/behance.png"
+ /></a>
+ </div>
</div>
+ <p>Copyright © 2020 Arfan. All rights reserved</p>
</div>
- <p>Copyright © 2020 Arfan. All rights reserved</p>
- </div>
- </section>
- <!-- End Footer -->
- <script src="./app.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+ </section>
+ <!-- End Footer -->
+ <script src="./app.js"></script>
+ </body>
+</html>