Last active
December 24, 2019 02:45
-
-
Save nicocedron/a9790f2ba252f25e11732ed1757b9b50 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <title>@yield('title', 'Inicio')</title> | |
| <link href="https://fonts.googleapis.com/css?family=Nunito:200,600,400,800" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ asset('css/app.css') }}"> | |
| </head> | |
| <body> | |
| @yield('content') | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $black: #333; | |
| $gray: gray; | |
| $white: #fff; | |
| $text-color: $white; | |
| $green: #17be6d; | |
| $yellow: #d7b300; | |
| $red: #ca3f5a; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .video-item{ | |
| padding-top: 150%; | |
| position: relative; | |
| overflow: hidden; | |
| display: block; | |
| text-decoration: none; | |
| border-radius: 3px; | |
| &:hover{ | |
| img{ | |
| transform: scale(2); | |
| } | |
| .details{ | |
| bottom: 0; | |
| opacity: 1; | |
| } | |
| .langs{ | |
| .spanish, .latam, .english{ | |
| margin-left: -100%; | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| .details{ | |
| position: absolute; | |
| bottom: -100%; | |
| padding: 10px; | |
| padding-top: 50px; | |
| background: rgba(0, 0, 0, 0.2); | |
| width: 100%; | |
| opacity: 0; | |
| transition: bottom 0.5s ease-in-out, opacity 1s ease-in-out; | |
| .video-title{ | |
| font-size: 2rem; | |
| color: $text-color; | |
| margin-top: 1rem; | |
| font-weight: bold; | |
| } | |
| .button-play{ | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| color: #ff4242; | |
| font-size: 2rem; | |
| width: 40px; | |
| height: 40px; | |
| text-align: center; | |
| border-radius: 50%; | |
| background: rgba(0, 0, 0, 0.25); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| line-height: 0.8em; | |
| } | |
| .info{ | |
| color: $white; | |
| display: flex; | |
| align-items: center; | |
| margin: 1rem 0; | |
| .pegi{ | |
| padding: 2px 5px; | |
| border: 1px solid $white; | |
| border-radius: 2px; | |
| margin-right: 1rem; | |
| } | |
| }//info | |
| .gender{ | |
| color: $white; | |
| font-weight: 600; | |
| } | |
| } | |
| img{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| object-fit: cover; | |
| transition: all 20s ease-in; | |
| display: block; | |
| } | |
| .langs{ | |
| position: absolute; | |
| top: 1rem; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| .spanish, .latam, .english{ | |
| font-size: 1.2rem; | |
| color: $white; | |
| background: rgba(0, 0, 0, 0.25); | |
| margin-bottom: 1rem; | |
| padding: 0.2rem; | |
| border-right: 5px solid #fff; | |
| } | |
| .spanish{ | |
| transition: all 0.5s ease-in-out 0.3s; | |
| border-right-color: $yellow; | |
| } | |
| .latam{ | |
| transition: all 0.5s ease-in-out 0.2s; | |
| border-right-color: $green; | |
| } | |
| .english{ | |
| transition: all 0.5s ease-in-out; | |
| border-right-color: $red; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @extends('layouts.application') | |
| @section('content') | |
| <style> | |
| .flex-6{ | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .flex-6 .col{ | |
| padding: 1rem; | |
| width: 16.6666667%; | |
| } | |
| </style> | |
| <h1>Componente video</h1> | |
| <div class="flex-6"> | |
| @foreach([1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] as $video) | |
| <div class="col"> | |
| <a href="#" class="video-item"> | |
| <img src="http://lorempixel.com/400/600/?v{{ rand() }}" alt="Movie alt"> | |
| <div class="langs"> | |
| <div class="spanish">ESP</div> | |
| <div class="latam">LAT</div> | |
| <div class="english">ENG</div> | |
| </div> | |
| <div class="details"> | |
| <div class="button-play"> | |
| <i class="icon-play"></i> | |
| </div> | |
| <div class="video-title"> | |
| Cat Movie | |
| </div> | |
| <div class="info"> | |
| <div class="pegi">13+</div> | |
| <div class="duration">1 h 48 min</div> | |
| </div> | |
| <div class="gender"> | |
| Suspenso | |
| </div> | |
| </div> | |
| </a><!--vide-item--> | |
| </div><!--col--> | |
| @endforeach | |
| </div> | |
| @endsection |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment