@ -0,0 +1,5 @@ | |||
Here comes the explaination how to set it up, make it running, administrate and | |||
other stuff |
@ -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; | |||
} | |||
} |
@ -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> |