generated from daisybutler/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
179 lines (179 loc) · 9.84 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Homepage for Color Splash, preceeding its colour combination tester tool">
<meta name="keywords" content="colour, colours, colour combination, colour testing, colour theme, project colour scheme, website design, design">
<link rel="icon" type="image/png" sizes="100x100" href="assets/images/project-images/ms2-favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!--EmailJS Code Snippet-->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script>
(function(){
emailjs.init("user_wJWiEnhJwrwISrcLO687b");
})();
</script>
<title>Colour Splash</title>
</head>
<body>
<!--p-0 removes white space from either side of the container-->
<header class="container-fluid p-0">
<!--NAVBAR-->
<nav class="navbar navbar-expand navbar-light" style="background-image: linear-gradient(#dddddd, #f1efef, #dddddd)">
<a href="index.html" class="navbar-brand"><i class="fas fa-palette"></i></a>
<!--Navbar always collapsed because only two nav-items to display - fits comfortably on all screen sizes-->
<div class="navbar-collapse collapse justify-content-stretch" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tester.html">Tester</a>
</li>
</ul>
</div>
</nav>
<!--HOMEPAGE HEADING-->
<div id="main-heading-section" class="row container-fluid">
<div class="col-12">
<h1 id="main-heading">Colour Splash</h1>
<h4 id="subtitle">Find the perfect combination of colours</h4>
</div>
</div>
</header>
<!--BACK TO TOP BUTTON-->
<a id="back-to-top-button" class="d-none d-sm-block" ><i class="fas fa-angle-up"></i></a>
<!--HOMEPAGE JUMBOTRON-->
<div id="colour-splash-intro" class="container-fluid">
<div class="row">
<!--mx-auto to center all content in the jumbotron-->
<div class="jumbotron col-10 col-md-8 mx-auto">
<div class="row">
<div class="col-12">
<h2>Welcome to Colour Splash!</h2>
<p>Find a beautiful combination of colours to make your website or project stand out.</p>
</div>
</div>
<div class="row">
<!--THREE STEPS IMAGE (md screens +) - simpler to construct the design externally rather than within bootstrap-->
<div id="three-steps" class="col-12">
<img src="assets/images/project-images/three-steps.png" alt="three-steps-to-using-the-colour-tool">
</div>
</div>
<!--CALL TO ACTION BUTTON-->
<div class="row">
<div id="call-to-action" class="col-12 d-flex">
<a id="call-to-action-button" class="btn btn-default btn-lg" role="button" href="tester.html">Get Started</a>
</div>
</div>
</div>
</div>
<!--REVIEWS - only displayed on small screens and above when more space is available-->
<div class="row mx-auto">
<div id="reviews-section" class="col-12">
<!--Review 1 and 5 only display on md screens and above to ensure the screen is large enough for five reviews to be read easily-->
<div id="review-one" class="review d-none d-md-inline-block">
<p>“Colour Splash is a great tool!”</p>
<small class="review-author">~ GAHV ~</small>
</div>
<div id="review-two" class="review d-inline-block">
<p>“A simple way to try colours.”</p>
<small class="review-author">~ Hannah KP ~</small>
</div>
<div id="review-three" class="review d-inline-block">
<p>“Very easy to use.”</p>
<small class="review-author">~ Zacheriah ~</small>
</div>
<div id="review-four" class="review d-inline-block">
<p>“A great aid for any designer.”</p>
<small class="review-author"> ~Mary N ~</small>
</div>
<div id="review-five" class="review d-none d-md-inline-block">
<p>“Just the tool I needed!”</p>
<small class="review-author">~ Simms ~</small>
</div>
</div>
</div>
</div>
<!--THREE STEPS BLOCKS - displays on x-small screens ONLY when #three-steps img becomes too small to read-->
<div id="smaller-screen-steps" class="container-fluid d-block d-sm-none" style="box-sizing: content-box">
<div class="row">
<div class="col-12 step step-one">
<h4>1</h4>
<p>Use the tester to try out colour combos with the easy-to-use color picker.</p>
</div>
</div>
<div class="row">
<div class="col-12 step step-two">
<h4>2</h4>
<p>Export your final selection by tapping the share button.</p>
</div>
</div>
<div class="row">
<div class="col-12 step step-three">
<h4>3</h4>
<p>Add to your project!</p>
</div>
</div>
</div>
<!--CONTACT-->
<div id="contact-section" class="container-fluid">
<div class="row">
<div class="contact-text col-12">
<img id="small-question-mark" src="assets/images/project-images/question-mark.png" width="100" height="100" alt="question-mark">
<h3>Have a question?</h3>
<p>
<button class="btn btn-secondary btn-lg" type="button" data-toggle="collapse" data-target="#collapse-contact" aria-expanded="false" aria-controls="collapse-contact">
Get in Touch
</button>
</p>
<div class="collapse col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3" id="collapse-contact">
<div class="card card-body">
<!--CONTACT FORM-->
<!--Linked up to the EmailJS API by invoking the sendMail() function (in sendQuestion.js file) on submit-->
<form id="contactForm" onsubmit="return sendMail(this);">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="emailaddress">Email Address</label>
<input type="email" class="form-control" id="emailaddress" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="message">Question</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<div id="submit-button">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
<!--Will contain a message to user should their submit request fail to return status 200-->
<div id="result-message" style="padding-top: 10px;"></div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<footer class="footer mt-auto">
<div class="container-fluid">
<div class="row">
<div class="col-12 footer-contents">
<i class="fas fa-palette"></i>
<p class="copyright">© Colour Splash 2020</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!--Links to the location of the sendMail() function for the contact form-->
<script src="assets/js/sendQuestion.js"></script>
<script src="assets/js/backToTopButton.js"></script>
</body>
</html>