Skip to content

Commit

Permalink
inidday
Browse files Browse the repository at this point in the history
  • Loading branch information
@snuweb
snuweb committed May 29, 2024
1 parent 071d9ac commit 8350fc7
Show file tree
Hide file tree
Showing 2 changed files with 943 additions and 78 deletions.
289 changes: 230 additions & 59 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,246 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name | Developer</title>
<link rel="stylesheet" href="styles.css">
<title>Shaif Arfan | Developer</title>
<link rel="stylesheet" href="https://kit.fontawesome.com/YOUR_FONTAWESOME_KIT_CODE.css" crossorigin="anonymous">
</head>

<body>
<header class="header">
<h1 class="logo">
<a href="#">Your Name</a>
</h1>
<nav class="navigation">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- 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>
</section>
<!-- End Header -->

<main>
<section class="hero" id="about">
<h2>About Me</h2>
<p>I am a passionate developer with X years of experience in building web applications and websites. I have a strong foundation in (mention core technologies like HTML, CSS, JavaScript) and a keen interest in (mention areas of interest like front-end frameworks, back-end development). I am always eager to learn new things and stay up-to-date with the latest technologies.</p>
<a href="#" class="btn">Download Resume</a>
</section>
<!-- 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 Development</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>SEO Optimization</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>Marketing</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>
</div>
</section>
<!-- End Service Section -->

<section class="skills" id="skills">
<h2>Skills</h2>
<ul class="skills-list">
<li>
<i class="fa fa-code"></i> HTML & CSS
</li>
<li>
<i class="fa fa-code"></i> JavaScript
</li>
<li>
<i class="fa fa-database"></i> (Database technologies, e.g., MySQL, PostgreSQL)
</li>
<li>
<i class="fa fa-cubes"></i> (Front-end frameworks, e.g., React, Vue.js)
</li>
</ul>
</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="Project 1">
</div>
</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>
<div class="project-img">
<img src="./img/img-2.png" alt="Project 2">
</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>
<div class="project-img">
<img src="./img/img-3.png" alt="Project 3">
</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>
<div class="project-img">
<img src="./img/img-4.png" alt="Project 4">
</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>
<div class="project-img">
<img src="./img/img-5.png" alt="Project 5">
</div>
</div>
</div>
</div>
</section>
<!-- End Projects Section -->

<section class="projects" id="projects">
<h2>Projects</h2>
<div class="project-card">
<h3>Project Title</h3>
<p>A brief description of your project and its key features.</p>
<a href="#" class="btn">View Project</a>
<!-- About Section -->
<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="./img/about.png" alt="About Me">
</div>
</div>
</section>
<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 class="contact" id="contact">
<h2>Contact</h2>
<p>Feel free to reach out to me for any inquiries or project opportunities.</p>
<ul class="contact-info">
<li><i class="fa fa-envelope"></i> [email protected]</li>
<li><i class="fa fa-linkedin"></i> <a href="#">Your LinkedIn Profile</a></li>
<li><i class="fa fa-github"></i> <a href="#">Your Github Profile</a></li>
</ul>
</section>
</main>
<!-- 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>
</div>
</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>[email protected]</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>
</section>
<!-- End Contact Section -->

<footer class="footer">
<p>&copy; 2024 Your Name</p>
</footer>
<!-- 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>
</div>
<div class="social-item">
<a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
</div>
</div>
<p>&copy; 2024 Shaif Arfan. All rights reserved</p>
</div>
</section>
<!-- End Footer -->
<script src="./app.js"></script>
</body>

<script src="https://kit.fontawesome.com/your-fontawesome-kit-code.js" crossorigin="anonymous"></script>
</body>
</html>
Loading

0 comments on commit 8350fc7

Please sign in to comment.