update to service style using template

css/style.css

@@ -418,37 +418,59 @@ ul#nav li a:hover .ul#nav li ul {
 
 /* Services */
 
+#services {
+  margin: 5% auto;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 40px;
+}
+
 .service-logo {
-   height: 40px;
+   height: 80px;
+   width: 250px;
+   position: absolute;
+   top: 20px;
+}
+.service-logo img {
+   height: 80px;
    display: block;
-   float: left;
-   padding-right: 15%;
-   vertical-align: sub;
+   margin: 0 auto;
 }
 .framed {
    background: #FFF;
    display: inline-block;
+   text-align: center;
    vertical-align: top;
-   height: 300px;
-   width: 100%;
-   margin: 25px;
-   padding: 20px;
+   height: 220px;
+   width: 250px;
+   margin: 70px 25px;
+   padding-top: 30px;
    clear: none;
-}
-.framed .left {
-   float: left;
-}
-.framed p, .framed h2 {
-   text-align: left;
-   width: 60%;
-   float: right;
+   border-radius: 0px;
+   border: none;
+   box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+ }
+
+.framed p {
+   width: 80%;
+   text-align: justify;
+   color: black;
    margin: 5px auto;
+   height: 58%;
+}
+
+.framed h2 {
+   width: 70%;
+   text-align: center;
+   margin: 5px auto;
+   font-size: 1.5em;
 }
 
 /* New services
 ------------------------------------*/
 
-.service-parent {
+/*.service-parent {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -489,11 +511,11 @@ ul#nav li a:hover .ul#nav li ul {
   max-width: 80px;
   transform: translate(0%, -50%);
 }
+*/
 
 .service-btn {
   position: relative;
-  margin: 0 auto;
-  bottom: -21px;
+  bottom: -13px;
   width: 30%;
   background-color: #50162D;
   text-align: center;

templates/modular/services.html.twig

@@ -7,18 +7,16 @@
              {% for item in page.header.services %}
                <div class="four columns">
                    <div class="framed">
-                       <a href="{{ item.link }}">
-                           <span class="left fa-stack fa-lg fa-3x">
-                                 <i class="fa fa-circle fa-stack-2x"></i>
-                                 <i class="fa {{ item.icon }} fa-stack-1x fa-inverse"></i>
-                           </span>
+                   <div class="service-logo"> <img src="user/themes/disroot/images/logo_{{ item.icon }}"></div>
+                           <a href="{{ item.link }}">
                            <h2>{{ item.title }}</h2>
                            <p class="service">
                                {{ item.text }}
                            </p>
-                       </a>
+                          </a>
+                      <a href="{{ item.button }}" class="service-btn">Log in</a>
                    </div>
-               </div>  
+               </div>
              {% endfor %}
        </div>
      </section>