-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
141 lines (129 loc) · 5.44 KB
/
contact.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="siteContainer">
<main>
<header class="mainHeader">
<h2 class="hidden"> Main Header </h2>
<div class="logoHeader"><img src="images/puma_logo_90px.png" alt="Puma Logo"></div>
<nav class="mainNav">
<h2 class="hidden"> Main Nav </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="ourBrand.html">Our Brand</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="promotions.html">Promotions</a></li>
</ul>
</nav>
<div class="searchBar">
<img src=images/magnifying_glass.png alt="Magnifying Glass">
<p>Search</p>
</div>
</header>
<section class="heroImgContact">
<h2 class="hidden">Hero Image</h2>
<img src="images/contact_hands.jpg" alt="Hero Image">
</section>
<section class="emailUs">
<h2>Email Us</h2>
<div class="lineDivider"></div>
<p>Want to get in touch with our great company? Please feel free to fill out the contact form below. This will generate an email that goes into our email box and we will respond as quickly as possible.</p>
<section class="contactForm">
<h2 class="hidden">Contact Form</h2>
<section class="contactRow">
<h2 class="hidden">Row</h2>
<section class="inputBox">
<h2 class="hidden">Input Box</h2>
<form action="form.php" method="post">
<label>First Name</label>
<div></div>
</form>
</section>
<section class="inputBox">
<h2 class="hidden">Input Box</h2>
<form action="form.php" method="post">
<label>Last Name</label>
<div></div>
</form>
</section>
</section>
<section class="contactRow">
<h2 class="hidden">Row</h2>
<section class="inputBox">
<h2 class="hidden">Input Box</h2>
<form action="form.php" method="post">
<label>Email</label>
<div></div>
</form>
</section>
<section class="inputBox">
<h2 class="hidden">Input Box</h2>
<form action="form.php" method="post">
<label>Phone Number</label>
<div></div>
</form>
</section>
</section>
<section class="inputBoxMessage">
<h2 class="hidden">Message Row</h2>
<form action="form.php" method="post">
<label>Message</label>
<div></div>
</form>
</section>
<section class="contactRowBottom">
<h2 class="hidden">Row</h2>
<div class="submitAndReset">
<p>Submit</p>
</div>
<div class="submitAndReset">
<p>Reset</p>
</div>
</section>
</section>
</section>
<section class="socialMedia">
<h2>Social Media</h2>
<div class="lineDivider"></div>
<p>Don’t want to use that scary email form above? These social media logos will take you to our respective social media sites when clicked. You can then direct text us within that social media page.</p>
<section class="socialMediaPics">
<h2 class="hidden">Social Media Logos</h2>
<ul><li class="mediaPics"><a href="https://www.facebook.com/"><img src="images/SVG/facebook_logo.svg" alt="Facebook Pic"></a></li></ul>
<ul><li class="mediaPics"><a href="https://twitter.com/"><img src="images/SVG/twitter_logo.svg" alt="Twitter Pic"></a></li></ul>
<ul><li class="mediaPics"><a href="https://www.instagram.com/?hl=en"><img src="images/SVG/instagram_logo.svg" alt="Instagram Pic"></a></li></ul>
<ul><li class="mediaPics"><a href="https://www.pinterest.ca/"><img src="images/SVG/pinterest_logo.svg" alt="Pinterest Pic"></a></li></ul>
<ul><li class="mediaPics"><a href="https://www.youtube.com/"><img src="images/SVG/youtube_logo.svg" alt="Youtube Pic"></a></li></ul>
</section>
</section>
<footer class="mainFooter">
<h2 class="hidden">Main Footer</h2>
<div class="logoFooter"><img src="images/puma_logo_90px.png" alt="a.kieths_puma_logo"></div>
<nav class="footerNav">
<h2 class="hidden">Footer Nav</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="ourBrand.html">Our Brand</a></li>
</ul>
</nav>
<nav class="footerNav">
<h2 class="hidden">Footer Nav 2</h2>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="promotions.html">Promotions</a></li>
</ul>
</nav>
<p class="copyright">c PUMA Speed Orbiter 2020</p>
</footer>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>