Uma estratégia interessante para quem tem pouco conteúdo, como em sites institucionais, é adoção da página no formato “OnePage” ou “Landing page”. Criar site OnePage traz bastante otimização em seus projetos.
Uma página no formato “OnePage” consiste em que todo conteúdo que deveria estar alocado em outras páginas de um site estariam na mesma página, separadas só por seções.
Existem muitas formas de navegação como utilizar javascript para fazer animações e transição dessas páginas.
Veja um exemplo simples do modelo de site OnePage que criaremos neste tutorial.
A pseudo classe :target consegue identificar link âncora da URL. Dessa forma, podemos aplicar o estilo aos elementos.
A estrutura dos arquivos e pastas seria esta:
Vamos criar nossa estrutura HTML, no arquivo index.html.
<!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>OnePage HTML5 e CSS3</title> <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="home" class="content"> <article class="box"> <h2>Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="company" class="content"> <article class="box"> <h2>Empresa</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="service" class="content"> <article class="box"> <h2>Serviços</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="contact" class="content"> <article class="box"> <h2>Contato</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <header> <h1>One Page CSS3</h1> <nav> <ul> <li id="link-home"><a href="#home">Home</a></li> <li id="link-company"><a href="#company">Empresa</a></li> <li id="link-service"><a href="#service">Serviços</a></li> <li id="link-contact"><a href="#contact">Contato</a></li> </ul> </nav> </header> </body> </html>
Explicando o código acima:
Agora vamos criar o arquivo style.css.
body{
background: url(../images/background.jpg) no-repeat fixed center top;
}
header{
width:20%;
background:#fff;
position: absolute;
left:0;
top:5%;
z-index: 5;
}
header h1{
text-align: center;
}
nav ul{
list-style:none;
margin:5px 0;
padding:0;
}
nav a{
display:block;
border:1px solid #e5e5e5;
border-left:0;
border-right:0;
margin:3px 0;
color:#333;
padding:5px 0;
text-decoration: none;
}
.box{
position:absolute;
top:5%;
right:10px;
width:70%;
height:70%;
background:#fff;
}
.box h2{
font-size:20px;
padding:10px;
}
.box p{
font-size:12px;
padding:10px;
}
.content{
min-width: 100%;
height: 98%;
position: absolute;
margin-left:-101%;
-webkit-transition: margin-left .8s ease-in-out;
-moz-transition: margin-left .8s ease-in-out;
-o-transition: margin-left .8s ease-in-out;
transition: margin-left .8s ease-in-out;
}
.content:target{
margin-left:0;
}
#home{
margin-left:0;
}
#home:target ~ header #link-home a,
#company:target ~ header #link-company a,
#service:target ~ header #link-service a,
#contact:target ~ header #link-contact a{
background: #333;
color: #fff;
}
Explicação do código acima:
Você pode ver o efeito funcionando no link abaixo:
https://www.mxcursos.com/blog/exemplos/onepage
Para baixar o código, acesse o link abaixo:
https://github.com/davidchc/tutorial-criando-onepage-html5-css3
Ah e se você quiser se aperfeiçoar em desenvolvimento de sites, aprender a criar sites responsivos, aprender Bootstrap, CSS3, HTML5, Javascript, jQuery entre outros, não deixe de conhecer nossos cursos online de Desenvolvimento Front-End.
Espero que tenham gostado.
Um abraço e até a próxima.
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
David, gostei do tutorial. Copiei o código, mas não estu conseguindo linkar o css ao html...
David qnd clicamos para ver o efeito funcionando, pede senha e login :(
Você pode acessar agora, já consertei.