HTML CSS Появление слайдера снизу

25 февраля 2022, 23:50

Друзья! Столкнулся с проблемой при вёрстке страницы. Дело в том, что снизу появляется слайдер, которого там быть не должно.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500|Nunito+Sans&display=swap'); 
* { 
	margin: 0; 
	padding: 0; 
} 
li { 
	list-style: none; 
} 
a { 
	text-decoration: none; 
} 
.header-container { 
	width: 100vw; 
	height: 100px; 
	background: #fff; 
} 
.logo { 
	float: left; 
	padding-top: 38px; 
	padding-left: 7vw; 
} 
.nav { 
	float: right; 
	padding-top: 45px; 
	padding-right: 7vw; 
	font-family: 'Montserrat'; 
	text-transform: uppercase; 
	font-size: 12px; 
	font-weight: 600; 
} 
.menu-list-element { 
	float: left; 
	padding-left: 2vw; 
	color: #191919; 
} 
.menu-list-element.active, .menu-list-element:hover { 
	color: #10c9c3; 
	cursor: pointer; 
} 
 
 
 
 
.container { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	-ms-align-items: center; 
	align-items: center; 
	-webkit-flex-direction: column; 
	-moz-flex-direction: column; 
	-ms-flex-direction: column; 
	-o-flex-direction: column; 
	flex-direction: column; 
} 
.text { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	-ms-align-items: center; 
	align-items: center; 
	-webkit-flex-direction: column; 
	-moz-flex-direction: column; 
	-ms-flex-direction: column; 
	-o-flex-direction: column; 
	flex-direction: column; 
	width: 38vw; 
} 
h1 { 
	display: -webkit-inline-flex; 
	display: -moz-inline-flex; 
	display: -ms-inline-flex; 
	display: -o-inline-flex; 
	display: inline-flex; 
	font-size: 38px; 
	font-family: 'Montserrat'; 
	font-weight: 600; 
	text-align: center; 
	color: #171717; 
} 
.under-text { 
	display: -webkit-inline-flex; 
	display: -moz-inline-flex; 
	display: -ms-inline-flex; 
	display: -o-inline-flex; 
	display: inline-flex; 
	font-size: 18px; 
	font-family: 'Nunito Sans'; 
	text-align: center; 
	margin-top: 23px; 
	color: #787878; 
} 
 
 
.images { 
	width: 100%; 
	margin-top: 97px; 
	float: left; 
} 
.light-block, .dark-block { 
	width: 25%; 
	height: 300px; 
	float: left; 
} 
.light-block { 
	background-color: #ddd; 
} 
.dark-block { 
	background-color: #838383; 
} 
.cyan-block { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	justify-content: center; 
	-ms-align-items: center; 
	align-items: center; 
	opacity: 0; 
	width: 100%; 
	height: 100%; 
	background-color: #21bfb9; 
	-webkit-transition: opacity 0.5s ease-in; 
	-o-transition: opacity 0.5s ease-in; 
	transition: opacity 0.5s ease-in; 
	z-index: 1; 
} 
.cyan-block:hover { 
	opacity: 70%; 
	cursor: pointer; 
} 
.cyan-block img { 
	display: -webkit-flex; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: flex; 
	z-index: 2; 
	opacity: 100%; 
} 
 
 
 
.footer-container { 
	float: left; 
	width: 100%; 
	height: 284px; 
	padding: auto 0; 
	background-color: #141414; 
} 
.copyright { 
	float: left; 
} 
[![Слайдер][1]][1]

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" /> 
	<title>Amelia Woods</title> 
	<link rel="stylesheet" href="style.css" /> 
</head> 
<body class="load"> 
	<header> 
		<div class="header-container"> 
			<div class="logo"> 
				<img src="logo.png" alt="Logo" /> 
			</div> 
			<div class="nav"> 
				<ul class="menu-list"> 
					<li class="menu-list-element active">home</li> 
					<li class="menu-list-element">about</li> 
					<li class="menu-list-element">contact</li> 
				</ul> 
			</div> 
		</div> 
	</header> 
	<main> 
		<div class="container"> 
			<div class="text"> 
				<h1>UI/UX & Graphic Designer</h1> 
				<span class="under-text">I am a Graphic & Web Designer based in New York, specializing in User Interface Design and Development</span> 
			</div> 
			<div class="images"> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="light-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
				<div class="dark-block"> 
					<div class="cyan-block"> 
						<img src="eye.png" alt=""> 
					</div> 
				</div> 
			</div> 
		</div> 
	</main> 
	<footer> 
		<div class="footer-container"> 
			<div class="copyright"> 
				<span class="header">Piroll Design, Inc.</span> 
			</div> 
			<div class="contacts">1</div> 
			<div class="links">2</div> 
			<div class="social">3</div> 
		</div> 
	</footer> 
</body> 
</html>

Answer 1

Вероятно если добавить в CSS строчку: