Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <link rel="stylesheet" href="styles/styles.css">
	<style>
	html {
    --primary: #583660;
    --secondary: darkcyan;
    --black: #1b1b1b;
    --white: #f9f9fb;
}

body {
    background: darkcyan;
    margin: 0;
}

#content {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#gallery {
    display: flex;
    flex-wrap: nowrap;
    width: 90%;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}

#gallery::-webkit-scrollbar {
    width: 0;
    height: 0; /* Optional: just make scrollbar invisible */
}

.gallery-img {
    overflow: hidden;
    width: 350px;
    height: 350px;
    object-fit: cover;
    margin: 20px;
}

.img-container {
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

	</style>
</head>
<body>
<div id="content">
    <div id="gallery">
        <div class="img-container">
            <img class="gallery-img" src="images/gallery1.jpg"/>
            <p>Пиздища</p>
        </div>
        <div class="img-container">
            <img class="gallery-img" src="images/gallery2.jpg"/>
        </div>
        <div class="img-container">
            <img class="gallery-img" src="images/gallery3.jpg"/>
        </div>
        <div class="img-container">
            <img class="gallery-img" src="images/gallery4.jpg"/>
        </div>
        <div class="img-container">
            <img class="gallery-img" src="images/gallery5.jpg"/>
        </div>
        <div class="img-container">
            <img class="gallery-img" src="images/gallery6.jpg"/>
        </div>
    </div>
</div>
</body>
</html>
Editor is loading...