Skip to content

Commit

Permalink
fixed hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev1abhi
dev1abhi committed Mar 8, 2024
1 parent d60e5c7 commit 1a2235c
Show file tree
Hide file tree
Showing 6 changed files with 554 additions and 113 deletions.
174 changes: 83 additions & 91 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,105 +13,97 @@

<title>Bingflix</title>

<style>

</style>
</head>


</head>

<body>

<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus icon'></i>
<div class="logo_name">BingeFlix</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat' ></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder' ></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt' ></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="assets/virat.png" alt="profileImg">
<div class="name_job">
<div class="name">Abhilash </div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</div>


<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus icon'></i>
<div class="logo_name">BingeFlix</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat' ></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder' ></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt' ></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="assets/virat.png" alt="profileImg">
<div class="name_job">
<div class="name">Abhilash </div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</div>


<main>
<ul class='slider'>

</ul>
<ul class='slider'> </ul>



<nav class='nav'>
<ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
<ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
Expand Down
81 changes: 73 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,24 +120,92 @@ const bollywood_series = `https://api.themoviedb.org/3/discover/tv?api_key=${api
const item = document.createElement('li');
item.classList.add('item');
item.style.backgroundImage = `url('https://image.tmdb.org/t/p/w1280${movie.backdrop_path}')`;



const content = document.createElement('div');
content.classList.add('content');
content.innerHTML = `
<h2 class='title'>${movie.title}</h2>
<p class='description'>${movie.overview}</p>
<button>Read More</button>
`;


//Select the nav element
const nav = document.querySelector('.nav');
// Select all movie items
const movieItems = document.querySelectorAll('.item');

// Add event listeners to the nav element for hover effect
// nav.addEventListener('mouseenter', () => {
// // Make all movie items visible
// movieItems.forEach(item => {
// item.style.opacity = 1;
// });
// });

// nav.addEventListener('mouseleave', () => {
// // Make only movies 2 to 6 invisible
// movieItems.forEach((item, index) => {
// if (index > 1 && index < 6) {
// item.style.opacity = 0;
// }
// });
// });


item.appendChild(content);
slider.appendChild(item);
});


})
.catch(error => console.error('Error fetching top movies:', error));
});

const slider = document.querySelector('.slider');
function activate(e) {
let inx=0;
const items = document.querySelectorAll('.item');
const nav = document.querySelector('.nav');

e.target.matches('.next') && slider.append(items[0])
e.target.matches('.prev') && slider.prepend(items[items.length-1]);


if (e.target.matches('.next'))
{
inx=2;
}

nav.addEventListener('mouseenter', () => {
// Make all movie items visible
items.forEach(item => {
item.style.opacity = 1;
});
});

nav.addEventListener('mouseleave', () => {
// Make only movies 2 to 6 invisible
items.forEach((item, index) => {
if ( index==inx ) {
item.style.opacity = 1;

}
else
item.style.opacity = 0;
});
});


}


document.addEventListener('click',activate,false);



//sidebar logic
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
Expand All @@ -159,12 +227,9 @@ function menuBtnChange() {
}


const slider = document.querySelector('.slider');

function activate(e) {
const items = document.querySelectorAll('.item');
e.target.matches('.next') && slider.append(items[0])
e.target.matches('.prev') && slider.prepend(items[items.length-1]);
}

document.addEventListener('click',activate,false);




30 changes: 26 additions & 4 deletions md.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

function switchEmbed(embedUrl) {
console.log(embedUrl);
const iframe = document.getElementById('movieIframe');
Expand Down Expand Up @@ -96,6 +95,29 @@ document.addEventListener("DOMContentLoaded", function() {
.catch(error => console.error('Error fetching trailer:', error));
}

const poster = document.getElementById('poster');
poster.addEventListener('click', fetchAndEmbedTrailer);
});
const trailer = document.getElementById('Trailerbtn');
trailer.addEventListener('click', fetchAndEmbedTrailer);
});



//sidebar logic
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
Loading

0 comments on commit 1a2235c

Please sign in to comment.