LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


	
	Responsive One Page Website
    
  
	

	
	 

	
	

	
	 
  
	
	
		
	 
	 
	



	

	

Sobre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, at doloribus officiis placeat dignissimos amet error possimus explicabo, numquam excepturi optio nihil in quis quae maxime, itaque aliquam! Quasi accusamus est dicta totam inventore ratione quae porro libero, magnam in ex voluptas adipisci, numquam quaerat hic repellendus amet enim omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At laudantium delectus dolore aperiam, architecto ex id laborum obcaecati quibusdam adipisci quos sed ut, quia consectetur asperiores animi earum beatae ratione! Eveniet cumque quis aperiam similique, natus facere commodi sunt laudantium voluptas ipsam vel, quia, animi, ducimus impedit! Voluptates, expedita officia!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis saepe quod officia nam labore ut obcaecati perspiciatis odio accusamus autem sunt, tenetur vitae aliquam a culpa repellat velit ipsa. Tempore ipsam sed impedit temporibus nemo cumque ex nesciunt eius error excepturi, adipisci amet.

Serviços

  • Aliquam Suscipit
  • Atque Labore Excepturi
  • Voluptas Beatae
  • Aliquam Molestias
  • Atque Excepturi
  • Doloribus Officiis
  • Magnam In Ex Voluptas
  • Numquam Excepturi
  • Repellat Earum Totam
  • Reiciendis Nihil Vero
  • Quos Vel Atque
  • Repellat Earum Totam
  • Reiciendis Nihil
  • Repellat Earum Totam
  • Reiciendis Nihil
  • Quos Vel Atque
  • Repellat Earum Totam
  • Reiciendis Nihil
  • Lorem Ipsum Dolor
  • Consectetur Elit
  • Deserunt Dolor
  • Lorem Ipsum Sit
  • Consectetur Elit
  • Deserunt Dolor

Portfólio

flor-amarela

flor-azul

flor-amarela

flor-azul

flor-amarela

flor-azul

Contacto

CSS
/* importação de elementos */

/* importação do font awesome para os ícones de abrir e fechar o menu responsivo */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');



/* importação da fonte do google fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 



body{
	margin: 0;
	padding: 0;  
	font-family: 'Open Sans', sans-serif;
	background-color: #f47d4a;   
}


.one-page-website{
	width: 100%; 
	margin: 0; 
}


/* 1 - estilos desktop */ 

/* estilos menu desktop */
.menu-desktop{
	width: 100%;   
	background-color: #f47d4a; 
	padding-top: 20px; 
	padding-bottom: 20px;
	margin: 0; 
	position: fixed;
}


/* estilos menu desktop hiperligações */ 
.menu-desktop a{
	text-decoration: none; 
}


/* estilos menu desktop texto */
.menu-desktop p{
	font-size: 16px; 
	color: #fbfbfb; 
	display: inline;
	padding: 30px 30px; 
	text-transform: uppercase;
	letter-spacing: 5px; 
	text-align: center;
}


/* estilos menu desktop quando o utilizador passa com o rato por cima do texto */ 
.menu-desktop p:hover{
	color: #fbfbfb; 
}


/* estilos sobre */
.sobre{
	width: 100%; 
	height: 100%; 
	margin: 0 auto; 
	background-color: #e1315b;  
	float: left;
	text-align: center;
	padding-top: 80px; 
	padding-bottom: 40px; 
}


/* estilos sobre título */
.sobre h1{
	color: #fbfbfb; 
	font-size: 28px; 
	text-transform: uppercase;
	line-height: 45px; 
	letter-spacing: 5px;
}


/* estilos sobre parágrafo */
.sobre p{
	color: #fbfbfb;
	font-size: 18px; 
	line-height: 40px; 
	letter-spacing: 3px;
	padding-left: 50px; 
	padding-right: 50px;  
}


/* estilos serviços */
.servicos{
	width: 100%; 
	height: 100%; 
	margin: 0 auto; 
	background-color: #008dcb; 
	float: left;
	text-align: center;
	padding-top: 20px; 
	padding-bottom: 40px; 
}	


/* estilos serviços título */
.servicos h1{
	color: #fbfbfb; 
	font-size: 28px; 
	text-transform: uppercase;
	line-height: 45px; 
	letter-spacing: 5px;
}


/* estilos serviços lista */
.servicos-lista{  
   margin: auto;   
   width: 100%;
}


/* estilos serviços itens lista */
.servicos-lista li{    
    color: #fbfbfb; 
	font-size: 18px; 
	text-align: center; 
    width: 25%; 
    float: left;    
    list-style: none;
    line-height: 50px;  
}


/* estilos portfólio */
.portfolio{
	width: 100%; 
	height: 100%; 
	margin: 0 auto; 
	background-color: #e1315b; 
	float: left;
	text-align: center;
	padding-top: 20px; 
	padding-bottom: 40px; 
}


/* estilos portfólio título*/
.portfolio h1{
	color: #fbfbfb; 
	font-size: 28px; 
	text-transform: uppercase;
	letter-spacing: 5px;
	padding-bottom: 20px; 
}


/* estilos portfólio imagens */
.portfolio img{
	width: 400px; 
	height: 350px; 
}


/* estilos portfólio colocar imagens em linha */
.portfolio p{
	display: inline;
}


/* estilos contacto */
.contacto{
	width: 100%; 
	height: 100%; 
	margin: 0 auto; 
	background-color: #008dcb; 
	float: left;
	text-align: center;
	padding-top: 20px; 
	padding-bottom: 40px; 
}


/* estilos contacto título*/
.contacto h1{
	color: #fbfbfb; 
	font-size: 28px; 
	text-transform: uppercase;
	line-height: 45px; 
	letter-spacing: 5px;
}


/* estilos contacto icons */
.contacto .fa{
	color: #fbfbfb; 
	width: 50px; 
	height: 50px; 
	font-size: 24px; 
	padding-top: 20px; 

}


/* estilos footer */
.footer{
	width: 100%;   
	background-color: #f47d4a; 
	margin: 0 auto; 
	float: left;
	text-align: center;
}


/* estilos footer texto */ 
.footer h6{
	color: #fbfbfb; 
	font-size: 12px; 
	text-transform: uppercase;
	letter-spacing: 3px; 
}


/* estilos selecionar elementos e mudar de cor */
::selection{
	background-color: #f47d4a
}




/* 2 - estilos mobile */

/* estilos menu mobile */
.menu-mobile{
	width: 100%; 
	height: 100%;  
	background-color: #f47d4a; 
	float: right;
	/* esconder menu mobile no desktop */ 
	display: none; 
	padding-top: 10px; 
}


/* estilos icon hamburguer */
.menu-mobile .fa{
	font-size: 50px; 
	color: #fbfbfb; 
	cursor: pointer; 	
	padding-top: 10px; 
	padding-bottom: 20px;
}


/* estilos conteudo menu mobile */
.menu-mobile-conteudo{
	width: 100%; 
	height: 600px; 
	background-color: #f47d4a; 	
	display: none;  
	padding-top: 50px; 
}



/* estilos texto menu mobile */
.menu-mobile-conteudo p{
	list-style: none;
	color: #fbfbfb; 
	width: 100%; 
	float: left;
	text-align: center; 
	font-size: 32px; 	
	text-transform: uppercase;
	letter-spacing: 20px; 
}




/* 3 - media queries */  
@media (max-width: 1024px){
  .menu-desktop{display: none;}
  .menu-mobile{display: block;}
  .sobre{padding-top: 20px;}
  .servicos{padding-top: 20px;}
  .servicos-lista li{width: 100%;}  
  .portfolio{padding-top: 20px;}
  .portfolio img{width: 100%; height: 500px;}
  .contacto{padding-top: 20px;}
}



/* created by magda pimentel, june 2017 */  
JS
// utilizando jQuery


// mostrar icon hamburguer em ecrãs pequenos
function showMenu(){
	$('.menu-mobile-conteudo').fadeIn(1000, function(){

	// trocar icon hamburguer por icon cruz  	
	$('.menu-mobile').html(''); 
	}); 

	// esconder o scroll. apenas visível o conteúdo do menu
    $('body').css('overflow','hidden');
}	


// esconder menu mobile no desktop
function escondeMenuMobile(){
	var largura = window.innerWidth; 

	if(largura>1024){
    $('.menu-mobile-conteudo').fadeOut(1000); 
	}
}


// fechar o icon cruz 
function closeMenu(){
	$('.menu-mobile-conteudo').fadeOut(1000); 
	$('.menu-mobile').html('');
}


// ir até ao conteúdo da página
function vaiAteaoConteudo(destino){
    $('body').css('overflow','scroll');
    var destino_conteudo= "#" +destino; 
    
    $('html, body').animate({
        scrollTop:$(destino_conteudo).offset().top-40
    }, 3000); 
}	


// created by magda pimentel, june 2017
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Square Adv