When I get my data from MySQL, I need to show it as a horizontal line with two buttons, next and previous, like in a Netflix movie. But when I get the data, it shows the image above the image.
I need it to show in one line and an image next to the image, not like this image above.
whats problem here idont found any solution?
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="featurd-content">
</div>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "login_register";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM movies ';
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while ($row = $result->fetch_assoc()) {
?>
<section>
<h4> watch noww</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
<a href="#" class="card">
<img src="../image/<?php echo $row['movie_image']; ?>" alt="" class="poster">
</a>
</div>
</section>
<?php }
} ?>
<!-- </div> -->
</div>
</body>
</html>
let left_btn=document.getElementsByClassName('bi-chevron-left')[0];
let right_btn=document.getElementsByClassName('bi-chevron-right')[0];
let cards=document.getElementsByClassName('cards')[0];
left_btn.addEventListener('click',()=>{
cards.scrollLeft -=140;
})
right_btn.addEventListener('click',()=>{
cards.scrollLeft +=140;
})
const arrows=document.querySelectorAll(".arrow");
const movieLists=document.querySelectorAll(".movie-list");
arrows.forEach((arrow,i)=>{
const itemNumber=movieLists[i].querySelectorAll("img").length;
let clickCounter=0;
arrow.addEventListener("click",()=>{
const ratio=Math.floor(window.innerWidth / 300);
clickCounter++;
if(itemNumber - (4 + clickCounter) + (4 - ratio) >=0){
movieLists[i].style.transform=`translateX(${
movieLists[i].computedStyleMap().get("transform")[0].x.value - 300}px )`;
} else{
movieLists[i].style.transform="translateX(0)";
clickCounter=0;
}
});
console.log(Math.floor(window.innerWidth/270));
});
// for light and dark theme----- start
const ball=document.querySelector(".toggle-ball")
const items=document.querySelectorAll(".container,.movie-list-title,.navbar-container,.sidebar,.left-menu-icon,.toggle,.login-text");
ball.addEventListener("click",()=>{
items.forEach(items=>{
items.classList.toggle("active")
})
ball.classList.toggle("active")
})
// for light and dark theme----- end
const wrapper=document.querySelector('.wrapper');
const loginLink=document.querySelector('.login-link');
const registerLink=document.querySelector('.register-link');
const btnPopup=document.querySelector('.btnLogin-popup');
const iconCClose=document.querySelector('.icon-close');
registerLink.addEventListener('click',()=>{
wrapper.classList.add('active');
});
loginLink.addEventListener('click',()=>{
wrapper.classList.remove('active');
});
btnPopup.addEventListener('click',()=>{
wrapper.classList.add('active-popup');
});
iconCClose.addEventListener('click',()=>{
wrapper.classList.remove('active-popup');
});*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
font-family: 'roboto',sans-serif;
}
.navbar{
position: fixed;
width: 100%;
height: 50px;
background-color: black;
}
.navbar-container{
display: flex;
align-items: center;
padding: 0 50px;
height: 100%;
color: white;
font-family: 'san',sans-serif;
}
.logo-container{
flex: 1;
}
.logo{
font-family: 'san',sans-serif;
font-size: 30px;
color: #4dbf00;
}
.menu-container{
flex: 6;
}
/*
*/
.menu-list{
display: flex;
list-style: none; /*delete point from list */
}
.menu-list-item{
margin-right: 30px;
}
.profile-container{
flex: 2;
display: flex;
align-items: center;
justify-content: flex-end; /*push item to right corner*/
}
.profile-text-container{
margin: 0 20px;
}
.btnLogin-popup{
color: white;
text-decoration: none;
cursor: pointer;
}
.profile-picture{
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.toggle{
width: 40px;
height: 20px;
background-color: white;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.toggle-icon{
color: #4dbf00;
}
.toggle-ball{
width: 18px;
height: 18px;
background-color: black;
position: absolute;
right: 1px;
border-radius: 50%;
cursor: pointer;
transition: 0.5s ease-in-out;
}
/* .sidebar{
width: 50px;
height: 100%;
background-color: black;
position: fixed;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 60px;
} */
/* .left-menu-icon{
color: white;
font-size: 20px;
margin-bottom: 40px;
} */
.container{
background-color: #151515;
min-height: calc(100vh - 50px);
color: white;
}
/* .content-container{
margin-left: 50px;
} */
.featurd-content{
height: 50vh;
padding: 50px;
background: linear-gradient(to bottom,rgba(0,0,0,0),#151515), url('img/1.jpg');
}
section{
position: absolute;
width: 100%;
height: auto;
padding: 0px 50px;
bottom: 20px;
color: white;
}
section .cards{
position: relative;
width: 100%;
height: 200px;
border: 1px solid white;
margin-top: 10px;
display: flex;
align-items: center;
overflow-x: auto;
scroll-behavior:smooth ;
}
section .bi-chevron-left , .bi-chevron-right{
position: absolute;
top: 50%;
left: 3%;
width: 25px;
height: 25px;
background: gray;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
transition: .3s linear;
z-index: 999999999;
opacity: 0;
}
section .bi-chevron-right{
left: unset;
right: 3%;
}
section:hover .bi-chevron-left{
opacity: 1;
}
section:hover .bi-chevron-right{
opacity: 1;
}
section .cards::-webkit-scrollbar{
display: none;
}
section .cards .card{
position: relative;
min-width: 130px;
height: 180px;
/* border: 1px solid white; */
border-radius: 8px;
margin-right: 10px;
background: black;
transition: .3s linear;
}
section .cards .card .poster{
width: 100%;
height: 100%;
border-radius: 8px;
position: relative;
}
.movie-list-container{
padding:0 20px;
}
.movie-list-wrapper{
position: relative;
overflow: hidden;
/* background-color: #f5deb3; */
}
.media-scroller{
display: grid;
grid-auto-flow: column;
/* gap: var(--size-3); */
/* grid-auto-columns: 21%; */
/* overflow-x: auto; */
}
.movie-list{
display: flex;
align-items: center;
height: 300px;
transform: translateX(0); /*for moving slide */
transition: all 1s ease-in-out ;
}
.movie-list-item{
margin-right: 30px;
position: relative;
}
.movie-list-item:hover .movie-list-item-img{
transform: scale(1.2);
margin: 0 30px;
opacity: 0.5;
}
.movie-list-item:hover .movie-list-item-title,
.movie-list-item:hover .movie-list-item-desc,
.movie-list-item:hover .movie-list-item-button{
opacity: 1;
}
.arrow{
font-size: 120px;
position: absolute;
top: 90px;
right: 0;
color: lightgray;
opacity: 0.5;
cursor: pointer;
}
.container.active{
background-color: white;
}
.movie-list-title.active{
color: black;
}
.navbar-container.active{
background-color: white;
color: black;
}
.sidebar.active{
background-color: white;
}
.left-menu-icon.active{
color: black;
}
.login-text.active{
color: black;
}
.toggle.active{
background-color: black;
}
.toggle-ball.active{
background-color: white;
transform:translateX(-20px) ;
}
.wrapper{
position: absolute;
top: 20%;
left: 40%;
/* position: relative; */
width: 400px;
height: 440px;
/* background: transparent; */
color: white;
border: 2px solid rgba(255,255,255,.5);
border-radius: 20px;
/* backdrop-filter: blur(20px); */
background-color: white;
box-shadow: 0 0 30px rgba(0,0,0,.5);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transform: scale(0);
transition: transform .5s ease, height .2s ease;
}
.wrapper.active-popup{
transform: scale(1);
}
.wrapper.active{
height: 520px;
}
.wrapper .form-box{
width: 100%;
padding: 40px;
}
.wrapper .form-box.login{
transition: transform .18s ease;
transform: translateX(0);
}
.wrapper.active .form-box.login{
transition: none;
transform: translateX(-400px);
}
.wrapper .form-box.register{
position: absolute;
transition: none;
transform: translateX(400px);
}
.wrapper.active .form-box.register{
transition: transform .18s ease;
transform: translateX(0);
}
.wrapper .icon-close{
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 45px;
background: #162938;
font-size: 2em;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 20px;
cursor: pointer;
z-index:1;
}
.form-box h2{
font-size:2em ;
color: #162938;
text-align: center;
}
.input-box{
position: relative;
width: 100%;
height: 50px;
border-bottom: 2px solid #162938;
margin: 30px 0;
}
.input-box label{
position: absolute;
top: 50%;
left: 5px;
transform:translateY(-50%);
font-size: 1em;
color: #162938;
font-weight: 500;
pointer-events: none;
transition:.5s;
}
.input-box input:focus~label,
.input-box input:valid~label {
top: -5px;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
font-size: 1em;
color: #162938;
font-weight: 600;
padding: 0 35px 0 5px;
}
.input-box .icon{
position: absolute;
right: 8px;
font-size: 1.2em;
color: #162938;
line-height: 57px;
}
.remember-forgot{
font-size: 0.9em;
color: #162938;
font-weight: 500;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
}
.remember-forgot label input{
accent-color: #162938;
margin-right: 3px;
}
.remember-forgot a{
color: #162938;
text-decoration: none;
}
.remember-forgot a:hover {
text-decoration: underline;
}
.btn{
width: 100%;
height: 45px;
background: #162938;
color: white;
border: none;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
}
.login-register{
font-size: 0.9em;
color: #163819;
text-align: center;
font-weight: 500;
margin: 25px 0 10px;
}
.login-register p a{
text-decoration: underline;
}
@media only screen and (max-width:940px) {
.menu-container{
display: none;
}
}<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="styleee.css">
<title> onc</title>
</head>
<body>
<?php
include 'signUp.php';
include 'login.php';
?>
<div class="navbar">
<div class="navbar-container">
<div class="logo-container"><h1 class="logo">ONC</h1></div>
<div class="menu-container">
<ul class="menu-list">
<li class="menu-list-item">Home</li>
<li class="menu-list-item">Movies</li>
<li class="menu-list-item">series</li>
<li class="menu-list-item">popular</li>
<li class="menu-list-item">trends</li>
</ul>
</div>
<div class="profile-container">
<!-- <img class="profile-picture" src="img/profile.jpg" alt=""> -->
<div class="profile-text-container">
<a class="btnLogin-popup"> Login</a>
</div>
<div class="toggle">
<i class="fa-solid fa-moon toggle-icon"></i>
<i class="fa-solid fa-sun toggle-icon"></i>
<div class="toggle-ball"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="featurd-content">
</div>
<!-- <div class="movie-list-container"> -->
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "login_register";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM movies ';
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while ($row = $result->fetch_assoc()) {
?>
<section>
<h4> watch noww</h4>
<i class="bi bi-chevron-left"></i>
<i class="bi bi-chevron-right"></i>
<div class="cards">
<a href="#" class="card">
<img src="../image/<?php echo $row['movie_image']; ?>" alt="" class="poster">
</a>
</div>
</section>
<?php }
} ?>
<!-- </div> -->
<div class="wrapper">
<span class="icon-close">
<ion-icon name="close"></ion-icon>
</span>
<div class="form-box login">
<h2> Login </h2>
<form action="index.php" method="post">
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" name="email" required>
<label>Email</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" name="password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label> <input type="checkbox">Remember me</label>
<a href="#">Forgot Password </a>
</div>
<button type="submit" value="Login" name="login" class="btn">Login</button>
<div class="login-register">
<p>Dont have an account? <a href="#" class="register-link">Register</a></p>
</div>
</form>
</div>
<!-- -->
<div class="form-box register">
<h2> Register </h2>
<form action="index.php" method="post">
<div class="input-box">
<span class="icon">
<ion-icon name="person"></ion-icon>
</span>
<input type="text" name="fullname" class="form-control" required>
<label>Username</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" name="email" class="form-control" required>
<label>Email</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" name="password" class="form-control" required>
<label>Password</label>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" name="repeat_password" required>
<label>Password</label>
</div>
<div class="remember-forgot">
<label> <input type="checkbox">i agree to the terms & condition</label>
</div>
<button type="submit" value="Register" name="submit" class="btn">Register</button>
<div class="login-register">
<p>Already bhave an account? <a href="#" class="login-link">Login</a></p>
</div>
</form>
</div>
</div>
<script src="appp.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>