generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathabout.html
148 lines (139 loc) · 9.18 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Penny for your Thoughts | Beautiful cards and prints delivered to your doorstep | Gallery of images: Canals, Coast, Flora and Fauna, Flowers, Landscapes, Trees" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/62998f70b3.js"></script>
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<title>Penny for your Thoughts | Beautiful cards delivered to your doorstep</title>
</head>
<body>
<!-- Navbar -->
<nav class="container-fluid navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="index.html">Penny for your Thoughts</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" aria-label="About the photographer">About
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html" aria-label="Card and print pricing">Pricing</a>
</li>
<!-- nav-item-alt class used to prevent Javascript to collapse dropdowns from interrupting clicks on Gallery -->
<li class="nav-item-alt dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Choose section of Gallery">Gallery</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="gallery.html" aria-label="Top of Gallery">All</a>
<a class="dropdown-item" href="gallery.html#canals" aria-label="Canals section of Gallery">Canals</a>
<a class="dropdown-item" href="gallery.html#coast" aria-label="Coast section of Gallery">Coast</a>
<a class="dropdown-item" href="gallery.html#flora-and-fauna" aria-label="Flora and Fauna section of Gallery">Flora and Fauna</a>
<a class="dropdown-item" href="gallery.html#flowers" aria-label="Flowers section of Gallery">Flowers</a>
<a class="dropdown-item" href="gallery.html#landscapes" aria-label="Landscapes section of Gallery">Landscapes</a>
<a class="dropdown-item" href="gallery.html#trees" aria-label="Trees section of Gallery">Trees</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link nav-signup" href="signup.html" aria-label="Sign up for updates">Sign Up</a>
</li>
<li class="nav-item">
<!-- 'disabled' class greys-out the shopping cart until implemented -->
<a class="nav-link disabled" href="#" aria-label="Shopping cart (currently disabled)">
<span class="d-md-none">Shopping Cart </span>
<i class="fas fa-shopping-cart fa-lg"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- About Me -->
<section class="container inner-page-contents">
<div class="row">
<div class="col-12 pt-5 mt-5 mx-auto">
<h2 class="page-heading">About Me</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-lg-9 page-text" id="about-me-text">
<p>I got hooked on photography after my first session in a darkroom when I was eighteen (many decades ago). Photoshop is great but lacks the magic of timeless hours spent in red light watching images swim to life in trays of noxious solutions.</p>
<p> Enough nostalgia. I learnt my skills from a professional photographer friend and together we produced a number of exhibitions in an East London community education setting. A series of photographs that I took of women working in Bangladesh in 1984 were used by local women to create the first feminist calendar in Bangladesh.</p>
<p>In more recent times I have concentrated on family photography and the ever-changing natural images in the wonderful part of the world where I now live. I have had a number of prints and photo montages exhibited locally and these photo cards seemed like a good retirement project. I hope you enjoy them.</p>
<p>
<a href="mailto:penny.holland77@gmail.com?Subject=Penny%20for%20your%20Thoughts">Contact me</a> for more information about my work.
</p>
</div>
<div class="col-12 col-lg-3" id="about-image">
<img class="img-responsive" src="assets/images/penny/penny.jpg" alt="Picture of photographer (Penny) smiling, with short spiked white hair and sunglasses"/>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="container-fluid">
<div class="row">
<div class="col-12 py-5">
<div id="sm-links-container">
<ul>
<!-- Facebook -->
<li>
<a class="sm-links" href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Find out more on Facebook">
<i class="fab fa-facebook-f fa-lg fa-2x"></i>
</a>
</li>
<!-- Twitter -->
<li>
<a href="https://www.twitter.com/" target="_blank" rel="noopener" aria-label="Find out more on Twitter" class="sm-links">
<i class="fab fa-twitter fa-lg fa-2x"></i>
</a>
</li>
<!--Linkedin -->
<li>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener" aria-label="Find out more on LinkedIn" class="sm-links" >
<i class="fab fa-linkedin-in fa-lg fa-2x"></i>
</a>
</li>
<!--Instagram-->
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Find out more on Instagram" class="sm-links">
<i class="fab fa-instagram fa-lg fa-2x"></i>
</a>
</li>
<!--Pinterest-->
<li>
<a href="https://www.pinterest.com/" target="_blank" rel="noopener" aria-label="Find out more on Pinterest" class="sm-links">
<i class="fab fa-pinterest fa-lg fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Copyright -->
<div class="container text-center" id="copyright-container">
<div class="row">
<div class="col-12">
<p class="small">© 2020 Copyright Penny Holland </p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JavaScript CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Script to collapse dropdowns in mobile navbar burger menu when clicked.
Source: https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click -->
<script> $(".navbar-brand").on("click", function () { $(".navbar-collapse").collapse("hide"); }); </script>
</body>
</html>