bella.css

                                                             
           /* css for web */


:root {
    --rougeor: orangered;
    --blanc: white;
    --traitGris: rgba(128, 128, 128, 0.719);
    --orange: orange;
    --prochenoir: rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
}

body>div:nth-child(1) {
    background-image: url("Logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 0rem;
}


div:nth-child(1) {
    margin-left: 2rem;
}


body div>div:nth-child(2) {
    display: flex;
    justify-content: space-around;
}


body>div:nth-child(1)>div:nth-child(2)>div {
    padding: 2rem;
}

a{
    text-decoration: none;
    color: black;
}

.how{
 color: orangered;
}

body>div:nth-child(2) {
    height: 28rem;
    background-image: linear-gradient(var(--prochenoir),
            var(--prochenoir)), url("back.jpeg");
    background-repeat: no-repeat;
    background-image: cover;
    background-size: 110em;
    background-position: center;
    color: var(--blanc);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


body>div:nth-child(2)>div:nth-child(1) {
    font-size: 1em;
    padding-top: 2.5rem;
    text-align: center;
    font-weight: bold;
}

body>div:nth-child(2)>div:nth-child(2) {
    text-align: left;
    font-size: 3em;
    font-weight: bold;
}

body>div:nth-child(2)>div:nth-child(3) {
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    margin-top: 0.9375rem;
}

body>div:nth-child(2)>div:nth-child(4) {
    text-align: center;
    margin-top: 0.9375rem;
}

body>div:nth-child(2)>div:nth-child(5) {
    display: flex;
    justify-content: center;
    margin-top: -0.625rem;
}

body>div:nth-child(2)>div:nth-child(5)>div:nth-child(1) {
    text-align: center;
    font-size: 1.5em;
    background-color: var(--rougeor);
    padding: 0.625rem 1.875rem;
    border-radius: 12em;
    margin-right: 3.125rem;
    margin-bottom: 0rem;
    position: relative;
    top: 2.5rem;
}

body>div:nth-child(2)>div:nth-child(5)>div:nth-child(2) {
    padding-left: 6.25rem;
    border: 0.0625rem solid var(--blanc);
    padding: 0.625rem 1.875rem;
    border-radius: 12em;
    font-size: 1.5em;
    position: relative;
    top: 2.5rem;
}

body>div:nth-child(2)>div:nth-child(6) {
    background-image: url("2telephones.png");
    background-repeat: no-repeat;
    background-size: 35em 35em;
    background-position: center;
    position: relative;
    padding: 45rem 0rem 0rem 0rem;
    bottom: 3.75rem;
}

body>div:nth-child(3)>div:nth-child(1) {
    position: relative;
    top: 30rem;
    margin-left: 23.125rem;
    margin-right: 16.875rem;
    padding-top: -6.25rem;
    border: 0.0625rem solid var(--traitGris);
}

body>div:nth-child(3)>div:nth-child(2){
    position: relative;
    top: 32rem;
    font-size: 2em;
}

body>div:nth-child(3)>div:nth-child(3) {
    position: relative;
    top: 34.375rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.625rem;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(1) {
    background-image: url("RectangleImg2.png");
    background-repeat: no-repeat;
    background-size: 30em 40em;
    background-position: center;
    padding: 31.25rem 0rem 0rem 0rem;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(2) {
    display: block;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1) {
    color: var(--rougeor);
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.625rem;
    margin-top: 13.125rem;
    margin-left: 0rem;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2) {
    display: block;
    font-weight: bold;
    font-size: 2em;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(2)>div:nth-child(3) {
    display: block;
    font-weight: bold;
    font-size: 2em;
    margin-bottom: 0.625rem;
}

body>div:nth-child(3)>div:nth-child(3)>div:nth-child(2)>div:nth-child(4),
div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>div:nth-child(5) {
    display: block;
    font-size: 1.5em;
    margin-bottom: 0.625rem;
}


body>div:nth-child(4) {
    position: relative;
    top: 25.625rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.625rem;
}

body>div:nth-child(4)>div:nth-child(1) {
    margin-left: 10.9375rem;
    display: block;
}

body>div:nth-child(4)>div:nth-child(1)>div:nth-child(1) {
    color: var(--rougeor);
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.625rem;
    margin-top: 13.125rem;
    margin-left: 0rem;
}

body>div:nth-child(4)>div:nth-child(1)>div:nth-child(2) {
    display: block;
    font-weight: bold;
    font-size: 2em;
}

body>div:nth-child(4)>div:nth-child(1)>div:nth-child(3) {
    display: block;
    font-weight: bold;
    font-size: 2em;
    margin-bottom: 0.625rem;

}

body>div:nth-child(4)>div:nth-child(1)>div:nth-child(4),
body>div:nth-child(4)>div:nth-child(1)>div:nth-child(5) {
    display: block;
    font-size: 1.5em;
    margin-bottom: 0.625rem;
}

body>div:nth-child(4)>div:nth-child(2) {
    background-image: url("RectangleImg3.png");
    background-repeat: no-repeat;
    background-size: 30em 40em;
    background-position: center;
    padding: 31.25rem 0rem 0rem 0rem;
}

body>div:nth-child(5) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    top: 25.75rem;
}

body>div:nth-child(5)>div:nth-child(1) {
    background-image: url("Logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.625rem;
    padding-top: 5rem;
    margin-left: 12.5rem;
}

body>div:nth-child(5)>div:nth-child(2) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1.25rem;
}

body>div:nth-child(5)>div:nth-child(2)>div:nth-child(1) {
    background-image: url("twitter.png");
    background-repeat: no-repeat;
    padding: 0.625rem 0.9375rem;

}

body>div:nth-child(5)>div:nth-child(2)>div:nth-child(2) {
    background-image: url("face.png");
    background-repeat: no-repeat;
    padding: 0.625rem 0.9375rem;
}

body>div:nth-child(5)>div:nth-child(2)>div:nth-child(3) {
    background-image: url("instagramicone.png");
    background-repeat: no-repeat;
    padding: 0.625rem 1.5625rem;
}

body>div:nth-child(5)>div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
}



                /* css for phone */



@media screen and (max-width: 480px) {
  
 
        body>div:nth-child(1) {
            background-image: url("Logo.png");
            background-repeat: no-repeat;
            background-size: 6em;
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding-top: 0rem;
        }
                body>div:nth-child(2)>div:nth-child(6) {
                    background-image: url("2telephones.png");
                    background-repeat: no-repeat;
                    background-size: 20em 20em;
                    background-position: center;
                    position: relative;
                    padding: 55rem 0rem 0rem 0rem;
                    bottom: 33.75rem;
                }

                                body>div:nth-child(3)>div:nth-child(1) {
                                    position: relative;
                                    top: 30rem;
                                    margin-left: 10.125rem;
                                    margin-right: 10.875rem;
                                    padding-top: -2.25rem;
                                    border: 0.0625rem solid var(--traitGris);
                                }


                body>div:nth-child(3)>div:nth-child(3) {
                    position: relative;
                    top: 29.375rem;
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 0.625rem;
                }

                body>div:nth-child(4) {
                    position: relative;
                    top: 25.625rem;
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 0.625rem;
                }

                body>div:nth-child(5) {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    position: relative;
                    top: 25.75rem;
                }

body>div:nth-child(2) {
    height: 28rem;
    background-image: linear-gradient(var(--prochenoir),
            var(--prochenoir)), url("back.jpeg");
    background-repeat: no-repeat;
    background-size: 81.25rem;
    background-image: cover;
    background-position: center;
    color: var(--blanc);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

body>div:nth-child(5) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
    top: 25.75rem;
}

body>div:nth-child(5) {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    top: 25.75rem;
}

}


              /* css for tab */



@media screen and (max-width: 780px) {
   

    body>div:nth-child(1) {
        background-image: url("Logo.png");
        background-repeat: no-repeat;
        background-size: 6em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: 0rem;
    }

    body>div:nth-child(2)>div:nth-child(6) {
        background-image: url("2telephones.png");
        background-repeat: no-repeat;
        background-size: 30em 30em;
        background-position: center;
        position: relative;
        padding: 40rem 0rem 0rem 0rem;
        bottom: 3.75rem;
    }

    body>div:nth-child(3)>div:nth-child(1) {
        position: relative;
        top: 30rem;
        margin-left: 10.125rem;
        margin-right: 10.875rem;
        padding-top: -2.25rem;
        border: 0.0625rem solid var(--traitGris);
    }


    body>div:nth-child(3)>div:nth-child(3) {
        position: relative;
        top: 29.375rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.625rem;
    }

    body>div:nth-child(4) {
        position: relative;
        top: 25.625rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.625rem;
    }

    body>div:nth-child(5) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: relative;
        top: 25.75rem;
    }

    body>div:nth-child(2) {
        height: 28rem;
        background-image: linear-gradient(var(--prochenoir),
                var(--prochenoir)), url("back.jpeg");
        background-repeat: no-repeat;
        background-size: 81.25rem;
        background-image: cover;
        background-position: center;
        color: var(--blanc);
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    body>div:nth-child(5) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: relative;
        top: 25.75rem;
    }

    body>div:nth-child(5) {
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        top: 25.75rem;
    }

}