<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Library gradient with carousel </title>
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/*-- Font Google --*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600&display=swap');
body {
font-family: 'Oswald', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(360deg, #9380c3, #7f5ba900);
color: #cdc9c9;
}
.header {
background: linear-gradient(135deg, #6b5b95, #b8a9c9);
padding: 20px;
text-align: center;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
transition: color 0.3s;
}
.navbar a:hover {
color: #f4f4f4;
}
.navbar .search-box {
display: flex;
align-items: center;
}
.navbar input[type="text"] {
padding: 5px;
border: none;
border-radius: 20px;
outline: none;
}
.navbar .search-box button {
background-color: white;
border: none;
padding: 5px 10px;
border-radius: 50%;
cursor: pointer;
margin-left: 5px;
}
.navbar .social-icons a {
color: white;
margin: 0 10px;
font-size: 1.5em;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.card {
background: linear-gradient(135deg, #080808, #37333c);
border-radius: 50%;
width: 200px;
height: 200px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.card .title {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.5);
border-radius: 20px;
padding: 5px;
}
.carousel {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto 40px;
overflow: hidden;
}
.carousel-inner {
display: flex;
width: 300%;
transition: transform 5s ease;
}
.carousel-item {
height: 550px;
margin-top: 1rem;
width: 100%;
flex: 1 0 100%;
}
.carousel img {
width: 100%;
display: block;
}
.carousel-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.carousel-button {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<header class="header">
<h1>Audio Library</h1>
<nav class="navbar">
<div>
<a href="#">Home</a>
<a href="#">Genres</a>
<a href="#">Artists</a>
<a href="#">Albums</a>
<a href="#">Playlists</a>
</div>
<div class="search-box">
<input type="text" placeholder="Search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</nav>
</header>
<section class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" alt="Slide 3">
</div>
</div>
<div class="carousel-buttons">
<button class="carousel-button" onclick="prevSlide()">❮</button>
<button class="carousel-button" onclick="nextSlide()">❯</button>
</div>
</section>
<section class="content">
<div class="card">
<img src="https://via.placeholder.com/200" alt="Library 1">
<div class="title">Library 1</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200" alt="Library 2">
<div class="title">Library 2</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200" alt="Library 3">
<div class="title">Library 3</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200" alt="Library 4">
<div class="title">Library 4</div>
</div>
</section>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.carousel-item');
const totalSlides = slides.length;
function updateSlidePosition() {
const carouselInner = document.querySelector('.carousel-inner');
carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % totalSlides;
updateSlidePosition();
}
function prevSlide() {
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
updateSlidePosition();
}
setInterval(nextSlide, 5000); // Auto-slide every 3 seconds
</script>
</body>
</html>