alpcentaur/CyberTransfer_Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
corsaronero 2022-02-03 08:50:06 +00:00
commit 087117cf87
3 changed files with 122 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md Normal file
View file

@ -0,0 +1,5 @@
Here comes the explaination how to set it up, make it running, administrate and
other stuff

72
darkvideo.css Normal file
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
darkvideo.html Normal file
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>