I am working on one of my personal projects where I am designing a website for a restaurant using HTML and CSS.....I have got a code for a Carousel and I am trying to integrate it with my website.... But I am facing a problem with the carousel...As I slide down my window...the carousel also tends to move upward and doesn't stick to it's original position....How am i supposed to fix this issue.... This is the first one among all my personal projects. I would be pleased and more than happy if the experts or members of this community would help me out in this process of learning and aid me in getting this project completed.... This is the project This is my index.html.The code for Carousel is at the last section with the comment "Carousel Starts"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Restaurant Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<div class="navigation container">
<div class="logo_container">
<img src="images/logo.png" alt="logo" />
</div>
<div class="allmenus">
<ul>
<li class="menu">Home</li>
<li class="menu" >About Us</li>
<li class="menu" >Our Services</li>
</ul>
</div>
</nav>
<script
src="https://kit.fontawesome.com/8b6347e91f.js"
crossorigin="anonymous"
></script>
<!--First Section-->
<div class="container" >
<div class="first">
<div class="first_image">
<img src="images/hero_image.png" alt="Vegetables" />
</div>
<div class="first_content">
<div class="tag">50% Off On All Products</div>
<h1>Enjoy Your Delicious Food</h1>
<p>
Make reservations, hours, and locations front-and-center, and
prominently get your order within few minutes of getting placed
</p>
<button class="explore">Order Now</button>
</div>
</div>
<section class="second_section" >
<div class="feature">
<img src="images/discount 1.png" />
<div class="feature_content">
<h1>Discount Voucher</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/fresh.png" />
<div class="feature_content">
<h1>Fresh Healthy Food</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/delivery.png" />
<div class="feature_content">
<h1>Instant delivery</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
</section>
</div>
<!--Popular Dishes -->
<div class="container dishes" >
<h1 class="popdishes">Our Popular Dishes</h1>
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-3.png" alt="">
<h2 class="recipe">Chicken Leg Piece</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-1.png" alt="">
<h2 class="recipe">Burger</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-2.png" alt="">
<h2 class="recipe">Chicken Nuggets</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Second SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-4.png" alt="">
<h2 class="recipe">Pizza</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-5.png" alt="">
<h2 class="recipe">Chocolate Cookies</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-6.png" alt="">
<h2 class="recipe">Broasted</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Third SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/menu-33 new.jpg" alt="">
<h2 class="recipe">Crepes</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-44.jpg" alt="">
<h2 class="recipe">Waffles</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-55.jpg" alt="">
<h2 class="recipe">Pasteries</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
</div>
<!-- Carousel Starts -->
<div class="container">
<div class="mycarousel" >
<input type="radio" name="position" checked />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<main id="carousel">
<div class="item" >
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-2.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews" >
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<main>
</div>
</div>
</body>
</html>
This is my css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
line-height: 1.4;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
nav {
box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(28, 22, 22, 0.414);
font-weight: bolder;
font-size: large;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
ul {
text-align: right;
display: flex;
font-family: Helvetica, sans-serif;
font-weight: bolder;
list-style: none;
}
li {
padding: 0 20px;
margin-top: 30px;
}
li:hover {
color: #134a7a;
text-decoration: underline;
}
.logo_container {
margin-left: 15px;
}
/* First Section */
.first {
display: flex;
gap: 100px;
justify-content: center;
align-items: center;
}
.first_content {
display: flex;
flex-direction: column;
gap: 20px;
}
.tag {
background-color: #134a7a;
align-self: flex-start;
padding: 5px 10px;
color: white;
}
.first_content h1 {
font-size: 72px;
line-height: 1.2;
font-weight: 500;
}
button {
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background: crimson;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 250px;
}
button:hover {
transition: 0.2s ease-in-out;
background:#e5eaee;
color: #134a7a;
font-weight: 500;
}
.second_section {
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 100px;
justify-content: center;
}
.feature {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 15px;
height: 165px;
background-color: #134a7a;
color: azure;
}
.feature:hover {
transition: 0.2s ease-in-out;
background-color: azure;
color:#134a7a;
}
.dishes{
background-color: #e5eaee;
margin-top: 20px;
height:1250px;
margin-bottom: 20px;;
}
.dishes .subcontainer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 25px;
}
.recipe{
font-weight: 300;
}
.section {
width: 350px;
height: 350px;
background: white;
padding-top: 32px;
margin-top: 25px;
}
.section{
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
gap: 10px;
}
h1.popdishes {
padding-top: 20px;
color:#134a7a;
text-align: center;
}
.priceandbutton {
display: flex;
flex-direction: row;
gap:10px
}
span {
padding-top: 5px;
font-weight: 400;
color:#134a7a;
font-size: 30px;
}
.addtocart{
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background:#134a7a;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 200px;
}
.addtocart:hover {
background:#e5eaee;
color: #134a7a;
font-weight: 500;
transition: 0.2s ease-in-out;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
background-color: #134a7a;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
overflow: hidden;
}
div.item:nth-of-type(1) {
--offset: 1;
}
div.item:nth-of-type(2) {
--offset: 2;
}
div.item:nth-of-type(3) {
--offset: 3;
}
div.item:nth-of-type(4) {
--offset: 4;
}
div.item:nth-of-type(5) {
--offset: 5;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
border:5px solid black;
}
.content h1{
color:#134a7a;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-color: #e5eaee;
}
div.item:nth-of-type(2) {
--offset: 2;
background-color: #e5eaee;
}
div.item:nth-of-type(3) {
--offset: 3;
background-color: #e5eaee;
}
div.item:nth-of-type(4) {
--offset: 4;
background-color: #e5eaee;
}
div.item:nth-of-type(5) {
--offset: 5;
background-color: #e5eaee;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
Try adding justify-content: space-around; so it stays the same width as the page:
.mycarousel {
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
justify-content: space-around;
}
For the slide part, I see it goes over the navbar you can solve it by adding a z-index: 1; to the navbar.
nav {
box-shadow: 5px 5px 5px rgb(1 1 1 / 5%);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
z-index: 1;
}