Alterando cores

Para alterar as cores da paleta de cor,
------
1°pesquise pela cor #000543 na pagina HTML. Depois altere pela cor desejada.
------
2°Faça o mesmo no arquivo CSS nav_css.css.
------
3°Depois procure no arquivo bootstrap.min.css a palavra "inverse" e substitua a cor



Seções pré definidas



Serviços





Titulo

Titulo

Pellentesque habitant morbi

Titulo

Pellentesque habitant morbi

Titulo

Pellentesque habitant morbi 

  	
  		
  		<!-- sections Service -->
 <!--  
  <section class="flex"  style="height:  100%">--> <!-- Section Opicional -->
  <section>  
  <style>	  
	  .serv_card{	  
		  width: 300px;
		transition: all ease 1s;  
	  }.hrdivo{	  
			width: 200px;
			height: 5px;
			background-color:#1abc9c;		  
	  }.bolinhas{
		  width: 130px;
	  }
	  .serv_card:hover{		  
		  background-color: rgba(249,245,246,1.00);
		  border-radius: 20px;		   
	  }
	  </style>  
  <!-- Div Geral -->  
  		<!-- Div titulo -->
  		<div style="width: 100%">
  	<br><br>
  		<center><h1 class="textoservice" style="font-family: 'Maven Pro', sans-serif;">Titulo</h1></center>
  		<center><div class="hrdivo"></div></center>		
  		
  	</div>
  		<div class="flex" style="width: 100%;justify-content: center;min-height: 350px">	
  		<!-- Cartão -->
  		<div class="serv_card wow fadeInLeft">
  			<center><img src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="" class="bolinhas"></center>
  			
  			<center><h4>Titulo</h4></center>
  			<div style="padding: 5px" >
  			<center><p>Pellentesque habitant morbi </p></center>
  			</div>
  		</div>	
  		<!-- Cartão -->
  		<div class="serv_card wow fadeInUp">
  			<center><img src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="" class="bolinhas"></center>
  			
  			<center><h4>Titulo</h4></center>
  			<div style="padding: 5px" >
  			<center><p>Pellentesque habitant morbi </p></center>
  			</div>
  		</div>	
  		<!-- Cartão -->
  		<div class="serv_card wow fadeInRight">
  			<center><img src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="" class="bolinhas"></center>
  			
  			<center><h4>Titulo</h4></center>
  			<div style="padding: 5px" >
  			<center><p>Pellentesque habitant morbi </p></center>
  			</div>
  		</div>	
  		
  	</div>
  	
  </section>


Seções pré definidas



Sessão Tex Img





Titulo

Titulo

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo



  	 
  <!-- Section Texto/ Imagem -->
  <section class="flex" style="background-color: #1abc9c ;min-height: 100%">  
  	<style>
		.texsectionone{			
			color:#fff;			
		}		
		.ta{
			min-height: 400px;	
		}
		.tbe{
			min-height: 350px;
			/*background-color: aqua;*/
			padding: 80px;			
		}	.tbd{
			min-height: 350px;
			/*background-color: #288F0F ;*/			
		} 
		/*Barra inferior ao titulo*/
		.hrdiv{			
			width: 200px;
			height: 5px;
			background-color:#fff;
		}		
		@media screen and (max-width: 1100px){			
		.tbe{		
			text-align: center;
			padding: 5px;			
		}	.tbd{
			padding: 5px;
			
		} 	
			
		}
	  
	  </style>
	  
	  <div style="width: 100%">
  	<br><br>
  		<center><h1 class="texsectionone" style="font-family: 'Maven Pro', sans-serif;">Titulo</h1></center>
  		<center><div class="hrdiv"></div></center>  		
  	</div>
  	<!-- div geral -->
  	<div class="flex ta" style="width: 100%;flex-wrap: wrap-reverse">
  	<!-- Titulo -->  	
  		<!-- div metade esquerda -->
  		<div class="tbe" style="width: 50%;min-width: 300px;">  			
  			<!-- div texto -->
  			<div style="width: 100%;padding-left: : 40px;">  				
  				<h2 class="texsectionone" style="font-family: 'Maven Pro', sans-serif;">Titulo</h2>
  			</div>  			
  			<!-- div texto -->
  			<div  style="width: 100%;padding-left: : 40px;">  				
  				<h3 class="texsectionone" style="font-family: 'Maven Pro', sans-serif;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo</h3>
  			</div>  			
  		</div>
  		<!-- div metade direita -->
  		<div class="flex tbd" style="width: 50%;min-width: 300px;">
  			<!-- imagem da direita -->
  			<img src="https://www.oficinadanet.com.br/imagens/post/13838/notebook1.png" alt="" width="100%">  			
  		</div>  		
  	</div>  
  </section>
phone




email




question_answer

(19)3333-3333





contato@email.com.br





(19)3333-3333

Mensagem

Preencha o Formulário e envie 



  	 
 <section>
  	<div class="flex" style="width:100%">  	
  	<style>
		.aone{			
			width: 50%;			
		}
		
		@media screen and (max-width: 1100px){			
		.aone{			
			width: 100%;			
		}			
		}	
		</style>
  	
  	<div  class="flex aone" style="height: 100%;background-color: #eee;min-height: 500px;min-width:300px">
  		<div  style="width:50%;height:100%;padding: 50px">
  		
  		<div class="flex" style="width: 100%">
  		<i style="font-size: 70px" class="material-icons">phone</i>

  		</div>
  		   <br> <br> <br> <br>
  		<div class="flex" style="width: 100%">
  		<i style="font-size: 70px" class="material-icons">email</i>
  		</div>
  		<br> <br> <br> <br>
  		<div class="flex" style="width: 100%">
  		<i style="font-size: 70px" class="material-icons">question_answer</i>
  		</div>  		
  	</div>
  	<div  style="width:50%;height: 100%">
  		<div class="flexrigth" style="width: 100%">  		
  		<h4>(19)3333-3333</h4>
  		</div>
  		 <br> <br> <br> <br>
  		<div class="flexrigth" style="width: 100%">  		
  		<h4>contato@email.com.br</h4>
  		</div>
  		 <br> <br> <br> <br>
  		<div class="flexrigth" style="width: 100%">  		
  		<h4>(19)3333-3333</h4>
  		</div>
  	</div>  		
  	</div>  	
  	
  			<div class="flex aone" style="background-color: #1abc9c;min-height: 500px;min-width:300px">  		
  		<div class="col-sm-5">  		
  		<style>
			.coo{				
				color:#FFFFFF;				
			}
			
				</style>
  <h2  class="coo">Mensagem</h2>
  <p  class="coo">Preencha o Formulário e envie </p>
  <form>
    <div class="form-group">
      <label  class="coo" for="usr">Nome Completo:</label>
      <input type="text" class="form-control" id="usr" placeholder="Insira Seu Nome">
    </div>
    <div class="form-group">
      <label  class="coo" for="pwd">E-mail:</label>
      <input type="email" class="form-control" id="pwd"  placeholder="Insira Seu Melhor E-mail">
    </div>
      
      <div class="form-group">
  <label  class="coo" for="sel1">Campo Select</label>
  <select class="form-control" id="sel1">
    <option>Não</option>
    <option>Sim</option>    
  </select>
</div>    
    <div class="form-group">
      <label  class="coo" for="pwd">Mensagem</label>
      <textarea class="form-control" id="pwds">  </textarea>
    </div>    
    <center><input type="submit" class="btn btn-default"></center>
  </form>
</div>  		
  	</div>  	
  	</div>  	
  </section>


Seções pré definidas



Sessão Time Line



About

Lorem ipsum dolor sit amet consectetur.

  • 2009-2011

    Our Humble Beginnings

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

  • March 2011

    An Agency is Born

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

  • December 2012

    Transition to Full Service

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

  • July 2014

    Phase Two Expansion

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

  • Be Part
    Of Our
    Story!



  	
CSS

  	 
 <style>
	.timeline {
	position: relative;
	padding: 0;
	list-style: none
}
.timeline:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	width: 2px;
	margin-left: -1.5px;
	content: '';
	background-color: #e9ecef
}
.timeline>li {
	position: relative;
	min-height: 50px;
	margin-bottom: 50px
}
.timeline>li:after, .timeline>li:before {
	display: table;
	content: ' '
}
.timeline>li:after {
	clear: both
}
.timeline>li .timeline-panel {
	position: relative;
	float: right;
	width: 100%;
	padding: 0 20px 0 100px;
	text-align: left
}
.timeline>li .timeline-panel:before {
	right: auto;
	left: -15px;
	border-right-width: 15px;
	border-left-width: 0
}
.timeline>li .timeline-panel:after {
	right: auto;
	left: -14px;
	border-right-width: 14px;
	border-left-width: 0
}
.timeline>li .timeline-image {
	position: absolute;
	z-index: 100;
	left: 0;
	width: 80px;
	height: 80px;
	margin-left: 0;
	text-align: center;
	color: #fff;
	border: 7px solid #e9ecef;
	border-radius: 100%;
	background-color: #fed136
}
.timeline>li .timeline-image h4 {
	font-size: 10px;
	line-height: 14px;
	margin-top: 12px
}
.timeline>li.timeline-inverted>.timeline-panel {
	float: right;
	padding: 0 20px 0 100px;
	text-align: left
}
.timeline>li.timeline-inverted>.timeline-panel:before {
	right: auto;
	left: -15px;
	border-right-width: 15px;
	border-left-width: 0
}
.timeline>li.timeline-inverted>.timeline-panel:after {
	right: auto;
	left: -14px;
	border-right-width: 14px;
	border-left-width: 0
}
.timeline>li:last-child {
	margin-bottom: 0
}
.timeline .timeline-heading h4 {
	margin-top: 0;
	color: inherit
}
.timeline .timeline-heading h4.subheading {
	text-transform: none
}
.timeline .timeline-body>p, .timeline .timeline-body>ul {
	margin-bottom: 0
}

@media (min-width:768px) {
.timeline:before {
	left: 50%
}
.timeline>li {
	min-height: 100px;
	margin-bottom: 100px
}
.timeline>li .timeline-panel {
	float: left;
	width: 41%;
	padding: 0 20px 20px 30px;
	text-align: right
}
.timeline>li .timeline-image {
	left: 50%;
	width: 100px;
	height: 100px;
	margin-left: -50px
}
.timeline>li .timeline-image h4 {
	font-size: 13px;
	line-height: 18px;
	margin-top: 16px
}
.timeline>li.timeline-inverted>.timeline-panel {
	float: right;
	padding: 0 30px 20px 20px;
	text-align: left
}
}

@media (min-width:992px) {
.timeline>li {
	min-height: 150px
}
.timeline>li .timeline-panel {
	padding: 0 20px 20px
}
.timeline>li .timeline-image {
	width: 150px;
	height: 150px;
	margin-left: -75px
}
.timeline>li .timeline-image h4 {
	font-size: 18px;
	line-height: 26px;
	margin-top: 30px
}
.timeline>li.timeline-inverted>.timeline-panel {
	padding: 0 20px 20px
}
}

@media (min-width:1200px) {
.timeline>li {
	min-height: 170px
}
.timeline>li .timeline-panel {
	padding: 0 20px 20px 100px
}
.timeline>li .timeline-image {
	width: 170px;
	height: 170px;
	margin-left: -85px
}
.timeline>li .timeline-image h4 {
	margin-top: 40px
}
.timeline>li.timeline-inverted>.timeline-panel {
	padding: 0 100px 20px 20px
}
}
	</style>
  	
  	


  	
HTML

  	 
<section id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">About</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
                <div  class="timeline-image">
                  <img class="rounded-circle img-fluid" width="100%" src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>2009-2011</h4>
                    <h4 class="subheading">Our Humble Beginnings</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" width="100%" src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>March 2011</h4>
                    <h4 class="subheading">An Agency is Born</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid"  width="100%" src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>December 2012</h4>
                    <h4 class="subheading">Transition to Full Service</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid"  width="100%" src="http://framework.m3rsistemas.com.br/img/ballone.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>July 2014</h4>
                    <h4 class="subheading">Phase Two Expansion</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <h4>Be Part
                    <br>Of Our
                    <br>Story!</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

Texto Padrão Para
Ser Aplicado Aqui

Escreva o subtitulo do seu site



  	
  	  <style>
	  .inicialsec{
		
		  background-image: url(http://www.oldtownbarberclub.com/wp-content/uploads/2015/01/slide01.jpg);
		    background-size: cover;		  
		  background-repeat: no-repeat;
		 
	  }
	 
	  
	  .ronanks{
		  
		 width: 100%;
		  height: 100%;
		  background-color: rgba(0,0,0,0.78);
		  
		  min-width: 300px;
		  
			
		  
	  }.ronankstex{
		  text-shadow: 
			  
			  1px 1px 0 #CCC,
	2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
	3px 3px 0 #444;
	 /* end of 4 level deep dark shadow */
		  font-size: 70px;
		  color:#fff;
		  font-family: 'Maven Pro', sans-serif;
	  }
	   @media screen and (max-width: 1100px){
		  
		 .inicialsec{
		
		background-position: center;
		  background-size: cover;
		  
		 
		  } .ronankstex{
			  
			  font-size: 40px;
		  }
	  }
	  
	  
	  
 	
		.rbtn{
			
			width: 240px;
			border-radius: 2px;
			height: 60px;
			border: solid;
			background-color: transparent;
			border-color:#fff;
			color:#fff;
		
			font-size: 20px;
			transition: all ease .5s;	
			
		}.rbtn:hover{
			
			
			background-color:#fff;
			border-color:#fff;
			color:#000543;
		
			
			
			
		}
	
 
	
	</style>
	
	
  
  <section class="inicialsec"  style="height: 100%">
  	
  	<div class="ronanks flex">
  		
  		<div>
  		<center><h1 class="ronankstex">Texto Padrão Para <br> Ser Aplicado Aqui</h1></center>
  		<center><h3 style="color: #fff">Escreva o subtitulo do seu site</h3></center>
  		<center><button class="rbtn flex"> Saiba Mais</button></center>
  		</div>
  		
  	</div>
  	
  </section>




Utilitários

Nav bar maior

nav_css

	/* logo da nav bar*/
.logo{
	
	float: left;
	display: block;
	margin-left: 30px;
	margin-right: 10px;
	margin-top: 25px;

	height:60px; 
	
	transition: all ease .5s;	
}

.logo2{
	

	display: block;
	margin-left: 30px;
	margin-right: 10px;
	margin-top: 0px;

	height:60px; 
	
	transition: all ease .5s;	
}

/* navbar*/
	nav{
	
	margin-top: 0px;
	height: 100px;
	
	visibility: visible;
	
	
	transition: all ease .5s;	
	
} 

div#bs-example-navbar-collapse-1{
	
	transition: all ease .5s;
	
	
	
}


#biomenu{
	min-width: 400px;
	width: 70%;
	display: flex;
	
	justify-content: flex-end;
	position: absolute;
	left: 25%;	
	
}
/*links da nav*/
ul a{
		
	margin-top: 25px;
		
		font-size: 15px;
		font-weight: bold;
	font-family: 'Maven Pro', sans-serif;
	transition: all ease .5s;	
	}
menu.js

	
		else{
			/*volta nav*/
			$(".logo").css({"margin-top": "25px" ,"height":"60px"});
				
			$("ul a").css({"margin-top": "25px"});
				
				$("#navdown").css({"margin-top": "0px"});
				
				$("#navdown").css({ "width": "100%", "height" : "100px", "box-shadow": "0px 0px 0px transparent" });
			
			$("#navdown").removeClass(animationTipoa);
			
						
			$("#warap").addClass(animationTipoOut);
			
			$("#warap").css({"visibility": "hidden"});
			$("#brandlogo").css({"color": "#222", "margin-top":"0px"});
			
			
			
			$("#voltar_topo").removeClass('animated fadeInRightBig');
			
			$("#voltar_topo").css({"visibility": "hidden"});
			
			
			$("#bs-example-navbar-collapse-1").css({"height": "60px" });
		}
		
	}  
	);

Botão do Whatsapp


	
		
		<style>
	
	.whats{
		
		
		position: fixed;
		
		bottom: 10px;
		
		right: 10px;
		
		z-index: 1000;
	}
	
	
	</style>

<div class="whats flex">
		<?php  
	$textos = "Olá, Gostaria de Saber mais sobre ";
	
	//ddd sem parenteses
	$ddd= "19";
	
	//telefone com o 9 e sem traços
	$telef = "999952027";
	
	$frasewhatsapp   = str_replace(' ', '%20', $textos);?>
		
	 <a href="https://api.whatsapp.com/send?phone=55<?php echo($ddd);?><?php echo($telef);?>&text=<?php echo($frasewhatsapp );?>" class="flex">
		<div class="flex" style="width: 100px;height: 20px;background-color: #222;color:#fff">Whatsapp</div>
		<br>
	<img src="https://www.shareicon.net/download/2016/08/04/806635_message_512x512.png" alt="" width="50px">
		
		</a>
		
	</div>