Skip to content

Commit d2f290b

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Merge branch 'contact_page'
2 parents 9c438c2 + 54bba00 commit d2f290b

File tree

8 files changed

+175
-12
lines changed

8 files changed

+175
-12
lines changed

‎_pages/04_contact.html‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,62 @@
44
permalink: /contact/
55
---
66

7-
<h1>This is the content of the Contact page</h1>
8-
<h2>Fill it in !!!!</h2>
7+
<style>
8+
.contact__background-img {
9+
background-size: contain;
10+
background: linear-gradient(90deg,
11+
rgba(0, 0, 0, 0.75),
12+
rgba(0, 0, 0, 0.75)),
13+
url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
14+
}
15+
</style>
16+
17+
18+
<section class="contact">
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 Us</h2>
23+
<h3 class="contact__subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
24+
</div>
25+
</div>
26+
</div>
27+
<!--Contact form-->
28+
<form class="contact__form container" method="POST" action="//formspree.io/py.sprints@gmail.com" role="form">
29+
<div class="row">
30+
<div class="col-md-6">
31+
<div class="form-group">
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.">
34+
<div class="help-block with-errors"></div>
35+
</div>
36+
</div>
37+
<div class="col-md-6">
38+
<div class="form-group">
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.">
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div class="row">
46+
<div class="col-md-12">
47+
<div class="form-group">
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>
50+
<div class="help-block with-errors"></div>
51+
</div>
52+
</div>
53+
<div class="col-md-12 text-center">
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>
57+
</div>
58+
</div>
59+
<div class="row">
60+
<div class="col-md-12">
61+
<p class="text-muted"><strong>*</strong> Required fields</p>
62+
</div>
63+
</div>
64+
</form>
65+
</section>

‎_sass/contact.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.contact {
2+
margin-top: -66px;
3+
padding-bottom: 5vh;
4+
}
5+
6+
@media (orientation: landscape) {
7+
.contact__background-img {
8+
min-height: 55vh;
9+
}
10+
}
11+
12+
@media (orientation: portrait) {
13+
.contact__background-img {
14+
min-height: 25vh;
15+
}
16+
}
17+
18+
.contact .contact__title {
19+
margin-top: 20vh;
20+
color: antiquewhite;
21+
}
22+
23+
.contact__subtitle {
24+
font-size: 1.75em;
25+
text-align: center;
26+
font-family: 'Playfair Display', serif;
27+
color: #A55605;
28+
margin-bottom: 10vh;
29+
}
30+
31+
.contact__form {
32+
margin-top: 10%;
33+
border-radius: 5px;
34+
background: linear-gradient(180deg,
35+
rgba(0, 0, 0, 0.75),
36+
rgba(7, 41, 72, 0.85) 50%,
37+
#072948 100%);
38+
height: 100%;
39+
}
40+
41+
.contact__label {
42+
color: antiquewhite;
43+
}
44+
45+
.form-group {
46+
margin-top: 2em;
47+
margin-bottom: 0;
48+
}
49+
50+
.form-control {
51+
background: rgba(0, 0, 0, 0.5);
52+
&:focus {
53+
background: rgba(250, 235, 215, 0.5);
54+
color: black;
55+
}
56+
}
57+
58+
.contact__submit-button {
59+
margin-top: 2em;
60+
min-width: 10em;
61+
font-size: 1.25em;
62+
font-family: 'Playfair Display', serif;
63+
text-align: center;
64+
background: #072948;
65+
border: #035E9A 2px ridge;
66+
transition: all 0.5s ease-in;
67+
color: #7FA0C2;
68+
&:hover {
69+
text-align: center;
70+
background: rgba(7, 41, 72, 0.53);
71+
border: #A55605 2px ridge;
72+
color: antiquewhite;
73+
74+
}
75+
&:hover > .contact__icon {
76+
color: antiquewhite;
77+
}
78+
}
79+
80+
.contact__icon {
81+
transition: all 0.5s ease-in;
82+
margin-left: 5%;
83+
color: #7FA0C2;
84+
}

‎_sass/style.scss‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ a {
8383

8484
.navigation__brand-name {
8585
font-size: 0.8em;
86-
color: #ffffff;
86+
color: antiquewhite;
8787
font-family: 'Share Tech Mono', monospace;
8888
}
8989

@@ -120,7 +120,7 @@ a {
120120

121121
.navigation__title {
122122
font-family: 'Share Tech Mono', monospace;
123-
color: #ffffff;
123+
color: antiquewhite;
124124
font-size: 3.5em;
125125
margin-top: 40vh;
126126
text-align: center;
@@ -129,7 +129,7 @@ a {
129129
.navigation__subtitle {
130130
font-size: 1.16em;
131131
font-family: 'Share Tech Mono', monospace;
132-
color: #818181;
132+
color: #A55605;
133133
text-align: center;
134134
margin-bottom: 50%;
135135
}
@@ -197,20 +197,29 @@ a {
197197
margin-top: 30px;
198198
}
199199

200-
@media screen and (max-width: 850px) and (orientation: landscape) {
200+
@media screen and (max-width: 767px) and (orientation: landscape) {
201201
.navigation__overlay-content {
202202
top: 15%;
203203
}
204204
}
205205

206206
.navigation__overlay .navigation__link {
207-
padding: 0.25em;
208207
text-decoration: none;
209208
font-size: 2em;
210209
font-family: 'Encode Sans Expanded', sans-serif;
211210
color: #818181;
212211
display: block;
213-
transition: 0.4s;
212+
transition: all 0.5s ease-in-out;
213+
}
214+
215+
@media (max-width: 767px) and (orientation: landscape) {
216+
padding: 0;
217+
}
218+
219+
@media (min-width: 768px), (orientation: portrait) {
220+
.navigation__overlay .navigation__link {
221+
padding: 0.25em;
222+
}
214223
}
215224

216225
.navigation__link:hover {
@@ -265,8 +274,15 @@ a {
265274
}
266275

267276
.upcoming {
277+
margin-left: 2%;
278+
margin-right: 2%;
279+
}
280+
281+
@media (min-width: 768px) {
282+
.upcoming {
268283
margin-left: 10%;
269284
margin-right: 10%;
285+
}
270286
}
271287

272288
.upcoming-divider {
@@ -363,6 +379,7 @@ a {
363379
color: #7fa0c2;
364380
border: #035E9A 1px solid;
365381
min-width: 30%;
382+
transition: all 0.5s ease-in-out;
366383
&:hover {
367384
color: antiquewhite;
368385
background: rgba(0, 0, 0, 0.4);
@@ -568,8 +585,7 @@ a {
568585
}
569586

570587
.footer {
571-
margin-top: 10%;
572-
padding-top: 2.5%;
588+
margin-top: 5%;
573589
background: #072948;
574590
border-top: #7fa0c2 1px solid;
575591
}
@@ -601,6 +617,7 @@ a {
601617
}
602618

603619
.footer__section-title {
620+
margin-top: 1em;
604621
color: aliceblue;
605622
font-size: 1.5em;
606623
text-align: center;

‎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>

‎static/credits.txt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@
44

55
<a href='https://www.freepik.com/free-vector/abstract-running-design_1113095.htm'>Designed by Freepik</a>
66

7-
<a href='https://www.freepik.com/free-vector/abstract-vector-mesh-background-chaotically-connected-points-and-polygons-flying-in-space-flying-debris-futuristic-technology-style-card-lines-points-circles-and-planes-futuristic-design_1283675.htm'>Designed by Freepik</a>
7+
<a href='https://www.freepik.com/free-vector/abstract-vector-mesh-background-chaotically-connected-points-and-polygons-flying-in-space-flying-debris-futuristic-technology-style-card-lines-points-circles-and-planes-futuristic-design_1283675.htm'>Designed by Freepik</a>
8+
9+
10+
contact photo: Photo by Alejandro Escamilla on Unsplash / Photo by NordWood Themes on Unsplash
11+
contact: <a href='https://www.freepik.com/free-photo/blank-business-cards-and-cup-of-coffee-on-wooden-table-corporate-stationary-branding-mock-up_1187395.htm'>Designed by Freepik</a>

‎static/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ $postimage: "{{ page.image }}";
88
@import
99
"typography",
1010
"post",
11+
"contact",
1112
"style";

‎static/images/contact/contact_top_1920x600px.jpg‎

147 KB
Loading

‎static/images/contact/contact_top_1920x710px.jpg‎

68.3 KB
Loading

0 commit comments

Comments
 (0)