-
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
18fb48d
commit cd54d7e
Showing
1 changed file
with
130 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 |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="css/uikit.css"> | ||
| <link rel="stylesheet" href="css/styles.css"> | ||
| <script src="js/uikit.js"></script> | ||
| <script src="js/uikit-icons.js"></script> | ||
|
|
||
| <title>Portfolio</title> | ||
| </head> | ||
| <body> | ||
| <!-- Navigation Bar --> | ||
| <nav class="uk-navbar-container uk-margin-small-left uk-margin-small-right uk-visible@m uk-margin-xlarge-left uk-margin-xlarge-right" uk-navbar uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> | ||
|
|
||
| <div class="uk-navbar-left"> | ||
| <a href="" class="uk-navbar-item uk-logo uk-light">JohnDoe.</a> | ||
| </div> | ||
| <div class="uk-navbar-right"> | ||
|
|
||
| <ul class="uk-navbar-nav uk-light"> | ||
| <li><a class="uk-button-text uk-text-capitalize" href="#about" uk-scroll>About</a></li> | ||
| <li><a class="uk-button-text uk-text-capitalize" href="#projects" uk-scroll>Projects</a></li> | ||
| <li><a class="uk-button-text uk-text-capitalize" href="mailto:" uk-scroll>Contact</a></li> | ||
|
|
||
| </ul> | ||
|
|
||
| </div> | ||
| </nav> | ||
| <!-- Navigation Bar Ends --> | ||
|
|
||
| <!-- Navigation Bar Mobile --> | ||
| <nav class="uk-navbar-container uk-margin-small-left uk-margin-small-right uk-hidden@m uk-margin-xlarge-left uk-margin-xlarge-right" uk-navbar uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> | ||
|
|
||
| <div class="uk-navbar-left"> | ||
| <a href="" class="uk-navbar-item uk-logo uk-light">JohnDoe.</a> | ||
| </div> | ||
| <div class="uk-navbar-right"> | ||
|
|
||
| <ul class="uk-navbar-nav uk-light"> | ||
| <li><button uk-toggle="target: #offcanvas-nav" type="button" uk-navbar-toggle-icon></button></li> | ||
|
|
||
| </ul> | ||
|
|
||
| </div> | ||
| </nav> | ||
| <!-- Change This --> | ||
| <div id="offcanvas-nav" uk-offcanvas="overlay: true"> | ||
| <div class="uk-offcanvas-bar uk-flex uk-flex-column"> | ||
|
|
||
| <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical"> | ||
| <li class="uk-active"><a href="#" uk-scroll>Home</a></li> | ||
| <li class="uk-active"><a href="#about" uk-scroll>About</a></li> | ||
| <li class="uk-active"><a href="#projects" uk-scroll>Projects</a></li> | ||
| <li class="uk-active"><a href="mailto:">Contact</a></li> <!--- change to ur email--> | ||
|
|
||
| </ul> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Navigation Bar Mobile Ends --> | ||
| <!-- Home --> | ||
| <section class="uk-margin-small-left uk-margin-small-right uk-margin-xlarge-top uk-margin-xlarge-bottom"> | ||
| <h1 class="uk-margin-xlarge-left uk-light uk-text-left uk-margin-xlarge-right">I'm John Doe, a front-end web developer, <br>graphic designer, and an UI/UX designer.</h1> | ||
| <a href="#about" class="uk-margin-xlarge-left uk-text-capitalize uk-button uk-button-secondary" uk-scroll>About Me</a> | ||
|
|
||
|
|
||
| </section> | ||
|
|
||
| <!-- Home Ends --> | ||
| <br> | ||
|
|
||
|
|
||
| <hr class="uk-margin-xlarge-top uk-margin-xlarge-left uk-margin-xlarge-right"> | ||
|
|
||
| <!-- About Me --> | ||
| <section id="about" class="uk-margin-small-left uk-margin-small-right uk-margin-xlarge-top uk-margin-xlarge-bottom"> | ||
| <h3 class="uk-margin-xlarge-left uk-light">About Me</h3> | ||
| <!-- Change here to ur paragraph --> | ||
| <p class="uk-margin-xlarge-left uk-margin-xlarge-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend posuere tortor vel lobortis. Morbi pretium in sapien non suscipit. Nam ac efficitur enim. Vestibulum accumsan erat sit amet nulla commodo, nec varius felis aliquam. Aliquam suscipit mauris lacus, at euismod purus tempor aliquam. Donec varius sem nisl. Fusce augue tortor, hendrerit at elit quis, aliquet blandit eros. Nam gravida sem velit, eu placerat nunc commodo ut. <br><br>Maecenas ultricies magna nec nisi egestas, in posuere velit tincidunt. Nam quis turpis non ligula dapibus bibendum sit amet at felis. Vestibulum ornare tempor nulla, quis sodales ex consequat vel. Morbi sollicitudin ligula eget mattis euismod. Nulla scelerisque malesuada arcu a vulputate. Phasellus ac lectus consequat, eleifend libero id, tincidunt lectus. Sed tempus gravida odio, sed semper neque aliquet imperdiet.</p> | ||
| <a href="" class="uk-margin-xlarge-left uk-light uk-button-text" uk-icon="instagram"></a> <a href="" class="uk-light uk-button-text" uk-icon="dribbble"></a> <a href="" class="uk-button-text uk-light" uk-icon="github"></a> <a href="" class=" uk-light uk-button-text" uk-icon="linkedin"></a> | ||
|
|
||
| <!-- About Me Ends --> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </section> | ||
|
|
||
| <!-- Projects Section --> | ||
| <hr class="uk-margin-xlarge-left uk-margin-xlarge-right"> | ||
| <section id="projects" class="uk-margin-small-left uk-margin-small-right uk-margin-xlarge-top uk-margin-xlarge-bottom"> | ||
| <h3 class="uk-margin-xlarge-left uk-light">Projects</h3> | ||
| <p class="uk-margin-xlarge-left">Projects that i've been working on</p> | ||
|
|
||
| <div class="uk-margin-xlarge-left uk-margin-xlarge-right"> | ||
| <!-- Change all of this to ur projects --> | ||
| <div class="uk-margin uk-card uk-card-secondary uk-card-body "> | ||
| <h4>Project Name</h4> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| <a class="uk-button-text uk-text-decoration-none" href=""> | ||
| <span uk-icon="icon: link"> | ||
| </span> Website Link </a> | ||
| </div> | ||
| <div class="uk-margin uk-card uk-card-secondary uk-card-body "> | ||
| <h4>Project Name</h4> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| <a class="uk-button-text uk-text-decoration-none" href=""> | ||
| <span uk-icon="icon: link"> | ||
| </span> Website Link </a> | ||
| </div></div> | ||
|
|
||
|
|
||
|
|
||
| <br> | ||
|
|
||
|
|
||
| </section> | ||
| <hr class="uk-margin-xlarge-left uk-margin-xlarge-right"> | ||
| </div> | ||
| <!-- Projects Section Ends --> | ||
|
|
||
| </body> | ||
| </html> |