Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Michel Coleoni

Barra de rolagem aparecendo somente em uma parte da página

Recommended Posts

 

Boa noite galera!

 

Hoje quando acordei e fui continuar um projeto percebi que uma barra de rolagem horizontal aparece quando eu passo em certa parte da página e ontem não estava assim,  eu não sei o que está ocasionando isso, já revi e refiz o código várias vezes e nada muda. Alguém sabe o que pode ser?

 

Site hosteado em: http://51.254.7.125

 

HTML:

 

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <!-- SEO  -->
  <title>Chapas Paraná</title>
  <meta name="description" content="#">
  <link rel="canonical" href="https://www.chapasparana.com.br/">
  <meta name="author" content="Michel Coleoni">
  <link rel="author" href="https://michelcoleoni.com.br/">
  <meta name="url" content="https://chapasparana.com.br/">
  <meta name="coverage" content="Worldwide">
  <meta name="robots" content="index, follow"/>

  <!-- Open Graph Facebook  -->
  <meta property="og:title" content="Início">
  <meta property="og:description" content="#">
  <meta property="og:url" content="https://chapasparana.com.br/">
  <meta property="og:site_name" content="Chapas Paraná">
  <meta property="og:type" content="website">
  <meta property="og:image" content="#">
  <meta property="og:locale" content="pt_BR">

  <!-- Twitter -->
  <meta name="twitter:title" content="Início">
  <meta name="twitter:description" content="#">
  <meta name="twitter:url" content="https://chapasparana.com.br/">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="#">
  <meta name="twitter:creator" content="@michelcoleoni">

  <link rel="icon" type="image/png" href="img/icons/favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/mdb.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>

<body>

  <!-- Loader -->
  <div id="loader" class="loader"></div>

  <!-- Header -->
  <header>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="index.html"><img src="img/icons/logo.png" height="45" alt="Chapas Paraná"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="basicExampleNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="index">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#sobre">Sobre nós</a></li>
          <li class="nav-item"><a class="nav-link" href="#produtos">Produtos</a></li>
          <li class="nav-item"><a class="nav-link" href="#contato">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<!-- Main -->
<main>

  <div class="mt-5 mb-5">

    <!-- Sobre -->
    <section id="sobre">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="about-header">
              <h2 data-aos="fade-right"><b>Sobre</b> Nós</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur.</p>
              <button class="btn z-depth-0 my-3 waves-effect">Continuar lendo</button>
            </div>
          </div>
          <div class="col-md-6">
            <img src="img/sobre.png" style="width: 100%; height: auto;" data-aos="fade-left">
          </div>
        </div>
      </div>
    </section>

    <!-- Produtos -->
    <section id="produtos">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="section-header">
              <h2 data-aos="fade-up">Nossos <b>Produtos</b></h2>
            </div>
          </div>
        </div>
        <div class="row">

          <div class="col-md-4" data-aos="fade-up">
            <div class="produto">
              <div class="produto-bg produto-bg-1">
                <h2>ACM</h2>
              </div>
              <div class="produto-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris.</p>
                <a href="" class="btn-area">Ler mais <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>

          <div class="col-md-4" data-aos="fade-up">
            <div class="produto">
              <div class="produto-bg produto-bg-2">
                <h2>Acrílico</h2>
              </div>
              <div class="produto-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris.</p>
                <a href="" class="btn-area">Ler mais <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>

          <div class="col-md-4" data-aos="fade-up">
            <div class="produto">
              <div class="produto-bg produto-bg-3">
                <h2>PVC</h2>
              </div>
              <div class="produto-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris.</p>
                <a href="" class="btn-area">Ler mais <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>

          <div class="col-md-4" data-aos="fade-up">
            <div class="produto">
              <div class="produto-bg produto-bg-4">
                <h2>PS</h2>
              </div>
              <div class="produto-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris.</p>
                <a href="" class="btn-area">Ler mais <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>

          <div class="col-md-4" data-aos="fade-up">
            <div class="produto">
              <div class="produto-bg produto-bg-5">
                <h2>Poliondas</h2>
              </div>
              <div class="produto-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris.</p>
                <a href="" class="btn-area">Ler mais <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>   

    <!-- Contato -->
    <section id="contato">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="contact-header">
              <h2 data-aos="fade-right">Entre em <b>contato</b></h2>
            </div>
            <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
              Fusce consequat tellus massa, quis sodales dui cursus ac. 
            Sed ipsum augue, fringilla id volutpat sed, ultrices ut erat.</p>
            <p class="text-left"><i class="fas fa-phone"></i> (44) 3024-2259</p>
            <p class="text-left"><i class="fas fa-mobile-alt"></i> (44) 9 9910-1552</p>
            <p class="text-left"><i class="fas fa-at"></i> chapasparana@gmail.com</p>

            <br>

            <div class="contact-header">
               <h2 data-aos="fade-right">Onde estamos?</h2>
            </div>
            <p class="text-justify"><i class="fas fa-map-marker-alt"></i> Av. Arq. Nildo Ribeiro da Rocha, 1701 B. Maringá - PR</p>
            <div id="map-container" class="map-container z-depth-1-half" style="height: 205px; width: 100%;"></div>

          </div>
          <div class="contact-form col-md-6" data-aos="fade-left">

            <form method="post" class="text-center p-5" action="mail.php">
              <label class="h3 mb-3">Fale conosco</label>
              <input type="text" id="formName" class="form-control mb-3" placeholder="Nome" name="name" required>
              <input type="email" id="formEmail" class="form-control mb-3" placeholder="E-mail" name="email" required>
              <label class="h4 mb-3">Assunto</label>
              <select class="browser-default custom-select mb-3" name="subject">
                <option value="1" disabled>Escolha uma opção</option>
                <option value="2">Orçamento</option>
                <option value="3">Dúvida</option>
                <option value="4">Feedback</option>
                <option value="5">Outro</option>
              </select>
              <div class="form-group" style="font-weight: 300;">
                <textarea class="form-control rounded-0" id="exampleFormControlTextarea2" rows="3" placeholder="Mensagem" name="message" required></textarea>
              </div>
              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" id="defaultContactFormCopy" style="font-weight: 300;">
                <label class="custom-control-label" for="defaultContactFormCopy" style="font-weight: 300; font-size: 14px;">Enviar-me um cópia da mensagem</label>
              </div>
              <button class="btn btn-block z-depth-0 my-5 waves-effect" type="submit" name="submit">Enviar</button>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>

<!-- Footer -->
<footer class="page-footer">
  <!-- Newsletter -->
  <div class="newsletter">
    <div class="flex-center text-center">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h3 data-aos="fade-down">Fique por dentro!</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
            <form>
              <input type="email" name="newsEmail" placeholder="E-mail" class="mt-3">
              <button class="btn z-depth-0 my-3 waves-effect" type="submit"><i class="fas fa-check"></i></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="social">
    <div class="flex-center text-center">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <a href="https://www.facebook.com/chapasparana/" title="Facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
            <a href="#" title="Instagram" target="_blank"><i class="fab fa-instagram"></i></a>
            <a href="#" title="Whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
<div class="container">
  <div class="row">
    <div class="copyright col-md-6 py-3">
      <p>Chapas Paraná &copy; <script> document.write(new Date().getFullYear()); </script>. Todos direitos reservados</p>
    </div>
    <div class="developer col-md-6 py-3">
      <a href="https://instagram.com/michelcoleoni" target="_blank"><img src="img/icons/michel-coleoni.png" height="25" alt="Desenvolvido por: Michel Coleoni"></a>
    </div>
  </div>
</div>
</footer>

<!-- Return top button -->
<a href="javascript:" id="return-to-top" title="Voltar ao topo"><i class="icon-chevron-up"></i></a>

<!-- Scripts -->

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/mdb.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
  AOS.init({
    duration: 1000,
  });
</script>

<script>
  $(window).on('load', function() {
    $(".loader").delay(1500).fadeOut("slow");
    $('body').delay(1500).css({'overflow':'visible'});
  })
</script>

<script>
  $(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        
      $('#return-to-top').fadeIn(200);
    } else {
     $('#return-to-top').fadeOut(20);    
   } 
 });
  $('#return-to-top').click(function() {      
    $('body,html').animate({
      scrollTop : 0                      
    }, 500);
  });
</script>

<script>
  function regular_map() {
    var var_location = new google.maps.LatLng(-23.448580, -51.930571);

    var var_mapoptions = {
      center: var_location,
      zoom: 14
    };

    var var_map = new google.maps.Map(document.getElementById("map-container"),
      var_mapoptions);

    var var_marker = new google.maps.Marker({
      position: var_location,
      map: var_map,
      title: "Av. Arq. Nildo Ribeiro da Rocha, 1701 B. Maringá - PR"
    });
  }
  google.maps.event.addDomListener(window, 'load', regular_map);
</script>

</body>

</html>

 

 

CSS:

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

html, body{
	font-family: 'Roboto', sans-serif;
}

.box{
	width: 408px;
	height: 100px;
	margin: 100px auto;
	background: red;
	padding-top: 58px;
	text-align: center;
	color: white; 
}

/* Loader */
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../img/loading.gif') 50% 50% no-repeat white;
}

/* Header */
header{
	position: static;
}

.bg-top h1{
	color: white;
	font-weight: 600;
	font-size: 35px;
	letter-spacing: 4px;
	padding-top: 7rem !important;
	padding-bottom: 7rem !important;
}

.bg-top{
	position: relative;
	background: center no-repeat;
	background-size: cover;
}

/* Navbar */
nav{
	background-color: #FAFAFA;
}

.navbar{
	-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.06);
}

.navbar.navbar-light .breadcrumb .nav-item .nav-link, .navbar.navbar-light .navbar-nav .nav-item .nav-link{
	font-family: 'Roboto', sans-serif;
	color: #707070;
	font-size: 15px;
	font-weight: 400;
}

.nav-item{
	padding-left: 20px;
	transition: .3s;
}

#basicExampleNav a:hover{
	color: #207EBC;
	top: -2px;
}

/* Footer */
footer{
	background-color: #207EBC;
	font-size: 15px;
}

footer p, i{
	margin-bottom: 0;
}

.copyright, .developer{
	width: 100%;
	height: 100%;
}

.copyright{
	text-align: left;
}

.developer{
	text-align: right;
}

.newsletter{
	width: 100%;
	height: 350px;
	background-image: url(../img/novidades.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.newsletter h3{
	font-family: 'Raleway', sans-serif;;
	font-size: 40px;
	color: #141414;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding-bottom: 10px;
}

.newsletter p{
	font-family: 'Raleway', sans-serif;;
	font-size: 16px;
	color: #141414;
	font-weight: 400;
}

.newsletter form{
	padding-top: 30px;
}

.newsletter input{
	width: 30%;
	color: #2b2b2b;
	border: none;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding: 15px;
	padding-left: 20px;
	margin: 0;
}

.newsletter form button{
	background-color: #007bff;
	border: none;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	font-size: 20px;
	padding: 11.5px;
	width: 120px;
	text-transform: capitalize;
	margin: 0;
	margin-left: -3px;
	top: -1px;
}

.newsletter form button:hover{
	transition: .5s;
	background-color: #3194ff;
}

.social{
	width: 100%;
	height: 80px;
	background: #1e73ab;
}

.social a{
	font-size: 22px;
	color: white;
	margin-right: 20px;
	margin-left: 20px;
}

@media only screen and (max-width: 769px) {
	.newsletter form button{
		top: -1px;
		width: 80px;
		padding: 11px;
	}
	.newsletter input{
		width: 58%;
	}
}


@media only screen and (max-width: 769px) {
	.copyright, .developer{
		text-align: center;
	}
}

/* About */

#sobre{
	background-color: #FAFAFA;
	margin-bottom: 5rem !important;
	overflow-x: hidden;
}

.about-header{
	text-align: left;
	margin-bottom: 20px;
	margin-top: 12%;
}

@media only screen and (max-width: 769px) {
	.about-header{
		text-align: center;
		margin-bottom: 20px;
		margin-top: 15px;
	}
	.about-header button{
  		left: 0.5%;
	}
	.about-header h2{
		margin-top: 30px;
	}
	#sobre{
		margin-bottom: 3rem !important;
	}
	#sobre img{
		padding-bottom: 30px;
	}
}


.about-header h2{
	font-family: 'Raleway', sans-serif;;
	font-size: 35px;
	color: #888887;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

.about-header p{
	text-align: justify;
	padding-top: 10px;
}

.about-header b{
	font-family: 'Raleway', sans-serif;;
	font-size: 40px;
	color: #007bff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

.about-header button{
	background-color: #007bff;
	border: none;
	border-radius: 50px;
	font-weight: 500;
	font-size: 16px;
	padding: 10px;
	width: 170px;
	text-transform: capitalize;
}

.about-header button:hover{
	transition: .5s;
	background-color: #3194ff;
}

/* Contact */

@media only screen and (max-width: 769px) {
	#contato{
		text-align: center;
	}
	#map-container{
		margin-bottom: 3rem !important;
	}
}

#contato{
	margin-top: 5rem !important;
}

.contact-header h2{
	font-family: 'Raleway', sans-serif;;
	font-size: 35px;
	color: #888887;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

.contact-header p{
	text-align: justify;
	padding-top: 10px;
}

.contact-header b{
	font-family: 'Raleway', sans-serif;;
	font-size: 40px;
	color: #007bff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

#contato h1{
	font-family: 'Roboto', sans-serif;
	font-size: 28px;
	color: #555555;
	font-weight: 500;
}

#contato i{
	font-size: 20px;
	color: #007BFF;
	padding-right: 5px;
}

#map-container{
	-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.06);
}

#map-card{
	height: 50%;
	width: 100%;
}

.contact-form form{
	background-color: #FAFAFA;
	height: 94%;
	width: 100%;
	-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.06);
	padding: 3rem !important;
}

@media only screen and (max-width: 769px) {
	.contact-form form{
		padding: 2rem !important;
	}
}

.contact-form .h4{
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #555555;
	font-weight: 400;
}

.contact-form .h3{
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #555555;
	font-weight: 400;
}

.contact-form p, input, label, text-area, .form-control, select{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: #555555;
	font-weight: 300;
}

.contact-form button{
	background-color: #007bff;
	border: none;
	border-radius: 50px;
	font-weight: 500;
	font-size: 18px;
	padding: 10px;
	text-transform: capitalize;
}

.contact-form button:hover{
	transition: .5s;
	background-color: #3194ff;
}

/* Products */

#produtos{
	overflow-x: hidden;
}

.section-header{
	text-align: center;
	margin-bottom: 30px;
	margin-top: 15px;
}

.section-header h2{
	font-family: 'Raleway', sans-serif;;
	font-size: 35px;
	color: #888887;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

.section-header b{
	font-family: 'Raleway', sans-serif;;
	font-size: 40px;
	color: #007bff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.05em;
}

.produto{
	border: 1px solid #ebebeb;
	text-align: center;
	background: #FAFAFA;
	margin-bottom: 30px;
}

@media only screen and (max-width: 769px) {
	.produto{
		margin-top: 15px;
	}
	.produto-bg h2{
		font-size: 13px;
	}
	.section-header{
		margin-bottom: 15px;
	}
}

.produto-bg{
	height: 200px;
	position: relative;
}

.produto-bg h2{
	color: white;
	background: #007bff;
	border: 1px solid #007bff;
	font-size: 17px;
	text-align: center;
	font-weight: 700;
	padding: 15px;
	position: absolute;
	left: 8%;
	width: 84%;
	margin: 0;
	bottom: -25px;
	letter-spacing: 1px;
}

.produto-bg-1{
	background: url("../img/produtos/acm.png");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}


.produto-bg-2{
	background: url("../img/produtos/acrílico.png");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.produto-bg-3{
	background: url("../img/produtos/pvc.png");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.produto-bg-4{
	background: url("../img/produtos/ps.png");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.produto-bg-5{
	background: url("../img/produtos/poliondas.png");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}


.produto-text{
	padding: 50px 30px 20px;
	font-size: 15px;
	font-weight: 300;
}

.produto-text p:last-child{
	margin: 0;
	line-height: 1.8;
}

.btn-area{
	display: inline-block;
	font-weight: 400;
	font-size: 16px;
	margin-top: 25px;
}

.btn-area i{
	font-size: 14px;
}

/* Return top button */

#return-to-top {
    position: fixed;
    bottom: 75px;
    right: 20px;
    background: #F2F2F2;
    width: 35px;
    height: 35px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.16);
	-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.16);
	box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.16);
}
#return-to-top i {
    color: #222;
    margin: 0;
    position: relative;
    left: 11.5px;
    top: 4px;
    font-size: 13px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: #F2F2F2;
}
#return-to-top:hover i {
    top: 0px;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

você tem um script que adiciona o overflow: visible:

$(window).on('load', function() {
  $(".loader").delay(1500).fadeOut("slow");
  $('body').delay(1500).css({'overflow':'visible'});
})

você deve ter no body apenas overflow-y:visible; overflow-x: hidden não nos elemento filhos;

 

remova overflow-x: hidden do id #produtos

#produtos {
  overflow-x: hidden; //remover essa linha
}

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.