aide pour une mini site responsive svp

sido
Les bases HTML/CSS

Bonjour, dans le cadre d'un projet pour mon école je réalise un petit site web qui doit être "responsive", mais je rencontre quelques soucis lors du "dé-zoom" de mon projet final, je m'explique:

Mon texte <h2> est mangé par mon logo, les boutons des réseaux sociaux idem par mon texte "<a> à propos</a>", la section services avec mes trois "card" n'est pas bien centrée, et aussi ma section contact

Alors sur le navigateur chrome tout est ok, mais sur firefox et edge, je rencontre ces problèmes malheureusement s'il quelqu’un peut m'aider svp ça serai sympa

merci d'avance.

je vous joint mes codes

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Mon titre</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="toggle" onclick="toggleMenu();"></div>
<section class="banner" id="Accueil">
<div class="imgSidebar">
<img src="img/1.png" />
</div>
<div class="contentBx">

    <img src="img/logo.png" class="circle">

   <div>
      <h2>Mon titre</h2>
      <p style="text-indent:1em">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
        <h1><span> texte texte texte texte </span></h1> <b>texte</b>
      </p>
      <a href="#" class="btn">A propos</a>
    </div>
    <ul class="sci">
      <li>
        <a href="" target="_blank"><img src="img/facebook.png" /></a>
      </li>
      <li>
        <a href="" target="_blank"><img src="img/instagram.png" /></a>
      </li>
    </ul>
  </div>
</section>
<section class="about" id="about">
<div class="title white">
  <h2>A propos</h2>
</div>
<div class="content">
  <div class="textBx">
    <p style="text-indent:1em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="imgBx">
    <img src="img/2.png">
  </div>
</div>

</section>
<section class="services" id="services">
<div class="title">
<h2>Nos Services</h2>

</div>
<div class="container">
    <div class="card">
        <div class="imgBx">
            <img src="img/3.jpg">
        </div>
        <div class="content">
            <h3>Accompagnement</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="card">
        <div class="imgBx">
            <img src="img/4.jpg">
        </div>
        <div class="content">
            <h3>Ventes</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="card">
        <div class="imgBx">
            <img src="img/5.jpg">
        </div>
        <div class="content">
            <h3>Location</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        </div>
    </div>
</div>

</section>
<section class="contact" id="contact">
<div class="title white">
<h2>Nous contacter</h2>
<div class="box">
<div class="contact form">
<h3>Envoyer un message</h3>
<form>
<div class="formBx">
<div class="row50">
<div class="inputBox">
<span>Nom</span>
<input type="text" placeholder="Votre nom">
</div>
<div class="inputBox">
<span>Prénom</span>
<input type="text" placeholder="Votre prénom">
</div>
</div>
<div class="row50">
<div class="inputBox">
<span>Email</span>
<input type="text" placeholder="Votre Email">
</div>
<div class="inputBox">
<span>Votre Mobile</span>
<input type="text" placeholder="Votre numéro de mobile">
</div>
</div>
<div class="row100">
<div class="inputBox">
<span>Message</span>
<textarea placeholder="Ecrire votre message ici..."></textarea>
</div>
</div>
<div class="row100">
<div class="inputBox">
<input type="submit" value="Envoyer">
</div>
</div>
</div>
</form>
</div>
<div class="contact info">
<h3>Contact Info</h3>
<div class="infoBox">
<div>
<span><ion-icon name="location"></ion-icon></span>
<a> adresse<br>France</a>
</div>
<div>
<span><ion-icon name="mail"></ion-icon></span>
<a href="">test@gmail.com</a>
</div>
<div>
<span><ion-icon name="call"></ion-icon></span>
<a href="tel:+3300000">+33 000000</a>
</div>
<ul class="sci2">
<li><a href="" target="_blank"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="" target="_blank"><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>

    </div>
  </div>
  <div class="contact map">
   <iframe src=""></iframe>
  </div>
</div>

</section>

<div class="copyright">
<p>Copyright © 20xx</p>

</div>

<div class="sidebar">
<ul class="menu">
  <li><a href="#Accueil" onclick="toggleMenu();">Accueil</a></li>
  <li><a href="#about" onclick="toggleMenu();">A propos</a></li>
  <li><a href="#services" onclick="toggleMenu();">Services</a></li>
  <li><a href="#contact" onclick="toggleMenu();">Contact</a></li>
</ul>

</div>

<script>
  function toggleMenu() {
    const menuToggle = document.querySelector(".toggle");
    const sidebar = document.querySelector('.sidebar');
    menuToggle.classList.toggle("active");
    sidebar.classList.toggle('active');
  }
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

et voici mon style.css

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    }
    .toggle {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #000 url(img/menu.png);
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1000;
    }
    .toggle.active {
    background: #000 url(img/close.png);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
    }
    section {
    padding: 100px;
    min-height: 100vh;
    }

.banner {
position: relative;
width: 100%;
min-height: 100vh;
}
.banner .imgSidebar {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 100%;
}
.banner .imgSidebar img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.banner .contentBx,
.sidebar {
position: absolute;
top: 0;
right: 0;
width: calc(100% - 500px);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 100px;
}

.banner .contentBx h1 {
font-size: 1.5em;
color: #333;
font-weight: 300;
}
.circle {
position: absolute;
top: 20px;
left: 100px;
overflow: hidden;
width: 140px;
height: 140px;
float: left;
border-radius: 20px;
padding: 0 5px;
}

.banner .contentBx h1 span {
color: #00bcd4;
font-size: 1em;
font-weight: 700;
}
.banner .contentBx h2 {
font-size: 3em;
color: #333;
line-height: 1em;
margin-top: 160px;
}
p {
font-size: 1.1em;
margin: 20px 0;
font-weight: 300;
}

.btn {
background: #000;
color: #fff;
padding: 10px 30px;
display: inline-block;
text-decoration: none;
font-weight: 500;
letter-spacing: 2px;
border-radius: 10px;
}
.sidebar {
position: fixed;
background: #000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
padding: 40px;
z-index: 100;
right: -100%;
}
.sidebar.active {
right: 0;
}
.sidebar ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sidebar ul li {
list-style: none;
}
.sidebar ul li a {
color: #fff;
text-decoration: none;
font-size: 2em;
margin: 10px 0;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.sidebar ul li a:hover {
color: #00bcd4;
}
.sci {
position: absolute;
left: 100px;
bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.sci li {
margin-right: 10px;
list-style: none;
}
.sci li img {
transform: scale(0.8);
opacity: 0.7;
}
.sci li img:hover {
opacity: 2;
}
.title {
width: 100%;
text-align: center;
}
.title h2 {
position: relative;
color: #00bcd4;
font-size: 1.8em;
font-weight: 700;
letter-spacing: 1px;
}
.title p {
max-width: 700px;
display: inline-block;
}
.title h2::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
width: 60px;
height: 4px;
background: #000;
}
.title.white h2,
.title.white p {
color: #fff;
}
.title.white h2::before {
background: #fff;
}
.about {
background: #000;
}
.about .content {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.about .content .textBx {
min-width: 49%;
width: 49%;
}
.about .content .textBx p {
color: #fff;
}
.about .content .imgBx {
margin-left: 40px;
margin-top: 40px;
}
.about .content .imgBx img {
max-width: 100%;
}

.container {
/ width: 1000px;/
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
}
.card {
position: relative;
width: 300px;
height: 550px;
/background: #000;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);/
border-radius: 20px;
margin: 10px;
}
.card .imgBx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
}
.card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
border-radius: 20px;
}
.card:hover .imgBx img {
opacity: 0;
border-radius: 20px;
}
.card .content {
position: absolute;
bottom: 20px;
left: 10%;
width: 80%;
height: 60px;
background: #fff;
transition: 0.5s;
overflow: hidden;
border-radius: 20px;
padding: 15px;
box-sizing: border-box;
}
.card:hover .content {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
.card .content h3 {
margin: 0;
padding: 0;
font-size: 20px;
}
.card .content p {
margin: 10px 0 0;
padding: 0;
opacity: 0;
line-height: 1.2em;
transition: 0.5s;
text-align: center;
}
.card:hover .content p {
opacity: 1;
transition-delay: 0.5s;
}

.contact {
background: #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.15);
}
.contactus {
position: relative;
width: 100%;
padding: 40px 100px;
}
.contactus .title {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.contactus .title h2 {
color: #fff;
font-weight: 500;
}
.form {
grid-area: form;
}
.info {
grid-area: info;
}
.map {
grid-area: map;
}
.box {
display: grid;
grid-gap: 20px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 5fr 4fr;
grid-template-areas:
"form info"
"form map";
margin-top: 20px;
}

.contact h3 {
color: #fff;
font-weight: 500;
font-size: 1.4em;
margin-bottom: 10px;
}
/ FormBx /
.formBx {
position: relative;
width: 100%;
}
.formBx .row50 {
display: flex;
gap: 20px;
}
.inputBox {
display: flex;
flex-direction: column;
margin-bottom: 10px;
width: 50%;
}
.formBx .row100 .inputBox {
width: 100%;
}
.formBx .inputBox span {
color: #00bcd4;
margin-top: 10px;
margin-bottom: 5px;
font-weight: 500;
}
.formBx .inputBox input {
padding: 10px;
font-size: 1.1em;
outline: none;
border: 1px solid #333;
}
.formBx .inputBox textarea {
padding: 10px;
margin-bottom: 10px;
font-size: 1.1em;
resize: none;
min-height: 220px;
outline: none;
border: 1px solid #333;
}
.formBx .inputBox input[type="submit"] {
background: #00bcd4;
color: #fff;
font-size: 1.1em;
max-width: 120px;
font-weight: 500;
border: none;
outline: none;
cursor: pointer;
padding: 14px 15px;
border-radius: 20px;
}
.formBx ::placeholder {
color: #999;
}
/ info Box /
.info {
background: #fff;
}
.info h3 {
color: #00bcd4;
}
.infoBox div {
display: flex;
align-items: center;
margin-bottom: 10px;
border-radius: 20px;
}
.infoBox div span {
min-width: 40px;
height: 40px;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
background: #00bcd4;
color: #fff;
font-size: 1.5em;
border-radius: 50%;
}
.infoBox div p,
.infoBox div a {
text-decoration: none;
color: #000;
font-size: 1.1em;
}
.sci2 {
margin-top: 40px;
display: flex;
}
.sci2 li {
list-style: none;
margin-right: 15px;
}
.sci2 li a {
font-size: 2em;
display: flex;
color: #00bcd4;
}
.sci2 li a:hover {
color: #000;
}

.map {
padding: 0;
}
.map iframe {
width: 100%;
height: 100%;
border: none;
}
.copyright {
color: #fff;
background: #111;
text-align: center;
padding: 10px;
}
.copyright p {
margin: 0;
font-size: 16px;
}

@media (max-width: 991px) {

.banner .imgSidebar {
display: none;
}
.banner .contentBx,
.sidebar {
width: 100%;
padding: 40px;
}
.circle {
left: 40px;
}
.toggle {
right: 40px;
}

.content {
max-width: 100%;
width: 100%;
margin: 10px 0;
}
.btn {
margin-bottom: 60px;
}
.sci {
left: 40px;
}
section {
padding: 40px;
min-height: 100vh;
}
.about .content {
flex-direction: column;
}
.about .content .textBx {
min-width: 100%;
width: 100%;
}
.about .content {
margin-top: 0;
}
.about .content .imgBx {
margin-left: 0;
}

.contactus {
padding: 20px;
}
.box {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"form"
"info"
"map";
}
.formBx .row50 {
flex-direction: column;
gap: 0;
}
.inputBox {
width: 100%;
}
.map {
height: 300px;
}
}

Aucune réponse