Skip to content

Commit 0eb72eb

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Restructured contact form to match what can be sent using formspree.io (still in progress)
Started styling contact form. Changed margin for upcoming event background image to be smaller on mobiles. Centered projects logo in upcoming section.
1 parent 5cfb84d commit 0eb72eb

File tree

4 files changed

+47
-33
lines changed

4 files changed

+47
-33
lines changed

‎_pages/04_contact.html‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,55 @@
55
---
66

77
<style>
8-
.contact {
8+
.contact__background-img {
99
background-size: cover;
1010
background: linear-gradient(90deg,
11-
rgba(0, 0, 0, 0.5),
12-
rgba(0, 0, 0, 0.5)),
11+
rgba(0, 0, 0, 0.7),
12+
rgba(0, 0, 0, 0.7)),
1313
url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
1414
}
1515
</style>
1616

1717

1818
<section class="contact">
19-
<div class="row container-fluid">
20-
<!--<img class="img-fluid" src="{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg">-->
21-
<div class="col-sm-12">
22-
<h2 class="section-title">Contact</h2>
19+
<div class="contact__background-img">
20+
<div class="row container-fluid">
21+
<div class="col-sm-12">
22+
<h2 class="section-title contact__title">Contact</h2>
23+
<h3 class="contact__subtitle">Let us know about your ideas and concerns</h3>
2324
</div>
2425
</div>
26+
</div>
2527
<!--Contact form-->
26-
<form class="contact__form container" method="post" action="#" role="form">
28+
<form class="contact__form container" method="POST" action="//formspree.io/tomaszk1@hotmail.co.uk" role="form">
2729
<div class="row">
2830
<div class="col-md-6">
2931
<div class="form-group">
30-
<label class="contact__label" for="form_name">Firstname *</label>
31-
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
32-
</div>
33-
</div>
34-
<div class="col-md-6">
35-
<div class="form-group">
36-
<label class="contact__label" for="form_lastname">Lastname *</label>
37-
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
32+
<label class="contact__label" for="contact__form-name">Full Name *</label>
33+
<input id="contact__form-name" type="text" name="name" class="form-control" placeholder="Please enter your full name *" required="required" data-error="Full name is required.">
3834
<div class="help-block with-errors"></div>
3935
</div>
4036
</div>
41-
</div>
42-
<div class="row">
43-
<div class="col-md-6">
37+
<div class="col-md-6">
4438
<div class="form-group">
45-
<label class="contact__label" for="form_email">Email *</label>
46-
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
47-
</div>
48-
</div>
49-
<div class="col-md-6">
50-
<div class="form-group">
51-
<label class="contact__label" for="form_phone">Phone</label>
52-
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
53-
<div class="help-block with-errors"></div>
39+
<label class="contact__label" for="contact__form-email">Email *</label>
40+
<input id="contact__form-email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
5441
</div>
5542
</div>
5643
</div>
44+
5745
<div class="row">
5846
<div class="col-md-12">
5947
<div class="form-group">
60-
<label class="contact__label" for="form_message">Message *</label>
61-
<textarea id="form_message" name="message" class="form-control" placeholder="Message *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
48+
<label class="contact__label" for="contact__form-message">Message *</label>
49+
<textarea id="contact__form-message" name="message" class="form-control" placeholder="Message *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
6250
<div class="help-block with-errors"></div>
6351
</div>
6452
</div>
6553
<div class="col-md-12">
66-
<button type="button" class="contact__submit-button btn btn-success btn-send btn-lg">Send Message<span class="contact__icon"><i class="fas fa-envelope"></i></span></button>
67-
<!--<input type="submit" class="contact__submit-button btn btn-success btn-send btn-lg" value="Send message">-->
54+
<input type="text" name="_gotcha" style="display: none">
55+
<input type="hidden" name="_subject" value="Message from Python Sprints">
56+
<button type="submit" class="contact__submit-button btn btn-success btn-send btn-lg">Send Message<span class="contact__icon"><i class="fas fa-envelope"></i></span></button>
6857
</div>
6958
</div>
7059
<div class="row">

‎_sass/contact.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,21 @@
22
margin-top: -66px;
33
}
44

5+
.contact__background-img {
6+
min-height: 55vh;
7+
}
8+
9+
.contact .contact__title {
10+
color: antiquewhite;
11+
}
12+
13+
.contact__subtitle {
14+
font-size: 1.5em;
15+
text-align: center;
16+
font-family: 'Playfair Display', serif;
17+
color: #A55605;
18+
}
19+
20+
.contact__form {
21+
margin-top: 5%;
22+
}

‎_sass/style.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,8 +274,15 @@ a {
274274
}
275275

276276
.upcoming {
277+
margin-left: 2%;
278+
margin-right: 2%;
279+
}
280+
281+
@media (min-width: 768px) {
282+
.upcoming {
277283
margin-left: 10%;
278284
margin-right: 10%;
285+
}
279286
}
280287

281288
.upcoming-divider {

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h2 class="post__label">Date</h2>
8888
</div>
8989
</div>
9090
</div>
91-
<div class="upcoming__logo-col col-auto">
91+
<div class="upcoming__logo-col col-auto text-center">
9292
<a href="http://pandas.pydata.org/index.html">
9393
<img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
9494
</a>

0 commit comments

Comments
 (0)