Compare commits

...

2 Commits

@ -19,16 +19,16 @@
</div> </div>
</header> </header>
<div id="automobile" class="background"> <div id="automobile" class="background">
<a href="Automobile" class="titleBackground">L'automobile</a> <a href="Automobile" class="titleBackground" id="titleVoiture">L'automobile</a>
</div> </div>
<div id="ski" class="background"> <div id="ski" class="background">
<a href="Ski" class="titleBackground">Le ski</a> <a href="Ski" class="titleBackground" id="titleSki">Le ski</a>
</div> </div>
<div id="avion" class="background"> <div id="avion" class="background">
<a href="Avion" class="titleBackground">L'aéronautique</a> <a href="Avion" class="titleBackground" id="titleAvion">L'aéronautique</a>
</div> </div>
<div id="informatique" class="background"> <div id="informatique" class="background">
<a href="Informatique" class="titleBackground">L'informatique</a> <a href="Informatique" class="titleBackground" id="titleInformatique">L'informatique</a>
<div id="gradient"></div> <div id="gradient"></div>
</div> </div>
<div id="piedPage"> <div id="piedPage">

Binary file not shown.

After

Width:  |  Height:  |  Size: 732 KiB

@ -80,16 +80,15 @@ header {
} }
#informatique{ #informatique{
background-image: url("matrix.jpg"); background-image: url("matrix4k.jpg");
display:flex; display:flex;
align-items: flex-end;
justify-content: center;
} }
#gradient{ #gradient{
width: 100vw; width: 100vw;
height: 100px; height: 600px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
align-self:flex-end;
} }
.titleBackground{ .titleBackground{
@ -100,6 +99,11 @@ header {
text-decoration: none; text-decoration: none;
} }
#titleInformatique{
position: absolute;
align-self:center;
}
.titleBackground:hover{ .titleBackground:hover{
color: white; color: white;
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */ background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
@ -124,5 +128,6 @@ header {
} }
#piedPage{ #piedPage{
background: linear-gradient(black, green); background: linear-gradient(black, rgb(73, 73, 73));
height: 500px;
} }
Loading…
Cancel
Save