Cambios al look sacando placeholders

bootstrap/web/config.php

@@ -23,6 +23,11 @@ return [
       'assets',
       'styles'
     ])),
+    'images' => DI\string(implode('/', [
+      '{urls.base}',
+      'assets',
+      'images'
+    ])),
     'servicios' => DI\string(implode('/', [
       '{urls.base}',
       'servicios'

common/Controller/Web/Home.php

@@ -20,7 +20,7 @@ class Home {
     ];
     $clientes = [];
     for ($i = 0; $i < 20; $i ++) {
-      $clientes[$i] = '<div class="ui fluid placeholder"><div class="circular image"></div>' . $i . '</div>';
+      $clientes[$i] = '<div class="ui image"><img src="' . $container->get('urls')['images'] . '/clientes/logo_' . str_pad($i + 1, 2, '0', \STR_PAD_LEFT) . '.jpg" /></div>';
     }
 
     $testimonios = $this->loadData($container, 'testimonios');

public/assets/styles/home.css

@@ -1,9 +1,13 @@
 #banner {
   background-color: grey;
+  background-blend-mode: multiply;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1920px auto;
   color: white;
   font-family: Roboto, sans-serif !important;
-  padding-top: 10rem;
+  padding-top: 15rem;
-  padding-bottom: 10rem;
+  padding-bottom: 15rem;
 }
 #banner .header {
   font-family: inherit;
@@ -13,14 +17,23 @@
   padding-top: 2rem;
   padding-bottom: 3rem;
 }
+#servicios .basic.card {
+  border: none !important;
+  box-shadow: none !important;
+}
 
 #frase {
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
+#frase .header {
+  color: inherit;
+}
 
 #nosotros {
   background-color: #f0f0f0;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }
 #nosotros .column {
   padding-top: 0;
@@ -45,16 +58,24 @@
   padding-top: 0;
   padding-bottom: 0;
 }
+#clientes #img_clientes .image {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 
 #testimonios {
   background-color: grey;
-  color: #404040;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1920px auto;
+  background-blend-mode: multiply;
+  color: white;
   min-height: 30rem;
   display: flex;
   align-items: center
 }
 #testimonios .segment, #testimonios .header {
-  color: #404040 !important;
+  color: white !important;
 }
 
 #eventos {

public/assets/styles/main.css

@@ -8,8 +8,16 @@ body, .ui {
   font-size: 2.2rem;
   color: #404041;
 }
-#page_logo .orange {
+.brand {
-  color: #F26721;
+  color: #f26721 !important;
+}
+.inverted.brand {
+  background-color: #f26721 !important;
+  color: #ffffff !important;
+}
+button.inverted {
+  border: none !important;
+  box-shadow: none !important;
 }
 
 footer {

resources/data/servicios.yml

@@ -1,6 +1,9 @@
 - titulo: Eventos Calidad de Vida
+  imagen: eventos_calidad_de_vida.jpg
   contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
 - titulo: Eventos Deportivos
+  imagen: eventos_deportivos.jpg
   contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
 - titulo: Eventos Recreativos
+  imagen: eventos_recreativos.jpg
   contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"

resources/views/home/banner.blade.php

@@ -1,4 +1,4 @@
-<div id="banner">
+<div id="banner" style="background-image: url('{{$urls->images}}/banner.jpg');">
   <div class="ui container">
     <div class="ui center aligned stackable grid">
       <div class="row">
@@ -15,7 +15,7 @@
       </div>
       <div class="row">
         <div class="three wide column">
-          <button class="ui fluid huge inverted basic button" style="font-weight: 900;">
+          <button class="ui fluid huge inverted brand basic button" style="font-weight: 900;">
             DESCARGA
           </button>
         </div>

resources/views/home/frase.blade.php

@@ -1,4 +1,5 @@
-<div class="ui container" id="frase">
+<div class="inverted brand" id="frase">
+  <div class="ui container">
     <div class="ui center aligned grid">
       <div class="twelve wide column">
         <div class="ui header">
@@ -9,4 +10,5 @@
         </p>
       </div>
     </div>
+  </div>
 </div>

resources/views/home/nosotros.blade.php

@@ -2,8 +2,8 @@
   <div class="ui container">
     <div class="ui stackable two columns grid">
       <div class="column">
-        <div class="ui fluid placeholder">
+        <div class="ui image">
-          <div class="image"></div>
+          <img src="{{$urls->images}}/equipo.jpg" />
         </div>
       </div>
       <div class="column contenido">

resources/views/home/servicios.blade.php

@@ -13,16 +13,20 @@ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
           <div class="three columns row">
             @foreach ($servicios as $servicio)
               <div class="column">
-                <div class="ui placeholder">
+                <div class="ui basic card">
-                  <div class="square image"></div>
+                  <div class="image">
+                    <img src="{{$urls->images}}/{{$servicio->imagen}}" alt="{{$servicio->titulo}}" title="{{$servicio->titulo}}" />
                   </div>
-                <div class="ui header">
+                  <div class="content">
+                    <div class="header">
                       {{$servicio->titulo}}
                     </div>
-                <div class="ui content">
+                    <div class="description">
                       {{$servicio->contenido}}
                     </div>
                   </div>
+                </div>
+              </div>
             @endforeach
           </div>
         </div>

resources/views/home/testimonios.blade.php

@@ -1,4 +1,4 @@
-<div id="testimonios">
+<div id="testimonios" style="background-image: url('{{$urls->images}}/testimonios.jpg');">
   <div class="ui container">
     <div class="ui center aligned grid">
       <div class="fourteen wide column" id='testimonio'>

resources/views/layout/menu.blade.php

@@ -6,7 +6,7 @@
   </div>
   <a class="item" href="{{$urls->base}}">
     <div class="ui header" id="page_logo">
-      Total<span class="orange">Sport</span>
+      Total<span class="brand">Sport</span>
     </div>
   </a>
   <div class="right two item menu">