Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="contador parallax">
- <div class="contenedor">
- <ul class="resumen-evento clearfix">
- <li><p class="numero">6</p> Invitados</li>
- <li><p class="numero">15</p> Talleres</li>
- <li><p class="numero">3</p> Días</li>
- <li><p class="numero">9</p> Conferencias</li>
- </ul>
- </div>
- </div>
- .parallax::before {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
- background-attachment: fixed;
- }
- div.contador {
- position: relative;
- height: auto;
- }
- div.contador::before {
- background-image: url(../img/bg-resumen.jpg);
- content: '';/*Siempre que utilizas los before y after hay que ponerle un content*/
- }
- ul.resumen-evento {
- position: relative;/*Para resetear porque ya tenemos uno en absolute*/
- padding: 120px 0;
- }
- ul.resumen-evento li {/*Recuerda que esto es mobile first*/
- width: 50%;
- float: left;
- text-align: center;
- color: #ffffff;
- text-transform: uppercase;
- font-size: 24px;
- }
- @media only screen and (min-width: 768px) {
- ul.resumen-evento li {
- width: 25%;
- }
- div.contador::before {
- background-image: url(../img/bg-resumen.jpg);
- content: '';/*Siempre que utilizas los before y after hay que ponerle un content*/
- }
- }
- p.numero {
- color: #fe4918;
- font-size: 4em;
- display: block;
- margin: 0 0 10px 0;
- }
Add Comment
Please, Sign In to add comment