Styling of feature-2 and feature-3 on homepage. Workson #58

bakerydemo/static/css/main.css

@@ -1003,16 +1003,41 @@ span.outline {
   padding: 40px 0 20px;
 }
 
+.homepage .feature-2 .feature-2-row {
+  display: flex;
+}
+
 .homepage .feature-2 h2,
 .homepage .feature-3 h2 {
   text-align: center;
   margin-bottom: 20px;
 }
 
-.homepage .feature-2 img {
+.homepage .feature-2 .feature-2-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.homepage .feature-2 .feature-2-item figure {
+  margin-bottom: 0;
+}
+
+.homepage .feature-2 .feature-2-item img {
   min-height: 210px;
 }
 
+.homepage .feature-2 .feature-2-item .feature-2-text {
+  background-color: #dfdfdf;
+  border-radius: 0 0 10px 10px;
+  padding: 0 20px;
+  flex: 1;
+}
+
+.homepage .feature-2 figure,
+.homepage .feature-3 figure {
+  background-color: #eb7400;
+  margin: 0;
+}
 .homepage .feature-3 h3 {
   color: #fff;
   font-weight: 300;
@@ -1024,6 +1049,10 @@ span.outline {
   text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
   z-index: 1;
 }
+.homepage .feature-2 li:hover img,
+.homepage .feature-3 li:hover img {
+  opacity: 0.3;
+}
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;

bakerydemo/templates/base/home_page.html

@@ -73,12 +73,18 @@
         <div class="col-md-12 feature-2">
             {% if page.featured_section_2 %}
             <h2>{{ page.featured_section_2_title }}</h2>
-                <div class="featured-children row">
+                <div class="featured-children row feature-2-row">
                     {% for childpage in page.featured_section_2.specific.children|slice:"3" %}
-                        <li class="col-md-4">
-                            {% image childpage.image height-210 %}
-                            <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
-                            <p>{{ childpage.introduction|truncatewords:15 }}</p>
+                        <li class="col-md-4 feature-2-item">
+                            <a href="{{childpage.url}}">
+                                <figure>
+                                    {% image childpage.image height-210 %}
+                                </figure>
+                            </a>
+                            <div class="feature-2-text">
+                                <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
+                                <p>{{ childpage.introduction|truncatewords:15 }}</p>
+                            </div>
                         </li>
                     {% endfor %}
                 </div>
@@ -96,7 +102,9 @@
                     {% for childpage in page.featured_section_3.specific.children|slice:"6" %}
                         <li class="col-md-4">
                             <a href="{{childpage.url}}">
-                                {% image childpage.image width-380 %}
+                                <figure>
+                                    {% image childpage.image width-380 %}
+                                </figure>
                                 <h3>{{childpage.title}}</h3>
                             </a>
                         </li>