2

Preciso montar um layout com a seguinte estrutura.

inserir a descrição da imagem aqui

Onde a parte azul vai ser uma imagem.

<header class="header-bg">
<div class="logo">
  <span>Logo</span>
</div>

<nav class="menu">
  <ul>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#produtos">Produtos</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>
<p> BLA BLA BLA </p>

A parte do menu eu acho que posso usar flexbox, e colocar um space-between para deixar a logo e o menu cada um em um canto, porém não sei como colocar uma imagem de fundo nisso, que acabe no inicio do conteúdo do site (na imagem o sobre) e não sei como posicionar o P (BLA BLA BLA) no meio, talvez utilizando um margin: 0 auto porém não sei se é a melhor maneira.

8
  • 1
    background-image: url(caminho_da_imagem);
    – Sam
    Commented 18/12/2018 às 22:08
  • Vc está usando algum Framework tipo Bootstrap ou está fazendo tudo na mão?
    – hugocsl
    Commented 18/12/2018 às 22:16
  • @hugocsl Tudo na mão, mas posso utilizar BS sem problemas Commented 18/12/2018 às 22:17
  • @Sam Colocar a imagem eu sei, não sei fazer do jeito que falei no post Commented 18/12/2018 às 22:17
  • 1
    @hugocsl Agradeço amigo, mas se fica melhor com um framework sem problemas também, pensei em talvez o Bulma pela questão de ser mais leve, acho o BS muito pesado. Commented 18/12/2018 às 22:24

1 Resposta 1

3

Segue um exemplo, sei que alguns propriedades estão repetidas e poderiam ser otimizadas, mas preferir deixar individualmente para facilitar o seu entendimento, mesmo ficando com umas linhas a mais de código. Basicamente usei flex para fazer tudo então ficou bem responsivo.

Segue o código:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: 40%;
	min-height: 250px;
	background-image: url(https://unsplash.it/300/200);
	background-size: cover;
    background-position: center;
	display: flex;
	flex-direction: column;
	position: relative;
}	
nav  {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(255,0,0,0.5);
}
nav ul {
	padding: 0;
	display: flex;
	align-items: center;
	color: #fff;
}
nav ul li {
	list-style: none;
}
header section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100% - 50px);
}
header section h2 {
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
h1 {
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
<header>
	<nav>
		<img src="https://placecage.com/100/50" alt="">
		<ul>
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
	</nav>
	<section>
		<h2>Lorem ipsum dolor sit amet.</h2>
	</section>
</header>
<main>
	<h1>Lorem ipsum dolor sit.</h1>
</main>

4
  • 1
    Obrigado @hugocsl, me ajudou muito. Commented 18/12/2018 às 23:42
  • 1
    É o Nicolas Cage alí? XD Commented 19/12/2018 às 0:09
  • 1
    @AndreiCoelho sim haha, tem o placecage.com e o fillmurray.com são meus dois cdn de imagem preferidos :D. Sobre o código ele não eh tão refinado, mas eh uma base que vc pode usar pra muitos modelos de layout. Se vc quiser um modelo com header e fixo e footer dinâmico as vezes vc pode tentar juntar esse layout com esse outro pt.stackoverflow.com/questions/19531/… []'s
    – hugocsl
    Commented 19/12/2018 às 0:14
  • 1
    Acabei de visitar os sites! kkkk Commented 19/12/2018 às 0:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .