allan00958 a écrit :
Hello,
J'ai rajouté une position relative à la balise <main>.
Je pense que le souci vient de la div avec la classe 'loader fondu-out'
A tester...
Bonjour,
Désolé pour la réponse tardive j'étais très occupé et je n'ai plus toucher au site j'ai essayé d'enlever la div loader mais j'ai toujours le même souci sur la partie responsive sur mobile
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Maquette</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--barre de navigation-->
<header role="header">
<div class="nav">
<ul class="nav-ul">
<li><a href="index.html">Accueil</a> </li>
<li><a href="histoire.html">Histoire</a> </li>
<li><a href="contact.html">Contact</a> </li>
</ul>
<div class="icon"><i class="fas nav fa-bars"></i></div>
</div>
</header>
<main>
<!--écran de chargement-->
<div class="loader">
<span class="lettre">C</span>
<span class="lettre">H</span>
<span class="lettre">A</span>
<span class="lettre">R</span>
<span class="lettre">G</span>
<span class="lettre">E</span>
<span class="lettre">M</span>
<span class="lettre">E</span>
<span class="lettre">N</span>
<span class="lettre">T</span>
</div>
<!--menu responsive-->
<div class="comble"></div>
<div class="menu">
<ul>
<li><a href="index.html">Accueil</a> </li>
<li><a href="histoire.html">Histoire</a> </li>
<li><a href="contact.html">Contact</a> </li>
</ul>
</div>
<div class="haut">
<img class="façade" src="./Images/david-tapia-san-martin-NgiEm-SbXZg-unsplash.jpg" alt="façade Sacré-Cœur">
<br>
<br>
<div class="text">
<h1>Sacré coeur</h1>
<br>
<p class="textehaut">The Basilica of the Sacred Heart of Montmartre, known as the Basilica of the National Vow, located at the top of the Butte Montmartre, in the Clignancourt district of the 18? district of Paris, is a religious building..
</p>
</div>
<br>
<br>
<img src="./Images/christian-burri-ieYJRpk4wXQ-unsplash.jpg" alt="Sacré-Cœur">
</div>
</main>
<!--Footer pied de page-->
<footer>
<div class="footer">
<div class="col">
<h1>Information</h1>
<ul>
<li>Tarif</li>
<li>Horaire</li>
<li>Plan d'accés</li>
</ul>
</div>
<div class="col">
<h1>A propos</h1>
<ul>
<li>Règlement</li>
<li>Condition</li>
<li><a href="contact.html">Contact</a> </li>
</ul>
</div>
<div>
<p cass="copyright">
© Sacré coeur
</p>
</div>
</div>
</footer>
</body>
<!-- script JavaScript-->
<script src="./javaScript/script.js"></script>
</html>
*{
margin:0;
padding:0;
}
html, body {
background-color: rgb(41, 41, 41);
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x:hidden;
}
main {
flex-grow: 1;
position: relative;
}
header {
width: 100%;
height: 100px;
text-align: center;
}
.icon {
position: absolute;
right: 15px;
top: 18px;
display: none;
font-size: 2.4em;
}
.nav{
color: rgb(255, 255, 255);
list-style: none;
padding: 20px 0 20px 0;
text-align: center;
}
@media only screen and (max-width:720px){
header .icon {
display: block;
}
}
.menu{
transition:all 0.4s ease;
position: absolute;
top:0;
right: -250px;
height: 100%;
width: 250px;
background: rgb(14, 14, 14);
}
.active{
transition:all 0.4s ease;
right:0px;
}
.menu a{
text-decoration: none;
color: white;
width: 100%;
display: block;
text-transform: uppercase;
padding:20px 0px;
text-align: center;
}
ul{
list-style: none;
}
menu a:hover{
background-color: blue;
transition: all 0.3s ease;
}
.nav li{
display: inline-block;
padding: 0 25px 0 25px;
}
.nav li a{
text-decoration: none;
color: rgb(255, 255, 255);
}
.nav li a:hover{
color: #c1c1c1;
}
.nav{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.textehaut{
display: flex;
flex-direction: column;
justify-content: center;
color: white;
}
.façade{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
object-fit: cover;
}
.texte{
color: #ffffff;
}
h1{
text-align: center;
color: white;
}
p{
text-align: center;
}
.texte{
text-align: center;
float: right;
width: 490px;
height: 370px;
margin-top: -450px;
}
/* loader */
.loader{
position: absolute;
width: 50%;
height: 50%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.lettre{
color:gray;
font-size: 80px;
letter-spacing: 15px;
margin-bottom: 150px;
animation: flash 1.2s linear infinite;
}
/* Animmation */
@keyframes flash {
0% {
color: #fff900;
text-shadow: 0 0 7px #fff900;
}
90%{
color: #484848;
text-shadow: none;
}
100% {
color: #fff900;
text-shadow: 0 0 7px #fff900;
}
}
.lettre:nth-child(1) {
animation-delay: 0.1s;
}
.lettre:nth-child(2) {
animation-delay: 0.2s;
}
.lettre:nth-child(3) {
animation-delay: 0.3s;
}
.lettre:nth-child(4) {
animation-delay: 0.4s;
}
.lettre:nth-child(5) {
animation-delay: 0.5s;
}
.lettre:nth-child(6) {
animation-delay: 0.6s;
}
.lettre:nth-child(7) {
animation-delay: 0.7s;
}
.lettre:nth-child(8) {
animation-delay: 0.8s;
}
.lettre:nth-child(9) {
animation-delay: 0.9s;
}
.lettre:nth-child(10) {
animation-delay: 1s;
}
/* end of*/
.fondu-out{
opacity: 0;
transition: opacity 0.4s ease-out;
}
.texteequipe{
text-align: center;
}
.photoequipe {
margin-left : 150px;
}
.carte{
width: 200px;;
}
.photoequipe{
text-align: center;
}
.milieu img{
width:840px;
height:840px;
}
.texte{
float: left;
margin-left: 55px;
}
/*footer */
.footer {
background-color: #070617;
width: 100%;
height: 220px;
padding: 50px 0 30px;
}
.footer .col {
width: 190px;
height: auto;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0px 20px 20px 20px;
}
.footer .col h1 {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 12px;
line-height: 17px;
padding: 20px 0px 5px 0px;
color: rgba(255,255,255,0.2);
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.250em;
}
.footer .col ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer .col ul li {
color: #999999;
font-size: 14px;
font-family: inherit;
font-weight: bold;
padding: 5px 0px 5px 0px;
cursor: pointer;
}
.social ul li {
display: inline-block;
text-decoration: none;
padding-right: 5px !important;
}
a{
text-decoration: none;
color:gray;
}
.footer .col ul li:hover {
color: #ffffff;
transition: .1s;
-webkit-transition: .1s;
-moz-transition: .1s;
}
.copyright{
margin-top: 202px;
text-align: center;
color: white;
}
/* responsive */
@media only screen and (min-width: 1280px) {
.contain {
width: 1100px;
margin: 0 auto;
}
.haut img{
max-width: 100%;
height: auto;
margin-right: 70px;
}
}
@media only screen and (max-width: 1139px) {
.contain .social {
width: 1000px;
}
.social h1 {
margin: 0px;
}
}
@media only screen and (max-width: 948px) {
.footer .col {
width: 33%;
}
.footer .col h1 {
font-size: 14px;
}
.footer .col ul li {
font-size: 13px;
}
.nav-ul{
display: none;
}
.haut img{
max-width: 100%;
height: auto;
text-align: center;
}
.comble{
position:absolute;
top:0;
left:0;
height: 100%;
right: 250px;
}
}
Merci à vous pour votre aide
