templates/portada/_twitter.html.twig line 1

Open in your IDE?
  1. <br>
  3. <div class="range range-no-gutter text-center">
  5.     <div class="cell-xs-12 cell-sm-1 cell-md-1">
  8.     </div>
  10.     <div class="cell-xs-12 cell-sm-5 cell-md-5">
  12.         <a class="twitter-timeline" data-lang="es" data-width="500" data-height="555" data-theme="light" data-link-color="#383371" href="https://twitter.com/Agua_IPA_Chubut?ref_src=twsrc%5Etfw">Tweets de IPA Chubut</a>
  14.     </div>
  16.     <div class="cell-xs-12 cell-sm-1 cell-md-1">
  19.     </div>
  21.     <div class="cell-xs-12 cell-sm-4 cell-md-4 offset-top-10">
  23.         <h1 class="header-section">Sugerencias</h1>
  25.         <div class="main">
  26.           <div class="column">
  27.                 <figure>
  28.                     <a href="http://www.plataformadelagua.org.ar/mapa" target="_blank">
  29.                         <img src="{{ asset( proyecto.nombre ~ '/images/chubut2-min.png') }}" />
  30.                     </a>
  31.                 </figure>
  32.             </div>
  33.             <div class="column">
  34.                 <figure>
  35.                     <a href="{{ path('saquito_informe_ameghino_listar') }}">
  36.                         <img src="{{ asset( proyecto.nombre ~ '/images/informe-min.png') }}" />
  37.                         <div class="centered">
  38.                             <p style="font-weight: bold; font-size:20px">Informe Diario Hidroel&eacute;ctrica Ameghino</p>
  39.                         </div>
  40.                     </a>
  41.                 </figure>
  42.             </div>
  43.             <div class="column">
  44.                 <figure>
  45.                     <a href="{{ path('saquito_paginas_ver', {'id': 77 ,'slug': 'plan-de-gestion-sustentable-de-agua-en-la-meseta-central'}) }}">
  46.                         <img src="{{ asset( proyecto.nombre ~ '/images/mapa_1-min.png') }}" />
  47.                         <div class="centered">
  48.                             <p style="font-weight: bold; font-size:18px">Plan de gestión Sustentable de Agua Subterr&aacute;nea y Superficial en la Meseta Central</p>
  49.                         </div>
  50.                     </a>
  51.                 </figure>
  52.             </div>
  53.         </div>
  55.     </div>
  57.     <div class="cell-xs-12 cell-sm-1 cell-md-1">
  60.     </div>
  63. </div>
  66. <style type="text/css">
  67.     .header-section {
  68.         font-size: 27px !important; line-height: 36px !important;font-weight: 300 !important;color: #292F33;font: normal normal 14px/1.4 Helvetica,Roboto,'Segoe UI',Calibri,sans-serif;display: inline-block !important; max-width: 100%;margin: 0;padding: 0;list-style: none;border: none;
  69.     }
  70.     .centered {
  71.         position: absolute;
  72.         top: 50%;
  73.         left: 50%;
  74.         color: black;
  75.         transform: translate(-50%, -50%);
  76.     }
  77.     .main{
  78.       display: flex;
  79.       flex-flow: row wrap;
  80.       width: 100%;
  81.       justify-content: center;
  82.     }
  83.     .column{
  84.       flex-basis: 1 10px;
  85.       width: calc(100% / 3 - 10px);
  86.       margin: 5px;
  87.       padding: 0;
  88.       width: 100%;
  89.     }
  90.     figure {
  91.         position: relative; 
  92.       overflow: hidden;
  93.       margin: 0;
  94.       height: 100%;
  95.       width: 100%;
  96.       filter: grayscale(.8);
  97.     }
  98.     figure img{
  99.       width: 100%;
  100.       height: 100%;
  101.     }
  102.     figure::before {
  103.         position: absolute;
  104.         top: 50%;
  105.         left: 50%;
  106.         z-index: 2;
  107.         display: block;
  108.         width: 0;
  109.         height: 0;
  110.         background: rgba(0,0,0,.2);
  111.         border-radius: 100%;
  112.         transform: translate(-50%, -50%);
  113.         opacity: 0;
  114.     }
  115.     figure:hover{
  116.       animation: bloom ease-in-out .75s forwards;
  117.     }
  118.     figure:hover::before {
  119.         animation: circle .75s;
  120.     }
  121.     @keyframes bloom {
  122.         0% {
  123.             filter: grayscale(.8);
  124.         }
  125.         40% {
  126.             filter: grayscale(.5);
  127.         }
  128.         100% {
  129.             filter: grayscale(0);
  130.         }
  131.     }
  132.     @keyframes circle {
  133.         0% {
  134.             opacity: .3;
  135.             background: rgba(213,156,34,.2);
  136.         }
  137.         40% {
  138.             opacity: 1;
  139.             background: rgba(213,34,160,.2);
  140.         }
  141.         100% {
  142.             width: 200%;
  143.             height: 200%;
  144.             opacity: 0;
  145.         }
  146.     }
  148. </style>