Sujet Précédent Sujet Suivant

Problème de mise en page HTML5 CSS3 pour site web

Fermé
Henkinen35 Messages postés 2 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 6 décembre 2020 - 5 déc. 2020 à 11:33
Henkinen35 Messages postés 2 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 6 décembre 2020 - 6 déc. 2020 à 10:32
Bonjour :)

Cela fait quelques jours que je me suis inscrit sur une plateforme en ligne enseignant le développement web "UDEMY" et je reste bloqué à la moitié du cours lorsqu'il s'agit de compléter la mise en page de son site.
Je ne sais pas si cela vient de la partie HTML ou CSS mais cela m'empêche d'avancer sur le reste du site: partie contact etc.
A mon avis il y a peu de choses à changer pour que ca refonctionne mais je sais pas d'où vient l'erreur.
Alors si il y a une personne un peu calé dans le développement web dans le coin je suis preneur ! :)
Je mets en photo le résultat attendu et mon rendu.
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
Modifié le 5 déc. 2020 à 11:45
Bonjour
Tu nous as mis le résultat attendu ..et le tien .. mais lequel est quoi ? Le premier c'est le tien non ?
Tu ne nous as pas partagé non plus ton code.. donc impossible de savoir ce qui cloche.

NB: Pour poster ton code sur le forum, tu devras utiliser les BALISES DE CODE.
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code


0
Réponse 2 / 2
Henkinen35 Messages postés 2 Date d'inscription samedi 5 décembre 2020 Statut Membre Dernière intervention 6 décembre 2020
6 déc. 2020 à 10:32
Bonjour Jordan,

Mon rendu est bel et bien posté sur l'ancien post, mais je te le remets au cas où

Et je te mets le code HTML: 





 <!DOCTYPE html>
<html>
<head>
    <meta charset "UTF-8">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Crete+Round&display=swap" rel="stylesheet">
    <title>Travel Agency</title>
</head>
<body>
    <header>
            <div class="wrapper">
        <h1>Travel Agency<span class="orange">.</span></h1>
        <nav>
            <ul>
                    <li><a href="main-image">Accueil</a></li>
                    <li><a href="steps">Destination</a></li>
                    <li><a href="posibilities">Circuits</a></li>
                    <li><a href="contact">Contact</a></li>
            </ul>
        </nav>
            </div>
    </header>
    
    
    <section id="main-image">
        <div class="wrapper">
            <h2>Organisez votre <br><strong>voyage sur mesure</strong> voyage sur mesure</h2>
            <a href="#" class="button-1"> Par ici</a>
        </div>
    </section>
    
    <section id="steps">
        <div class="wrapper">
            <ul>
                <li id="step-1">
                    <h4>Planifier</h4>
                    <p>Confiez-nous vos rêves d'évasion : en famille ou entre amis, nous trouverons la formule qui comblera vos attentes.</p>
                </li>
                
                <li id="step-2">
                    <h4>Organiser</h4>
                    <p>Bénéficiez de l'expertise de nos spécialistes de chaque destination, ils vous accompagnent dans la réalisation de votre voyage.</p>
                </li>
                    
                    
                <li id="step-3">
                    <h4>Voyager</h4>
                    <p>Nous nous chargeons d'assurer votre sécurité et de veiller à votre pleine sérénité tout au long de votre voyage.</p>
                </li>
                
                </li>
            
            </ul>
        </div>
    </section>
                  
    <section id="posibilities">
        <div class="wrapper">
            <article style="background-image: url(images/article-image-1.jpg);">
                <div class="overlay">
                    <h4>Partez en famille</h4>
                    <p><small>Offrez le meilleur à ceux que vous aimez et partagez des moments fabuleux !</small></p>
                </div>
                <a href="#" class="button-2">Plus d'infos</a>
            </article>
            
        <article style="background-image: url(images/article-image-2.jpg);">
                <div class="overlay">
                    <h4>Envie de s'évader</h4>
                    <p><small>Parfois un peu d'évasion serait le bienvenue et ferait le plus grand bien !</small></p>
                
                <a href="#" class="button-2">Plus d'infos</a>
            </div>
        </article>
        
        </div>
    </section>
    
    <section id="contact">
        <div class="wrapper">
            <h3>Contactez-nous</h3>
            <p>Chez Travel  Agency nous savons que voyager est une aventure humaine mais également un engagement financier important pour vous. C'est pourquoi nous mettons un point d'honneur à prendre en compte chacune de vos attente pour vous aider dans la préparation de votre séjour, circuit ou voyage sur mesure.</p>
            
            <form>
                <label for="Nom">Nom</label>
                <input type="texte" id="name" placeholder="votre nom">
                
                <label for="Nom">Nom</label>
                <input type="email" id="name" placeholder="votre email">
                
                <input type="submit" value="Ok" class="button-3">
            </form>
        </div>
    
    <footer>
        <div class="wrapper">
            <h1> Travel Agency <span class="orange">.</span></h1>
            <div class="copyright">Copyright 2020. Tout droits réservés.</div>
        
        </div>
    </footer>
    
</body>


</html>




Ainsi que le code CSS: 
/* GENERAL */

*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: Arial, sans-serif;
    font-size: 15px;
}

h1
{
    font-family: 'crete round', serif;
    font-size: 45px;
    color: #444;
}

ul
{
    list-style-type: none;
}

h2
{
    color: #444;
    font-size: 55px;
}

h3
{
    font-size: 30px;
    color: #444;
}

h4
{
    font-size: 24px;
    color: #444;
}

p
{
    line-height: 20px;
    color: #777;
}

a
{
    text-decoration: none;
    color: #444;
}

.wrapper
{
    width 940px;
    margin: 0 auto;
    padding: 0 10px;
}

.orange
{
    color: #ff7a00;
}

.clear
{
    clear: both;
}

small
(
    font-size: 13px;
    font-style: italic;
)
/* HEADER */

header
{
    height: 120px;
}

header h1
{
    float: left;
    margin-top: 32px;
    margin-left: 10px;
}

header nav
{
    float: right;
    margin-top: 50px;
}

header nav ul li
{
    display: inline-block;
    float: left;
}

header nav ul li a
{
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 20px;
}




/* MAIN IMAGE */

#main-image
{
    height: 580px;
    background: url('images/main.jpg') center;
}

#main-image h2
{
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    padding: 150px 0 40px 0;
}

.button-1
{
    display: block;
    width: 120px;
    height 50px;
    background:#ff7a00;
    color: #fff;
    font-size: 20px;
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
}
    
.button-1:hover
{
    background: #02b8dd;
    
}


/* STEPS */

#steps ul
    {
        margin: 80px 0;
        padding-left: 275px;
    }

#steps ul li
    {
        width: 300px;
        float: left;
        padding-top: 140px;
        text-align: center;
        margin-right: 10px;
        margin-left: 100px;
      
    }
    
#steps h4
    {
        text-transform: uppercase;
        margin-bottom: 20px;
    }

#steps p
{
    margin-bottom: 20px;
}
      
#step-1
    {
        background: url('images/steps-icon-1.png') no-repeat top center;
    }
     
#step-2
    {
        background: url('images/steps-icon-2.png') no-repeat top center;
    }
    
#step-3 
    {
        background: url('images/steps-icon-3.png') no-repeat top center;
    }


    
/* POSIBILITIES */
#posibilities
{
    background-color: #efefef;
    padding: 60px 0;
}
    
#posibilities article
{
    width: 460px;
    height: 270px;
    float: left;
    border-radius: 10px;
    
}

.overlay
{
    background: rgba(255,255,255, 0.95);
    height: 100%
    width 190px;
    padding: 20px;
    border-radius: 10px 0 0 10px;
    text-align: center;
    
}
    
article h4
{
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

#posibilities small
{
    text-align: center;

}

#posibilities p
{
    text-align: center;
    margin-bottom: 20px;
}

.button-2
{
    color: #fff;
    background-color: #ff7a00;
    padding: 6px 20px;
    border-radius: 3px;
}

.button-2:hover
{
    color: #fff;
    background-color: #02b8dd;
    padding: 6px 20px;
    border-radius: 3px;
    
}

    
    /* CONTACT */
    
    #contact
    {
        padding: 60px;
        text-align: center;
    }
    
#contact h3
{
    text-transform: uppercase;
    margin: 0 auto 20px auto;
    width: 400px;
    border-bottom: 1px solid #02b8dd;
    padding-bottom: 20px;
}

form
{
    margin: 60px 0 20px 0;
}

label
{
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    color: #777;
}

input [type="text"]
{
    padding: 10px;
    font-size: 20px;
    margin-right 20px;
    border: 2px solid #ddd;
    border-radius: 3px;
}

.button-3
{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 11px;
    background-color: #02b8dd;
    border-style: none;
    border-radius: 3px;
}

.button-3:hover
{
    color: #fff;
    background-color: #444;
    
}

/* FOOTER */

footer
{
    height: 260px;
    background-color: #444;
}

footer h1
{
    color: #fff;
    text-align: center;
    padding-top: 80px;
}

.copyright
{
    text-align: center; 
    font-weight: bold;
    padding-top: 30px;
    color: #777;
}

.



En espérant que ce soit plus clair ;)
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses