-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (180 loc) · 9.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="We aim to capture the most beautiful moments in time, never miss a moment with our professional Photography">
<meta name="theme-color" content="#372b35">
<meta name="msapplication-TileColor" content="#2b5797">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<title>Lux Photography | Capture every beautiful moment in your life with Lux</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="wrapper">
<!--NAV-->
<header>
<nav>
<div class="links">
<ul>
<li><a href="./pages/gallery.html">gallery</a></li>
<li><a href="./pages/photographers.html">photographers</a></li>
<li><a href="./pages/pricing.html">pricing</a></li>
<li><a href="./pages/contact.html">contact</a></li>
</ul>
</div>
<div aria-label="opens nav menu" role="button" class="hamburger-menu">
<div class="bars"></div>
</div>
</nav>
</header>
<!--HERO SECTION-->
<div class="hero-section">
<img width="1920" height="1080" draggable="false" src="./assets/bg.webp" alt="arizona desert night sky">
<div class="title">
<h1 id="fade_in_animation_one">lux Photography</h1>
<h1 id="fade_in_animation_two">Innovation at your fingertips</h1>
<a role="button" aria-label="jumps to the photographers section on this page" href="#photographers"><i class="fa-solid fa-angles-down"></i></a>
</div>
</div>
<main>
<!--PHOTOGRAPHERS-->
<section id="photographers">
<div class="grid-container">
<div class="img-wrapper">
<img width="1600" height="1080" loading="lazy" draggable="false" src="./assets/layers.webp" alt="girl holding photography camera">
</div>
<div class="content">
<h2>professional photographers</h2>
<p>We have some of the absolute most incredible photographers working with us at Lux. With years of experience under their belt and thousands of incredible photos taken, they know how to capture the beauty in every snapshot they take.</p>
<p>Offering a wide variety of photography, each one of our professionals is a veteran in a variety of styles from nature shots to beautiful wedding images.</p>
<p>With a great eye for detail, we promise to deliver the most impressive and high quality photographs you have ever seen.</p>
</div>
</div>
</section>
<!--DISCOVER-->
<section id="discover">
<div class="grid-container">
<div class="img-wrapper">
<img class="zoom" width="2560" height="1440" loading="lazy" draggable="false" src="./assets/discover_one.webp" alt="girl holding lantern walking through wheat field">
<div class="content">
<a role="button" aria-label="opens the image gallery page" href="./pages/gallery.html"><p><span>discover</span>image gallery</p></a>
</div>
</div>
<div class="img-wrapper">
<img class="zoom" width="2560" height="1440" loading="lazy" draggable="false" src="assets/discover_two.webp" alt="bee pollinating flower">
<div class="content">
<a role="button" aria-label="opens the photographers page" href="./pages/photographers.html"><p><span>discover</span>photographers</p></a>
</div>
</div>
</div>
</section>
<!--ADVERTISEMENT-->
<section id="advertisement">
<div class="img-wrapper">
<img width="1920" height="400" loading="lazy" draggable="false" src="./assets/camera_ad.webp" alt="camera roll behind a camera">
</div>
</section>
<!--PRICE ICONS-->
<section id="price-icons">
<div class="grid-container">
<div class="left">
<a href="./pages/pricing.html"><i class="fa-regular fa-id-badge"></i></a>
<p>portraits</p>
<p>Prices start from $50</p>
</div>
<div class="center">
<a href="./pages/pricing.html"><i class="fa-solid fa-panorama"></i></a>
<p>venues</p>
<p>Prices start from $75</p>
</div>
<div class="right">
<a href="./pages/pricing.html"><i class="fa-solid fa-film"></i></a>
<p>landscapes</p>
<p>Prices start from $35</p>
</div>
</div>
</section>
<!--MEMORIES-->
<section id="memories">
<div class="grid-container">
<div class="img-wrapper">
<img width="2560" height="1440" loading="lazy" draggable="false" src="./assets/polaroid_stack.webp" alt="stack of polaroid images">
</div>
<div class="content">
<h2>memories</h2>
<h3>cherish them with a photograph</h3>
<p>Pictures are worth a thousand words, so why keep all your cherished memories in high quality photographs. We provide you with various ways of keeping your most precious memories close to you, we cater for all your needs.</p>
<p>No matter the type of activity we will be on hand to capture those perfect moments in your life.</p>
<p>We do all sorts of photography, if you like what you see then don't hesitate to get in touch.</p>
</div>
</div>
</section>
<!--IMAGE EDITING-->
<section id="image-edit">
<div class="grid-container">
<div class="img-wrapper">
<img width="2560" height="1440" loading="lazy" draggable="false" src="./assets/model_green_screen.webp" alt="guy in front of green screen">
<p>before</p>
</div>
<div class="img-wrapper">
<img width="2560" height="1440" loading="lazy" draggable="false" src="./assets/model_edit.webp" alt="guy in park with dog in autumn">
<p>after</p>
</div>
<div class="content">
<h2>photo editing</h2>
<p>We offer image editing accross all of our many studios, you will be placed in front of a green screen and we will superimpose you onto any backgrounds you want, including a variety of props to choose from. It's fun for the whole family.</p>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="grid-container">
<div class="about">
<h3>about us</h3>
<p>We are a very passionate group of photographers who founded this company in the early 2000's, we love nothing more than to capture the beauty of the world in each photo.</p>
<ul>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-threads"></i></li>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-pinterest"></i></li>
</ul>
</div>
<div class="quick-links">
<h3>services</h3>
<ul>
<li>F.A.Q</li>
<li>contact</li>
<li>privacy policy</li>
</ul>
</div>
<div class="quick-links">
<h3>products</h3>
<ul>
<li>cameras</li>
<li>lighting</li>
<li>studios</li>
<li>tripods</li>
</ul>
</div>
<div class="quick-links">
<h3>events</h3>
<ul>
<li>blog</li>
<li>venues</li>
<li>hosting</li>
<li>locations</li>
</ul>
</div>
</div>
</footer>
</main>
</div>
</body>
</html>