-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (124 loc) · 5.18 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
<!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>Responsive Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/ac47983efe.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="nav-bar">
<div class="nav-bar-header">
<div class="container">
<a class="logo">Snapshot</a>
<button class="nav-toggle" aria-label="open navigation">
<span class="hamburger"></span>
</button>
</div>
</div>
<nav class="nav">
<div class="container">
<ul class="nav-list">
<li><a href="#" id="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- Hero section -->
<div class="container">
<div class="hero-section">
<div class="hero-content-heading">
<h3>Let's take a snapshot</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero beatae quod molestias voluptas nam <br> facere numquam quos pariatur repellendus excepturi!</p>
</div>
<a class="hero-btn btn" href="#">Learn More</a>
</div>
</div>
</header>
<!-- sub-hero sections -->
<div class="container">
<div class="hero-background container">
<div class="background">
<h3>Background</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus sint ab rerum obcaecati totam neque quam corrupti dolores? Ipsam tempora consequatur quaerat. Voluptates accusamus molestiae nulla sapiente explicabo tempore possimus?</p>
</div>
<div class="hero-background-pos"></div>
</div>
<div class="snapshot-team">
<h3>Snapshot Team</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="snapshot-box">
<div class="snapshot-box-content">
<div class="box">
<div class="circle"></div>
<h5>Linda, Manager</h5>
</div>
<div class="box">
<div class="circle"></div>
<h5>Linda, Manager</h5>
</div>
<div class="box">
<div class="circle"></div>
<h5>Linda, Manager</h5>
</div>
</div>
</div>
</div>
<!-- Gallery section -->
<div class="gallery-section">
<div class="container">
<div class="gallery-content">
<h3>Gallery</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, sapiente. Nullae rem!</p>
</div>
<div class="gallery-img container">
<div class="img-row">
<div class="img">
<img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
</div>
<div class="img">
<img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
</div>
</div>
<div class="img-row">
<div class="img">
<img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
</div>
<div class="img img4">
<img src="https://image.freepik.com/free-vector/shining-circle-purple-lighting-isolated-dark-background_1441-2396.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Footer section -->
<div class="footer">
<div class="container">
<div class="footer-content">
<h3>Send a message</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, sapiente. Nuleos rem! Lorem ipsum dolor sit. Lorem ipsum dolor sit amet.</p>
</div>
<div class="footer-input">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
</div>
<div class="footer-textarea">
<textarea placeholder="Message"></textarea>
</div>
<div class="footer-btn">
<button class="btn" href="#">Send Message</button>
</div>
<h4>Copyright © 2021 Zuri Training.</h4>
</div>
</div>
<script src="main.js"></script>
</body>
</html>