Scribd
Importer
33 vues4 pages

Parfait Marcel ?

Le document présente une version améliorée d'une page de bienvenue pour un site nommé MuscleTrack, avec des éléments de design tels qu'un flou léger sur l'image d'arrière-plan et un overlay sombre pour la lisibilité du texte. Il inclut également un code HTML et CSS détaillé pour la mise en page, ainsi que des instructions sur l'ajout d'une image d'arrière-plan. Enfin, il propose de passer à la création de la page register.html avec un formulaire connecté.

Transféré par

luambamarcel6
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
33 vues4 pages

Parfait Marcel ?

Le document présente une version améliorée d'une page de bienvenue pour un site nommé MuscleTrack, avec des éléments de design tels qu'un flou léger sur l'image d'arrière-plan et un overlay sombre pour la lisibilité du texte. Il inclut également un code HTML et CSS détaillé pour la mise en page, ainsi que des instructions sur l'ajout d'une image d'arrière-plan. Enfin, il propose de passer à la création de la page register.html avec un formulaire connecté.

Transféré par

luambamarcel6
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Parfait Marcel 👑​

Voici une version encore plus raffinée de ta page de bienvenue, avec :

✅ Effet de flou léger sur l’image d’arrière-plan (style professionnel)


✅ Overlay sombre pour rendre le texte lisible
●​

✅ Emplacement clair et indiqué pour ta photo


●​

✅ Tous les éléments visuellement équilibrés


●​
●​

✅ Code final amélioré + flou artistique


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bienvenue - MuscleTrack</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', sans-serif;
height: 100vh;
overflow: hidden;
position: relative;
}

/*🔽 IMAGE DE FOND AVEC FLOU 🔽


*/
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('assets/[Link]') center center / cover no-repeat fixed;
filter: blur(4px);
z-index: -2;
}

/*🔽 OVERLAY SOMBRE PAR-DESSUS L'IMAGE 🔽 */


.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(20,20,20,0.8));
z-index: -1;
animation: overlayFlow 15s ease infinite;
}

@keyframes overlayFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.hero {
position: relative;
z-index: 1;
text-align: center;
max-width: 700px;
margin: auto;
top: 50%;
transform: translateY(-50%);
padding: 2rem;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
opacity: 0;
animation: fadeIn 2s ease-out forwards;
}

@keyframes fadeIn {
to {
opacity: 1;
}
}

.hero h1 {
font-size: 3rem;
color: #FFD700;
margin-bottom: 1rem;
}

.hero p {
font-size: 1.3rem;
color: #ccc;
margin-bottom: 2rem;
}
.btn {
background-color: #FFD700;
color: #000;
padding: 0.8rem 2rem;
border: none;
border-radius: 30px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}

.btn:hover {
background-color: #e6c200;
}

@media (max-width: 768px) {


.hero h1 {
font-size: 2.2rem;
}

.hero p {
font-size: 1.1rem;
}
}
</style>
</head>

🔽 🔽
<body>
<!-- IMAGE DE FOND -->
<div class="bg-image"></div>
<div class="overlay"></div>

<section class="hero">
<h1>MuscleTrack</h1>
<p>Optimisez vos entraînements, visualisez vos progrès et devenez la meilleure version
de vous-même.</p>
<button class="btn" onclick="[Link]='[Link]'">Commencer</button>
</section>
</body>
</html>

📌 Où mettre ta photo :
🔽 Regarde cette ligne dans le code :
background: url('assets/[Link]')

👉 Cela signifie que tu dois :


1.​ Créer un dossier dans ton projet nommé assets
2.​ Mettre l’image (haltères) dans ce dossier
3.​ Nommer le fichier exactement [Link]

📁 Structure :
ton-projet/
├── [Link]
├── assets/
│ └── [Link]

Tu peux aussi renommer l’image (par exemple haltè[Link]), mais n’oublie pas
de modifier le chemin dans le CSS.

Souhaites-tu maintenant que je te passe à la page [Link] avec formulaire


connecté proprement ?

Vous aimerez peut-être aussi