Bootstrap Snippet RM Planejados-pilar using HTML Bootstrap

"RM Planejados-pilar"
Bootstrap 4.1.1 Snippet by psd13t

4.1.1

730 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head> <title>RM - PLANEJADOS </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> body { font: 400 15px Lato, sans-serif; line-height: 1.8; color: #818181; } h2 { font-size: 24px; text-transform: uppercase; color: #303030; font-weight: 600; margin-bottom: 30px; } h4 { font-size: 19px; line-height: 1.375em; color: #303030; font-weight: 400; margin-bottom: 30px; } .jumbotron { background-color: #f4511e; color: #fff; padding: 100px 25px; font-family: Montserrat, sans-serif; } .container-fluid { padding: 60px 50px; } .bg-grey { background-color: #f6f6f6; } .logo-small { color: #f4511e; font-size: 50px; } .logo { color: #f4511e; font-size: 200px; } .thumbnail { padding: 0 0 20px 0; border: none; border-radius: 50; } .thumbnail img { width: 40%; height: 70%; margin-bottom: 50px; } .carousel-control.right, .carousel-control.left { background-image: none; color: #f4511e; } .carousel-indicators li { border-color: #f4511e; } .carousel-indicators li.active { background-color: #f4511e; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; } .panel { border: 1px solid #f4511e; border-radius:0 !important; transition: box-shadow 0.5s; } .panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); } .panel-footer .btn:hover { border: 1px solid #f4511e; background-color: #fff !important; color: #f4511e; } .panel-heading { color: #fff !important; background-color: #f4511e !important; padding: 25px; border-bottom: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .panel-footer { background-color: white !important; } .panel-footer h3 { font-size: 32px; } .panel-footer h4 { color: #aaa; font-size: 14px; } .panel-footer .btn { margin: 15px 0; background-color: #f4511e; color: #fff; } .navbar { margin-bottom: 0; background-color: #f4511e; z-index: 9999; border: 0; font-size: 12px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; font-family: Montserrat, sans-serif; } .navbar li a, .navbar .navbar-brand { color: #fff !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } footer .glyphicon { font-size: 20px; margin-bottom: 20px; color: #f4511e; } .slideanim {visibility:hidden;} .slide { animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible; } @keyframes slide { 0% { opacity: 0; transform: translateY(70%); } 100% { opacity: 1; transform: translateY(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateY(70%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } .btn-lg { width: 100%; margin-bottom: 35px; } } @media screen and (max-width: 480px) { .logo { font-size: 150px; } } </style> </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="30"> <div class="container"> <h2>Carousel</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="http://www.casadaoma.com.br/casadaoma/imgs/bolo-kitkat.jpg" style="width:100%;"> </div> <div class="item"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\painel.jpg" style="width:100%;"> </div> <div class="item"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\painel iluminado.jpg" style="width:100%;"> </div> <div class="item"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\loja comercial.jpg" style="width:100%;"> </div> </div>  <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage"></a> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\logo.jpg" width="150" height="65"> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">HOME</a></li> <li><a href="#services">SERVIÇOS</a></li> <li><a href="#portfolio">PORTFÓLIO</a></li> <li><a href="#contact">CONTATOS</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <h1><b>RM PLANEJADOS </b></h1> <p> Uma empresa especializada em fabricação de móveis planejados</p> </div> <div id="about" class="container-fluid"> <div class="row"> <div class="col-sm-10"> <h2>A Empresa </h2><br> <p align=justify> <h4> <b><i>RM Planejados</b></i>, surgiu no ano de 2013 com o intuito de disponibilizar ao mercado um serviço de qualidade e preço justo. Uma empresa que preza pela satisfação e fidelização de nossos clientes. <br> Pensar em <i> MOVELARIA</I>, é pensar em algo para a vida toda. Uma aquisição que fará parte de toda uma vida. Então, buscamos sonhar junto com nossos clientes. Planejando e executando cada momento vendo o sonho se tornar realidade. </h4><br> <p> Uma empresa preucupada com a sustentabilidade e preservação do meio ambiente.</p> <br> </div> </div> </div>  <div id="services" class="container-fluid text-center"> <h2>SERVIÇOS</h2> <br> <p> Cozinhas Planejadas</p> <p> Armários para Casa e Escritórios </p> <p> Salas Comerciais </p> <p> Painéis</p> <p> Sala de estar</p> <br> <div class="row slideanim"> <div class="col-sm-4"> <span class="glyphicon glyphicon-off logo-small"></span> <h4>CRIAÇÃO</h4> <p>NOVAS CRIAÇÕES</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-heart logo-small"></span> <h4>Amor</h4> <p>AMAMOS O QUE FAZEMOS</p> </div> </div> <br> <br> <div class="row slideanim"> <div class="col-sm-4"> <span class="glyphicon glyphicon-leaf logo-small"></span> <h4>VERDE</h4> <p>PREUCUPAÇÃO COM O MEIO AMBIENTE </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-certificate logo-small"></span> <h4>CERTIFICAÇÃO</h4> <p>REALIZAÇÃO DE CURSOS DE MOVELARIA DIGITAL</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-wrench logo-small"></span> <h4 style="color:#303030;">TRABALHO DURO</h4> <p>SATISFAÇÃO DOS NOSSOS CLIENTES</p> </div> </div> </div>  <div id="portfolio" class="container-fluid text-center bg-grey"> <h2>Portfólio</h2><br> <div class="row text-center slideanim"> <div class="col-sm-6"> <div class="thumbnail"> <div class="container"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\cozinha preta e marela.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\cozinha verde.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\armario de xicaras.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\churrasqueira.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="500"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\closet.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\quarto criancas.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\quarto casal.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\escritorio.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\guarda roupa com espelho.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\guarda roupa.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\IMG-20200616-WA0073.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\cozinha vermelha.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\painel de tv com home teather.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\guarda roupa 1.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\cozinha1.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\IMG-20200616-WA0069.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\IMG-20200616-WA0095.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\imagens\IMG-20200616-WA0017.jpg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\NOVAS IMAGENS\WhatsApp Image 2020-06-14 at 00.02.45.jpeg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\NOVAS IMAGENS\WhatsApp Image 2020-06-16 at 19.57.07.jpeg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\NOVAS IMAGENS\WhatsApp Image 2020-06-16 at 19.57.56.jpeg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\NOVAS IMAGENS\WhatsApp Image 2020-06-16 at 19.57.57.jpeg" class="img-rounded" width="50" height="50"> <img src="C:\Users\raque\Desktop\projeto rm planejados\NOVAS IMAGENS\WhatsApp Image 2020-06-16 at 19.58.08.jpeg" class="img-rounded" width="50" height="50"> </div> </div> </div> </div><br> <h2>O que nossos clientes dizem</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"O melhor trabalho que contratei para minha loja."<br><span>Alexandre Silva, Belo Horizonte </span></h4> </div> <div class="item"> <h4>"Perfeito o trabalho!!"<br><span>Marcelo Miranda, Belo Horizonte</span></h4> </div> <div class="item"> <h4>"Não existe lugar melhor que o nosso lar, por isso contratei a RM PLANEJADOS"<br><span>Andréa Cristina, Contagem </span></h4> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>  <div id="contact" class="container-fluid bg-grey"> <h2 class="text-center">CONTATOS</h2> <div class="row"> <div class="col-sm-5"> <p>Entre em contato conosco</p> <p><span class="glyphicon glyphicon-map-marker"></span> CONTAGEM, MG</p> <p><span class="glyphicon glyphicon-phone"></span> 31 98916-7348</p> <p><span class="glyphicon glyphicon-envelope"></span> regispof@yahoo.com.br</p> <p><a href="#"><span class="glyphicon glyphicon-link"></span> @reginaldomovelaria</p></a> </div> <div class="col-sm-7 slideanim"> <div class="row"> <div class="col-sm-12 form-group"> <input class="form-control" id="name" name="name" placeholder="Nome" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="telefone" name="telefone" placeholder="Telefone" type="telefone" required> </div> </div> <textarea class="form-control" id="comments" name="comments" placeholder="Mensagem" rows="5"></textarea><br> <div class="row"> <div class="col-sm-12 form-group"> <button class="btn btn-default pull-right" type="submit">Enviar</button> </div> </div> </div> </div> </div>  <img src="C:\Users\raque\Desktop\projeto rm planejados\local.jpg" style="width:65%"> <footer class="container-fluid text-center"> <a href="#myPage" title="To Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <footer class="container-fluid text-center"> <a href="#myPage" title="To Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <p>DIREITOS AUTORAIS © 2020 RG DESIGN<a></p> </footer> <script> $(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); $(window).scroll(function() { $(".slideanim").each(function(){ var pos = $(this).offset().top; var winTop = $(window).scrollTop(); if (pos < winTop + 600) { $(this).addClass("slide"); } }); }); }) </script> </body> </html>

Related: See More

Rotating CSS Card

Rotating CSS Card

Questions / Comments:

Posting GuidelinesFormatting