<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Malicka & Lauraine Forever ❤️</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
font-family: Georgia, serif;
background: #252b3a;
color: white;
}
.accueil {
min-height: 100vh;
min-height: 100dvh;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 65px 18px 35px;
isolation: isolate;
}
.fond {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.voile {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(10, 12, 20, .2),
transparent 50%,
rgba(10, 12, 20, .1)
);
z-index: -1;
}
.date {
align-self: flex-start;
margin-left: 5%;
padding: 5px 14px;
background: #f3e6d0;
color: #252525;
letter-spacing: 6px;
font-size: 14px;
transform: rotate(-4deg);
}
.titre {
align-self: flex-start;
margin: 20px 0 0 5%;
color: #d93619;
font-family: Impact, "Arial Narrow", sans-serif;
font-size: clamp(42px, 11vw, 65px);
line-height: .88;
letter-spacing: -2px;
transform: rotate(-3deg);
}
.forever {
align-self: flex-start;
margin: -2px 0 0 8%;
font-size: clamp(34px, 9vw, 48px);
font-style: italic;
color: #fff1df;
text-shadow: 1px 2px 5px #333;
transform: rotate(-8deg);
}
.bouton {
margin-top: auto;
width: 88%;
padding: 20px 12px;
border-radius: 60px;
background: #050505;
color: white;
text-decoration: none;
text-align: center;
font-size: 23px;
border: 3px solid #171717;
box-shadow: 0 6px 0 rgba(0,0,0,.6);
}
.bouton:active {
transform: scale(.97);
}
</style>
</head>
<body>
<main class="accueil">
<!-- Remplace COLLAGE.jpg par le lien de ton image -->
<img class="fond" src="COLLAGE.jpg" alt="Nos souvenirs">
<div class="voile"></div>
<div class="date">15 DEC. 2024</div>
<h1 class="titre">MALICKA &<br>LAURAINE</h1>
<div class="forever">Forever.</div>
<a class="bouton"
href="https://htmldrop.com/Au0DBMTM0XG7">
Par ici 👀 ➜
</a>
</main>
</body>
</html>