How to Build a Netflix Clone in Webflow!

Learn how I recreated a Netflix clone in Webflow! I built out the login and homepage sections complete with interactions, background videos, dropdown menus and notifications divs.
Disclaimer: I don’t own any of the rights to the Netflix website styling or media information presented in this video.
Webflow Project Preview:
netflix-homepage-clone.webflo...
Webflow Profile:
webflow.com/cullenkuch
Portfolio Website:
www.cullenkuch.com/
Feel free to like, subscribe and let me know your favorite movie in the comments below!
😁🎬🖥

[@john_pantoja]

Amazing, man! i'll try now

[@CullenKuch]

Have fun! 😄

[@kierancarter3693]

your a legend, you should have a patreon.

[@CullenKuch]

Thanks so much Kieran, maybe I'll consider that in the future 😆

[@rickyventaglio5811]

I love this video bro. I am surprised you haven't had many views on this!!! Just some constructive feedback: If you could only explain a bit slower what you are doing, I think many people would appreciate that, including myself. You are a gun!!!!!

[@CullenKuch]

Thanks Ricky! I’ll try to remember moving forward, always worried about the videos getting too long and boring 😅

[@rickyventaglio5811]

@@CullenKuch no worries Cullen. Look, As a digital marketer, I always came from the perspective that I’d need to talk to my customers (followers in your case) with the idea in mind that they don’t understand the topic I’m talking about (even if they are masters, like you). This way you can broaden your reach and target audience. There are thousands of video out there about Webflow that are hours long but can count on heaps of views and watch time because they can follow along. ;) I’ll hope to see another video soon!

[@CullenKuch]

@@rickyventaglio5811 well said!

[@Paolo.r]

Thanks for the tutorial, it was exactly what I am after. I'm getting the problem where my first card is expanding as expected but when I copy paste like you do, the rest are showing the hover items as default. Any ideas?

[@CullenKuch]

Hey Paolo, glad it's been helpful! Are you talking about the Grey's Anatomy card hover portion that has the interaction set? Check to see in your hover interaction (the part with the little timeline and values) that you are only affecting the "interaction trigger" so it only affects the element hovered over. Then in the main part of the interaction (below the trigger/mobile options) scroll to the bottom and make sure you have it applied to the selected element only. You'll have to set all this up before copying and pasting so the others absorb the same interaction as the first one. And then make sure each card has another combo class attached so you can change the specific styling. Hope that helps!

[@kierancarter3693]

If you ever get the chance, can you do a video on implementing live stream into a webflow account, no one has done a video on it and if you do a patreon I'd be happy to put forward a donation in regards. Thanks heaps :)

[@CullenKuch]

Good suggestion Kieran, I'll have to investigate and learn how to do it myself first 😅

[@michaelhan1917]

Could you use the only on Netflix section and slider section with cms content so when you add a new "show" it would be added to the content?

[@CullenKuch]

Hey Michael! Unfortunately it would be tricky to do this with CMS as Webflow doesn't let you make a slider out of CMS items. You also can't have a background video as a CMS field either so the "Only on Netflix" section also wouldn't work. There are some resources out there to make it happen though. I applied one sort of workaround in a project where I put a CMS in each slide of the slider. Then I would just sort the filter order and have slide 1 only show CMS item 1, slide 2 only CMS item 2, etc. Here's a helpful article I found! webflow.com/blog/how-to-create-a-cms-powered-slider

[@michaelhan1917]

@@CullenKuch Is it possible to build something like this in Webflow where you'd have the original div with cms content and then on hover it would have a different div appear in the same spot with different cams content? dribbble.com/shots/10281875-UFC-Athlete-Profile

[@CullenKuch]

@@michaelhan1917 Yes this should be possible! Similar to the "Only on Netflix" section, you could just make a relatively positioned div with all of the fighter profile content/background image pulling from the CMS data. Then place another div inside of that positioned absolutely covering the full amount of it's parent, add a new CMS inside, and build it out how you want it. Then lower that top div's opacity to 0% and have it fade in on hover however you'd like. You can also just add more info to that initial CMS item so you only have to reference one thing.

[@michaelhan1917]

@@CullenKuch Do you have any videos or know of any videos that teach how to build a "card" like the UFC fighter card so that the dimensions of the card itself as well as the cms content staying proportional? any time I build these they fall apart as soon as I switch devices or change breakpoint

[@peterdaodu8905]

Really good video, absolutely love it. Would be really nice if you could go a little slower. Genuinely love your contents..

[@CullenKuch]

Thanks so much Peter! I'll definitely try to go at a slower pace in the future 😅

[@user-vd6zk2zq3u]

Hey - I was wondering how did you get the "scale effect" of the title cards on hover over to appear always "over" the other cards in the slider?

[@CullenKuch]

Hey James, I believe I was able to do this by setting the card's position to absolute, full. Then the hover effect has it scale and grow from its center ever so slightly. Since all the cards have the same z-index, I think the active one takes precedent and appears over the ones next to it. The main slider also has overflow set to visible. At a quick glance that's what I remember, feel free to clone it and play around yourself!

[@user-vd6zk2zq3u]

@@CullenKuch Thanks for getting back! I took a look in the clone and still have no idea - haha even when ive put the z-index the same etc - it overlaps on the left but on the right it grows underneath the next one... and i can't seem to figure it out! Any chance you can take a gander? would be greatly appreciated - there is an "interaction" on youur slide layer too but then it says none/none wasnt sure if that had part to play in it?

[@CullenKuch]

@@user-vd6zk2zq3u I took another look and I see that on the "Slide" element itself I have a simple hover styling added (in addition to the carousel-slider-div interaction) that changes the z-index from 0 to 100. Maybe that's what did it?