Gopal

What I have Learned while Building Landing Page of Netflix

Gopal N D's photo
Gopal N D
·

2 min read

I have build the Netflix clone ,and here are the few sections that are really good and have fun to make them
let;s see one by one and there code how they are built

Here is recourse:

live link : https://gopal-nd.github.io/netflix-clone/

code : https://github.com/Gopal-nd/cohort/tree/master/CSS/Projects/netflix

How to make this, it have a picture and color on it, can be done using the positions property, create a top level div and make it relative and inner will be the absolute ,insert-0

  <style> 
.bghero {background-image: linear-gradient(360deg, rgba(0, 0, 0, 0.8500) 3.000%, rgba(0, 0, 0, 0.8465) 11.08%, rgba(0, 0, 0, 0.8361) 19.17%, rgba(0, 0, 0, 0.8187) 27.25%, rgba(0, 0, 0, 0.7944) 35.33%, rgba(0, 0, 0, 0.7632) 43.42%, rgba(0, 0, 0, 0.7250) 51.50%, rgba(0, 0, 0, 0.6868) 59.58%, rgba(0, 0, 0, 0.6556) 67.67%, rgba(0, 0, 0, 0.6313) 75.75%, rgba(0, 0, 0, 0.6139) 83.83%, rgba(0, 0, 0, 0.6035) 91.92%, rgba(0, 0, 0, 0.6000) 100.0}
 </style>
 <div class="relative  w-full h-screen">
<div class="absolute inset-0 -z-0"
<img src="./images/background.jpg" class=" object-cover w-full h-full opacity-70" alt="">
<div class="absolute inset-0 bghero "></div>       
 </div> 
 </div>

how to make responsive input tag, that will show the label on top of the input like this:

<div class="relative w-full max-w-md">
  <input type="email" id="email" class="peer w-full rounded-md border border-gray-500 px-4 py-3 text-red-500 transition focus:border-gray-100 focus:bg-green-400 focus:outline-none" />
  <label for="email" class="absolute top-1/2 left-4 -translate-y-1/2 transform text-lg text-gray-400 transition-all duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-lg peer-placeholder-shown:text-gray-400 peer-focus:top-2 peer-focus:border-gray-100 peer-focus:text-sm"> Email Address </label>
</div>

How to make the images look cool by adding curve border that look like this:

<div class="relative  z-10 w-full">

            <svg width="100%" height="80" viewBox="0 0 100 100" preserveAspectRatio="none"
                class="absolute top-[-40px] left-0">
                <defs>
                    <radialGradient id="radialBg" cx="100%" cy="-420%" r="500%">
                        <stop offset="80%" stop-color="rgba(64,97,231)" />
                        <stop offset="85%" stop-color="rgba(64,97,231,0.6)" />
                        <stop offset="85%" stop-color="rgba(64,97,231,0.4)" />
                        <stop offset="100%" stop-color="rgba(64,97,231,0.1)" />
                    </radialGradient>
                </defs>
                <path d="M0 100 Q50 0 100 100" stroke="red" stroke-width="2" fill="url(#radialBg)" />

            </svg>

        </div>

Netflix movie cards

   <li
                                    class="flex flex-shrink-0 h-full w-[184px] list-none p-[4.8px_10px] scroll-mx-[36.8px] scroll-snap-start text-left text-white font-sans box-border isolate">
                                    <button
                                        class="relative p-0 bg-[#232323] border-none rounded-md transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none">
                                        <div
                                            class="relative w-[7rem] h-[9.8rem] rounded-md bg-[#232323] box-border md:w-[8.75rem] md:h-[12.25rem]">
                                            <div
                                                class="absolute inset-0 rounded-md z-[1] bg-[#232323] animate-[loading_4s_linear_infinite] box-border">
                                            </div>
                                            <span class="absolute inset-0 rounded-md bg-cover z-[2] box-border"
                                                style="background-image: url(&quot;https://occ-0-3709-3663.1.nflxso.net/dnm/api/v6/mAcAr9TxZIVbINe88xb3Teg5_OA/AAAABRB3rewJT09RhxS4rHE_KfiiI3yrHEI3H2KcP4K5AxMBqUOZVM4QeaV9NjNs8CJ4AEjhH_BXKGaSWdOqQgWLNpHFKadmEfFjdf4.webp?r=de2&quot;);"></span>
                                        </div>
                                        <span
                                            class="absolute bottom-[0.1rem] left-[-0.625rem] text-[4rem] z-[2] box-border">
                                            <span class="relative">
                                                <span
                                                    class="inline-block relative text-[65px] sm:text-[80px] leading-[1] font-bold text-[#414141] box-border before:content-[''] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-[-1] before:-webkit-text-fill-color-[#000] before:-webkit-text-stroke-[0] before:origin-center"
                                                    style="-webkit-text-stroke: 0.25rem white; text-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);"
                                                    data-content="Content Here">
                                                    2
                                                </span>


                                            </span>
                                        </span>
                                    </button>

                                </li>
ChaiCodeChaiaurcode