[Résolu] Cours - Créer votre site avec html5 et css3 par Thierry28 - page 1

Bonsoir, en vue de mon entrée en formation je me prépare en suivant le cours "Créer votre site en html5 et css3", je suis arrivé à la partie ou l'on doit agencer les différentes parties du site en flexbox, ma section "accueil-introduction" ne ressemble pas a la version du site finale et je 'arrive pas trouver pourquoi, j'ai bien vérifier mon code avec la solution mais je ne voit pas d'erreur. merci de votre aide.

voici mon code :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Accueil - Robbie Lens Photographie</title>
    <link href="style.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Manrope&family=Montserrat&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <header>
      <nav>
        <img src="images/logo.png" alt="Logo Robbie Lens" />
        <div>
          <a href="index.html">Accueil</a>
          <a href="a-propos.html">À propos</a>
        </div>
      </nav>
    </header>
    <main>
      <section class="accueil-introduction">
        <div>
          <h1>Robbie Lens Photographie</h1>
          <p>
            Où <em>professionalisme</em> s’allie avec <em>passion</em>. Depuis
            plus de 5 ans maintenant, j’exerce mon métier avec la passion qui
            m’anime : capturer l’essence de chaque instant.
          </p>
          <a href="" class="cta">UN PROJET ? ÉCRIVEZ-MOI</a>
        </div>
        <img
          src="images/robbie-lens.png"
          alt="Portrait avec effet de la photographe Robbie Lens"
        />
      </section>
      <section class="accueil-photos">
        <h2>Mon dernier projet</h2>
        <div>
          <img
            src="images/accueil/element-1.png"
            alt="Twelve apostles - Australie"
          />
          <img
            src="images/accueil/element-2.png"
            alt="Wai-O-Tapu - Nouvelle-Zélande"
          />
          <img
            src="images/accueil/element-3.png"
            alt="Parc National d’Abel Tasman - Nouvelle-Zélande"
          />
        </div>
        <div>
          <img
            src="images/accueil/element-4.png"
            alt="Lac Rotorua - Nouvelle-Zélande"
          />
          <img
            src="images/accueil/element-5.png"
            alt="Milford Sound - Nouvelle-Zélande"
          />
          <img
            src="images/accueil/element-6.png"
            alt="Lac Wanaka - Nouvelle-Zélande"
          />
        </div>
      </section>
    </main>
    <footer>
      <img src="images/logo.png" alt="Logo Robbie Lens" />
      <div>
        <a target="_blank" href="https://twitter.com/" class="lien-icone">
          <img src="images/twitter.png" alt="Logo Twitter" />
        </a>
        <a target="_blank" href="https://www.instagram.com/" class="lien-icone">
          <img src="images/instagram.png" alt="Logo Instagram" />
        </a>
      </div>
    </footer>
  </body>
</html>

* {
  margin: 0;
}

body {
  font-family: "Manrope", sans-serif;
  font-size: 1em;
  background-color: #1f2039;
}

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

em {
  color: #a5b4fc;
  font-style: normal;
}

h1 {
  font-size: 3.5em;
  color: #a5b4fc;
  font-family: "Montserrat", sans-serif;
}

h2 {
  color: #f9f8ff;
}

p,
li {
  font-size: 1.1em;
  color: #f9f8ff;
}

header,
footer {
  background-color: white;
  padding: 20px 50px;
}

.cta {
  background: linear-gradient(#8e86b5, #acaeed);
  color: white;
  border-radius: 50px;
  padding: 20px 30px;
}

a:hover {
  text-decoration: underline;
}

.cta:hover {
  background: linear-gradient(#696484, #8788ba);
  text-decoration: none;
}

.lien-icone {
  margin-left: 30px;
}

.lien-icone:hover {
  opacity: 0.5;
}

.carre-contenu {
  border-right: 1px solid #8e86b5;
  border-bottom: 1px solid #8e86b5;
  padding: 50px;
}

.carre-contenu h2 {
  margin-top: 30px;
}

.carre-contenu ul {
  margin-top: 30px;
}

section {
  padding: 80px;
}

.a-propos-main {
  width: 50%;
  margin: auto;
}

footer,
nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

nav a {
  margin-left: 30px;
}

.accueil-photos {
  background-color: white;
  padding: 80px;
}

.accueil-photos h2 {
  color: #242424;
  text-align: center;
  margin-bottom: 80px;
}

.accueil-photos div {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
  margin-bottom: 15px;
}

.accueil-introduction {
  display: flex;
  flex-direction: row;
  width: 50%;
  align-items: center;
  margin: auto;
}

Bonsoir,

>> ma section "accueil-introduction" ne ressemble pas a la version du site finale

Pourriez vous indiquer par une capture écran ou un lien vers le cours à quoi doit ressembler la version final?

Pour ceci c'est NON :

* {
  margin: 0;
}

Inutile de péter toute les marges surtout pour les éléments qui n'en on pas. De toute façon vous devez les remettre par la suite.

Reset au cas par cas ou utilisez une feuille de style par défaut de type normalize

Le cours vous apprends une mauvaise pratique.

Un article intéressant sur le sujet https://www.alsacreations.com/article/lire/1867-reset-css-une-histoire-heritage-et-reinitialisation.html

-
Edité par AbcAbc6 3 août 2023 à 21:20:20

Thierry28

3 août 2023 à 19:15:37

AbcAbc6

3 août 2023 à 21:13:21

4 août 2023 à 12:12:07

Bonjour AbcAbc6 comme demandé voici les captures, sinon merci pour vos conseils.

lien de la version finale du site, je suis bloqué sur la page d'accueil :

https://openclassrooms-student-center.github.io/1603881-creez-votre-site-web-avec-html5-et-css3/index.html

et mon résulat :

6 août 2023 à 15:05:46

Merci a tous pour votre aie, en avançant dans le cours j'ai trouvé la solution.

Je met en résolu.

Cours - Créer votre site avec html5 et css3

Cours - Créer votre site avec html5 et css3

Supprimer

Modérer

Signaler le message aux modérateurs