Skip to content

Commit 695e1ba

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
changed background color overlay for background image in upcoming event to more bright colors.
Styled upcoming event in style.scss. Created layout for the upcoming event in index.html.
1 parent 50b7d99 commit 695e1ba

File tree

3 files changed

+74
-40
lines changed

3 files changed

+74
-40
lines changed

‎_includes/inline_style_index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
<style>
2121
.upcoming__img-container {
2222
background-image: linear-gradient(to bottom right,
23-
rgba(7, 41, 72, 0.7),
24-
rgba(0, 0, 0, 0.7) 70%,
25-
rgba(0, 0, 0, 0.7) 100%),
23+
rgba(255, 81, 107, 0.5),
24+
rgba(7, 41, 72, 0.3) 80%,
25+
rgba(0, 0, 0, 0.3) 100%),
2626
url("{{ site.baseurl }}/{{ image }}");
2727
}
2828
</style>

‎_sass/style.scss

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,6 @@ a {
187187
-ms-transition: all .4s ease-in-out;
188188
-o-transition: all .4s ease-in-out;
189189
transition: all .4s ease-in-out;
190-
/*transition: 0.3s;*/
191190
}
192191

193192
.navigation__overlay-content {
@@ -266,8 +265,8 @@ a {
266265
}
267266

268267
.upcoming {
269-
margin-left: 5%;
270-
margin-right: 5%;
268+
margin-left: 10%;
269+
margin-right: 10%;
271270
}
272271

273272
.upcoming-divider {
@@ -277,14 +276,24 @@ a {
277276
}
278277

279278
.upcoming__col {
280-
padding-right: 5%;
279+
margin-top: 1%;
280+
background: rgba(0, 0, 0, 0.7);
281+
border-radius: 20px 5px 20px 5px;
282+
box-shadow: black 5px 5px 5px 0;
283+
}
284+
285+
@media (min-width: 768px) {
286+
.upcoming__col {
287+
margin-left: 0.5%;
288+
}
281289
}
282290

283291
.upcoming-title {
284292
font-size: 2.5em;
285-
color: #072948;
293+
color: antiquewhite;
286294
text-align: left;
287295
font-family: 'Encode Sans Expanded', sans-serif;
296+
margin-top: 2.5%;
288297
margin-bottom: 2.5%;
289298
}
290299

@@ -296,36 +305,69 @@ a {
296305
color: antiquewhite;
297306
padding-left: 0.25em;
298307
margin-right: 0.25em;
308+
margin-bottom: 0.5em;
299309
border-radius: 0 5px 5px 5px;
300310
}
301311

302312
.upcoming__img-container {
303-
-webkit-clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
304-
clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
305313
background-size: cover;
306314
background-position: center center;
307-
padding-left: 0;
308-
padding-right: 0;
309-
border-top-left-radius: 5px;
310-
border-bottom-right-radius: 5px;
315+
border-radius: 20px 5px 20px 5px;
311316
border-top: #A55605 3px solid;
312317
border-bottom: #A55605 3px solid;
318+
min-height: 50vh;
319+
}
320+
321+
@media (min-width: 768px) {
322+
min-height: 60vh;
323+
}
324+
325+
.upcoming__logo-col {
326+
flex: 1;
313327
}
314328

315329
.upcoming__project-logo {
316-
margin-top: 2.5%;
317-
margin-left: 2.5%;
330+
margin-top: 5%;
318331
border: #A55605 3px double;
319332
border-radius: 5px;
320333
max-width: 50%;
334+
;
321335
}
322336

323-
.button_row {
324-
//margin-top: 10%;
337+
@media (min-width: 768px) {
338+
.upcoming__project-logo {
339+
margin-top: 2.5%;
340+
margin-left: 2.5%;
341+
}
342+
}
343+
344+
.upcoming__button-row {
345+
margin-top: 10%;
346+
margin-bottom: 5%;
347+
}
348+
349+
@media (min-width: 768px) {
350+
.upcoming__button-row {
351+
margin-top: 5%;
352+
}
325353
}
326354

355+
327356
.upcoming__link {
328-
max-width: 50%;
357+
}
358+
359+
.upcoming__button {
360+
font-size: 1.5em;
361+
font-family: 'Playfair Display', serif;
362+
color: antiquewhite;
363+
background: rgba(0, 0, 0, 0.4);
364+
border: antiquewhite 1px solid;
365+
min-width: 30%;
366+
&:hover {
367+
background: rgba(7, 41, 72, 0.6);
368+
color: #7fa0c2;
369+
border: #035E9A 1px solid;
370+
}
329371
}
330372

331373
.events {

‎index.html

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,8 @@ <h3 class="mission__statement">Provide mentorship and challenge for people of al
5050
{% if upcoming_event == true %}
5151
<section class="upcoming">
5252
<div class="row container-fluid">
53-
<div class="col-md-12">
54-
<hr class="upcoming-divider">
55-
53+
<hr class="upcoming-divider">
54+
<div class="upcoming__img-container col-md-12">
5655
<div class="row">
5756
<div class="upcoming__col col-md-5 col-12">
5857
<h2 class="upcoming-title">Upcoming Event</h2>
@@ -89,30 +88,24 @@ <h2 class="post__label">Date</h2>
8988
</div>
9089
</div>
9190
</div>
92-
<div class="upcoming__img-container col-md-7">
93-
<div class="row">
94-
<div class="col-12">
95-
<img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
96-
</div>
97-
</div>
98-
<!--Fix vertical alignment of this row-->
99-
<div class="button_row row">
100-
<div class="col-12 text-center">
101-
<a class="upcoming__link" href="{{ post.event_link }}">
102-
<button class="btn btn-outline-primary btn-lg">
103-
Learn More
104-
</button>
105-
</a>
106-
</div>
107-
</div>
91+
<div class="upcoming__logo-col col-auto">
92+
<img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
93+
</div>
94+
</div>
95+
<div class="upcoming__button-row row">
96+
<div class="col-md-12 text-center">
97+
<a class="upcoming__link" href="{{ post.event_link }}">
98+
<button class="upcoming__button btn btn-outline-primary btn-lg">
99+
Learn More
100+
</button>
101+
</a>
108102
</div>
109103
</div>
110104
</div>
111105
</div>
112106
</section>
113107
{% endif %}
114108

115-
116109
<!--Events in the past section-->
117110
{% include event.html %}
118111

@@ -126,7 +119,6 @@ <h2 class="section-title">What Do We Do?</h2>
126119
</div>
127120
</div>
128121

129-
130122
<div class="row">
131123
<div class="second-on-mobile no-gutters__col col-md-6">
132124
<img class="services__img img-fluid rounded" src="static/images/services/educating_devs_840x561px.jpg">

0 commit comments

Comments
 (0)