-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.html
167 lines (125 loc) · 11.4 KB
/
App.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
<!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">
<title>My Website</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<header>
<nav>
<div class="nav-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skill</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="text-box">
<h1>Welcome To <span style="color: red;">My Website</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga odio tempore animi libero fugiat corrupti illo ut ipsam dolorem fugit, dignissimos ex. Vitae, vel? Expedita minima magnam dolor sunt deleniti.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, voluptatibus atque? Voluptatem porro dicta voluptate explicabo iure officiis odit provident exercitationem doloribus. Soluta atque ipsum aspernatur id pariatur enim maxime!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate eum voluptatum reiciendis, quo molestias eveniet! Dolores, harum? Illum eveniet amet deleniti nihil, eius consequuntur ab, voluptas provident voluptatibus nobis magnam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sapiente. Vitae nam suscipit adipisci iure perferendis quasi odio ex omnis? Voluptas rerum ducimus labore eligendi? Non consequatur accusamus accusantium quibusdam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta consequuntur voluptate omnis porro ab placeat exercitationem consequatur! Repellendus corrupti, placeat architecto dolorem ipsam officia sint error qui incidunt expedita vitae!
</p>
<a href="" class="hero-btn">Visit Web4me</a>
</div>
</header>
<!-- Services -->
<div class="Services">
<h1>Services<span style="color: red; font-style: italic;"> I</span> Render...</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure reprehenderit sequi nam voluptate consequuntur dolore optio incidunt, alias quae nulla corrupti maxime nisi deleniti eius eum fuga expedita, placeat est.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur illum minima non pariatur, amet maxime nihil asperiores omnis aut sit. Nam et asperiores quia officiis minus ipsa natus ullam ratione.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat placeat laboriosam dicta iste, velit minima deleniti sunt quae vel impedit commodi enim expedita officiis inventore provident assumenda, iusto itaque aspernatur!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci temporibus repellat, accusantium distinctio voluptates, ad ipsa quos, fugit enim velit labore voluptatum recusandae ullam asperiores expedita. Voluptate, dignissimos perferendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam aliquid dolorem velit eaque esse, libero laudantium fuga suscipit neque enim ad culpa sint corporis animi illum voluptatem impedit voluptatibus maiores.
</p>
<div class="row">
<div class="service-col"><h3 style="color: white;">W<span style="color: red;">e</span>b Design</h3>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
<div class="service-col"><h3 style="color: white;">Cyb<span style="color: red;">e</span>r security</h3>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
<div class="service-col"><h3 style="color: white;">An<span style="color: red;">i</span>mation</h3>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
</div>
<!-- Skills -->
<section class="Skills">
<h1>My Sk<span style="color:red">i</span>lls</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nihil modi animi provident laborum necessitatibus voluptates? Cum aut, iusto, reprehenderit aliquam accusamus porro repellendus saepe blanditiis et nemo nulla nam.</p>
<div class="man"><h3 style="color: rgb(5, 1, 1);">W<span style="color: red;">e</span> b Design</h3><br><progress min="0" max="100" value="80"></progress>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
<div class="service-col"><h3 style="color: rgb(253, 253, 253);">Cyb<span style="color: red;">e</span>r security</h3><br><progress min="0" max="100" value="40"></progress>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
<div class="service-col"><h3 style="color: rgb(255, 253, 253);">An<span style="color: red;">i</span>mation</h3><br><progress min="0" max="100" value="70"></progress>
<p style="color:red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora placeat possimus accusantium dignissimos expedita culpa repellendus rerum fuga deleniti mollitia vero eaque illum illo incidunt et eveniet odio, explicabo earum.</p>
</div>
</section>
<!-- About -->
<header class="about">
<h1 style="font-style: italic; color: red;">About <span style="color: white;">Me</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat rerum accusamus enim iusto, perferendis ipsum non consequuntur alias illum sapiente? Excepturi ex architecto quis quibusdam culpa corrupti atque natus ullam!
</p>
</header>
<!-- Testimonny -->
<section class="testimoy">
<h1>What my clients say </h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam laudantium modi quidem a deleniti ea aspernatur optio eligendi culpa laborum architecto, itaque ratione dolore officia voluptatibus sapiente accusantium numquam quam!</p>
<div class="row">
<div class="testimony-col">
<img src="./Images/e6cc334912676f7b523fb53d7dd4ddcf.webp" >
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos maxime itaque natus libero sequi incidunt quam repellat soluta necessitatibus, suscipit voluptate id excepturi consequuntur delectus dolore a dolorem odit? Suscipit. </p>
<h3>John Adams</h3>
<i class="far fa-star"></i>
<i class="fas fa-stars-alt"></i>
</div>
</div>
<div class="testimony-col">
<img src="./Images/e122dff9939097041bd5acb7ab70dc75.webp" >
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis beatae earum vel modi esse voluptate perspiciatis, magni tempora commodi officiis rerum itaque suscipit at aliquid iure. Doloremque earum sit soluta.</p>
<h3>Rose Brandon</h3>
<i class="fas fa-stars"></i>
<i class="fas fa-stars"></i>
<i class="fas fa-stars"></i>
<i class="fas fa-stars-half-alt"></i>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section class="contact">
<h1>Enroll for joes Service</h1>
<a href="" class="hero-btn">CONTACT JOE</a>
</section>
<section class="footer">Follow <span style="color: red;">Me</span>On</h4>
<div class="icons">
<i class="fa fa-Facebook"></i>
<i class="fa fa-WhatsApp"></i>
<i class="fa fa-Instagram"></i>
</div>
<p>Made with <i class="fa fa-heart-o"></i>By Omerhi Joseph </p>
</section>
</div>
</body>
</html>