justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Les Exemples justify-content: 

div#main {
  display: flex;
  justify-content:flex-start; 
}
div#main {
  display: flex;
  justify-content:flex-end; 
}
div#main {
  display: flex;
  justify-content:center; 
}
div#main {
  display: flex;
  justify-content:space-between; 
}
div#main {
  display: flex;
  justify-content:space-around; 
}
div#main {
  display: flex;
  justify-content:space-around; 
}
div#main {
  display: flex;
  justify-content:initial; 
}

BTN

 1BTN
<div class= »btn>
 <button type=« button «  class=« btn btn-primary mr-2 »>texte du bouton</button>
   </div>

Groupe 2 BTN

 <div class=« btn-group mr-4 »>
                <button type=« button «  class=« btn btn-primary mr-2 »>texte du bouton</button>
                <button type=« button » class=« btn btn-primary mr-2 »>texte du bouton</button>
            </div>

AUTRE BTN

<div id=« btn-1 »>
                                <button id=« a-propos » onclick=« window.location.href = ‘mailto:adresse@info.fr’;« ><span class=« fas fa-paper-plane »></span> Titre du BTN </button>
                            </div>  
                        </div>

OU

<div id=« btn-3 » class=« col-12 »>
                                        <a href=« # » target=« _blank » class=« btn btn-primary »><span
                                                class=« fas fa-globe »></span> Visiter le Site</a>
                                    </div>

rendre le Menu fixe dans un header

header{
  background-color: white;
  height: 70px;
  padding-right: 5px;
  z-index: 10;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  }

Insserer du texte par dessus une video ou une photo

  .titre-video{
    top:70px;
    position: relative;
    z-index:12;
    color: white;
    font-size: 5rem;
    font-weight: bold;
  }

integration Audio et Video Classic

<audio src="exemple.ogg" controls></audio>
<video src="exemple.webm" width="375" height="280" controls></video>

width et height (uniquement pour <video>)
Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son

autoplay
Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page

Position Absolute 

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

@import 

@import « mobstyle.css » screen and (max-width: 768px);

Exemples @media screen 

 @media screen and (max-width: 768px) {
    .titre-video{
      font-size: 2rem;  
      top:30px
    }
    
  }
  @media screen and (max-width: 640px) {
    .titre-video{
      font-size: 1rem;  
      top:30px
    }
    
  }

Rendre une vidéo Youtube responsive

Intégrer le code avec une classe

<div class= »video-responsive »>
<iframe width= »560″ height= »315″ src= »https://www.youtube.com/embed/sPvqo6QliaY » frameborder= »0″ allow= »accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture » allowfullscreen></iframe>
</div>

CSS

.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}