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;
}
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;
}