<section class="container">
<div class="section first">
<div class="cont_title">
<h1>Алания</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен на северном склоне Центрального Кавказа.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Зов<br>тигра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Южная часть хребта Сихотэ-Алинь, горная система горы Облачная.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Мещёра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен на территории Владимирской области.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Таганай</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Северная часть горных хребтов Южного Урала.</p>
</div>
</div>
<div class="section">
<div class="cont_title">
<h1>Угра</h1>
<h3>Национальный парк</h3>
</div>
<div class="cont_desc">
<p>Расположен в Калужской области, в долинах рек Угра, Жиздра, Высса и Ока.</p>
</div>
</div>
</section>
html, body {
margin: 0;
max-width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.section {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}
.cont_title {
position: relative;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
margin-top: 30vh;
}
.cont_title h1 {
text-transform: uppercase;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
vertical-align: middle;
}
.cont_title h3 {
text-transform: uppercase;
font-size: 1.3vw;
}
.cont_desc {
position: relative;
display: block;
text-align: center;
width: 60%;
height: auto;
margin: auto;
padding-top: 30px;
}
.cont_desc p {
margin: 0;
font-size: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.