-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (150 loc) · 7.13 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JonTech Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="images/jontech1.svg" alt="jontech">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">My Services</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">My Work</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact Me</a></li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>John Mbugua</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">DIGITAL STRATEGIST</p>
<img src="images/john.jpg" alt="a picture of John not smiling" class="intro__img">
</section>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services"><strong>What I do</strong></h2>
<div class="services">
<div class="service">
<h3>Web Development</h3>
<p>I develop awesome and responsive websites and web apps across devices.
People are looking for your business online, I make sure you are easy to find, and reach.
Research has it that approx. 30% of businesses were conducted online, why not have a piece of that cake?
</p>
</div> <!-- / service -->
<div class="service">
<h3>Website Analytics</h3>
<p>Data is the new oil. I professionally organize, store and analyze data for maximum efficiency and decision support.
I'm Google Analytics Certified with experience in Keyword planning. Let me help you nurture your clients, potential clients
and even those that don't know you yet, with the power of data.
</p>
</div> <!-- / service -->
<div class="service">
<h3>UI/UX Research</h3>
<p>A well thought-out and user-centric design ensures maximum engagement with your site.
I tailor your site for easy navigation, user friendliness and higher rank on search engines.
It's an honor to ensure your site achieves its full potential, and is aesthetically appealing.
</p>
</div> <!-- / service -->
</div> <!-- / services -->
<a href="#work" class="btn">My Work</a>
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<p class="section__subtitle section__subtitle--about">
Web Developer and Digital Strategist</p>
<div class="about-me__body">
<p>I'm a professional Nairobi-based web developer, assisting SMEs reach 4.95 Billion internet users, one line of code at a time.
I enjoy challenges and apply a procedural approach to tackling problems.
Your satisfaction is my priority!
</p>
<p><strong>FUN FACT: </strong>I love opensource software!
<br>Leave me a message!!<br>
The sooner we get started, the faster we can focus on what matters - Telling YOUR story on YOUR site!
</div>
<img src="images/john1.jpg" alt="John just chilling" class="about-me__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">My work</h2>
<p class="section__subtitle section__subtitle--work">A selection of my range of work</p>
<div class="portfolio">
<!-- Portfolio item 01 -->
<a href="https://mbuguaj254.github.io/retail-dashboard/" class="portfolio__item">
<img src="images/dashbrd.png" alt="" class="portfolio__img">
</a>
<!-- Portfolio item 02 -->
<a href="https://digitalcrafts.co.ke" class="portfolio__item">
<img src="images/dcrafts.png" alt="" class="portfolio__img">
</a>
<!-- Portfolio item 03 -->
<a href="https://digitalcrafts.co.ke/ecommerce-demo" class="portfolio__item">
<img src="images/dcecom.png" alt="" class="portfolio__img">
</a>
</div>
</section>
<!-- Contact form-->
<section class="contact__form" id="contact">
<div id="the_form">
<form name="contact" data-netlify="true">
<label for="contacts"><h2>Hi There, </h2></label>
<label for="reason">I'm contacting you because:</label>
<select id="reason" name="reason">
<option value="dev">I need a dev</option>
<option value="website">I need a website built for me</option>
<option value="revamp">I need a revamp of my existing website</option>
</select>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="subject">Subject</label>
<label for="email">Email</label>
<input type="email" id="email" name="emailaddress" placeholder="Your email address">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mbuguaj58@gmail.com" class="footer__link">mbuguaj58@gmail.com</a>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="https://www.linkedin.com/in/kuria-j-mbugua/">
<i class="fab fa-linkedin"></i>
</a></li>
<li class="social-list__item">
<a class="social-list__link" href="http://dribbble.com">
<i class="fab fa-dribbble"></i>
</a></li>
<li class="social-list__item">
<a class="social-list__link" href="https://twitter.com">
<i class="fab fa-twitter"></i>
</a></li>
<li class="social-list__item">
<a class="social-list__link" href="https://github.com">
<i class="fab fa-github"></i>
</a></li>
</ul>
</footer>
<script src="js/index.js"></script>"
</body>
</html>
</body>
</html>