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.

Author: Tomasz-Kluczkowski

_includes/inline_style_index.html

@@ -20,9 +20,9 @@
 <style>
 .upcoming__img-container {
     background-image: linear-gradient(to bottom right,
-    rgba(7, 41, 72, 0.7),
-    rgba(0, 0, 0, 0.7) 70%,
-    rgba(0, 0, 0, 0.7) 100%),
+    rgba(255, 81, 107, 0.5),
+    rgba(7, 41, 72, 0.3) 80%,
+    rgba(0, 0, 0, 0.3) 100%),
     url("{{ site.baseurl }}/{{ image }}");
       }
 </style>

_sass/style.scss

@@ -187,7 +187,6 @@ a {
   -ms-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
-  /*transition: 0.3s;*/
 }
 
 .navigation__overlay-content {
@@ -266,8 +265,8 @@ a {
 }
 
 .upcoming {
-  margin-left: 5%;
-  margin-right: 5%;
+  margin-left: 10%;
+  margin-right: 10%;
 }
 
 .upcoming-divider {
@@ -277,14 +276,24 @@ a {
 }
 
 .upcoming__col {
-  padding-right: 5%;
+  margin-top: 1%;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 20px 5px 20px 5px;
+  box-shadow: black 5px 5px 5px 0;
+}
+
+@media (min-width: 768px) {
+  .upcoming__col {
+    margin-left: 0.5%;
+  }
 }
 
 .upcoming-title {
   font-size: 2.5em;
-  color: #072948;
+  color: antiquewhite;
   text-align: left;
   font-family: 'Encode Sans Expanded', sans-serif;
+  margin-top: 2.5%;
   margin-bottom: 2.5%;
 }
 
@@ -296,36 +305,69 @@ a {
   color: antiquewhite;
   padding-left: 0.25em;
   margin-right: 0.25em;
+  margin-bottom: 0.5em;
   border-radius: 0 5px 5px 5px;
 }
 
 .upcoming__img-container {
-  -webkit-clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
-  clip-path: polygon(85% 0, 100% 13%, 100% 100%, 15% 100%, 0 86%, 0 0);
   background-size: cover;
   background-position: center center;
-  padding-left: 0;
-  padding-right: 0;
-  border-top-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-radius: 20px 5px 20px 5px;
   border-top: #A55605 3px solid;
   border-bottom: #A55605 3px solid;
+  min-height: 50vh;
+}
+
+@media (min-width: 768px) {
+  min-height: 60vh;
+}
+
+.upcoming__logo-col {
+  flex: 1;
 }
 
 .upcoming__project-logo {
-  margin-top: 2.5%;
-  margin-left: 2.5%;
+  margin-top: 5%;
   border: #A55605 3px double;
   border-radius: 5px;
   max-width: 50%;
+  ;
 }
 
-.button_row {
-  //margin-top: 10%;
+@media (min-width: 768px) {
+  .upcoming__project-logo {
+    margin-top: 2.5%;
+    margin-left: 2.5%;
+  }
+}
+
+.upcoming__button-row {
+  margin-top: 10%;
+  margin-bottom: 5%;
+}
+
+@media (min-width: 768px) {
+  .upcoming__button-row {
+    margin-top: 5%;
+  }
 }
 
+
 .upcoming__link {
-  max-width: 50%;
+}
+
+.upcoming__button {
+  font-size: 1.5em;
+  font-family: 'Playfair Display', serif;
+  color: antiquewhite;
+  background: rgba(0, 0, 0, 0.4);
+  border: antiquewhite 1px solid;
+  min-width: 30%;
+  &:hover {
+    background: rgba(7, 41, 72, 0.6);
+    color: #7fa0c2;
+    border: #035E9A 1px solid;
+  }
 }
 
 .events {

index.html

@@ -50,9 +50,8 @@ <h3 class="mission__statement">Provide mentorship and challenge for people of al
 {% if upcoming_event == true %}
     <section class="upcoming">
         <div class="row container-fluid">
-            <div class="col-md-12">
-                <hr class="upcoming-divider">
-
+            <hr class="upcoming-divider">
+            <div class="upcoming__img-container col-md-12">
                 <div class="row">
                     <div class="upcoming__col col-md-5 col-12">
                         <h2 class="upcoming-title">Upcoming Event</h2>
@@ -89,30 +88,24 @@ <h2 class="post__label">Date</h2>
                             </div>
                         </div>
                     </div>
-                    <div class="upcoming__img-container col-md-7">
-                        <div class="row">
-                            <div class="col-12">
-                                <img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
-                            </div>
-                        </div>
-                        <!--Fix vertical alignment of this row-->
-                        <div class="button_row row">
-                            <div class="col-12 text-center">
-                                <a class="upcoming__link" href="{{ post.event_link }}">
-                                    <button class="btn btn-outline-primary btn-lg">
-                                        Learn More
-                                    </button>
-                                </a>
-                            </div>
-                        </div>
+                    <div class="upcoming__logo-col col-auto">
+                        <img class="upcoming__project-logo" src="{{ site.baseurl }}/{{ post.project_logo }}">
+                    </div>
+                </div>
+                <div class="upcoming__button-row row">
+                    <div class="col-md-12 text-center">
+                        <a class="upcoming__link" href="{{ post.event_link }}">
+                            <button class="upcoming__button btn btn-outline-primary btn-lg">
+                                Learn More
+                            </button>
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 {% endif %}
 
-
 <!--Events in the past section-->
 {% include event.html %}
 
@@ -126,7 +119,6 @@ <h2 class="section-title">What Do We Do?</h2>
         </div>
     </div>
 
-
     <div class="row">
         <div class="second-on-mobile no-gutters__col col-md-6">
             <img class="services__img img-fluid rounded" src="static/images/services/educating_devs_840x561px.jpg">