Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Need help with fixing the responsive errors in website

Paga

Coder
Hello after a few changes in my website , theres some errors on mobile devices but also in some browsers . In my cellphone after the footer it says item 0 , item 1 and etc , in my friends mobile devices , they cant even open the page . I been using AI to help me out but cant figure out how to fix this and some overlay issues so it has good score in google page analytics and displays correctly in most devices.
HTML:
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="utf-8">
    <title>x</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content="x">
    <meta name="description" content="x">
    <link rel="canonical" href="x" />
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="x">
    <meta property="og:type" content="website">
    <meta property="og:image" content="x/img/logotipofinalv2.png">
    <meta property="og:url" content="x">
    <meta property="og:description" content="x">
   
<!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   

    <!-- Icon Font Stylesheet -->
   <link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript>
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    </noscript>
   
    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
  <style>
        body {
            font-family: 'Arial', sans-serif;
            color: #000000; /* Define a cor do texto para preto */
        }

        .about-item h5, .about-item h1, .about-item p {
            color: #0f0f0f; /* Define a cor do texto para preto */
        }

        .about-item h5 {
            margin-bottom: 20px;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
            display: inline-block;
        }

        .about-item h1 {
            margin-bottom: 20px;
        }

        .about-item p {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .about-item .row {
            margin-top: 30px;
        }
       
        .navbar-brand img {
            width: 75px;
            height: auto;
        }

        @media (max-width: 768px) {
            .navbar-brand img {
                width: 75px;
                height: auto;
            }
        }

         .footer-item img {
            width: 175px;
            height: auto;
        }

        @media (max-width: 768px) {
            .footer-item img {
                width: 100%;
                height: auto;
            }
        }
       
        img {
            max-width: 100%;
            height: auto;
        }
       
        @media (max-width: 768px) {
    .fa-road, .fa-tree, .fa-building, .fa-home {
        display: inline-block;
    }
}

.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-dark {
    background-color: #343a40;
}

.p-4 {
    padding: 1.5rem;
}

.rounded {
    border-radius: 0.25rem;
}

.text-primary {
    color: #007bff;
}

.fas {
    font-size: 4em;
     color: yellow;
}

  @media (max-width: 768px) {
            .about-img {
                width: 100%;
                height: auto;
                padding: 0; /* Remove o padding para evitar cortes */
                overflow: hidden;
            }

            .about-img img {
                width: 100%;
                height: auto;
                object-fit: cover; /* Garante que a imagem se ajuste ao contêiner */
            }

            .row {
                display: flex;
                flex-wrap: wrap;
            }

            .row .col-3 {
                flex: 1 1 45%; /* Ajuste a largura conforme necessário */
                margin-bottom: 20px;
            }
        }
    </style>
    <!-- Schema.org JSON-LD -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "x",
      "image": "x",
      "@id": "x",
      "url": "x",
      "telephone": "+x",
      "description": "x"
    }
    </script>

</head>

<body>
    <!-- Spinner Start -->
    <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-grow text-primary" role="status"></div>
    </div>
    <!-- Spinner End -->
    <!-- Navbar Start -->
<div class="container-fluid navbar-bg">
    <div class="container">
        <nav class="navbar navbar-dark navbar-expand-lg py-lg-0">
            <a href="index.html" class="navbar-brand">
                <img src="img/logotipofinalv2.webp" alt="Logotipo da Empresa"  width="75" srcset="img/logotipofinalv2.webp 1x, img/[email protected] 2x, img/[email protected] 3x">
            </a>
            <button class="navbar-toggler bg-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-label="Toggle navigation">
                <span class="fa fa-bars text-dark"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav mx-auto">
                    <a href="index.html" class="nav-item nav-link">Home</a>
                    <a href="about.html" class="nav-item nav-link">Acerca</a>
                    <a href="service.html" class="nav-item nav-link">Serviços</a>
                    <a href="contact.html" class="nav-item nav-link">Contatos</a>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- Navbar End -->      
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-5">
        <div class="container text-center py-5">
            <h1 class="display-2 text-white mb-4 animated slideInDown">Acerca</h1>
        </div>
    </div>
    <!-- Page Header End -->
    <!-- About Start -->
    <div class="container-fluid py-5">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".3s">
                    <div class="about-img">
                        <div class="rotate-left bg-dark"></div>
                        <div class="rotate-right bg-dark"></div>
                        <img src="img/logotipofinalv2.png" class="img-fluid" alt="img">
                        <div class="bg-white experiences">
                            <h1 class="display-3">x</h1>
                            <h6 class="fw-bold">x</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".6s">
                    <div class="about-item overflow-hidden">
                        <h5 class="mb-2 px-3 py-1 text-dark rounded-pill d-inline-block border border-2 border-primary">Quem sou?</h5>
                        <h1 class="display-5 mb-2">x</h1>
                        <p class="fs-5" style="text-align: justify;">
                           x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            <strong>x</strong><br><br>
                           x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            <strong>x</strong><br><br>
                            x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            x
                        </p>
<div class="row">
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-road"></i>
            </div>
            <div class="my-2">
                <h6>Ruas e calçadas</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-tree"></i>
            </div>
            <div class="my-2">
                <h6>Parques e jardins</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-building"></i>
            </div>
            <div class="my-2">
                <h6>Praças e áreas públicas</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-seedling"></i>
            </div>
            <div class="my-2">
                <h6>Residências e pátios</h6>
            </div>
        </div>
    </div>
</div>            
</div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->
    <div id="error-message" style="display: none;"></div>
    <!-- Footer Start -->
    <div class="container-fluid footer py-5 wow fadeIn" data-wow-delay=".3s">
        <div class="container py-5">
            <div class="row g-4 footer-inner justify-content-center text-center">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-item">
                        <a href="index.html">
                           
<img src="img/logotipofinalv1.webp" alt="Logotipo da Empresa" width="175" height="175" style="height: auto">
                        </a>
                        <p></p>
                        <p>Cada pedra é cortada com dedicação e precisão.</p>
                    </div>
                </div>
            <div class="col-lg-3 col-md-6">
                <div class="footer-item">
                    <h4 class="text-white fw-bold mb-4">Links úteis</h4>
                    <div class="d-flex flex-column align-items-center">
                        <a class="btn btn-link ps-0" href="about.html"><i class="fa fa-check me-2"></i>Acerca</a>
                        <a class="btn btn-link ps-0" href="contact.html"><i class="fa fa-check me-2"></i>Contatos</a>
                        <a class="btn btn-link ps-0" href="service.html"><i class="fa fa-check me-2"></i>Serviços</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="footer-item">
                    <h4 class="text-white fw-bold mb-4">Contate-me</h4>
                    <div class="d-flex align-items-center mb-3">
                        <a class="btn rounded-circle me-3 whatsapp-icon" href="https://wa.me/351914533448" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i>
    </a>
                        <span>+x</span>
                    </div>
                    <div class="d-flex align-items-center email-container">
        <a href="mailto:[email protected]" class="text-white">
            <i class="fa fa-envelope email-icon me-3"></i>
        </a>
        <span class="email-text">xgmail.com</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer end -->
<div class="container-fluid copyright py-3" style="background-color: #D2691E;">
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
                <a href="#" class="text-white mb-0 display-6">x <i class="fas fa-cube text-white ms-3"></i></a>
            </div>
            <div class="col-md-4 copyright-btn text-center text-md-start mb-3 mb-md-0 flex-shrink-0">
            </div>
            <div class="col-md-4 my-auto text-center text-md-end text-white">
                <small>Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a><br>Distributed By <a class="border-bottom" href="https://themewagon.com">ThemeWagon</a></small>
            </div>
        </div>
    </div>
</div>


<!-- Modal HTML -->
<div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="whatsappModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="whatsappModalLabel">WhatsApp Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Conteúdo do modal.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
    </div>
<!-- Back to Top -->
<a href="#" class="btn  rounded-circle border-3 back-to-top"><i class="fa fa-arrow-up"></i></a>
        <!-- JavaScript Libraries -->
        <script src="[URL]https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js[/URL]"></script>
        <script src="[URL]https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js[/URL]"></script>
        <script src="[URL]https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js[/URL]"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <!-- Template Javascript -->
        <script src="js/main.js"></script>
</body>
</html>
 
Hello after a few changes in my website , theres some errors on mobile devices but also in some browsers . In my cellphone after the footer it says item 0 , item 1 and etc , in my friends mobile devices , they cant even open the page . I been using AI to help me out but cant figure out how to fix this and some overlay issues so it has good score in google page analytics and displays correctly in most devices.
HTML:
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="utf-8">
    <title>x</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="keywords" content="x">
    <meta name="description" content="x">
    <link rel="canonical" href="x" />
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="x">
    <meta property="og:type" content="website">
    <meta property="og:image" content="x/img/logotipofinalv2.png">
    <meta property="og:url" content="x">
    <meta property="og:description" content="x">
  
<!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  

    <!-- Icon Font Stylesheet -->
   <link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript>
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    </noscript>
  
    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
  <style>
        body {
            font-family: 'Arial', sans-serif;
            color: #000000; /* Define a cor do texto para preto */
        }

        .about-item h5, .about-item h1, .about-item p {
            color: #0f0f0f; /* Define a cor do texto para preto */
        }

        .about-item h5 {
            margin-bottom: 20px;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
            display: inline-block;
        }

        .about-item h1 {
            margin-bottom: 20px;
        }

        .about-item p {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .about-item .row {
            margin-top: 30px;
        }
      
        .navbar-brand img {
            width: 75px;
            height: auto;
        }

        @media (max-width: 768px) {
            .navbar-brand img {
                width: 75px;
                height: auto;
            }
        }

         .footer-item img {
            width: 175px;
            height: auto;
        }

        @media (max-width: 768px) {
            .footer-item img {
                width: 100%;
                height: auto;
            }
        }
      
        img {
            max-width: 100%;
            height: auto;
        }
      
        @media (max-width: 768px) {
    .fa-road, .fa-tree, .fa-building, .fa-home {
        display: inline-block;
    }
}

.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-dark {
    background-color: #343a40;
}

.p-4 {
    padding: 1.5rem;
}

.rounded {
    border-radius: 0.25rem;
}

.text-primary {
    color: #007bff;
}

.fas {
    font-size: 4em;
     color: yellow;
}

  @media (max-width: 768px) {
            .about-img {
                width: 100%;
                height: auto;
                padding: 0; /* Remove o padding para evitar cortes */
                overflow: hidden;
            }

            .about-img img {
                width: 100%;
                height: auto;
                object-fit: cover; /* Garante que a imagem se ajuste ao contêiner */
            }

            .row {
                display: flex;
                flex-wrap: wrap;
            }

            .row .col-3 {
                flex: 1 1 45%; /* Ajuste a largura conforme necessário */
                margin-bottom: 20px;
            }
        }
    </style>
    <!-- Schema.org JSON-LD -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "x",
      "image": "x",
      "@id": "x",
      "url": "x",
      "telephone": "+x",
      "description": "x"
    }
    </script>

</head>

<body>
    <!-- Spinner Start -->
    <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-grow text-primary" role="status"></div>
    </div>
    <!-- Spinner End -->
    <!-- Navbar Start -->
<div class="container-fluid navbar-bg">
    <div class="container">
        <nav class="navbar navbar-dark navbar-expand-lg py-lg-0">
            <a href="index.html" class="navbar-brand">
                <img src="img/logotipofinalv2.webp" alt="Logotipo da Empresa"  width="75" srcset="img/logotipofinalv2.webp 1x, img/[email protected] 2x, img/[email protected] 3x">
            </a>
            <button class="navbar-toggler bg-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-label="Toggle navigation">
                <span class="fa fa-bars text-dark"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav mx-auto">
                    <a href="index.html" class="nav-item nav-link">Home</a>
                    <a href="about.html" class="nav-item nav-link">Acerca</a>
                    <a href="service.html" class="nav-item nav-link">Serviços</a>
                    <a href="contact.html" class="nav-item nav-link">Contatos</a>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- Navbar End -->     
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-5">
        <div class="container text-center py-5">
            <h1 class="display-2 text-white mb-4 animated slideInDown">Acerca</h1>
        </div>
    </div>
    <!-- Page Header End -->
    <!-- About Start -->
    <div class="container-fluid py-5">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".3s">
                    <div class="about-img">
                        <div class="rotate-left bg-dark"></div>
                        <div class="rotate-right bg-dark"></div>
                        <img src="img/logotipofinalv2.png" class="img-fluid" alt="img">
                        <div class="bg-white experiences">
                            <h1 class="display-3">x</h1>
                            <h6 class="fw-bold">x</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".6s">
                    <div class="about-item overflow-hidden">
                        <h5 class="mb-2 px-3 py-1 text-dark rounded-pill d-inline-block border border-2 border-primary">Quem sou?</h5>
                        <h1 class="display-5 mb-2">x</h1>
                        <p class="fs-5" style="text-align: justify;">
                           x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            <strong>x</strong><br><br>
                           x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            <strong>x</strong><br><br>
                            x
                        </p>
                        <p class="fs-5" style="text-align: justify;">
                            x
                        </p>
<div class="row">
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-road"></i>
            </div>
            <div class="my-2">
                <h6>Ruas e calçadas</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-tree"></i>
            </div>
            <div class="my-2">
                <h6>Parques e jardins</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-building"></i>
            </div>
            <div class="my-2">
                <h6>Praças e áreas públicas</h6>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="text-center">
            <div class="d-flex bg-dark p-4 rounded" style="align-items:center;justify-content:center">
                <i class="fas fa-seedling"></i>
            </div>
            <div class="my-2">
                <h6>Residências e pátios</h6>
            </div>
        </div>
    </div>
</div>           
</div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->
    <div id="error-message" style="display: none;"></div>
    <!-- Footer Start -->
    <div class="container-fluid footer py-5 wow fadeIn" data-wow-delay=".3s">
        <div class="container py-5">
            <div class="row g-4 footer-inner justify-content-center text-center">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-item">
                        <a href="index.html">
                          
<img src="img/logotipofinalv1.webp" alt="Logotipo da Empresa" width="175" height="175" style="height: auto">
                        </a>
                        <p></p>
                        <p>Cada pedra é cortada com dedicação e precisão.</p>
                    </div>
                </div>
            <div class="col-lg-3 col-md-6">
                <div class="footer-item">
                    <h4 class="text-white fw-bold mb-4">Links úteis</h4>
                    <div class="d-flex flex-column align-items-center">
                        <a class="btn btn-link ps-0" href="about.html"><i class="fa fa-check me-2"></i>Acerca</a>
                        <a class="btn btn-link ps-0" href="contact.html"><i class="fa fa-check me-2"></i>Contatos</a>
                        <a class="btn btn-link ps-0" href="service.html"><i class="fa fa-check me-2"></i>Serviços</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="footer-item">
                    <h4 class="text-white fw-bold mb-4">Contate-me</h4>
                    <div class="d-flex align-items-center mb-3">
                        <a class="btn rounded-circle me-3 whatsapp-icon" href="https://wa.me/351914533448" target="_blank" rel="noopener">
        <i class="fab fa-whatsapp"></i>
    </a>
                        <span>+x</span>
                    </div>
                    <div class="d-flex align-items-center email-container">
        <a href="mailto:[email protected]" class="text-white">
            <i class="fa fa-envelope email-icon me-3"></i>
        </a>
        <span class="email-text">xgmail.com</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer end -->
<div class="container-fluid copyright py-3" style="background-color: #D2691E;">
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
                <a href="#" class="text-white mb-0 display-6">x <i class="fas fa-cube text-white ms-3"></i></a>
            </div>
            <div class="col-md-4 copyright-btn text-center text-md-start mb-3 mb-md-0 flex-shrink-0">
            </div>
            <div class="col-md-4 my-auto text-center text-md-end text-white">
                <small>Designed By <a class="border-bottom" href="https://htmlcodex.com">HTML Codex</a><br>Distributed By <a class="border-bottom" href="https://themewagon.com">ThemeWagon</a></small>
            </div>
        </div>
    </div>
</div>


<!-- Modal HTML -->
<div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="whatsappModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="whatsappModalLabel">WhatsApp Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Conteúdo do modal.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
    </div>
<!-- Back to Top -->
<a href="#" class="btn  rounded-circle border-3 back-to-top"><i class="fa fa-arrow-up"></i></a>
        <!-- JavaScript Libraries -->
        <script src="[URL]https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js[/URL]"></script>
        <script src="[URL]https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js[/URL]"></script>
        <script src="[URL]https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js[/URL]"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <!-- Template Javascript -->
        <script src="js/main.js"></script>
</body>
</html>
CSS:
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity 0.8s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-color: #a50808;
    color: #fff;
    transition: background-color 0.5s, color 0.5s;
}
.back-to-top:hover {
    background-color: #0056b3;
    color: #fff;
}
.btn {
    text-transform: uppercase;
    font-weight: 500;
    transition: 0.5s;
}
.btn.btn-primary {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-primary:hover {
    box-shadow: inset 200px 0 0 0 #083be2 !important;
    color: #fff !important;
}
.btn.btn-dark {
    box-shadow: inset 0 0 0 0 #083be2;
}
.btn.btn-dark:hover {
    box-shadow: inset 200px 0 0 0 #025e33;
    color: #225202 !important;
}
.navbar .navbar-nav {
    padding: 15px 0;
}
.navbar .navbar-nav .nav-link {
    padding: 15px;
    color: var(--bs-white);
    font-weight: 500;
    font-size: 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    outline: 0;
    transition: 0.5s;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: #0f4aee;
    transition: 0.5s;
}
@media (max-width: 768px) {
    .navbar-brand img {
        width: 75px;
        height: 75px;
    }
}
.navbar-toggler {
    background: var(--bs-secondary);
    color: var(--bs-light) !important;
    padding: 5px 12px;
    border: 2px solid #083be2 !important;
}
.carousel-item {
    position: relative;
}
.carousel-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.377);
}
.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: start;
    z-index: 1;
}
.carousel-control-prev {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #083be2;
    border-radius: 0 30px 30px 0;
    transition: 0.5s;
    opacity: 1;
}
.carousel-control-next {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 0;
    background: #083be2;
    border-radius: 30px 0 0 30px;
    transition: 0.5s;
    opacity: 1;
}
#carouselId .carousel-indicators li {
    width: 24px;
    height: 24px;
    background: var(--bs-dark);
    border: 2px solid #083be2;
    border-radius: 24px;
    margin: 0 10px 30px 10px;
}
#carouselId .carousel-indicators li.active {
    background: #04ff64 !important;
}
@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
        height: 400px;
    }
    .carousel-item img {
        height: 400px;
    }
    .carousel-control-next,
    .carousel-control-prev {
        display: none;
    }
}
.about-img {
    width: 100%;
    height: 70%;
    position: relative;
    padding: 30px;
    overflow: hidden;
}
.about-img::before {
    content: "";
    width: 100%;
    height: 40%;
    background: #2341ec;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 10px;
}
.about-img::after {
    content: "";
    width: 100%;
    height: 70%;
    background: #1f5e37;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: 10px;
}
.about-img img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}
@keyframes mymove {
    from {
        top: -202px;
    }
    to {
        top: 102%;
    }
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}
.about-item h1 {
    margin-bottom: 20px;
}
.about-item p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about-item .row {
    margin-top: 30px;
}
@media (max-width: 768px) {
    .about-img,
    .about-item {
        text-align: center;
    }
    .about-img img {
        width: 100%;
        height: auto;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .row .col-3 {
        flex: 1 1 45%; /* Ajuste a largura conforme necessário */
        margin-bottom: 20px;
    }
}
.contact-link a h5,
.contact-link a i,
.contact-link a.h5 {
    transition: 0.5s;
}
.contact-link a h5:hover,
.contact-link a i:hover,
.contact-link a.h5:hover {
    color: #083be2 !important;
}

.footer {
    background: linear-gradient(rgba(3, 67, 110, 0.945), rgba(0, 14, 8, 0.7)), url(https://zedacalmacalçadas.pt/img/fotoprincipal.webp) center center no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6rem;
}


.footer-item,
.footer-item a {
    color: rgba(255, 255, 255, 0.7);
    text-transform: capitalize;
}
.copyright .copyright-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.copyright .copyright-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-icon {
    background-color: #25d366;
    color: #fff;
}
.whatsapp-icon:hover {
    background-color: #0b682d;
    color: #fff;
}
.email-icon {
    color: #007bff;
    background-color: transparent;
}
.email-icon:hover {
    color: #0056b3;
}
.back-to-top {
    background-color: #a50808;
    color: #fff;
}
.back-to-top:hover {
    background-color: #0056b3;
    color: #fff;
}
.navbar-bg {
    background-color: #a76e58;
}
.email-icon {
    font-size: 1.5em;
    background-color: transparent;
}
.email-container {
    margin-top: 1px;
}
.email-text {
    margin-left: 15px;
}
.copyright .text-md-end small {
    font-size: 0.6em;
}
.about-item h5 {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-radius: 5px;
    display: inline-block;
}
.about-item h1 {
    margin-bottom: 20px;
}
.about-item p {
    margin-bottom: 20px;
    line-height: 1.6;
}
.about-item .row {
    margin-top: 30px;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'FontAwesomeBrands';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff') format('woff');
  font-display: swap;
}

.animated {
    animation-fill-mode: both;
}

.footer {
    position: relative;
    z-index: 1;
}

.bi {
    color: yellow;
    font-size: 4em;
}
 
I am not seeing the "item 1 item 2" but I am guessing that was the beginnings of the carousel/slider you are using. I see the dots and arrows (on desktop) for the slider but it appears you aren't done yet.
Thats on the other pages which are in the navbar . In the carousel can you see the images ?
 
Appears like this in some browsers and has that space after the footer/credits which i have no ideia why its doing that


1737041601684.webp

And this is the item 0 , 1 and etc which appears on the other 3 pages

1737041757280.webp
 
Can you explain better what you mean
I am just wondering if the slider structure is being added everywhere whether you want it or not but the related styles are not. "Item 0, Item 1, Item2..." seems like default slider content. Are you able to inspect that copy/structure and see what it is is?
 
@Paga It appears you've made progress! Nice! I do see the owl carousel script loaded on the contact page, for example, when looking in devtools. I don't know how that works, nor do I use Bootstrap, but it would be better not to load it on pages that don't need it, IMO.
 

New Threads

Buy us a coffee!

Back
Top Bottom