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>