Доброго времени суток, уважаемые пользователи Хабр!
Столкнулся с такой проблемой, что не получается сделать переход главного фона на сайте. (всего 3 картинки - "bg.jpg", "bg_1.jpg", "bg_2.jpg")
Какой нужен код для HTML, CSS, JS в данном случае?
Код HTML:
<header id="header" class="header">
<div class="container">
<div class="nav animated bounceInDown">
<a href="/"><img src="/templates/assets/img/logo.png" class="logo" alt="#" width="98px"></a>
<ul class="menu">
<li>
<a href="/">Главная</a>
<a href="news">Новости</a>
<a href="forum">Форум</a>
<a href="donate">Донат</a>
<a href="about">О нас</a>
</li>
</ul>
<a class="index__login" href="/#/auth">Личный кабинет</a>
<button class="menu-open">
<img src="/templates/assets/img/burger.svg" alt="Открыть меню">
</button>
</div>
<div class="offer animated fadeIn">
<h1 class="greenpeople">#<br> #</h1>
<p>#</p>
<a href="#" class="btn">Начать играть</a>
</div>
</div>
</header>
Код CSS:
.header {
padding-top: 20px;
width: 100%;
background: url(../img/bg.jpg) no-repeat center;
background-size: cover;
padding-bottom: 100px;
min-height: max-content;
}
header a {
color: #2c3e50;
}
.logo {
margin-right: 69px;
}
.menu {
margin: auto;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
}
.menu li a {
text-decoration: none;
font-size: 14px;
margin-right: 40px;
letter-spacing: 0.1em;
transition: 0.3s all;
}
.menu li a:hover {
color: #52ce70;
box-shadow: 0 2px 0 0 #52ce70;
}
.index__login {
margin-left: auto;
}
.index__login {
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 45px;
background: #52ce70;
color: #fff;
transition: 0.3s all;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.22);
}
.index__login:hover {
color: #52ce70;
background: #fff;
}
Простой
