Ir para conteúdo

Michel Coleoni

Members
  • Total de itens

    6
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre Michel Coleoni

  • Data de Nascimento 11/23/2001

Informações Pessoais

  • Sexo
    Masculino
  • Localização
    Maringá - PR

Contato

  • Hangouts
    Coleoni
  • Twitter
    @michelcoleoni
  1. Michel Coleoni

    Tag canonical em todas as páginas

    Olá, gostaria de saber se para que meu SEO seja melhor eu devo ou não colocar a tag canonical em todas as páginas, incluindo de cada produto disponível no site.
  2. Michel Coleoni

    Uma página para vários produtos diferentes

    Obrigado tu me ajudou muito!
  3. Michel Coleoni

    Páginas na pesquisa do google

    Bom dia galera, gostaria de saber como altero o SEO do meu site para que ele fique neste formato no Google (Com o index no topo e as páginas aparecendo em sequência em baixo):
  4. Michel Coleoni

    Uma página para vários produtos diferentes

    Entendi amigo, porém o site não é um e-commerce, está mais para um portfólio dos produtos e não são muitos, esse é o layout da página: então não sei se faria muito sentido usar banco de dados, a não ser que eu criasse um painel de controle onde o cliente pode adicionar produtos quando necessário. Mesmo assim eu ainda gostaria de saber como faço isso. Seria interessante se ficasse desse modo: dominio.com/produto/acrílico, por exemplo. Obrigado pela resposta.
  5. Michel Coleoni

    Uma página para vários produtos diferentes

    Boa tarde galera! Sou iniciante na programação web e preciso de ajuda, o projeto que estou programando tem vários produtos e eu gostaria de saber se devo criar uma página html para cada um(o que eu acho que não seja viável) ou se eu crio uma única página mas dependendo do produto as fotos e os textos mudam, caso seja a segunda opção gostaria de saber como faço isso. Obg!
  6. 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; }
×

Informação importante

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