izanic/SAE_WEB_S1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

video de fond

Browse Source
This commit is contained in:
gallego 2024-01-02 17:47:36 +01:00
parent f61fa3e16c
commit 7897136db2
4 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CSS/styles.css
View File

@ -1,8 +1,10 @@
body{ body{
margin: 0; margin: 0;
background: linear-gradient(180deg,rgba(63,94,251,0.7),rgba(252,70,107,0.7) 100%); background: linear-gradient(180deg,rgba(83, 0, 0, 0.7),#ff0000 50%);
} }
ul{ ul{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -49,6 +51,18 @@ main{
flex-direction: column; flex-direction: column;
} }
#background-video{
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
#cas{ #cas{
box-shadow: 0 40px 60px rgba(150,0,0,0.7); box-shadow: 0 40px 60px rgba(150,0,0,0.7);
height: 25%; height: 25%;
@ -157,7 +171,7 @@ footer{
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-around; justify-content: space-around;
background-color: grey; background-color: #581845;
} }

BIN
img/istockphoto-1440281220-640_adpp_is.mp4 Normal file
View File

Binary file not shown.

BIN
img/roulette_coeur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

6
index.html
View File

@ -18,7 +18,7 @@
<nav> <nav>
<a href="#"><img id="icone" src="img/icon.png" alt="icone du site"></a> <a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>
<ul> <ul>
@ -32,6 +32,10 @@
</header> </header>
<main> <main>
<video id="background-video" autoplay loop muted>
<source src="img/istockphoto-1440281220-640_adpp_is.mp4" type="video/mp4">
</video>
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a> <a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
<div class="img_gauche_txt_droite"> <div class="img_gauche_txt_droite">