Задать вопрос
@Maksuxich

Как поставить стрелки по бокам?

Нужно поставить стрелки справа и слева посередине баннера, но они находится под баннером64df115a8fef3997519470.png
64df1184986a5124985091.png
Делал без JS

Код:

HTML:
<body>
        <nav class="navbar">
            <div class="container">
                <a href="#" class="navbar-brand">Город мастеров</a>
                <div class="navbar-wrap">
    
                    <ul class="navbar-menu">
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Портфолио</a></li>
                        <li><a href="C:/Users/Denis/Desktop/Site/catalog/catalog.html">Каталог</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                    
                </div>
                <p class="numberphone"> 8 (383) 375-20-55 <span class="hour">c 9 – 18 </span></p>
                <a href="#" class="callback">Записаться на замер</a>
            </div>
        </nav>
        <div class="all">
            <input checked type="radio" name="respond" id="desktop">
                <article id="slider">
                    <input checked type="radio" name="slider" id="switch1">
                    <input type="radio" name="slider" id="switch2">
                    <div id="slides">
                        <div id="overflow">
                            <div class="image">
                                <article>
                                    <section id="main_banner">
                                        <div class="container">
                                            <div class="inner_banner">
                                                <h1>Мы снизили цены!<br>Спешите оформить<br>заказ прямо сейчас!</h1>
                                                <a href="#" class="btn btn_next">Узнать подробнее</a>
                                            </div>
                                        </div>
                                    </section>
                                </article>
                                <article>
                                    <section id="main_banner">
                                        <div class="container">
                                            <div class="inner_banner">
                                                <h1>Мы снизили цены!<br>Спешите оформить<br>заказ прямо сейчас!</h1>
                                                <a href="#" class="btn btn_next">Узнать подробнее</a>
                                            </div>
                                        </div>
                                    </section>
                                </article>
                            </div>
                        </div>
                    </div>
                    <div id="controls">
                        <label for="switch1"></label>
                        <label for="switch2"></label>
                    </div>
                </article>
        </div>
    </body>


CSS:
.navbar {
	width: 100%;
	height: 70px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
.navbar .container {
	height: inherit;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.navbar-menu {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;

}
.navbar-menu li {
	display: inline-block;

}
.navbar-menu li a {
	display: inline-block;
	color: #000;
	opacity: 0.6;
	text-decoration: none;
	padding: 10px;
	
	transition: all .07s ease-in-out;
}
.navbar-menu li a:hover {
	opacity: 1;
}
.navbar-wrap {
	display: flex;
	flex-flow: row nowrap;
	
}
.callback {
	margin-left: 20px;
	padding: 12px 40px;
	background-color: coral;
	border-radius: 100px;
	color: #fff;
	text-decoration: none;
	transition: all .1s ease-out;
}
.callback:hover {
	transform: scale(1.04);
	color: #fff;
}
.navbar-brand {
	font-weight: 700;
	font-size: 26px;
	text-decoration: none;
	color: #000;

}
.navbar-brand:hover {
	color: coral;
	transition: all .10s ease-in-out;
}
.numberphone {
	text-decoration: none;
	margin-top: 17px;
	
}
body {
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #000;
	min-width: 320px;
	overflow-x: hidden;
	height: auto;
}
#main_banner {
	padding: 95px 0;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-image: url(banner.png);
	position: relative;
}
#main_banner .inner_banner >h1{
	margin-bottom: 50px;
	color: #000;
	font-size: 57px;
	font-weight: 600;
	min-width: 838px;
	line-height: 60px;
}
#main_banner .inner_banner >.btn{
	padding: 9px 15px;
	font-size: 24px;
}
.btn {
	font-style: 16px;
	color: white;
	font-weight: 500;
	padding: 9px 24px;
	background-color: #000;
	border-radius: 10px;
	text-decoration: none;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}
.btn:hover {
	background-color: #000;
	color: #000;
}
.btn.btn_next {
	background-color: rgb(255, 129, 25);
}
.btn.btn_next:hover {
	background-color:rgb(255, 104, 49);
}
.container {
	width: 85%;
	margin: 0 auto;
}


#slider{ 
	margin: 0 auto;
}

#slides article{ 
	width: 20%;
	float: left;
}

#slides .image{ 
	width: 500%;
	line-height: 0;
	position: relative;
}

#overflow{ 
	width: 100%;
	overflow: hidden;
}

article img{ 
	width: 100%;
}

#desktop:checked ~ #slider{
	max-width: 1920px; 
}


#switch1:checked ~ #controls label:nth-child(5), 
#switch2:checked ~ #controls label:nth-child(1),
#switch5:checked ~ #controls label:nth-child(4){
	background: url('prev.png') no-repeat; 
	float: left;
	display: block;
	height: 68px;
	width: 68px;
	margin-bottom: 300px;
	position: absolute;
}


#switch1:checked ~ #controls label:nth-child(2), 
#switch2:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(1){
	background: url('next.png') no-repeat; 
	float: right;
	margin-bottom: 300px;
	display: block;
	height: 68px;
	width: 68px;
	position: absolute;
}
label, a{ 
	cursor: pointer;
}

.all input{ 
	display: none;
}


#switch1:checked ~ #slides .image{
	margin-left: 0;
	margin-bottom: -25%;
}

#switch2:checked ~ #slides .image{
	margin-left: -100%;
	margin-bottom: -25%;
}
#slides {
	position: relative;
}


#active label{ 
	border-radius: 10px; 
	display: inline-block; 
	width: 15px;
	height: 15px;
	background: #bbb;
}
#controls{ 
	position: relative;
	width: 100%;
	height: 50px;
}
#active label:hover{ 
	background: #76c8ff;
	border-color: #777 !important; 
}


#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
	background: #18a3dd;
	border-color: #18a3dd !important;
}

#slides .image{ 
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	
}
.image {
	position: relative;
}

#controls label:hover{ 
	opacity: 0.6;
}

#controls label{ 
	transition: opacity 0.2s ease-out;
}
  • Вопрос задан
  • 101 просмотр
Подписаться 1 Простой Комментировать
Решения вопроса 1
@Delta01
@de1ta01 пиши, помогу с вёрсткой =)
#slider{ 
  margin: 0 auto;
  position: relative;
}

#controls {
 height: 50px;
 left: 0;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 100%;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы