Place an h2 title above my cart?

cdevl3749 · March 24, 2024, 2:36pm

Good morning,

I cannot place a title -<h2> above my cards, it is placed to the left of my cards.

Can you help me ?

thank you

index.html

<body>
    <header class="header">
        <a href="#" class="Logo" style="font-size: 2.5em" ;>Test</a>
        <nav class="navbar">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Tarifs</a>
            <a href="#team">Team</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section class="Home" id="home">
        <!-**-<h2 class="all-heading">SIMPLE <span>RAPIDE</span></h2>**-->
        <div class="container">

            <div class="box" style="--clr:#89ec5b;">
                <div class="content">
                    <div class="icon"><ion-icon name="receipt-outline"></ion-icon></div>
                    <div class="text">
                        <h3>Billing</h3>
                        <p>Tous les documents en un seul endroit, avec une disponibilité illimitée.</p>
                        <p>Simple & Rapide !</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#eb5ae5;">
                <div class="content">
                    <div class="icon"><ion-icon name="sync-outline"></ion-icon></div>
                    <div class="text">
                        <h3>System</h3>
                        <p>Tout le monde peut utiliser cette application en ligne.</p>
                        <p>Les fonctions les plus utilisées sont intégrées</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#5b98eb;">
                <div class="content">
                    <div class="icon"><ion-icon name="rocket-outline"></ion-icon></div>
                    <div class="text">
                        <h3>Application</h3>
                        <p>100% en ligne - Aucune installation requise.</p>
                        <p>Disponible sur toutes les plateformes.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

style.css

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

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    color: #fff;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: #000;
    color: #fff;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.Logo {
    font-size: 2.1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-left: 4rem;
    font-size: 1.7rem;
    transition: .2s;
}

.navbar a:hover,
.navbar a:active {
    color: #ef6e12;
}

section {
    min-height: 100vh;
    padding: 10rem 9% 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.all-heading {
    display: flex;
    font-size: 60px;
    color: #ef6e12;
}

.About,
.Team {
    background: #111;
}

/*card*/
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 60px 0;
    gap: 60px;
}

.container .box {
    position: relative;
    width: 300px;
    height: 350px;
    background: #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .box::before {
    content: '';
    position: absolute;
    inset: -10px 50px;
    border-top: 4px solid var(--clr);
    border-bottom: 4px solid var(--clr);
    z-index: -1;
    transform: skewY(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::before {
    transform: skewY(0deg);
    inset: -10px 40px;
}

.container .box::after {
    content: '';
    position: absolute;
    inset: 60px -10px;
    border-left: 4px solid var(--clr);
    border-right: 4px solid var(--clr);
    z-index: -1;
    transform: skew(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::after {
    transform: skew(0deg);
    inset: 40px -10px;
}

.container .box .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container .box .content .icon {
    color: var(--clr);
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 4px #2e2e2e,
        0 0 0 6px var(--clr);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    background: #2e2e2e;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .icon {
    background: var(--clr);
    color: #2e2e2e;
    box-shadow: 0 0 0 4px #2e2e2e,
        0 0 0 300px var(--clr);
}

.container .box .content .text h3 {
    font-size: 2.5em;
    color: #fff;
    font-weight: 500;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text h3 {
    color: #2e2e2e;
}

.container .box .content .text p {
    font-size: 1.5em;
    color: #999;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text p {
    color: #2e2e2e;
}

.container .box .content .text a {
    position: relative;
    font-size: 1.6em;
    background: var(--clr);
    color: #2e2e2e;
    padding: 8px 15px;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text a {
    background: #2e2e2e;
    color: var(--clr);
}

PaulOB · March 24, 2024, 3:14pm

Set flex-direction:column on your section.

section {
  min-height: 100vh;
  padding: 10rem 9% 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}

Note that it would be better to give your section a class and use the class instead because your method means you can’t use any other sections in your site unless they are all styled the same which is unlikely.

cdevl3749 · March 24, 2024, 4:03pm

Many thanks to you for your help.
I don’t understand why when I do it locally I get this.

Do you have an idea ?

PaulOB · March 24, 2024, 4:10pm

Did you add the rule I gave you correctly?

flex-direction:column

That was added to the section css.

cdevl3749 · March 24, 2024, 4:26pm

oui je l’ai bien rajouter comme ceci :

PaulOB · March 24, 2024, 4:42pm

English please

Your fiddle now looks like this:

Isn’t that exactly what you wanted?

cdevl3749 · March 24, 2024, 5:58pm

Many thanks for your help,
it’s weird locally, I don’t have the same thing

PaulOB · March 24, 2024, 7:57pm

Do you mean in your fiddle or have you another local version that you are looking at?

If you have another version that’s not in a fiddle then copy and paste the code here again and I’ll see if there’s an error somewhere.

You should be seeing the same as me in your fiddle unless you are looking at a previous version.

Mistakes like this are often typos or unsaved files or if online can be cache issues.

cdevl3749 · March 24, 2024, 8:36pm

Good evening, Thanks for your help. here is my code:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B.S.A Onligne</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/team.css">
</head>

<body>
    <header class="header">
        <a href="#" class="Logo" style="font-size: 2.5em" ;>B.S.A company</a>
        <nav class="navbar">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Tarifs</a>
            <a href="#team">Team</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section class="Home" id="home">
        <!--<h2 class="all-heading">SIMPLE <span>RAPIDE</span></h2>-->
        <div class="container">

            <div class="box" style="--clr:#89ec5b;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="receipt-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>Billing</h3>
                        <p>Tous les documents en un seul endroit, avec une disponibilité illimitée.</p>
                        <p>Simple & Rapide !</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#eb5ae5;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="sync-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>System</h3>
                        <p>Tout le monde peut utiliser cette application en ligne.</p>
                        <p>Les fonctions les plus utilisées sont intégrées</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#5b98eb;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="rocket-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>Application</h3>
                        <p>100% en ligne - Aucune installation requise.</p>
                        <p>Disponible sur toutes les plateformes.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="About" id="about">
        <!--<h2 class="all-heading">Pour les <span>indépendants et PME</span></h2>-->
        <div class="box">
            <div class="content">
                <h3 style="text-align: center; font-size: 3.5em;">About US</h3><br>
                <img src="img/01.png" style="display: block; margin: auto; margin-left: auto; border-radius: 15px; 
                margin-bottom: 15px; width: 35%; height: auto;">
                <div class="text"><br>
                    <p style="font-size: 1.7em; text-align: center;">B.S.A est un logiciel de facturation en ligne
                        idéal pour créer et envoyer des factures détaillées au moment adéquat.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Le partage de documents créés en quelques
                        secondes.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Utilisez le sur vos téléphones mobiles.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Il peut être utilisé à travers le monde.</p>
                </div>
            </div>
        </div>

    </section>
    <section class="Services" id="services">
        <!--<h2 class="all-heading">Services <span>Section</span></h2>-->
    </section>
    <section class="Team" id="team">
        <!--<h2 class="all-heading">Our <span>Team</span></h2>-->
        <section class="team">
            <div class="center">
                <h1>Our Team</h1>
            </div>

            <div class="team-content">
                <div class="box">
                    <img src="img/01.png">
                    <h3>Steph Karl</h3>
                    <h5>SEO Manager</h5>
                    <div class="icons">
                        <a href="#"><i class="ri-twitter-fill"></i></a>
                        <a href="#"><i class="ri-facebook-box-fill"></i></a>
                        <a href="#"><i class="ri-instagram-fill"></i></a>
                    </div>
                </div>

                <div class="box">
                    <img src="img/02.png">
                    <h3>Paul Mura</h3>
                    <h5>Developer</h5>
                    <div class="icons">
                        <a href="#"><i class="ri-twitter-fill"></i></a>
                        <a href="#"><i class="ri-facebook-box-fill"></i></a>
                        <a href="#"><i class="ri-instagram-fill"></i></a>
                    </div>
                </div>

                <div class="box">
                    <img src="img/03.png">
                    <h3>Nora Pits</h3>
                    <h5>Web designer</h5>
                    <div class="icons">
                        <a href="#"><i class="ri-twitter-fill"></i></a>
                        <a href="#"><i class="ri-facebook-box-fill"></i></a>
                        <a href="#"><i class="ri-instagram-fill"></i></a>
                    </div>
                </div>

                <div class="box">
                    <img src="img/04.png">
                    <h3>Samia Hida</h3>
                    <h5>IT consultant</h5>
                    <div class="icons">
                        <a href="#"><i class="ri-twitter-fill"></i></a>
                        <a href="#"><i class="ri-facebook-box-fill"></i></a>
                        <a href="#"><i class="ri-instagram-fill"></i></a>
                    </div>
                </div>

            </div>
        </section>
    </section>
    <section class="Contact" id="contact">
        <!--<h2 class="all-heading">Contact <span>Us</span></h2>-->

    </section>
    <script src="js/index.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>

</html>

style.css

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

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    color: #fff;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: #000;
    color: #fff;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.Logo {
    font-size: 2.1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-left: 4rem;
    font-size: 1.7rem;
    transition: 0.2s;
}

.navbar a:hover,
.navbar a:active {
    color: #ef6e12;
}

section {
    min-height: 100vh;
    padding: 10rem 9% 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.all-heading {
    display: flex;
    font-size: 60px;
    color: #ef6e12;
}

.About,
.Team {
    background: #111;
}

/*card*/
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 60px 0;
    gap: 60px;
}

.container .box {
    position: relative;
    width: 300px;
    height: 350px;
    background: #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .box::before {
    content: "";
    position: absolute;
    inset: -10px 50px;
    border-top: 4px solid var(--clr);
    border-bottom: 4px solid var(--clr);
    z-index: -1;
    transform: skewY(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::before {
    transform: skewY(0deg);
    inset: -10px 40px;
}

.container .box::after {
    content: "";
    position: absolute;
    inset: 60px -10px;
    border-left: 4px solid var(--clr);
    border-right: 4px solid var(--clr);
    z-index: -1;
    transform: skew(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::after {
    transform: skew(0deg);
    inset: 40px -10px;
}

.container .box .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container .box .content .icon {
    color: var(--clr);
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 6px var(--clr);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    background: #2e2e2e;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .icon {
    background: var(--clr);
    color: #2e2e2e;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 300px var(--clr);
}

.container .box .content .text h3 {
    font-size: 2.5em;
    color: #fff;
    font-weight: 500;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text h3 {
    color: #2e2e2e;
}

.container .box .content .text p {
    font-size: 1.5em;
    color: #999;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text p {
    color: #2e2e2e;
}

.container .box .content .text a {
    position: relative;
    font-size: 1.6em;
    background: var(--clr);
    color: #2e2e2e;
    padding: 8px 15px;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text a {
    background: #2e2e2e;
    color: var(--clr);
}

index.js

let section = document.querySelectorAll('section')
let navLink = document.querySelectorAll('header nav a')
window.onscroll = () => {
    section.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id')
        if (top > offset && top < offset + height) {
            navLink.forEach(links => {
                links.classList.remove('active')
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active')
            })
        }
    })
}

team.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
    text-decoration: none;
}

.team {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.team-content {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    align-items: center;
    gap: 2rem;
    text-align: center;
    margin-top: -5rem;
}

.team-content img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 15px;
}

.center h1 {
    position: relative;
    margin-top: -12rem;
    color: #fff;
    font-size: 4rem;
    text-align: center;
}

.box {
    padding: 16px;
    border-radius: 15px;
    transition: all .38s ease;
}

.box h3 {
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.box h5 {
    font-size: 15px;
    font-weight: 600;
    color: #b7b4bb;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.icons i {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    margin: 0 8px;
    transition: all .38s ease;
}

.icons i:hover {
    transform: scale(1.2);
}

.box:hover {
    transform: translateY(-10px);
    cursor: pointer;
}

@media(max-width: 1240px) {
    .team {
        width: 100%;
        height: auto;
        padding: 90px 2%;
    }

    .center h1 {
        font-size: 3.2rem;
    }
}

PaulOB · March 25, 2024, 1:36pm

That seems to be working apart from that you have nested the team section twice and the active state for the nav doesn’t seem defined. I’ve adjusted that section of html and removed the comments from around all the h2s and it seems to work as I would expect/

I changed the header to position:sticky rather than fixed which saves having to use a magic number padding to keep the first content clear. I also added in the active class for the nav to show as you scroll. i also added a scroll-margin-top to the section to stop it sliding under the nav when clicked from the top menu.

cdevl3749 · March 25, 2024, 5:53pm

Good morning,

Thank you very much, it works now and I just have one problem left in the team section, I would like to bring up the title vis vis des carts
How should I do it ?

Many thanks again for your help.

PaulOB · March 25, 2024, 8:01pm

Remove the negative margin-top from .team-content.

Here at the bottom I have shown it in comments:


.team-content {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    align-items: center;
    gap: 2rem;
    text-align: center;
  /*  margin-top: -5rem;*/
}

Remove that last line.

cdevl3749 · March 25, 2024, 9:01pm

I deleted this line and it works on a screen larger than my laptop, the result does not work, what should I do to make it work on a larger screen?

PaulOB · March 26, 2024, 7:29am

I’ve just noticed that you have two headings on your “Our Team” section. One is the h2 which is the same as the others and is correct. However you also have underneath the h2 heading an h1 heading which is incorrect.

I’ve commented it out for now as it makes no sense and semantically you cannot have an h1 in that section as and h2 should be followed by an h3 in the same context, I also note that the h1 has a negative margin top of -12rem which is what causes the overlap. That negative margin is also nonsense and should be removed. When you start using magic numbers like that then you can guess that its not right. Your CSS needs to be more foolproof than relying on a made up number.

    <h2 class="all-heading">Our <span>Team</span></h2>
    <!-- <div class="center">
      <h1>Our Team</h1>
    </div> -->

The div class=“centre” around the h1 is also unnecessary as it does nothing and has no styles so is just a useless element.

With that code removed the page works as I would expect.

If indeed you do want another heading under the h2 then it should be an h3 and with no negative margin as its not needed in my example.

cdevl3749 · March 26, 2024, 4:34pm

Good morning,
Many thanks for your help and advice.

Its working now.

I would like to integrate a simple footer like this one that I put below the problem is new css how can I integrate this footer into my existing code?

footer code

 <footer>
    <div class="footerContainer">
        <div class="socialIcons">
            <a href=""><i class="fa-brands fa-facebook"></i></a>
            <a href=""><i class="fa-brands fa-instagram"></i></a>
            <a href=""><i class="fa-brands fa-twitter"></i></a>
            <a href=""><i class="fa-brands fa-google-plus"></i></a>
            <a href=""><i class="fa-brands fa-youtube"></i></a>
        </div>
        <div class="footerNav">
            <ul><li><a href="">Home</a></li>
                <li><a href="">News</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">our Team</a></li>
            </ul>
        </div>
        
    </div>
    <div class="footerBottom">
        <p>Copyright &copy;2023; Designed by <span class="designer">Noman</span></p>
    </div>
</footer>

footer.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
footer{
    background-color: #111;
}
.footerContainer{
    width: 100%;
    padding: 70px 30px 20px ;
}
.socialIcons{
    display: flex;
    justify-content: center;
}
.socialIcons a{
    text-decoration: none;
    padding:  10px;
    background-color: white;
    margin: 10px;
    border-radius: 50%;
}
.socialIcons a i{
    font-size: 2em;
    color: black;
    opacity: 0,9;
}
/* Hover affect on social media icon */
.socialIcons a:hover{
    background-color: #111;
    transition: 0.5s;
}
.socialIcons a:hover i{
    color: white;
    transition: 0.5s;
}
.footerNav{
    margin: 30px 0;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}
.footerNav ul li a{
    color:white;
    margin: 20px;
    text-decoration: none;
    font-size: 1.3em;
    opacity: 0.7;
    transition: 0.5s;

}
.footerNav ul li a:hover{
    opacity: 1;
}
.footerBottom{
    background-color: #000;
    padding: 20px;
    text-align: center;
}
.footerBottom p{
    color: white;
}
.designer{
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    margin: 0px 5px;
}
@media (max-width: 700px){
    .footerNav ul{
        flex-direction: column;
    } 
    .footerNav ul li{
        width:100%;
        text-align: center;
        margin: 10px;
    }
    .socialIcons a{
        padding: 8px;
        margin: 4px;
    }
}

PaulOB · March 26, 2024, 6:22pm

It looks like you can just plug it straight in and go.

What problems were you having?

Try not to keep duplicating code in each sections css. You repeated the default rules a few times.

* {
  margin: 0;
  padding: 0;
}

You don’t need to keep doing that as it should be done once at the top of the page with the general styles. If you keep repeating it then indeed it may overwrite other things that you have set up.

cdevl3749 · March 26, 2024, 7:08pm

I tried to integrate the footer as well as the price section and it doesn’t work I have the footer which is at the bottom left and the price section which is too big and everything is poorly set up
and in the team section I no longer have the social network icon.
I show you all my code:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B.S.A Onligne</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/team.css">
    <link rel="stylesheet" href="css/price.css">
</head>

<body>
    <header class="header">
        <a href="#" class="Logo" style="font-size: 2.5em" ;>B.S.A company</a>
        <nav class="navbar">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Tarifs</a>
            <a href="#team">Team</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section class="Home" id="home">

        <h2 class="all-heading">Simple <span> Rapide</span></h2>
        <div class="container">

            <div class="box" style="--clr:#89ec5b;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="receipt-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>Billing</h3>
                        <p>Tous les documents en un seul endroit, avec une disponibilité illimitée.</p>
                        <p>Simple & Rapide !</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#eb5ae5;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="sync-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>System</h3>
                        <p>Tout le monde peut utiliser cette application en ligne.</p>
                        <p>Les fonctions les plus utilisées sont intégrées</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="box" style="--clr:#5b98eb;">
                <div class="content">
                    <div class="icon">
                        <ion-icon name="rocket-outline"></ion-icon>
                    </div>
                    <div class="text">
                        <h3>Application</h3>
                        <p>100% en ligne - Aucune installation requise.</p>
                        <p>Disponible sur toutes les plateformes.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="About" id="about">
        <h2 class="all-heading">About<span>US</span></h2>
        <div class="box">
            <div class="content">
                <!--<h3 style="text-align: center; font-size: 3.5em;">About US</h3><br>-->
                <img src="img/01.png" style="display: block; margin: auto; margin-left: auto; border-radius: 15px; 
                margin-bottom: 15px; width: 35%; height: auto;">
                <div class="text"><br>
                    <p style="font-size: 1.7em; text-align: center;">B.S.A est un logiciel de facturation en ligne
                        idéal pour créer et envoyer des factures détaillées au moment adéquat.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Le partage de documents créés en quelques
                        secondes.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Utilisez le sur vos téléphones mobiles.</p><br>
                    <p style="font-size: 1.7em; text-align: center;">- Il peut être utilisé à travers le monde.</p>
                </div>
            </div>
        </div>

    </section>
    <section class="Services" id="services">
        <h2 class="all-heading">Tarifs <span>Section</span></h2>
        <section class="pricing-table">
            <div class="price">
                <h2>Free</h2>
                <p class="amount">$<span>0</span></p>
                <p class="amount-info">Free for your whole team</p>
                <p class="description">For individuals or teams looking to organize anything.</p>
                <button class="get-started">Get started</button>
            </div>
            <div class="price">
                <h2>Standard</h2>
                <p class="amount">$<span>6</span></p>
                <p class="amount-info">Per user per month</p>
                <p class="description">For teams that need to manage nore work.</p>
                <button class="upgrade-now">Upgrade now</button>
            </div>
            <div class="price">
                <h2>Premium</h2>
                <p class="amount">$<span>12</span></p>
                <p class="amount-info">Per user per month</p>
                <p class="description">Best for teams that need to track multiple projects.</p>
                <button class="try-for-free">Try for free</button>
            </div>
            <div class="purple color"></div>
            <div class="blue color"></div>
            <div class="orange color"></div>
        </section>
    </section>

    <section class="Team" id="team">
        <h2 class="all-heading">Our <span>Team</span></h2>

        <div class="team-content">
            <div class="box">
                <img src="img/01.png">
                <h3>Steph Karl</h3>
                <h5>SEO Manager</h5>
                <div class="icons">
                    <a href="#"><i class="ri-twitter-fill"></i></a>
                    <a href="#"><i class="ri-facebook-box-fill"></i></a>
                    <a href="#"><i class="ri-instagram-fill"></i></a>
                </div>
            </div>

            <div class="box">
                <img src="img/02.png">
                <h3>Paul Mura</h3>
                <h5>Developer</h5>
                <div class="icons">
                    <a href="#"><i class="ri-twitter-fill"></i></a>
                    <a href="#"><i class="ri-facebook-box-fill"></i></a>
                    <a href="#"><i class="ri-instagram-fill"></i></a>
                </div>
            </div>

            <div class="box">
                <img src="img/03.png">
                <h3>Nora Pits</h3>
                <h5>Web designer</h5>
                <div class="icons">
                    <a href="#"><i class="ri-twitter-fill"></i></a>
                    <a href="#"><i class="ri-facebook-box-fill"></i></a>
                    <a href="#"><i class="ri-instagram-fill"></i></a>
                </div>
            </div>

            <div class="box">
                <img src="img/04.png">
                <h3>Samia Hida</h3>
                <h5>IT consultant</h5>
                <div class="icons">
                    <a href="#"><i class="ri-twitter-fill"></i></a>
                    <a href="#"><i class="ri-facebook-box-fill"></i></a>
                    <a href="#"><i class="ri-instagram-fill"></i></a>
                </div>
            </div>

        </div>
    </section>
    <section class="Contact" id="contact">
        <h2 class="all-heading">Contact <span>Us</span></h2>
    </section>

    <footer>
        <div class="footerContainer">
            <div class="socialIcons">
                <a href=""><i class="fa-brands fa-facebook"></i></a>
                <a href=""><i class="fa-brands fa-instagram"></i></a>
                <a href=""><i class="fa-brands fa-twitter"></i></a>
                <a href=""><i class="fa-brands fa-google-plus"></i></a>
                <a href=""><i class="fa-brands fa-youtube"></i></a>
            </div>
            <div class="footerNav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">News</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact Us</a></li>
                    <li><a href="">our Team</a></li>
                </ul>
            </div>

        </div>
        <div class="footerBottom">
            <p>Copyright &copy;2023; Designed by <span class="designer">Noman</span></p>
        </div>
    </footer>

style.css

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

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    border: none;
    outline: none;
    color: #fff;
}

html {
    font-size: 62.5%;
    *overflow-x: hidden;
    /* very bad and usually means you haven't accounted for something properly*/
}

html,
body {
    scroll-behavior: smooth;
}

body {
    background: #000;
    color: #fff;
}

.header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 2rem 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
}

.Logo {
    font-size: 2.1rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-left: 4rem;
    font-size: 1.7rem;
    transition: 0.2s;
}

.navbar a:hover,
.navbar a:active,
.navbar a.active {
    color: #ef6e12;
}

section {
    min-height: 100vh;
    padding: 2em 9% 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    scroll-margin-top: 5rem;
}

.all-heading {
    display: flex;
    font-size: 60px;
    color: #ef6e12;
}

.About,
.Team {
    background: #111;
}

/*card*/
.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 60px 0;
    gap: 60px;
}

.container .box {
    position: relative;
    width: 300px;
    height: 350px;
    background: #2e2e2e;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .box::before {
    content: "";
    position: absolute;
    inset: -10px 50px;
    border-top: 4px solid var(--clr);
    border-bottom: 4px solid var(--clr);
    z-index: -1;
    transform: skewY(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::before {
    transform: skewY(0deg);
    inset: -10px 40px;
}

.container .box::after {
    content: "";
    position: absolute;
    inset: 60px -10px;
    border-left: 4px solid var(--clr);
    border-right: 4px solid var(--clr);
    z-index: -1;
    transform: skew(15deg);
    transition: 0.5s ease-in-out;
}

.container .box:hover::after {
    transform: skew(0deg);
    inset: 40px -10px;
}

.container .box .content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container .box .content .icon {
    color: var(--clr);
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 6px var(--clr);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em;
    background: #2e2e2e;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .icon {
    background: var(--clr);
    color: #2e2e2e;
    box-shadow: 0 0 0 4px #2e2e2e, 0 0 0 300px var(--clr);
}

.container .box .content .text h3 {
    font-size: 2.5em;
    color: #fff;
    font-weight: 500;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text h3 {
    color: #2e2e2e;
}

.container .box .content .text p {
    font-size: 1.5em;
    color: #999;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text p {
    color: #2e2e2e;
}

.container .box .content .text a {
    position: relative;
    font-size: 1.6em;
    background: var(--clr);
    color: #2e2e2e;
    padding: 8px 15px;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    transition: 0.5s ease-in-out;
}

.container .box:hover .content .text a {
    background: #2e2e2e;
    color: var(--clr);
}

/* team css */

* {
    font-family: "Space Grotesk", sans-serif;
}

.team {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.team-content {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    align-items: center;
    gap: 2rem;
    text-align: center;
    margin-top: -5rem;
}

.team-content img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 15px;
}

.center h1 {
    position: relative;
    margin-top: -12rem;
    color: #fff;
    font-size: 4rem;
    text-align: center;
}

.box {
    padding: 16px;
    border-radius: 15px;
    transition: all 0.38s ease;
}

.box h3 {
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.box h5 {
    font-size: 15px;
    font-weight: 600;
    color: #b7b4bb;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.icons i {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    margin: 0 8px;
    transition: all 0.38s ease;
}

.icons i:hover {
    transform: scale(1.2);
}

.box:hover {
    transform: translateY(-10px);
    cursor: pointer;
}

@media (max-width: 1240px) {
    .team {
        width: 100%;
        height: auto;
        padding: 90px 2%;
    }

    .center h1 {
        font-size: 3.2rem;
    }
}

/* footer css below */

footer {
    background-color: #111;
}

.footerContainer {
    width: 100%;
    padding: 70px 30px 20px;
}

.socialIcons {
    display: flex;
    justify-content: center;
}

.socialIcons a {
    text-decoration: none;
    padding: 10px;
    background-color: white;
    margin: 10px;
    border-radius: 50%;
}

.socialIcons a i {
    font-size: 2em;
    color: black;
    opacity: 0, 9;
}

/* Hover affect on social media icon */
.socialIcons a:hover {
    background-color: #111;
    transition: 0.5s;
}

.socialIcons a:hover i {
    color: white;
    transition: 0.5s;
}

.footerNav {
    margin: 30px 0;
}

.footerNav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.footerNav ul li a {
    color: white;
    margin: 20px;
    text-decoration: none;
    font-size: 1.3em;
    opacity: 0.7;
    transition: 0.5s;
}

.footerNav ul li a:hover {
    opacity: 1;
}

.footerBottom {
    background-color: #000;
    padding: 20px;
    text-align: center;
}

.footerBottom p {
    color: white;
}

.designer {
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    margin: 0px 5px;
}

@media (max-width: 700px) {
    .footerNav ul {
        flex-direction: column;
    }

    .footerNav ul li {
        width: 100%;
        text-align: center;
        margin: 10px;
    }

    .socialIcons a {
        padding: 8px;
        margin: 4px;
    }
}

price.css

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.pricing-table {
    position: relative;
    width: 90%;
    max-width: 800px;
    display: flex;
    gap: 2rem;
    padding: 3rem;
    border-radius: 1.5rem;
    border: 10px solid #fff;
    background: #ffffff5b;
}

.color {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: -1;
    filter: blur(5rem);
}

.purple {
    background: #edbbff;
    left: 0;
    top: 80%;
    box-shadow: 0 0 10rem #edbbff;
}

.blue {
    background: #aef1f5;
    top: -5rem;
    left: 30%;
    box-shadow: 0 0 10rem #aef1f5;
}

.orange {
    background: #ffddb7;
    top: 20%;
    right: 0;
    box-shadow: 0 0 10rem #ffddb7;
}

.get-started {
    background: #edbbff;
}

.get-started:hover {
    box-shadow: 0 0 1rem #e59fff;
}

.upgrade-now {
    background: #aef1f5;
}

.upgrade-now:hover {
    box-shadow: 0 0 1rem rgb(138, 249, 255);
}

.try-for-free {
    background: #ffddb7;
}

.try-for-free:hover {
    box-shadow: 0 0 1rem #ffc88a;
}

h2 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.amount {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.amount span {
    font-size: 2.2rem;
}

.amount-info {
    font-size: 0.7rem;
}

.description {
    margin: 1rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

button {
    border: none;
    cursor: pointer;
    transition: 0.5s;
    width: max-content;
    border-radius: 0.5rem;
    padding: 0.8rem;
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .pricing-table {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
}

team.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
    text-decoration: none;
}

.team {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.team-content {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.team-content img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 15px;
}

.center h1 {
    position: relative;
    margin-top: -12rem;
    color: #fff;
    font-size: 4rem;
    text-align: center;
}

.box {
    padding: 16px;
    border-radius: 15px;
    transition: all .38s ease;
}

.box h3 {
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.box h5 {
    font-size: 15px;
    font-weight: 600;
    color: #b7b4bb;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.icons i {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    margin: 0 8px;
    transition: all .38s ease;
}

.icons i:hover {
    transform: scale(1.2);
}

.box:hover {
    transform: translateY(-10px);
    cursor: pointer;
}

@media(max-width: 1240px) {
    .team {
        width: 100%;
        height: auto;
        padding: 90px 2%;
    }

    .center h1 {
        font-size: 3.2rem;
    }
}

PaulOB · March 26, 2024, 8:15pm

cdevl3749:

  <section class="Services" id="services">
        <h2 class="all-heading">Tarifs <span>Section</span></h2>
        <section class="pricing-table">
            <div class="price">
                <h2>Free</h2>
                <p class="amount">$<span>0</span></p>
                <p class="amount-info">Free for your whole team</p>
                <p class="description">For individuals or teams looking to organize anything.</p>
                <button class="get-started">Get started</button>
            </div>
            <div class="price">
                <h2>Standard</h2>
                <p class="amount">$<span>6</span></p>
                <p class="amount-info">Per user per month</p>
                <p class="description">For teams that need to manage nore work.</p>
                <button class="upgrade-now">Upgrade now</button>
            </div>
            <div class="price">
                <h2>Premium</h2>
                <p class="amount">$<span>12</span></p>
                <p class="amount-info">Per user per month</p>
                <p class="description">Best for teams that need to track multiple projects.</p>
                <button class="try-for-free">Try for free</button>
            </div>
            <div class="purple color"></div>
            <div class="blue color"></div>
            <div class="orange color"></div>
        </section>
    </section>

That is incorrect as you have two nested sections which won’t work the way its set up. You need to make each section follow properly.

e.g.

<section class="Services" id="services">
  <h2 class="all-heading">Tarifs <span>Section</span></h2>
</section>
<section class="pricing-table">
  <div class="price">
    <h2>Free</h2>
    <p class="amount">$<span>0</span></p>
    <p class="amount-info">Free for your whole team</p>
    <p class="description">For individuals or teams looking to organize anything.</p>
    <button class="get-started">Get started</button>
  </div>
  <div class="price">
    <h2>Standard</h2>
    <p class="amount">$<span>6</span></p>
    <p class="amount-info">Per user per month</p>
    <p class="description">For teams that need to manage nore work.</p>
    <button class="upgrade-now">Upgrade now</button>
  </div>
  <div class="price">
    <h2>Premium</h2>
    <p class="amount">$<span>12</span></p>
    <p class="amount-info">Per user per month</p>
    <p class="description">Best for teams that need to track multiple projects.</p>
    <button class="try-for-free">Try for free</button>
  </div>
  <div class="purple color"></div>
  <div class="blue color"></div>
  <div class="orange color"></div>
</section>

If the pricing section was supposed to be inside the services section then use a div and not a section element. Then it would look like this:

cdevl3749 · March 26, 2024, 8:39pm

ah yes it works with the div the problem is that in the team section and the footer I no longer have the Facebook icon and the other social networks?

cdevl3749 · March 27, 2024, 1:10pm

Good morning,

I’m coming back to you because I tested several links in my head and I still don’t see my social network icons in the “Footer” section.

here is what I added in my head.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B.S.A Onligne</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/team.css">
    <link rel="stylesheet" href="css/price.css">
</head>