-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (79 loc) · 4.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Peter Juma</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="loading">
<div id="spinner"></div>
</div>
<div id="header" class="animated slideInDown" style="animation-delay:1.8s;">
<div id="title">Peter Juma.</div><br>
<div id="links">
<a href="#skills">skills</a>
<a href="#work" style="margin:0px 60px;">works</a>
<a href="#contact">contact</a>
</div>
</div>
<center>
<div id="middle">
<div id="tagline" class="animated zoomIn" style="animation-delay:1.8s;">
if you're reading this, that mean's you can read<br>
<button class="btn_one">haha ok</button>
</div>
</div>
</center>
<div id="portfolio">
<div id="skills">
<h1>skills.</h1>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt nulla, id semper mi cursus ac. Fusce turpis urna, condimentum sit amet dolor at, vulputate ultrices massa. Vestibulum non euismod nulla, eu pretium risus. Curabitur porta molestie vulputate. Sed tortor enim, rhoncus vel mauris vitae, elementum condimentum augue. Donec fermentum lobortis lectus, in feugiat turpis faucibus et. Pellentesque luctus metus vitae augue lobortis sagittis vitae sit amet enim. Morbi egestas velit ac arcu fermentum lacinia. Nullam eget hendrerit neque. Cras et laoreet ante. Vivamus condimentum euismod commodo. Nulla pulvinar, turpis vitae condimentum tempor, ex ex eleifend quam, et maximus sapien mi sed est. Donec elit mi, dictum nec magna quis, mollis sollicitudin ligula. Maecenas ullamcorper ante vel ullamcorper mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
<div id="work">
<h1>works.</h1>
<div class="project">
<h2>project title 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt nulla, id semper mi cursus ac. Fusce turpis urna, condimentum sit amet dolor at, vulputate ultrices massa. Vestibulum non euismod nulla, eu pretium risus. Curabitur porta molestie vulputate.</div>
<button class="btn_one">visit project</button>
</div>
<div class="project">
<h2>project title 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt nulla, id semper mi cursus ac. Fusce turpis urna, condimentum sit amet dolor at, vulputate ultrices massa. Vestibulum non euismod nulla, eu pretium risus. Curabitur porta molestie vulputate.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum tincidunt nulla, id semper mi cursus ac. Fusce turpis urna, condimentum sit amet dolor at, vulputate ultrices massa. Vestibulum non euismod nulla, eu pretium risus. Curabitur porta molestie vulputate.
</div>
<button class="btn_one">visit project</button>
<button class="btn_two">code</button>
</div>
</div>
<div id="contact">
<h1>contact.</h1>
<form>
<input type="text" placeholder="name" required>
<input type="email" placeholder="email" required><br>
<textarea placeholder="your message" required rows="5"></textarea><br>
<button class="btn_one">send</button>
</form>
<div id="details">
<a class="btn_social"><i class="fas fa-phone"></i></a>
<a class="btn_social"><i class="fas fa-at"></i></a>
<a class="btn_social"><i class="fab fa-twitter"></i></a>
<a class="btn_social"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
<div id="footer">
made on earth by a human <br><br> <a href="https://github.com/peterjuma">peterjuma</a>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>