mer. 29 juil. à 0:37
Soit mon webmaster Senior et creer mon une landing page moderne et responsive pour Dj Kritick. Tu peux utiliser cette image et t'en inspiré pour l'ambiance  du site (tu peux enlever hiphop session coming soon).  Le site doit comporter un descriptif, biographie(je le modifierai au besoin).
Le site comportera un formulaire de contact avec champs de saisie nom de contact, mail, numéro de téléphone et message.
Modifier

Voici un aperçu de landing page dans une ambiance urbaine premium, sombre et moderne, inspirée de ton visuel avec des touches dorées pour renforcer l'identité de DJ Kritick.

Veux-tu que le bouton principal affiche « Réserver DJ Kritick » ou « Book a Session » ?

Modifier
Peux tu utiliser cette image pour faire la landing page?
Modifier
Modifier
Modifier
Je ne peut pas telecharger
Il y a rien
dj-kritick-landing(1).zip
Archive zip
Cher?
dim. 2 août à 22:34
revenons a la landing pages, je trouve que l'image est trop pixelisée proposes moi un autre visuel avant de recreer un site
Modifier
Modifier
Reprends et met moi a la.place du personnage, je donne donne quelques photo de moi
Modifier
Modifier
Modifier
Modifier
Prends tous les detail mais avec mon visage sur cette photo
Modifier
Modifier
Le visage n'est tj pas bon reprends a l'identique 
Modifier
mar. 4 août à 22:57
je veux l'image que tu as utilisé ici
Modifier
Modifier
dj-kritick-landing (1).zip
Archive zip
je te renvoi le site que je veux pour que tu m'integre l'image de fond
index.html
Fichier
comment modifier ce fichier pour quil prenne la photo que je  veux voir en fond
comment modifier cette image de fond 
augmente la resolution de limage
Modifier
Modifier
pourquoi quand je renomme dj-kritick-hero, liamge a fonctionne et pas b et c
Modifier
Modifier
redimensionne dj-kritick-heroa avec exactement le meme format que dj-kritick-herog
quest ce que je met a la place de "Cette biographie est volontairement rédigée comme une base facilement modifiable."
ce bouton 
comment mettre ce bouton plus voyant
cela donne ca
ou je met right 5% : 
le bouton na pas bouger
mer. 5 août à 22:18
il y a un probleme 
pourquoi la partie video a la une ne s'affiche pas comme les autres 
index(1).html
Fichier
styles.css
Fichier
faute d'ortho?
Modifier
Modifier
Modifier
Ca va etre un événement pour célébrer la sortie du site internet.
Modifier
Modifier
Modifier
Modifier

You could try:

Remplace le texte par une version française élégante.
Adapte ce visuel au format bannière web.
Crée le HTML/CSS fidèle à cette maquette.
Modifier

You could try:

Reprends exactement ma palette noir, or et blanc.
Transforme cette maquette en véritable page HTML.
Adapte ce visuel au format bannière responsive.
DJ_Kritick_Landing_V3(1).zip
Archive zip
sert toi du site pour me faire une page coming soon
j'essaie de mettre le coming soon en ligne ensuite je post un insta avec cette image?
styles(1).css
Fichier
javais deja un css modiefie le

J’ai modifié ton CSS existant en gardant ta structure actuelle, mais avec :

texte descriptif plus lisible ;
bouton Instagram plus grand et plus premium ;
meilleure lisibilité sur l’image de fond ;
animation d’apparition ;
responsive mobile amélioré ;
code beaucoup plus propre que la version compressée d’origine. Ton fichier initial utilisait déjà .hero, .overlay, .content, .btn, .genres et .thanks, donc j’ai conservé ces classes pour que tu puisses remplacer ton fichier sans changer ton HTML.

Tu peux télécharger le CSS modifié ici :

styles_coming_soon_modified.css

Remplace simplement ton ancien styles.css par celui-ci, ou copie/colle son contenu dans ton fichier actuel. 

styles_coming_soon_modified.css
Code

Là, le rendu est propre, mais je trouve que le bloc texte est devenu un peu trop petit et trop haut à gauche. Pour une page Coming Soon, il faut que le message ait plus de présence.

Je te conseille 3 ajustements :

Descendre légèrement le bloc texte.
Agrandir un peu le titre et le paragraphe.
Élargir le bouton.

Dans ton CSS, modifie ces parties :

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:10vw 8vw 8vw;
    background:
        url("assets/images/dj-kritick-heroa.webp")
        center / cover
        no-repeat;
    animation:zoom 18s ease-in-out infinite alternate;
}

.content{
    position:relative;
    z-index:2;
    max-width:760px;
    transform:translateY(35px);
    animation:fadeIn 1.2s ease;
}

h1{
    font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(5.8rem,10vw,9rem);
    line-height:.88;
    margin-bottom:38px;
    text-transform:uppercase;
}

h2{
    font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(3rem,4.6vw,4.2rem);
    color:#d4af37;
    line-height:1.05;
    margin-bottom:30px;
}

p{
    font-size:clamp(1.25rem,1.8vw,1.55rem);
    line-height:1.75;
    color:#f1f1f1;
    max-width:760px;
}

.btn{
    display:inline-block;
    margin:48px 0;
    padding:24px 56px;
    border:2px solid #d4af37;
    color:#d4af37;
    text-decoration:none;
    text-transform:uppercase;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:2px;
    transition:.35s ease;
}

Et si tu veux le rendre encore plus premium, ajoute une légère zone sombre derrière le texte :

.content::before{
    content:"";
    position:absolute;
    inset:-40px -55px;
    background:rgba(0,0,0,.18);
    backdrop-filter:blur(2px);
    z-index:-1;
}

Mais je testerais d’abord sans content::before. Ton image est déjà bien sombre, donc les tailles plus grandes devraient suffire.

fais moi le css a coller

Oui. Remplace directement ton CSS par celui-ci. Il reprend ton style actuel mais améliore les proportions, le bouton et la lisibilité.

/* =======================================
   RESET
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{

    font-family:Inter,sans-serif;
    background:#000;
    color:#fff;
    overflow:hidden;

}

/* =======================================
   HERO
======================================= */

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:0 7vw;

    background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
    url("assets/images/dj-kritick-heroa.webp")
    center center / cover
    no-repeat;

    animation:zoom 18s ease-in-out infinite alternate;

}

.overlay{

    position:fixed;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 35%,
    rgba(0,0,0,.25) 100%
    );

    pointer-events:none;

}

/* =======================================
   CONTENU
======================================= */

.content{

    position:relative;

    z-index:2;

    max-width:760px;

    transform:translateY(40px);

    animation:fadeIn 1s ease;

}

/* PETIT TITRE */

.eyebrow{

    color:#d4af37;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.95rem;

    margin-bottom:28px;

}

/* DJ KRITICK */

h1{

    font-family:"Barlow Condensed",sans-serif;

    font-size:clamp(6rem,9vw,9rem);

    line-height:.88;

    margin-bottom:38px;

    text-transform:uppercase;

}

h1 span{

    color:#d4af37;

}

/* LE MEILLEUR RESTE A VENIR */

h2{

    font-family:"Barlow Condensed",sans-serif;

    color:#d4af37;

    font-size:clamp(3rem,4vw,4.2rem);

    line-height:1.05;

    margin-bottom:32px;

}

/* TEXTE */

p{

    font-size:clamp(1.30rem,1.6vw,1.55rem);

    color:#f3f3f3;

    line-height:1.8;

    max-width:700px;

}

/* =======================================
   BOUTON
======================================= */

.btn{

    display:inline-block;

    margin-top:50px;

    padding:22px 52px;

    border:2px solid #d4af37;

    color:#d4af37;

    text-decoration:none;

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:2px;

    font-size:1rem;

    transition:.35s;

}

.btn:hover{

    background:#d4af37;

    color:#111;

    transform:translateY(-2px);

    box-shadow:0 0 30px rgba(212,175,55,.45);

}

/* =======================================
   GENRES
======================================= */

.genres{

    margin-top:45px;

    letter-spacing:6px;

    color:#dddddd;

    font-size:1rem;

}

/* =======================================
   MERCI
======================================= */

.thanks{

    margin-top:45px;

    font-size:1rem;

    color:#bcbcbc;

    font-style:italic;

}

/* =======================================
   ANIMATIONS
======================================= */

@keyframes zoom{

    from{

        background-size:100%;

    }

    to{

        background-size:105%;

    }

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(40px);

    }

}

/* =======================================
   MOBILE
======================================= */

@media(max-width:768px){

.hero{

    justify-content:center;

    text-align:center;

    padding:40px;

}

.content{

    transform:none;

}

.overlay{

    background:rgba(0,0,0,.72);

}

h1{

    font-size:5rem;

}

h2{

    font-size:2.5rem;

}

p{

    font-size:1.1rem;

}

.btn{

    width:100%;

    max-width:340px;

}

.genres{

    letter-spacing:3px;

    line-height:2;

    font-size:.85rem;

}

}
Je ferais encore un dernier changement

En regardant ta capture, je trouve que le texte est un peu trop à gauche. Je le décalerais légèrement vers la droite pour qu'il soit mieux aligné avec le visage.

Ajoute simplement dans .content :

margin-left:30px;

Ce petit décalage de 30 px équilibre beaucoup mieux la composition et donne un rendu plus proche des landing pages haut de gamme. Je pense que c'est le dernier détail qui manque à ta page.