-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
34ce4b2
commit 5934582
Showing
1 changed file
with
273 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,274 @@ | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Personal Portfolio Website</title> | ||
| <link rel="stylesheet" href="portfolio.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> | ||
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="scroll-up-btn"> | ||
| <i class="fas fa-angle-up"></i> | ||
| </div> | ||
| <nav class="navbar"> | ||
| <div class="max-width"> | ||
| <div class="logo"><a href="#">Portfo<span>lio.</span></a></div> | ||
| <ul class="menu"> | ||
| <li><a href="#home" class="menu-btn">Home</a></li> | ||
| <li><a href="#about" class="menu-btn">About</a></li> | ||
| <li><a href="#services" class="menu-btn">Services</a></li> | ||
| <li><a href="#skills" class="menu-btn">Skills</a></li> | ||
| <li><a href="#teams" class="menu-btn">Teams</a></li> | ||
| <li><a href="#contact" class="menu-btn">Contact</a></li> | ||
| </ul> | ||
| <div class="menu-btn"> | ||
| <i class="fas fa-bars"></i> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- home section start --> | ||
| <section class="home" id="home"> | ||
| <div class="max-width"> | ||
| <div class="home-content"> | ||
| <div class="text-1">Hello, my name is</div> | ||
| <div class="text-2">Md Saddam</div> | ||
| <div class="text-3">And I'm a <span class="typing"></span></div> | ||
| <a href="#contact">Hire me</a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- about section start --> | ||
| <section class="about" id="about"> | ||
| <div class="max-width"> | ||
| <h2 class="title">About me</h2> | ||
| <div class="about-content"> | ||
| <div class="column left"> | ||
| <img src="img/WhatsApp Image 2023-10-05 at 01.29.13_b3b8bd50.jpg" alt=""> | ||
| </div> | ||
| <div class="column right"> | ||
| <div class="text">I'm Md Saddam and I'm a <span class="typing-2"></span></div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut voluptatum eveniet doloremque autem excepturi eaque, sit laboriosam voluptatem nisi delectus. Facere explicabo hic minus accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio consequatur ipsam possimus veritatis, placeat, ab molestiae velit inventore exercitationem consequuntur blanditiis omnis beatae. Dolor iste excepturi ratione soluta quas culpa voluptatum repudiandae harum non.</p> | ||
| <a href="#">Download CV</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- services section start --> | ||
| <section class="services" id="services"> | ||
| <div class="max-width"> | ||
| <h2 class="title">My services</h2> | ||
| <div class="serv-content"> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <i class="fas fa-paint-brush"></i> | ||
| <div class="text">Web Design</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <i class="fas fa-chart-line"></i> | ||
| <div class="text">Advertising</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <i class="fas fa-code"></i> | ||
| <div class="text">Apps Design</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- skills section start --> | ||
| <section class="skills" id="skills"> | ||
| <div class="max-width"> | ||
| <h2 class="title">My skills</h2> | ||
| <div class="skills-content"> | ||
| <div class="column left"> | ||
| <div class="text">My creative skills & experiences.</div> | ||
| <p>Bridging the gap between front-end and back-end to create cohesive web solutions. | ||
| Developing custom web applications tailored to your unique requirements. | ||
| Optimizing performance and security to keep your site running smoothly.</p> | ||
| <a href="#">Read more</a> | ||
| </div> | ||
| <div class="column right"> | ||
| <div class="bars"> | ||
| <div class="info"> | ||
| <span>HTML</span> | ||
| <span>90%</span> | ||
| </div> | ||
| <div class="line html"></div> | ||
| </div> | ||
| <div class="bars"> | ||
| <div class="info"> | ||
| <span>CSS</span> | ||
| <span>70%</span> | ||
| </div> | ||
| <div class="line css"></div> | ||
| </div> | ||
| <div class="bars"> | ||
| <div class="info"> | ||
| <span>JavaScript</span> | ||
| <span>80%</span> | ||
| </div> | ||
| <div class="line js"></div> | ||
| </div> | ||
| <div class="bars"> | ||
| <div class="info"> | ||
| <span>Node Js</span> | ||
| <span>60%</span> | ||
| </div> | ||
| <div class="line php"></div> | ||
| </div> | ||
| <div class="bars"> | ||
| <div class="info"> | ||
| <span>MongoDB</span> | ||
| <span>70%</span> | ||
| </div> | ||
| <div class="line mysql"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- teams section start --> | ||
| <section class="teams" id="teams"> | ||
| <div class="max-width"> | ||
| <h2 class="title">My teams</h2> | ||
| <div class="carousel owl-carousel"> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/1.jpg" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/11.jpg" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/12.jpg" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/hbb.jpg" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/Aus.png" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/Aus.png" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="box"> | ||
| <img src="img/Aus.png" alt=""> | ||
| <div class="text">Someone name</div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- contact section start --> | ||
| <section class="contact" id="contact"> | ||
| <div class="max-width"> | ||
| <h2 class="title">Contact me</h2> | ||
| <div class="contact-content"> | ||
| <div class="column left"> | ||
| <div class="text">Get in Touch</div> | ||
| <p>Are you ready to bring your web development project to life? We're here to help! Whether you have a brilliant idea for a new website, need to revamp your existing site, or have any web-related questions, our team of expert developers is just a click away.</p> | ||
| <div class="icons"> | ||
| <div class="row"> | ||
| <i class="fas fa-user"></i> | ||
| <div class="info"> | ||
| <div class="head">Name</div> | ||
| <div class="sub-title">Md Saddam</div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <i class="fas fa-map-marker-alt"></i> | ||
| <div class="info"> | ||
| <div class="head">Address</div> | ||
| <div class="sub-title">patna , Bihar</div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <i class="fas fa-envelope"></i> | ||
| <div class="info"> | ||
| <div class="head">Email</div> | ||
| <div class="sub-title">mdsaddam7@outlook.com</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="column right"> | ||
| <div class="text">Message me</div> | ||
| <form action="#"> | ||
| <div class="fields"> | ||
| <div class="field name"> | ||
| <input name="name" type="text" placeholder="Name" required> | ||
| </div> | ||
| <div class="field email"> | ||
| <input name="email" type="email" placeholder="Email" required> | ||
| </div> | ||
| </div> | ||
| <div class="field"> | ||
| <input name="subject" type="text" placeholder="Subject" required> | ||
| </div> | ||
| <div class="field textarea"> | ||
| <textarea name="message" cols="30" rows="10" placeholder="Message.." required></textarea> | ||
| </div> | ||
| <div class="button-area"> | ||
| <button type="submit">Send message</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- footer section start --> | ||
| <footer> | ||
| <span>Created By <a href="#">Md Saddam</a> | <span class="far fa-copyright"></span> 2023 All rights reserved.</span> | ||
| </footer> | ||
|
|
||
| <script src="portfolio.js"></script> | ||
| </body> | ||
| </html> |