├── images
    ├── box.png
    ├── house.png
    ├── jacket-1.png
    ├── jacket-2.png
    ├── jacket-3.png
    ├── jacket-4.png
    ├── jacket-5.png
    ├── jacket-6.png
    ├── logo.png
    ├── model.png
    ├── question.png
    └── shopping.png
├── index.html
└── tailwind.config.js


/images/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/box.png


--------------------------------------------------------------------------------
/images/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/house.png


--------------------------------------------------------------------------------
/images/jacket-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-1.png


--------------------------------------------------------------------------------
/images/jacket-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-2.png


--------------------------------------------------------------------------------
/images/jacket-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-3.png


--------------------------------------------------------------------------------
/images/jacket-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-4.png


--------------------------------------------------------------------------------
/images/jacket-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-5.png


--------------------------------------------------------------------------------
/images/jacket-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/jacket-6.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/logo.png


--------------------------------------------------------------------------------
/images/model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/model.png


--------------------------------------------------------------------------------
/images/question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/question.png


--------------------------------------------------------------------------------
/images/shopping.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch6-penguin-fashion-with-tailwind/3085e4ebe6323b1f44e3f6032118a85e73346bbf/images/shopping.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Penguin Fashion</title>
  8 |     <!-- tailwind css -->
  9 |     <script src="https://cdn.tailwindcss.com"></script>
 10 |     <script>
 11 |         tailwind.config = {
 12 |           theme: {
 13 |             extend: {
 14 |               colors: {
 15 |                 clifford: '#da373d',
 16 |                 penguin:'#FFFBF0',
 17 |                 jacketprice:'#FABE4C',
 18 |               }
 19 |             }
 20 |           }
 21 |         }
 22 |       </script>
 23 | </head>
 24 | <body>
 25 |     <header class="bg-penguin pb-32 pt-12">
 26 |         <section class="container mx-auto sm:flex items-center justify-around">
 27 |             <div class="space-y-4">
 28 |                 <h1 class="text-2xl sm:text-5xl uppercase font-bold">
 29 |                     <span class="text-yellow-400">Be the Penguin</span>
 30 |                     <br>
 31 |                     <span>Of Winter</span>
 32 |                 </h1>
 33 |                 <p>Lorem ipsum dolor sit amet consectetur.</p>
 34 |                 <button class="uppercase bg-[#A4BC46] py-4 px-7 rounded-xl text-white font-semibold">
 35 |                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 36 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
 37 |                       </svg>
 38 |                     Buy Now</button>
 39 |             </div>
 40 |             <div class="pt-8 sm:pt-0">
 41 |                 <img class="w-1/2 sm:w-full" src="images/model.png" alt="">
 42 |             </div>
 43 |         </section>
 44 |     </header>
 45 |     <main class="container mx-auto bg-[#E5E5E5]">
 46 |         <!-- woman jacket -->
 47 |         <section class="pb-24">
 48 |             <h2 class="text-5xl font-bold">Woman Jacket</h2>
 49 |             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-7 rounded-xl">
 50 |                 <!-- Jacket 1 -->
 51 |                 <div class="p-4 shadow-lg">
 52 |                     <div class="p-5 bg-slate-100 rounded-xl">
 53 |                         <img src="images/jacket-1.png" alt="">
 54 |                     </div>
 55 |                     <h3 class="text-3xl font-semibold">Yellow Coat Jacket</h3>
 56 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta sapiente aliquid iusto!</p>
 57 |                     <div class="flex justify-between">
 58 |                         <h2 class="text-5xl text-jacketprice font-bold">$234</h2>
 59 |                         <button class="uppercase bg-[#A4BC46] py-4 px-7 rounded-xl text-white font-semibold">
 60 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 61 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
 62 |                               </svg>
 63 |                             Buy Now</button>
 64 |                     </div>
 65 |                 </div>
 66 |                 <!-- Jacket 2 -->
 67 |                 <div class="p-4 shadow-lg rounded-xl">
 68 |                     <div class="p-5 bg-slate-100 rounded-xl">
 69 |                         <img src="images/jacket-2.png" alt="">
 70 |                     </div>
 71 |                     <h3 class="text-3xl font-semibold">Yellow Coat Jacket</h3>
 72 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta sapiente aliquid iusto!</p>
 73 |                     <div class="flex justify-between">
 74 |                         <h2 class="text-5xl text-jacketprice font-bold">$234</h2>
 75 |                         <button class="uppercase bg-[#A4BC46] py-4 px-7 rounded-xl text-white font-semibold">
 76 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 77 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
 78 |                               </svg>
 79 |                             Buy Now</button>
 80 |                     </div>
 81 |                 </div>
 82 |                 <!-- Jacket 3 -->
 83 |                 <div class="p-4 shadow-lg rounded-xl">
 84 |                     <div class="p-5 bg-slate-100 rounded-xl">
 85 |                         <img src="images/jacket-3.png" alt="">
 86 |                     </div>
 87 |                     <h3 class="text-3xl font-semibold">Yellow Coat Jacket</h3>
 88 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta sapiente aliquid iusto!</p>
 89 |                     <div class="flex justify-between">
 90 |                         <h2 class="text-5xl text-jacketprice font-bold">$234</h2>
 91 |                         <button class="uppercase bg-[#A4BC46] py-4 px-7 rounded-xl text-white font-semibold">
 92 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 93 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
 94 |                               </svg>
 95 |                             Buy Now</button>
 96 |                     </div>
 97 |                 </div>
 98 |             </div>
 99 |         </section>
100 |         <!-- man jacket -->
101 |         <section  class="pb-24">
102 |             <h2 class="text-5xl font-bold">Man Jacket</h2>
103 |         </section>
104 |         <!-- our benefits -->
105 |         <section>
106 |             <div class="grid grid-cols-2 gap-7">
107 |                 <div class="rounded-lg flex bg-white p-6">
108 |                     <img class="w-20 h-20" src="images/house.png" alt="">
109 |                     <div>
110 |                         <h4 class="text-2xl">Find the Perfect Fit</h4>
111 |                         <p>Everybody is different, which is why we
112 |                             offer styles for every body.</p>
113 |                     </div>
114 |                 </div>
115 |                 <div class="row-span-3">
116 |                     <img src="images/shopping.png" alt="">
117 |                 </div>
118 |                 <div class="h-32 bg-slate-500">3</div>
119 |                 <div class="h-32 bg-slate-500">4</div>
120 |             </div>
121 |         </section>
122 |     </main>
123 |     <footer>
124 |         <p>Buy from us</p>
125 |     </footer>
126 | </body>
127 | </html>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     content: ["./src/**/*.{html,js}"],
3 |     theme: {
4 |       extend: {},
5 |     },
6 |     plugins: [],
7 |   }


--------------------------------------------------------------------------------