corsaronero
2 years ago
commit
087117cf87
3 changed files with 122 additions and 0 deletions
Unified View
Diff Options
-
+5 -0README.md
-
+72 -0darkvideo.css
-
+45 -0darkvideo.html
+ 5
- 0
README.md
View File
| @ -0,0 +1,5 @@ | |||||
| Here comes the explaination how to set it up, make it running, administrate and | |||||
| other stuff | |||||
+ 72
- 0
darkvideo.css
View File
| @ -0,0 +1,72 @@ | |||||
| .vid1 { | |||||
| object-fit: cover; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| } | |||||
| .vid2 { | |||||
| object-fit: cover; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| } | |||||
| .video-wrapper1 { | |||||
| width: 40vw; | |||||
| height: 100vh; | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| text-align: center; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | |||||
| .video-wrapper2 { | |||||
| width: 40vw; | |||||
| height: 100vh; | |||||
| position: relative; | |||||
| overflow: hidden; | |||||
| text-align: center; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | |||||
| .header1{ | |||||
| position: relative; | |||||
| color: white; | |||||
| text-shadow: 1px 1px 8px rgba(0,0,0,0.6); | |||||
| } | |||||
| .header2{ | |||||
| position: relative; | |||||
| color: white; | |||||
| text-shadow: 1px 1px 8px rgba(0,0,0,0.6); | |||||
| } | |||||
| .grid_container { | |||||
| display: grid; | |||||
| grid-template-columns: auto auto; | |||||
| } | |||||
| .item1 { | |||||
| width: 40 vw; | |||||
| height: 100 vh; | |||||
| } | |||||
| .item2 { | |||||
| width: 40 vw; | |||||
| height: 100 vh; | |||||
| } | |||||
| @media screen and (max-width: 768px) { | |||||
| .grid_container { | |||||
| grid-template-columns: auto; | |||||
| display: grid; | |||||
| } | |||||
| .item1 { | |||||
| width: 90 vw; | |||||
| } | |||||
| .item2 { | |||||
| width: 90 vw; | |||||
| } | |||||
| } | |||||
+ 45
- 0
darkvideo.html
View File
| @ -0,0 +1,45 @@ | |||||
| <!doctype html> | |||||
| <html lang="de"> | |||||
| <head> | |||||
| <link rel="stylesheet" type="text/css" href="darkvideo.css" /> | |||||
| <style> | |||||
| @media screen and (max-width: 768px) { | |||||
| .grid_container { | |||||
| grid-template-columns: auto; | |||||
| display: grid; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <div class= "grid_container"> | |||||
| <div class= "item1"> | |||||
| <div class="video-wrapper1"> | |||||
| <video class="vid1" playsinline autoplay muted loop poster="cake.jpg"> | |||||
| <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm"> | |||||
| Your browser does not support the video tag. | |||||
| </video> | |||||
| <div class="header1"> | |||||
| <h1>Blueberry Cheesecake</h1> | |||||
| <button>Recipe here</button> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="item2"> | |||||
| <div class="video-wrapper2"> | |||||
| <video class="vid2" playsinline autoplay muted loop poster="cake.jpg"> | |||||
| <source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/mp4"> | |||||
| Your browser does not support the video tag. | |||||
| </video> | |||||
| <div class="header2"> | |||||
| <h1>Blueberry Cheesecake</h1> | |||||
| <button>Recipe here</button> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||