-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact-me.html
131 lines (131 loc) · 5.11 KB
/
contact-me.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- this meta is added to support mutiple browser types and set the initial scale to improve cross browser conformity -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- description added to aid with search engine optimisation -->
<meta
name="description"
content="Personal portfolio for professional photography and videographer"
/>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
<!-- google font api to use their fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Karla:wght@200;400;500;600;700;800&family=Raleway&display=swap"
rel="stylesheet"
/>
<script src="https://unpkg.com/phosphor-icons"></script>
<!-- script tag to connect javascript - defer paramebter used to load parse the javascript file after everything else is loaded allowing for the script tag to be in head of dom -->
<script src="./js/index.js" defer></script>
<!-- Title of page - this will show in the browser tab -->
<title>Contact</title>
</head>
<body class="contact-form__body">
<header>
<nav id="navbar">
<a class="navbar__logo-main"
href="https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-frosty81">
<h1>Photo <span>Wizz</span></h1>
</a>
<ul>
<li>
<a
class="navbar__links"
href=" https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-frosty81"
>Home</a
>
</li>
<li>
<a
class="navbar__links"
href=" https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-frosty81/about-me.html"
>About Me</a
>
</li>
<li>
<a
class="navbar__links"
href=" https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-frosty81/portfolio.html"
>Portfolio</a
>
</li>
<li>
<a
class="navbar__links active"
href=" https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-frosty81/contact-me.html"
>Contact
</a>
</li>
</ul>
</nav>
</header>
<main class="contact-form__container">
<article>
<div class="contact-form__form-container">
<form method="post" action="mailto:[email protected]" enctype="text/plain" name="contact-form">
<div class="contact-form__title-text">
<h1>Contact Me</h1>
</div>
<div>
<label for="first-name"
>First Name
<input id="first-name" name="first-name" type="text" required />
</label>
</div>
<div>
<label for="last-name"
>Last Name
<input id="last-name" name="last-name" type="text" required />
</label>
</div>
<div>
<label for="email"
>Email Address
<input id="email" name="email" type="email" required />
</label>
</div>
<div>
<label for="message"
>Message
<textarea
name="message"
id="message"
cols="30"
rows="10"
required
></textarea>
</label>
</div>
<div>
<button class="conatct-form__button" type="submit">Submit</button>
</div>
</form>
</div>
</article>
</main>
<!-- Footer -->
<footer class="footer__container">
<!-- Footer links for social media including aria labels -->
<div class="footer__links-socials">
<a href="https://www.twitter.com" target="blank" aria-label="social media link to Twitter"><i
class="ph-twitter-logo ph-xl ph-2x"></i></a>
<a href="https://www.behance.com" target="blank" aria-label="social media link to Behance"><i
class="ph-behance-logo ph-xl ph-2x"></i></a>
<a href="https://www.youtube.com" target="blank" aria-label="social media link to Youtube"><i
class="ph-youtube-logo ph-xl ph-2x"></i></a>
<a href="https://www.facebook.com" target="blank" aria-label="social media link to Facebook"><i
class="ph-facebook-logo ph-xl ph-2x"></i></a>
</div>
<!-- Footer links for terms and conditions only for comestic purposes hence # used as href to not redirect anywhere-->
<div class="footer__links">
<a href="#">Terms and conditons</a>
<a href="#">Privacy Policy</a>
<p>©2023 PhotoWizz</p>
</div>
</footer>
</body>
</html>