generated from KsenijaGorodniuk/my-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
121 lines (110 loc) · 5.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
<!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">
<meta name="description" content="Antique Photo Restoration | Vintage Image Restoration Service">
<meta name="keywords" content="photopraphy, photo restoration, anqitue photo restoration, vintage image restoration">
<link rel="stylesheet" href="assets/css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREREREREREREREREREREQAAAAAAEREQAAARAAABERAAABEAAAEREAAAEQAAAREQAAARAAABERAAABEAAAEREAAAEQAAAREQAAARAAABERABEREREAEREAEREREQAREQAAAAAAABEREAAAAAABEREREREREREREREREREREREAAAAAAAAAAB/4AAA+fAAAPnwAAD58AAA+fAAAPnwAAD58AAA+fAAAMAwAADAMAAA//AAAH/gAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />
<title>Timeless Photography</title>
</head>
<body>
<!--header navigation menu-->
<header>
<nav>
<ul id="menu">
<li><em><a href="#get-in-touch" class="contact"><strong>Get in Touch</strong></a></em></li>
<li><em><a href="#gallery-slider">Gallery</a></em></li>
<li><em><a href="#about-us">About us</a></em></li>
<li><em><a href="#home">Home</a></em></li>
</ul>
</nav>
</header>
<!--hero section-->
<section id="home">
<div id="left-hero-text">
<h1>TIMELESS PHOTOGRAPHY</h1>
<h2><em>Antique Photo Restoration Service</em></h2>
</div>
<div id="right-hero-image">
<div id="image-container"><img src="assets/css/images/vintage-photo-1.jpg" alt="Vintage photo of a family sitting outside"></div>
</div>
</section>
<!--about us section-->
<section id="about-us">
<div id="about-left-section">
<div class="text">
<h2><em>ABOUT US</em></h2>
<p><em>So many memories can be recovered, restored, and brought back to life...
</p>
<p><em>Our journey started with an old and severely damaged photograph of our great great grandfather. It sparked an intense desire to preserve and cherish our family's past.</em></p>
<p><em>We haven't looked back since, and now, 30 years later, we are still very passionate about restoring our customer's photographs, which we treat as the precious heirlooms that they are with the same care as if they were our own.</em></p>
<p><em>Get a <a href="#get-in-touch" class="contact"><strong>free consultation</strong></a> with us today and we guarantee to follow up with a mockup of your project within 24 hours.</em></p>
<p><em>Your memories are in safe hands.</em></p>
<hr>
<p><em>Kate and Robert Smith</em></p>
</div>
</div>
<div id="about-right-section">
<div>
<h2>PRESERVING MEMORIES</h2>
</div>
</div>
<div id="about-center-section">
<div id="arch-container">
<div id="arch-cover-bg">
</div>
</div>
</div>
</section>
<!--gallery slider-->
<section id="gallery-slider">
<div class="gallery-slider-images">
<input type="radio" name="slideshow" id="img1" checked>
<input type="radio" name="slideshow" id="img2">
<input type="radio" name="slideshow" id="img3">
<input type="radio" name="slideshow" id="img4">
<input type="radio" name="slideshow" id="img5">
<img src="assets/css/images/image-gallery-1.jpg" alt="Victorian era picture of 3 couples on a picnic" class="m1">
<img src="assets/css/images/image-gallery-2.jpg" alt="Collage of restored antique photos" class="m2">
<img src="assets/css/images/image-gallery-3.jpg" alt="Vintage image of a mother and 2 small kids" class="m3">
<img src="assets/css/images/image-gallery-4.jpg" alt="An old photograph of a family standing in front of their big stone wall house" class="m4">
<img src="assets/css/images/image-gallery-5.jpg" alt="An antique image of 5 friends sitting on a bench" class="m5">
</div>
<div class="dots">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
<label for="img4"></label>
<label for="img5"></label>
</div>
</section>
<!--footer element with contact us section-->
<footer>
<section id="get-in-touch">
<form method="post" action="https://formdump.codeinstitute.net/" class="get-in-touch-form">
<h2><strong>Get in Touch</strong></h2>
<div class="text-input">
<label for="first-name">First Name</label>
<input id="first-name" type="text" name="first_name" required>
<label for="last-name">Last Name (optional) </label>
<input id="last-name" type="text" name="last_name">
<label for="email-address">Email Address</label>
<input id="email-address" type="email" name="email_address" required>
</div>
<div class="checkbox-input">
<label for="color-restoration">Color restoration</label>
<input id="color-restoration" type="checkbox" name="restoration" value="yes">
<label for="repair">Damaged photo repair</label>
<input id="repair" type="checkbox" name="repair" value="yes">
<label for="frame">Custom-made archive quality photo frame</label>
<input id="both" type="checkbox" name="restoration" value="yes">
<input type="submit" value="Submit" class="submit-button">
</div>
</form>
</section>
</footer>
</body>
</html>