
# 📒 Developer style guide for Movie card
As the name suggest this component is for the moview related stuff. By this component user will only able to observe the movies poster within fron a rounded box. When any will hover over it will able to get the content regarding the movie. It's cool feature with this componet. 

This is not only stick to the movie-card by refer this any siimiilar component can desing or can customise it according to needs.

![image](https://i.ibb.co/QKgv2nz/Screenshot-20230102-123724.png) ![image](https://i.ibb.co/FbNb7B3/Screenshot-20230102-122839.png)

---

## General must known design system guideline :

### Color 🎨

|  | Background | Border | 
| --- | --- | --- | 
| Color Code in Tailwind | bg-slate-300, bg-gray-300, bg-white | border-gray-300, bg-white | 
 
 Color of `bg` is generally used as shade of 100 / 700 

Color of `text` will depend on the `bg` color
|Color| Text | 
| --- | --- |
| Code in Tailwind | text-white, text-gray-300 text-yellow-400 |

`Note` : Color of the text `[color]` will depend on the color of the background


### Transition ( `transition-all` )

whenever there is a hover effect, one must use `transition-all` class with it.

### Font

For all text within content font is : **`font-medium`** and text size is  **`text-sm text-xl`**

### Hover Color
For the hover color for button is **`hover:bg-blue-500`**.

### Overlay feature
It is cool feature that cover the background imgae with mixture of transparent and bit black background here in the componet there is use style name as gradient **`bg-gradient-to-b from-transparent via-[#3a3a3a]/30 to-[#121212]`**


### SVG And Path
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.  Path is always used within the svg tag to set the actual coordinate.
Wihin the tag we give the some propety as what with be the co-ordinate, fill color, outer stroke, and some styling within class attribute.

### Border Radius 🔲

The normal border-radius for the components are `rounded-l-lg rounded-r-lg`. However this does not apply in many cases like buttons, input boxes and all.

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Movie card component 👇

Want to see this Avatar in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<!--For Movie card-1 -->
<section class="flex h-screen w-full flex-wrap items-center justify-evenly bg-gray-500">
  <div class="group relative h-[350px] z-40 overflow-hidden transition-all duration-300 ease-in-out hover:rounded-2xl w-[250px] hover:scale-110">
    <img class="absolute h-full w-full rounded-lg object-cover " src="https://images.unsplash.com/photo-1669935874092-f2632a30c89c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="img1" />
    <div class="absolute z-10 select-none h-[190px] w-[250px] skew-y-12 hidden group-hover:block bg-white bg-opacity-80 -bottom-7 backdrop-blur-3xl "></div>
    <div class="absolute  z-20 hidden group-hover:block bottom-0 w-[220px] pl-5 pb-2">
      <h1 class="mb-2 text-xl font-semibold text-gray-800">Heading</h1>
      <p class="mb-2 text-xs text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit illum quos explicabo dolor reprehenderit, qui quis quibusdam amet quidem officia.</p>
      <button class="rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white  hover:bg-blue-700 disabled:bg-gray-400">View More</button>
    </div> 
  </div>
</section>

<!--For Movie card-2 -->
<div class="m-0 box-border p-0">
  <div style="background-image: url('https://i.ibb.co/Dpc16J1/Avengers.jpg') " class="group absolute top-2/4 left-2/4 h-[430px] w-[320px] -translate-x-[50%] -translate-y-[50%] rounded-2xl bg-cover bg-center shadow-lg">
    <div class="absolute top-0 h-full w-full bg-gradient-to-b from-transparent via-[#3a3a3a]/30 to-[#121212] opacity-0 duration-500 ease-linear hover:rounded-2xl group-hover:opacity-100">
      <div class="absolute bottom-0 flex h-[230px] w-full flex-col justify-evenly px-3 py-2 font-sans text-white">
        <p class="text-xl">Avenger Endgame</p>
        <p class="mb-2 text-sm text-[#f9c80e]">2019 Anthony Russo</p>
        <p class="text-xs text-[#f9c80e]">Action, Sci-fi <span class="ml-1 border-2 border-solid border-gray-400 px-1 text-white">182min</span></p>
        <div class="flex items-center text-sm text-[#f9c80e]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
          </svg>
          <span class="ml-2 text-white">8.4</span>
        </div>
        <div class="text-sm">
          <p>Robert Downey Jr, Chris Evans, Mark Ruffalo, Chris Hemsworth, Scarlett Johanson , Chadwick Bosemamn</p>
        </div>
        <button class="flex h-[40px] items-center justify-center rounded-2xl border-none bg-[#f9c80e] text-center font-sans text-base font-semibold text-black hover:bg-blue-500 hover:text-white">
          Watch now
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="ml-2 h-6 w-6">
            <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<!--For Movie card-3 -->
<div class="m-0 p-0 box-border h-screen flex items-center justify-center bg-slate-300">
  <section >
     <div style="background-image: url('https://th.bing.com/th/id/OIP.Wb5MsncZxzv2rDY_hRMbEQHaK9?pid=ImgDet&rs=1') " class=" group rounded-2xl	bg-no-repeat bg-cover bg-center relative w-[280px] h-[370px] bg-white overflow-hidden cursor-pointer shadow-[0 8px 16px rgba(0,0,0,.3)  after:content-[' '] after:absolute after:top-0 after:left-0  after:bg-hero">
       <div class="group-hover:translate-y-0 group-hover:bg-[#20262e] absolute bottom-0 h-[150px] w-[280px]  bg-[#272829] px-2 py-1 flex flex-col justify-around text-white z-10 duration-500 font-sans bg-transparent translate-y-[105px]">
          <p class="ml-2">
            Money Heist <span class="ml-2 text-[#f7bc3f] text-sm">8.9 
</span>
          </p>
          <div class="flex justify-between">
            <div class="flex ">
              <div class="w-[30px] h-[30px] rounded-[50%] border-2 border-solid border-[#7a7676] flex items-center justify-center duration-150 mr-2 hover:bg-white hover:border-[#fff] hover:text-[#20262e]">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
</svg>
</div>
      <div class="w-[30px] h-[30px] rounded-[50%] border-2 border-solid border-[#7a7676] flex items-center justify-center duration-150 mr-2 hover:bg-white hover:border-[#fff] hover:text-[#20262e]">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>


</div>

      <div class="w-[30px] h-[30px] rounded-[50%] border-2 border-solid border-[#7a7676] flex items-center justify-center duration-150 mr-2 hover:bg-white hover:border-[#fff] hover:text-[#20262e]">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
</svg>


</div>

            </div>
            <div class="w-[30px] h-[30px] rounded-[50%] border-2 border-solid border-[#7a7676] flex items-center justify-center duration-150 mr-2 hover:bg-white hover:border-[#fff] hover:text-[#20262e]">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>

          </div>
          <div class="text-sm text-[#7a7676]"">
             <p>2021 . Drama . 5 season</p>
          </div>
       </div>
     </div>
  </section>
</div>

```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.

