Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Dans ce didacticiel, vous allez créer une page de destination. C’est un moyen très populaire de créer ce que l’on appelle un projet d’une seule page.

Vous apprendrez quelques bonnes techniques:

  • Créer une intro pleine page

  • Utiliser des masques et des ombres

  • Créer une zone de contact

  • Utilisez Google Maps

  • Utiliser des animations

  • Utilisation de la boîte à outils Font Awesome

Étape 1

Semblable au tutoriel précédent, nous commençons par créer la structure de base de notre projet.

Ouvrez ça index.html Fichier dans votre dossier de projet (le dossier dans lequel vous avez décompressé le package MDB) et Collez le code suivant <body> étiqueter.



<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

    

étape 2

Créons maintenant une barre de navigation. Aller à Documents de la barre de navigation et copiez le code pour Barre de navigation de base. Puis collez-le entre les ouvertures <header>balises s.

N’oubliez pas de placer .container dans votre barre de navigation pour centrer les liens.



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color">

  <div class="container">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>

      </ul>
      <!-- Links -->

      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->

  </div>

</nav>
<!--/.Navbar-->

    

étape 3

Nous devons apporter un changement significatif au code de la barre de navigation.

Ajouter la classe .fixed-top à la barre de navigation.



<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">

    

Comme prévu, notre barre de navigation reste en haut de l’écran. Il est toujours visible, même si vous faites défiler votre page vers le bas.

Étape 4

Le moment est venu pour quelque chose de spectaculaire. Créons une intro d’arrière-plan pleine page pour notre page de destination.

Collez ce code sous le barre de navigation et avant de fermer </header> Étiqueter:



<!--Mask-->
<div id="intro" class="view">

  <div class="mask">

  </div>

</div>
<!--/.Mask-->

    

Laissez-moi vous expliquer comment fonctionne le code ci-dessus.

.view est un emballage pour notre papier peint que nous pouvons utiliser pour y ajouter un masque. Grâce à ce masque, nous pouvons rendre notre image plus sombre ou plus claire, ce qui rend votre contenu plus visible.

.mask est l’élément avec absolute Position, qui obscurcit notre image d’arrière-plan. Et parce qu’il recouvre l’image, nous pouvons l’utiliser comme masque et manipuler les couleurs.

Nous avons également défini id="intro" pour le .view Élément. Nous en aurons besoin dans une seconde.

Si vous enregistrez le fichier et actualisez votre navigateur, vous constaterez que rien n’a changé. C’est parce que nous avons besoin de code CSS pour le faire fonctionner.

Tout d’abord, nous utiliserons un fichier CSS distinct pour nos styles personnalisés. Ouvrez le fichier style.css (dans le dossier « css ») et collez le code suivant:



html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    

Réparons height: 100% sur tous les éléments de niveau supérieur de notre image d’arrière-plan, car c’est la seule façon de couvrir tout l’écran avec l’image

Réparons #intro à un chemin d’URL correct pour l’image. Vous pouvez utiliser n’importe quelle image que vous voulez.

Ensuite, nous donnons la valeur cover au background-size Propriété. En conséquence, l’image couvre tout l’espace disponible sur l’écran.

Les préfixes CSS -webkit-, -moz- et -o- Assurez-vous que notre code fonctionne correctement avec tous les navigateurs.

Enregistrez le fichier et laissez la magie opérer. Lorsque vous ouvrez votre navigateur, vous verrez une belle image qui couvre votre intro. Il y a des choses que nous pourrions améliorer, mais nous les aborderons dans la prochaine leçon.

Pour changer le fond d’écran, tout ce que vous avez à faire est de changer cela Chemin de l’URL. Vous pouvez fournir un lien vers l’image sur votre serveur ou un chemin vers le fichier source dans les fichiers de votre projet. par example: url("https://mdbcdn.b-cdn.net/img/imageName.png");

Un dernier petit conseil:

Vous pouvez utiliser n’importe quelle image de votre choix, mais vous devez suivre quelques règles.

Votre image doit être suffisamment grande pour maintenir la qualité, mais aussi petite que possible pour ne pas ralentir le temps de chargement de la page. Nous vous recommandons donc de préparer votre image comme suit:

1. Résolution: 1920px / 1280px

2. Format de fichier JPEG

3. Le fichier sera compressé (vous pouvez utiliser le ACHETER JPG Outil)



Source link

Recent Posts