generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
157 lines (147 loc) · 7.49 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
<!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="assets/css/style.css">
<title>First Photography</title>
</head>
<body>
<!-- Header -->
<header>
<h1 class="logo">First Photography</h1>
<!-- Navigation -->
<nav id="med-clear">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- Banner image -->
<section id="banner-image-outer">
<div id="banner-image"></div>
</section>
<main>
<!-- About us -->
<section id="about-us-container">
<div class="left-section column-1">
<h2 class="section-heading hr">About First Photography</h2>
<p class="section-paragraph">
Welcome to First Photography. We work closely with clients to ensure they have lasting memories of
new additions to their families with a professional look and feel. We have experience shooting cake
smashes, newborns, religious & naming ceremonies, family portraits and many more special moments. We
are based in the South-West of England but are happy to travel for the right projects!
</p>
<p class="section-paragraph">
Please get <a class="active" href="contact.html">in touch</a> via our website to discuss your
project.
</p>
</div>
<div class="right-section column-2">
<!-- Image sourced from: https://www.pexels.com/photo/adorable-baby-beautiful-child-266004/ -->
<img src="assets/images/baby-about-us-image.jpg" alt="baby laying on their back holding toes">
</div>
</section>
<!-- About me -->
<section id="about-me-container" class="clear-both">
<div id="about-me" class="right-section column-2">
<h2 class="section-heading hr">About me</h2>
<p class="section-paragraph">My name is John Smith and I am an experienced photographer specialising in
capturing those
first
special moments with your new family member!
My passion comes from having children of my own and being forever
grateful that my families first moments were captured.</p>
</div>
<div class="left-section column-1">
<!-- Image sourced from: https://www.pexels.com/photo/happy-ethnic-guy-with-photo-camera-near-table-with-netbook-7129661/ -->
<img id="about-me-img" src="assets/images/john-smith-about-me-image.jpg"
alt="john smith photographer looking into his camera">
</div>
</section>
<!-- Services -->
<section id="services-container">
<div class="left-section column-1">
<h2 class="section-heading hr">Our Services</h2>
<p class="section-paragraph">We offer many different services, such as: cake smash, newborn shoots,
religious & naming ceremonies, family portraits, baby portraits, toddler portraits and many more.
Please take a look at our <a class="active" href="gallery.html">Gallery</a>
to see some examples of previous work.
</p>
<p class="section-paragraph">
This is not an exhaustive list. If you have something else in mind or want to discuss any of the
above, please do get <a class="active" href="contact.html">in touch</a>. We will work with you to
create the perfect setting. I can come to you; we can go to a special location of your choice, or we
can work in my studio. The choice is yours and we will work together to create the perfect
photoshoot plan.
</p>
</div>
<div class="right-section column-2">
<div class="row">
<div class="column">
<figure>
<!-- Image from: https://www.pexels.com/photo/love-woman-water-summer-5961586/ -->
<img src="assets/images/cake-smash-image.jpg" alt="Baby doing a cake smash outside">
<figcaption>Cake Smash</figcaption>
</figure>
</div>
<div class="column">
<figure>
<!-- Image from: https://www.pexels.com/photo/close-up-of-hands-holding-baby-feet-325690/ -->
<img src="assets/images/newborn-shoot-image.jpg"
alt="baby's feet with distorted background">
<figcaption>Newborn Shoot</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="column">
<figure>
<!-- Image from: https://www.pexels.com/photo/priest-wiping-baby-head-during-baptism-ceremony-6263087/ -->
<img src="assets/images/religious-ceremonies-image.jpg" alt="baby being baptised">
<figcaption>Religious Ceremony</figcaption>
</figure>
</div>
<div class="column">
<figure>
<!-- Image from: https://www.pexels.com/photo/couple-carrying-their-baby-girl-7678092/ -->
<img src="assets/images/family-portraits-image.jpg" alt="family portrait">
<figcaption>Family Portrait</figcaption>
</figure>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer-container clear-both">
<div class="contact-links">
<!-- idea/code based on Love Running project -->
<ul>
<li>
<a href="https://www.pinterest.co.uk/" target="_blank" rel="noopener"
aria-label="Visit our Pinterest (opens in a new tab)"><i
class="fab fa-pinterest-square"></i></a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="contact.html" rel="noopener" aria-label="Contact us via our website"><i
class="far fa-envelope"></i></a>
</li>
</ul>
</div>
</footer>
<!-- font awesome script-->
<script src="https://kit.fontawesome.com/6550752797.js" crossorigin="anonymous"></script>
</body>
</html>