forked from ShaifArfan/one-page-website-html-css-project
-
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
bb62c0f
commit 2590d0d
Showing
2 changed files
with
82 additions
and
49 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,21 +1,27 @@ | ||
| <!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> | ||
|
|
||
| <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> | ||
| <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> | ||
| <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> | ||
|
|
@@ -48,28 +54,34 @@ <h1>Arfan <span></span></h1> | |
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
|
|
@@ -87,7 +99,9 @@ <h1 class="section-title">Recent <span>Projects</span></h1> | |
| <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> | ||
| <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"> | ||
|
|
@@ -97,7 +111,9 @@ <h2>Coding is Love</h2> | |
| <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> | ||
| <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"> | ||
|
|
@@ -107,7 +123,9 @@ <h2>Coding is Love</h2> | |
| <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> | ||
| <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"> | ||
|
|
@@ -117,7 +135,9 @@ <h2>Coding is Love</h2> | |
| <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> | ||
| <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"> | ||
|
|
@@ -127,7 +147,9 @@ <h2>Coding is Love</h2> | |
| <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> | ||
| <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"> | ||
|
|
@@ -149,7 +171,11 @@ <h2>Coding is Love</h2> | |
| <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> | ||
| <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> | ||
|
|
@@ -159,26 +185,28 @@ <h2>Front End Developer</h2> | |
| <!-- Contact Section --> | ||
| <section id="contact"> | ||
| <div class="contact container"> | ||
| <div><h1 class="section-title">Contact <span>info</span></h1></div> | ||
| <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="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 class="contact-item"> | ||
| <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png"/></div> | ||
| <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> | ||
| <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="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> | ||
|
|
@@ -192,20 +220,22 @@ <h2>Fatikchhari, Chittagong, Bangladesh</h2> | |
| <!-- Footer --> | ||
| <section id="footer"> | ||
| <div class="footer container"> | ||
| <div class="brand"><h1><span>S</span>haif <span>A</span>rfan</h1></div> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <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> | ||
| <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a> | ||
| </div> | ||
| </div> | ||
| <p>Copyright © 2020 Arfan. All rights reserved</p> | ||
|
|
@@ -214,4 +244,5 @@ <h2>Your Complete Web Solution</h2> | |
| <!-- End Footer --> | ||
| <script src="./app.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
Oops, something went wrong.