<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="pt-br">
<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>
</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">
<!-- Indicadores do 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>
<!-- passagem das fotos -->
<div class="carousel-inner">
<div class="item active">
<img src="<img src="https://i.ibb.co/GWgKWZt/cozinha-amarela.jpg" alt="cozinha-amarela" border="0">" style="width:100%;">
</div>
<div class="item">
<img src="<img src="https://i.ibb.co/GWgKWZt/cozinha-amarela.jpg" alt="cozinha-amarela" border="0">" style="width:100%;">
</div>
<div class="item">
<img src="" style="width:100%;">
</div>
<div class="item">
<img src="<img src="https://i.ibb.co/xLNhM8f/loja-comercial.jpg" alt="loja-comercial" border="0">" style="width:100%;">
</div>
</div>
<!-- Left e right controles -->
<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="<img src="https://i.ibb.co/GWgKWZt/cozinha-amarela.jpg" alt="cozinha-amarela" border="0">" 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>
<!-- Container (Services Section) -->
<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>
<!-- Container (Portfolio Seção) -->
<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="https://i.ibb.co/51XRCKy/cozinha-preta-e-marela.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50">
<img src="https://i.ibb.co/yFcxnGz/cozinha-verde.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50">
<img src="https://i.ibb.co/7KZsDvk/armario-de-xicaras.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="50">
<img src="https://i.ibb.co/K2XZ3C0/churrasqueira.jpg" class="img-rounded" alt="Cinque Terre" width="50" height="500">
<img src="https://i.ibb.co/vj8zYCj/closet.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/nbqCw5k/quarto-criancas.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/7kQLVjy/quarto-casal.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/GFQNQsR/escritorio.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/VvHfhN1/guarda-roupa-com-espelho.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/pbnDjH7/guarda-roupa-1.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="https://i.ibb.co/ssYY8r3/cozinha-vermelha.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/GMJVN55/painel-de-tv-com-home-teather.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/hR2QLgt/guarda-roupa.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/Qk1Cc6J/cozinha1.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/2yFDwRs/IMG-20200616-WA0069.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/6PPMLLw/IMG-20200616-WA0095.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/QmpkTtG/IMG-20200616-WA0017.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/k82zXQp/IMG-20200616-WA0077.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/H4xjR7s/Whats-App-Image-2020-06-16-at-19-58-54.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/0VJp29P/Whats-App-Image-2020-06-16-at-19-58-52.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/cJFgtDW/Whats-App-Image-2020-06-14-at-00-02-45.jpg" class="img-rounded" width="50" height="50">
<img src="https://i.ibb.co/xXNbfnK/Whats-App-Image-2020-06-16-at-19-57-07.jpg" 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">
<!-- Indicadores -->
<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>
<!-- passagem das frases dos clientes como slides -->
<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>
<!-- Left e right controles -->
<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>
<!-- Container (Contatos seção) -->
<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>
<!-- mapa de localizacao -->
<img src="https://i.ibb.co/8D4JRvX/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>
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;
}
}
