FrontEndWebDevelopment/contact.html at master · rameezsajid/FrontEndWebDevelopment · GitHub

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 tags for responsivness and browser compatiblity -->
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, intial-scale=1.0" />
			<title>Contact Us</title>
			<!-- main css file for the styling -->
			<link rel="stylesheet" type="text/css" href="css/style.css">
			<link rel="icon" href="img/favicon.png">
			</head>
			<body>
				<!-- I have created two navbars, one for mobile which is the default and one for larger screen sizes -->
				<div class="nav-bar1">
					<div class="nav-bar1-menu">
						<div class="nav-bar1-button" onclick="showContent()"></div>
						<div id="my-navbar" class="nav-bar1-content">
							<a href="index.html">HOME</a>
							<a href="about.html">ABOUT</a>
							<a href="courses.html">COURSES</a>
							<a href="contact.html">CONTACT</a>
						</div>
					</div>
				</div>
				<nav class="nav-bar2">
					<ul class="nav-bar2">
						<li>
							<a href="index.html">HOME</a>
						</li>
						<li>
							<a href="about.html">ABOUT</a>
						</li>
						<li>
							<a href="courses.html">COURSES</a>
						</li>
						<li>
							<a href="contact.html">CONTACT</a>
						</li>
					</ul>
				</nav>
				<!-- back to top button used to send the user back to the top of the page -->
				<div class="to-top">
					<a href="#" onclick="return false;" onmousedown="resetScroller('showcase');">
						<img src="img/toTop3.png" alt="">
						</a>
					</div>
					<!-- showcase starts here -->
					<!-- slideshow content starts here -->
					<section id ="home-section" class="slideShow">
						<header id="showcase" class="grid">
							<div class="content-wrap">
								<h1>Contact Us</h1>
								<h2>Our last session sold out fast. Reserve your seat TODAY!</h2>
								<a onclick="initScroll('contact-section-a'); return false;" href="#" class="btn">Book Now</a>
							</div>
						</header>
						<!-- I have used layers to help me with the slideshow -->
						<div class="layer1"></div>
						<div class="layer2"></div>
						<div class="layer3"></div>
						<div class="layer4"></div>
						<div class="layer5"></div>
					</section>
					<!-- section a starts here -->
					<main id="main">
						<!-- contact form -->
						<section id="contact-section-a" class="grid">
							<div class="box">
								<h2 class="content-title">Contact Us</h2>
								<div id="panel">
									<div class="con-form">
										<form action="#" id="form" method="post" name="form">
											<input name="client" placeholder="Your First Name" type="text" value="" title="Firstname">
												<input name="client" placeholder="Your Last Name" type="text" value="" title="Lastname">
													<input name="phone" placeholder="Your Phone Number" type="tel" value="" required>
														<input name="email" placeholder="Your Email" type="email" value="" required>
															<textarea name="comment" placeholder="Your Message Here..." id="comment"></textarea>
															<input class="o-btn" type="Submit" value="Submit">
															</form>
														</div>
													</div>
												</div>
												<div class="box">
													<!-- google map -->
													<h3>Find Us Here</h3>
													<div id="my-map"></div>
													<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_U4i0Gp0pOh4Xn9-1nuz9WLRzz5TqAaU&callback=initMap"></script>
												</div>
											</section>
											<section id="contact-section-b" class="grid">
												<div class="content-wrap">
													<h2 class="content-title">Hurry, Book Now!</h2>
														<table class="countdown">
															<tr class="info">
																<td colspan="4">Our Next Seminar</td>
															</tr>
															<tr class="info">
																<td id="days"></td>
																<td id="hours"></td>
																<td id="minutes"></td>
																<td id="seconds"></td>
															</tr>
															<tr>
																<td>Days</td>
																<td>Hours</td>
																<td>Minutes</td>
																<td>Seconds</td>
															</tr>
														</table>
												</div>
											</section>
										</main>
										<!-- footer of the page is here -->
										<footer id="main-footer" class="grid">
											<div>Copyright &copy; 2017 Learning Academy</div>
											<div>Sitemap Create:

												<a href="https://rameezsajid.github.io/CTEC3905_P15224656/sitemap.xml" target="_blank">Click For Sitemap</a>
											</div>
										</footer>
										<!-- four scripts used, one is used for giving a scrolling effect when clicking on a link in a button -->
										<!-- the second is used for showing and hiding the content in navbar1 -->
										<!-- the third is used for google maps -->
										<!-- fourth script is used for the countdown clock -->
										<script src="js/script.js"></script>
										<script src="js/scroll.js"></script>
										<script src="js/googlemaps.js"></script>
										<script src="js/countdown.js"></script>
									</body>
								</html>