O que é recomendado fazer no caso abaixo, em que um parágrafo tem mais ou menos linhas que o outro e , por consequência, o layout fica quebrado?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Top Casa Fina Arquitetura</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- start Header -->
<header>
<!-- start Nav -->
<nav class="navbar navbar-inverse">
<!-- start Container do Wrapper -->
<div class="container">
<!-- start Wrapper Botão Navbar e Logo -->
<div class="navbar-header">
<!-- start Botão Navbar -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-topCasaFina" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- end Botão Navbar -->
<!-- start Logo -->
<a class="navbar-brand" href="index.html">TopCasaFina Arquitetura</a>
<!-- end Logo -->
</div>
<!-- end Wrapper Botão Navbar e Logo -->
<!-- start Navbar Collapse -->
<div class="collapse navbar-collapse" id="navbar-topCasaFina">
<ul class="nav navbar-nav">
<!-- hrefs ancorados nos id's das sessões -->
<li><a href="#sobre-nos">Sobre Nós</a></li>
<li><a href="#nossos-projetos">Nossos projetos</a></li>
<li><a href="#depoimentos">Depoimentos</a></li>
<li><a href="#video">Vídeo</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
<!-- end Navbar Collapse -->
</div>
<!-- end Container Flúido do Wrapper -->
</nav>
<!-- end Nav -->
<!-- start Texto -->
<div class="texto-banner-header">
<h1>TopCasaFina Arquitetura</h1>
<p>Projetando a casa dos sonhos desde 2000 A.C</p>
<button type="button" class="btn btn-primary btn-lg">Contate-nos agora</button>
</div>
<!-- end Texto -->
</header>
<!-- end Header -->
<!-- start Sobre Nós -->
<section id="sobre-nos" class="container">
<h2>Sobre Nós</h2>
<!-- start Row do Grid -->
<div class="row">
<img class="img-responsive col-sm-6" src="img/empresa.jpg" alt="">
<!-- start Panel Group -->
<div id="paineis-sobre" class="panel-group col-sm-6">
<!-- start Panel1 -->
<div class="panel panel-default">
<!-- start Título Painel 1 -->
<div class="panel-heading">
<h3 data-parent="#paineis-sobre" class="panel-title" data-toggle="collapse" data-target="#sobre-index-p1">Desde 1935</h3>
</div>
<!-- end Título Painel 1 -->
<!-- start Corpo Painel 1 -->
<div id="sobre-index-p1" class="collapse in">
<div class="panel-body">
<p>Desde 1935 trazendo casas, mansões e prédios lindos para o mundo.</p>
</div>
</div>
<!-- end Corpo Painel 1 -->
</div>
<!-- end Panel1 -->
<!-- start Panel2 -->
<div class="panel panel-default">
<!-- start Título Painel 2 -->
<div class="panel-heading">
<h3 data-parent="#paineis-sobre" class="panel-title" data-toggle="collapse" data-target="#sobre-index-p2">Preços acessíveis</h3>
</div>
<!-- end Título Painel 2 -->
<!-- start Corpo Painel 2 -->
<div id="sobre-index-p2" class="collapse">
<div class="panel-body">
<p> Preços a partir de R$ 1000,00.</p>
</div>
</div>
<!-- end Corpo Painel 2 -->
</div>
<!-- end Panel2 -->
<!-- start Panel3 -->
<div class="panel panel-default">
<!-- start Título Painel 3 -->
<div class="panel-heading">
<h3 data-parent="#paineis-sobre" class="panel-title" data-toggle="collapse" data-target="#sobre-index-p3">Alegria em colaborar para um mundo mais bonito</h3>
</div>
<!-- end Título Painel 3 -->
<!-- start Corpo Painel 3 -->
<div id="sobre-index-p3" class="collapse">
<div class="panel-body">
<p>Trazendo alegria para a vida das pessoas que tem dinheiro para gastar.</p>
</div>
</div>
<!-- end Corpo Painel 3 -->
</div>
<!-- end Panel3 -->
</div>
<!-- end Panel Group -->
</div>
<!-- end Row do Grid -->
</section>
<!-- end Sobre Nós -->
<!-- start Jumbotron(banner) -->
<div class="jumbotron">
<div class="container">
<h3>Mais de 300 prêmios em design e em conforto</h3>
<p>Mais de 5 milhões de clientes satisfeitos em todo o mundo</p>
</div>
</div>
<!-- end Jumbotron(banner) -->
<!-- start Nossos Projetos -->
<section id="nossos-projetos" class="container">
<h2>Nossos Projetos</h2>
<!-- start Row do grid -->
<div class="row">
<!-- start Thumbnail 01 -->
<div class="col-sm-6 col-md-4">
<figure class="thumbnail">
<img src="img/projetos/casa-castelo.png" alt="Imagem da Casa Castelo">
<figcaption class="caption">
<h3>Casa Castelo</h3>
<p>A Casa Castelo é o último lançamento da TopCasaFina feita para um monge.</p>
</figcaption>
</figure>
</div>
<!-- end Thumbnail 01 -->
<!-- start Thumbnail 02 -->
<div class="col-sm-6 col-md-4">
<figure class="thumbnail">
<img src="img/projetos/casa-lago.png" alt="Imagem da Casa Lago">
<figcaption class="caption">
<h3>Casa Lago</h3>
<p>A Casa do Lago foi lar de inúmeras pessoas que conheciam o presidente da época.</p>
</figcaption>
</figure>
</div>
<!-- end Thumbnail 02 -->
<!-- start Thumbnail 03 -->
<div class="col-sm-6 col-md-4">
<figure class="thumbnail">
<img src="img/projetos/mercado-marapira.png" alt="Imagem do Mercado Marapira">
<figcaption class="caption">
<h3>Mercado Marapira</h3>
<p>O mercado Marapira foi projetado nos mínimos detalhes na arquitetura baseada em frutas.</p>
</figcaption>
</figure>
</div>
<!-- end Thumbnail 03 -->
<!-- start Thumbnail 04 -->
<div class="col-sm-6 col-md-4">
<figure class="thumbnail">
<img src="img/projetos/palacio-dionisio.png" alt="Imagem do Palácio Dionísio">
<figcaption class="caption">
<h3>Palácio Dionísio</h3>
<p>O palácio Dionísio foi eleito pela revista 'Grandes palácios' como o palácio mais lindo do mundo.</p>
</figcaption>
</figure>
</div>
<!-- end Thumbnail 04 -->
<!-- start Thumbnail 05 -->
<div class="col-sm-6 col-md-4">
<figure class="thumbnail">
<img src="img/projetos/residencia-ludi.png" alt="Imagem da Residência Ludi">
<figcaption class="caption">
<h3>Residência Ludi</h3>
<p>A residência Ludi foi projetada para ser a mais bela casa de São Paulo pela revista Housing.</p>
</figcaption>
</figure>
</div>
<!-- end Thumbnail 05 -->
</div>
<!-- end Row do Grid -->
</section>
<!-- end Nossos Projetos -->
<!-- start Depoimentos -->
<section id="depoimentos">
<h2 class="container titulo-sessao-depoimentos">Depoimentos de Clientes</h2>
<!-- start Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- start Indicators (bullets) -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- end Indicators (bullets) -->
<!-- start Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- start Item 01 -->
<figure class="item active">
<img src="img/depoimentos/depoimentos.png" alt="Imagem da casa comprada por Yuri Padilha">
<figcaption class="carousel-caption">
<h3>Yuri Padilha</h3>
<p>Gostei muito e achei rápido o serviço</p>
</figcaption>
</figure>
<!-- end Item 01 -->
<!-- start Item 02 -->
<figure class="item">
<img src="img/depoimentos/depoimentos1.png" alt="Imagem da casa comprada por Fernando Stafaneni">
<figcaption class="carousel-caption">
<h3>Fernando Stafaneni</h3>
<p>Excelente trabalho.</p>
</figcaption>
</figure>
<!-- end Item 02 -->
<!-- start Item 03 -->
<figure class="item">
<img src="img/depoimentos/depoimentos2.png" alt="Imagem da casa comprada por Caio Sauzas">
<figcaption class="carousel-caption">
<h3>Caio Sauzas</h3>
<p>Gostei, competência em primeiro lugar.</p>
</figcaption>
</figure>
<!-- end Item 03 -->
</div>
<!-- end Wrapper for slides -->
<!-- start Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- end Controls -->
</div>
<!-- end Carousel -->
</section>
<!-- end Depoimentos -->
<!-- start Vídeo e Contato -->
<div class="container">
<!-- start Row -->
<div class="row">
<!-- start Vídeo Institucional -->
<section id="video" class="col-sm-6">
<h2>Vídeo Institucional</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="1280" height="720" src="https://www.youtube.com/embed/P_qsfOHDwts" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<!-- end Vídeo Institucional -->
<!-- start Contato -->
<section id="contato" class="col-sm-6">
<h2>Contato</h2>
<p>Entre em contato conosco</p>
<!-- start Form -->
<form>
<!-- start Campo Nome -->
<div class="form-group">
<label for="contato-name">Nome</label>
<input type="text" class="form-control" id="contato-name" placeholder="Seu nome">
</div>
<!-- end Campo Nome -->
<!-- start Campo Email -->
<div class="form-group">
<label for="exampleInputEmail1">Seu email</label>
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
<!-- end Campo Email -->
<!-- start Radio Button 01 -->
<div class="radio">
<label>
<input type="radio" name="tipo-de-pessoa" id="optionsRadios1" value="option1" checked>
Pessoa Física
</label>
</div>
<!-- end Radio Button 01 -->
<!-- start Radio Button 02 -->
<div class="radio">
<label>
<input type="radio" name="tipo-de-pessoa" id="optionsRadios2" value="option2">
Pessoa Jurídica
</label>
</div>
<!-- end Radio Button 02 -->
<!-- start Select -->
<select class="form-control form-group">
<option disabled selected>Tipo de Situação</option>
<option>Casa</option>
<option>Apartamento</option>
<option>Mansão</option>
</select>
<!-- end Select -->
<!-- start Botão -->
<button type="submit" class="btn btn-primary">Enviar</button>
<!-- end Botão -->
</form>
<!-- end Form -->
</section>
<!-- end Contato -->
</div>
<!-- end Row -->
</div>
<!-- end Vídeo e Contato -->
<!-- start Footer -->
<footer>
<div class="container">
<adress>
<strong>TopCasaFina Arquitetura</strong><br>
Rua Vergueiro, 3185, Vila Mariana<br>
São Paulo, SP<br>
</adress>
<adress>
Tel: (11) 5571-2751 ou 5083-3884<br>
Email: <a href="mailto:#">contato.topcasafina@alura.com.br</a><br>
</adress>
</div>
</footer>
<!-- end Footer -->
<!-- start Scripts -->
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/navbar-animation-fix.js"></script>
<script src="bootstrap/js/toggle-navbar-after-clicked.js"></script>
<!-- end Scripts -->
</body>
</html>/* Fazendo com que o bg img cubra todo o header */
html, body {
height: 100%;
}
header {
height: 100%;
background-image: url("../img/castelo.jpg");
background-position: top center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
}
header h1 {
margin-top: 0;
}
.texto-banner-header {
background-color: rgba(0, 0, 0, .5);
width: 80%;
color: #fff;
border-radius: 8px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
/* fazendo - a partir da posição estilizada acima, com que o elemento se posicione em relação a ele mesmo */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* animação ao abrir e fechar o menu */
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
/* Sessão Sobre Nós*/
#paineis-sobre {
margin-top: 20px;
}
/* Sessão Depoimentos */
.titulo-sessao-depoimentos {
font-size: 22px;
background-color: #0275D8;
color: #fff;
margin-top: 0;
margin-bottom: 0;
padding-top: 30px;
padding-bottom: 25px;
}
/* Footer */
footer {
background-color: #333;
color: #fff;
margin-top: 20px;
padding: 20px 0;
line-height: 1.5;
}
footer adress:last-child {
padding-top: 15px;
display: block;
}
@media(min-width: 768px) {
/*Retirando a margem superior do grupo de painéis*/
#paineis-sobre {
margin-top: 0;
}
}
