-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
130 lines (94 loc) · 5.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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>