corsaronero
2 years ago
commit
087117cf87
3 changed files with 122 additions and 0 deletions
Split 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> | |||