-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (190 loc) · 9.69 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!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="./style.css">
<link rel="stylesheet" id="themeProvider" href="./themes/dark.css" />
<title>L&K Agency</title>
</head>
<body>
<div class="theme">
<select id="selectTheme">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
</select>
</div>
<div class="main-container">
<header id="top-header">
<nav>
<div class="small-screen-navbar">
<a href="#top-header">L&K Agency</a>
<div id="dropdown" class="dropdown" +++++>
<div class="dropdown-wrapper">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="right-nav" id="right-nav">
<li><a href="#top-header">Home</a></li>
<li><a href="#about-us">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#our-team">Our Team</a></li>
<li><a href="#get-in-touch">Get in Touch</a></li>
</ul>
</nav>
<div class="banner">
<p>Hello and Welcome to <span>L&K</span></p>
<div class="text-animation-wrapper">
<h1>Web</h1>
<div class="text-animation">
<h1 class="development-text">Development</h1>
<h1 class="design-text">Design</h1>
</div>
<h1>Agency</h1>
</div>
<p>We create digital experiences that excite and inspire</p>
</div>
</header>
<main>
<section id="about-us">
<h2>About Us</h2>
<p>We are a team of professional designers, developers, marketers and IT specialists combining our
knowledge and expertise to create exceptional designs and strategies, tailored to your business’s
needs and requirements.
Tell us about your goal and we'll show you how you can achieve it. Whatever your project, we'd love
to be involved.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<div class="service-wrapper">
<article>
<img src="./img/installation.webp" alt="Installation, Integration and Update image">
<span>Installation, Integration and Update</span>
</article>
<article>
<img src="./img/design.jpg" alt="Design and UI image">
<span>Design and UI</span>
</article>
<article>
<img src="./img/maintenance.jpg" alt="Maintenance and Enhancement image">
<span>Maintenance and Enhancement</span>
</article>
</div>
</section>
<section class="our-team" id="our-team">
<h2>Our Team</h2>
<div class="our-team-wrapper">
<article>
<div class="article-header">
<div class="avatar-wrapper">
<img src="./img/lisa-avatar.jpg" alt="Lisa's avatar">
</div>
<h3>Lisa</h3>
</div>
<img src="./img/lisa.jpg" alt="Lisa's picture">
<h4>CEO, CO-Founder, Developer, Designer</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque expedita
doloribus,<span class="more-detail"> impedit eos, animi hic quae explicabo eveniet totam
incidunt excepturi
repudiandae tempore nihil voluptatibus. Nisi laudantium doloribus saepe
assumenda.</span></p>
<button class="read-more-button">Read more...</button>
<button class="read-less-button">Read less...</button>
</article>
<article>
<div class="article-header">
<div class="avatar-wrapper">
<img src="./img/karwan-avatar.jpg" alt="Karwan's avatar">
</div>
<h3>Karwan</h3>
</div>
<img src="./img/karwan.png" alt="Karwan's picture">
<h4>CO-Founder and Developer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span class="more-detail">Laudantium
quod
molestiae voluptatum
doloremque. Sint, at. Rerum molestias commodi sit, nobis voluptatum
minima, ipsa dicta
aliquid sequi ex, consectetur voluptates debitis.</span></p>
<button class="read-more-button">Read more...</button>
<button class="read-less-button">Read less...</button>
</article>
<article>
<div class="article-header">
<div class="avatar-wrapper">
<img src="./img/karwan-avatar.jpg" alt="Gumball's avatar">
</div>
<h3>Gumball</h3>
</div>
<img src="./img/gumball.png" alt="Gumball's picture">
<h4>Junior Developer</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia, ipsa sapiente?
<span class="more-detail">Mollitia id
doloribus repellat, dolore soluta libero explicabo? Exercitationem
sint distinctio
cumque! Aliquam, eveniet? Possimus, quam. Iste, eligendi nam.</span>
</p>
<button class="read-more-button">Read more...</button>
<button class="read-less-button">Read less...</button>
</article>
<article>
<div class="article-header">
<div class="avatar-wrapper">
<img src="./img/lisa-avatar.jpg" alt="Nicole">
</div>
<h3>Nicole</h3>
</div>
<img src="./img/nicole.png" alt="Nicole's picture">
<h4>Junior Designer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, facilis. <span
class="more-detail">Praesentium
architecto eum nam veniam alias voluptas necessitatibus magni quibusdam eos, molestiae
neque doloremque, adipisci est hic explicabo accusantium temporibus.</span></p>
<button class="read-more-button">Read more...</button>
<button class="read-less-button">Read less...</button>
</article>
</div>
</section>
<!-- add aciton -->
<section class="get-in-touch" id="get-in-touch">
<h2>Get In Touch</h2>
<form action="#">
<div class="input-wrapper">
<div>
<label for="name">Name</label>
<input type="text" class="name" name="name" id="name" placeholder="Name" required>
</div>
<div>
<label for="subject">Subject</label>
<select class="subject" id="subject" name="subject">
<option value="General inquiry">General inquiry</option>
<option value="Help">Help</option>
<option value="Quote">Get a quote</option>
</select>
</div>
</div>
<label for="email">Email</label>
<input type="email" class="email" id="email" placeholder="Email" required>
<label for="message"> Message</label>
<textarea class="message" name="message" id="message" placeholder="Your message ..."
required></textarea>
<div class="consent-wrapper">
<input id="consent" name="consent" type="checkbox" required />
<label for="consent">I would like to receive future updates</label>
</div>
<button type="submit" id="submit">Send message</button>
</form>
</section>
</main>
<footer>L&K Development © 2022</footer>
</div>
<script src="./script.js"></script>
</body>
</html>