<ul class="navigation">
<li>
<a href="#section_01" title="Секция №1" class="scroll">1</a>
</li>
<li>
<a href="#section_02" title="Секция №2" class="scroll">2</a>
</li>
<li>
<a href="#section_03" title="Секция №3" class="scroll">3</a>
</li>
<li>
<a href="#section_04" title="Секция №4" class="scroll">4</a>
</li>
</ul>
<header>
<h1>Landing page</h1>
</header>
<section class="fixed-background img-1" id="section_01">
<div class="main-content">
<h3>Раздел №1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
</div>
</section>
<section class="fixed-background img-2" id="section_02">
<div class="main-content">
<h3>Раздел №2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
</div>
</section>
<section class="fixed-background img-3" id="section_03">
<div class="main-content dark">
<h3>Раздел №3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
</div>
</section>
<section class="fixed-background img-4" id="section_04">
<div class="main-content">
<h3>Раздел №4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare cursus orci id rhoncus. Quisque rutrum ac massa posuere blandit. Fusce hendrerit ipsum nisl, vel ullamcorper lectus sodales vel. In auctor nec augue at lacinia. Nullam ullamcorper mauris ac pulvinar elementum.</p>
</div>
</section>
<footer>
<p>© 2020 – SebWeo.com – Все права защищены</p>
</footer>html, body {height: 100%;}
header {
background-color: #4a6279;
z-index: 999;
position: relative;
height: 100%;
}
header h1 {
font-size: 40px;
color: #fff;
font-weight: 300;
border: 1px solid #fff;
padding: 20px 25px;
position: absolute;
bottom: auto;
right: auto;
left: 5%;
top: 35%;
}
.navigation {
list-style: none;
position: fixed;
right: 25px;
z-index: 99999;
top: 250px;
}
.navigation li {
background: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin: 0 0 15px 0;
}
.navigation li:hover {background: #ccc;}
.navigation li a {text-decoration: none; color: #4267b2}
.main-content {width: 65%;}
.fixed-background {position: relative; padding: 45px 20px 0; height:100%; padding:0}
.fixed-background h3 {
font-size: 45px;
color: #fff;
margin-bottom: 16px;
border: 1px solid #fff;
width: 70%;
padding: 10px 15px;
text-align: center;
}
.fixed-background p {font-size: 18px;}
.fixed-background.img-1 {background-color: #2fd474;}
.fixed-background.img-2 {background-color: #f94736;}
.fixed-background.img-3 {background-color: #e8630a;}
.fixed-background.img-4 {background-color: #904bab;}
footer{background: #172029; padding: 15px 0;}
footer p{text-align: center; color: #fff;}
/* стили для мобильных устройств и планшетов */
@media only screen and (min-width: 768px) {
.main-content {
position: absolute;
left: 7%;
bottom: auto;
top: 10%;
}
.main-content h3 {font-size:45px;}
.main-content p {
font-size: 18px;
line-height: 1.8;
color: #fff
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.fixed-background h3 {font-size: 40px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.main-content {
left: auto;
margin: 0 auto;
padding: 25px 20px 20px;
text-align: center;
}
.fixed-background h3 {font-size: 28px; width: initial;}
.fixed-background p {
line-height: 1.6;
color:#fff;
font-size: 16px;
}
.fixed-background {padding: 0;}
}
@media only screen and (max-width: 767px) {
header h1 {font-size: 25px;}
.main-content {
left: auto;
margin: 0 auto;
padding: 25px 20px 20px;
text-align: center;
}
.fixed-background h3 {font-size: 28px; width: initial;}
.fixed-background p {
line-height: 1.6;
color: #fff;
font-size: 16px;
}
.fixed-background {padding: 0;}
}jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$("html,body").animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});
External CSS
This Pen doesn't use any external CSS resources.