-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (189 loc) · 8.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!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="styles.css" />
<script src="https://kit.fontawesome.com/f4a570311c.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<header>
<div class="navbar">
<div class="navbar-items">
<a href="#main">Main</a>
<a href="#about-us">About Us</a>
<a href="#service">Our Service</a>
<a href="#contact">Contact Us</a>
</div>
</div>
<div class="navbar-toggle">
<i class="fa-solid fa-bars" id="icon"></i>
</div>
</header>
<body>
<a name="main"></a>
<div class="main-page">
<div class="opacity-layer">
<h1 class="title">Title</h1>
<h2 class="subtitle">subtitle</h2>
</div>
</div>
<a name="about-us"></a>
<h1 class="heading">About Us</h1>
<div class="center-align">
<div class="about-us-container">
<div class="about-us-item">
<img src="./resources/img6.jpg" alt="" />
<h3>Heading1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
accusantium, quisquam sit id tempore magni consectetur ullam nisi
est iste? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quisquam voluptatibus eos repellendus ratione, doloribus
reprehenderit, repudiandae possimus id odit nam eaque vitae maiores
rem pariatur quidem aperiam ullam sunt eveniet?
</p>
</div>
<div class="about-us-item">
<img src="./resources/img5.jpg" alt="" />
<h3>Heading2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
accusantium, quisquam sit id tempore magni consectetur ullam nisi
est iste? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quisquam voluptatibus eos repellendus ratione, doloribus
reprehenderit, repudiandae possimus id odit nam eaque vitae maiores
rem pariatur quidem aperiam ullam sunt eveniet?
</p>
</div>
<div class="about-us-item">
<img src="./resources/img4.jpg" alt="" />
<h3>Heading1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
accusantium, quisquam sit id tempore magni consectetur ullam nisi
est iste? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quisquam voluptatibus eos repellendus ratione, doloribus
reprehenderit, repudiandae possimus id odit nam eaque vitae maiores
rem pariatur quidem aperiam ullam sunt eveniet?
</p>
</div>
<div class="about-us-item">
<img src="./resources/img1.jpg" alt="" />
<h3>Heading1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
accusantium, quisquam sit id tempore magni consectetur ullam nisi
est iste? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quisquam voluptatibus eos repellendus ratione, doloribus
reprehenderit, repudiandae possimus id odit nam eaque vitae maiores
rem pariatur quidem aperiam ullam sunt eveniet?
</p>
</div>
<div class="about-us-item">
<img src="./resources/img9.jpg" alt="" />
<h3>Heading1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
accusantium, quisquam sit id tempore magni consectetur ullam nisi
est iste? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quisquam voluptatibus eos repellendus ratione, doloribus
reprehenderit, repudiandae possimus id odit nam eaque vitae maiores
rem pariatur quidem aperiam ullam sunt eveniet?
</p>
</div>
</div>
</div>
<div class="service-banner">
<a name="service"></a>
<div class="opacity-layer">
<h1 class="title">Our Service</h1>
<h2 class="subtitle">subtitle</h2>
</div>
</div>
<div class="center-align">
<div class="service-container">
<div class="service-item">
<img src="./resources/img2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
nisi ullam beatae laborum unde earum itaque nihil illum vitae odit
rerum, quia corrupti aut officia harum exercitationem quo? Molestias
sequi mollitia praesentium, ea totam sit sed optio ut. Minus neque
doloribus voluptates cupiditate nam illo voluptatum atque corporis
iure ipsum?
</p>
</div>
<div class="service-item">
<img src="./resources/img3.jpg" alt="" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
quisquam, earum sapiente accusantium ea eveniet alias dolore
voluptatum. Ad adipisci alias fuga cum dicta doloribus nostrum! Cum
eveniet qui, error placeat harum recusandae numquam dolorem deserunt
culpa, asperiores soluta repellat voluptates. Fugiat voluptas rem
eum explicabo officiis perferendis excepturi consectetur quos
doloremque autem, earum dolores iste quibusdam voluptatem fugit
beatae, unde ex et odit sunt! Soluta quae quisquam illo officiis?
</p>
</div>
<div class="service-item">
<img src="./resources/img7.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
quidem illum consequatur assumenda eum harum cumque minus sint,
omnis quis, molestiae modi consequuntur, fugiat totam maxime vitae
hic dolorem dignissimos! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Tempore officiis dolorem nemo molestias quidem
nobis, quae voluptatibus doloribus, at quod, illum recusandae culpa
repellat delectus deserunt. Repellat doloribus, totam atque officiis
qui, quisquam adipisci facere pariatur aperiam, aliquid unde libero.
</p>
</div>
<div class="service-item">
<img src="./resources/img8.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
autem iure! Aspernatur distinctio soluta nesciunt corrupti expedita
quo molestiae in totam veritatis accusamus modi delectus explicabo
qui unde ducimus earum possimus aliquid dicta voluptas obcaecati,
harum vero adipisci minus. Voluptas odit cumque nostrum dolor
temporibus quod molestias excepturi autem quae sapiente! Dicta
ipsam, debitis repellendus, ex quas veniam modi et delectus dolorum,
animi quaerat quos quo possimus necessitatibus quae! Quam neque
nulla ab at quis doloribus laboriosam voluptatibus quia illum,
aspernatur inventore culpa dolorem ratione doloremque quos quas
recusandae facere?
</p>
</div>
</div>
</div>
<a name="contact"></a>
<div class="contact-container">
<div class="opacity-layer">
<h1 class="form-title">Contact Form</h1>
<form action="">
<div class="input-containers">
<div class="input-container">
<input type="text" placeholder="Name" class="input-left" />
<input type="email" placeholder="Email" class="input-left" />
<input type="text" placeholder="Subject" class="input-left" />
</div>
<div class="input-container">
<textarea
name=""
placeholder="Message"
rows="12
cols="50"
class="input-right"
></textarea>
</div>
</div>
<button>Send</button>
</form>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>