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


/icons/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/bg1.png


--------------------------------------------------------------------------------
/icons/bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/bg2.png


--------------------------------------------------------------------------------
/icons/bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/bg3.png


--------------------------------------------------------------------------------
/icons/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/box.png


--------------------------------------------------------------------------------
/icons/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/house.png


--------------------------------------------------------------------------------
/icons/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/logo.png


--------------------------------------------------------------------------------
/icons/question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/question.png


--------------------------------------------------------------------------------
/icons/shopping-cart 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/icons/shopping-cart 1.png


--------------------------------------------------------------------------------
/images/jacket-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-1.png


--------------------------------------------------------------------------------
/images/jacket-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-2.png


--------------------------------------------------------------------------------
/images/jacket-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-3.png


--------------------------------------------------------------------------------
/images/jacket-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-4.png


--------------------------------------------------------------------------------
/images/jacket-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-5.png


--------------------------------------------------------------------------------
/images/jacket-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/jacket-6.png


--------------------------------------------------------------------------------
/images/model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/model.png


--------------------------------------------------------------------------------
/images/shopping.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-penguin-fashion-with-tailwind/282b81d7d939b216c3ce7d4a61decc114054ce56/images/shopping.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Penguin Fashion</title>
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |     <!-- google fonts: Bebas Neue and Roboto -->
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700;900&display=swap"
 13 |         rel="stylesheet">
 14 |     <style>
 15 |         .font-bebas {
 16 |             font-family: 'Bebas Neue', sans-serif;
 17 |         }
 18 | 
 19 |         .font-roboto {
 20 |             font-family: 'Roboto', sans-serif;
 21 |         }
 22 |     </style>
 23 | </head>
 24 | 
 25 | <body>
 26 |     <header class="bg-amber-100 py-20 px-4 md:px-32">
 27 |         <!-- nav section -->
 28 |         <nav>
 29 | 
 30 |         </nav>
 31 |         <!-- banner section -->
 32 |         <div class="flex flex-col md:flex-row justify-between items-center">
 33 |             <div class="space-y-3">
 34 |                 <h1 class="text-7xl uppercase font-bebas">
 35 |                     <span class="text-[#FABE4C]">Be the Penguins</span>
 36 |                     <br>
 37 |                     of Winter
 38 |                 </h1>
 39 |                 <p>Lorem Ipsum is simply dummy text of the printing
 40 |                     and typesetting industry.</p>
 41 |                 <button
 42 |                     class="py-4 px-9 bg-gradient-to-r from-[#A4BC46] to-[#85A019] rounded-xl uppercase text-white font-medium">
 43 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
 44 |                         stroke="currentColor" class="w-6 h-6 inline">
 45 |                         <path stroke-linecap="round" stroke-linejoin="round"
 46 |                             d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
 47 |                     </svg>
 48 | 
 49 |                     Buy Now</button>
 50 |             </div>
 51 |             <div>
 52 |                 <img src="images/model.png" alt="">
 53 |             </div>
 54 |         </div>
 55 |     </header>
 56 |     <main class="max-w-7xl mx-auto">
 57 |         <!-- woman jacket section -->
 58 |         <section class="py-12">
 59 |             <h3 class="text-5xl font-bebas">Woman Jackets</h3>
 60 |             <!-- jackets container -->
 61 |             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 font-roboto">
 62 |                 <!-- jacket 1 -->
 63 |                 <div class="space-y-3 drop-shadow-lg">
 64 |                     <div class="bg-[#F1F1F1;] p-5 rounded-2xl">
 65 |                         <img src="images/jacket-1.png" alt="">
 66 |                     </div>
 67 |                     <h4 class="text-2xl font-bold">Yellow Coat Jacket </h4>
 68 |                     <p>Lorem Ipsum is simply dummy text of the
 69 |                         printing and typesetting industry.</p>
 70 |                     <div class="flex justify-between">
 71 |                         <h3 class="text-4xl font-black text-orange-400">$234</h3>
 72 |                         <button
 73 |                             class="py-4 px-9 bg-gradient-to-r from-[#A4BC46] to-[#85A019] rounded-xl uppercase text-white font-medium">
 74 |                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
 75 |                                 stroke="currentColor" class="w-6 h-6 inline">
 76 |                                 <path stroke-linecap="round" stroke-linejoin="round"
 77 |                                     d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
 78 |                             </svg>
 79 | 
 80 |                             Buy Now</button>
 81 |                     </div>
 82 |                 </div>
 83 |                 <!-- jacket 2 -->
 84 |                 <div class="space-y-3 drop-shadow-lg">
 85 |                     <div class="bg-[#F1F1F1;] p-5 rounded-2xl">
 86 |                         <img src="images/jacket-2.png" alt="">
 87 |                     </div>
 88 |                     <h4 class="text-2xl font-bold">Yellow Coat Jacket </h4>
 89 |                     <p>Lorem Ipsum is simply dummy text of the
 90 |                         printing and typesetting industry.</p>
 91 |                     <div class="flex justify-between">
 92 |                         <h3 class="text-4xl font-black text-orange-400">$234</h3>
 93 |                         <button
 94 |                             class="py-4 px-9 bg-gradient-to-r from-[#A4BC46] to-[#85A019] rounded-xl uppercase text-white font-medium">
 95 |                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
 96 |                                 stroke="currentColor" class="w-6 h-6 inline">
 97 |                                 <path stroke-linecap="round" stroke-linejoin="round"
 98 |                                     d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
 99 |                             </svg>
100 | 
101 |                             Buy Now</button>
102 |                     </div>
103 |                 </div>
104 |                 <!-- jacket 3 -->
105 |                 <div class="space-y-3 drop-shadow-lg">
106 |                     <div class="bg-[#F1F1F1;] p-5 rounded-2xl">
107 |                         <img src="images/jacket-3.png" alt="">
108 |                     </div>
109 |                     <h4 class="text-2xl font-bold">Yellow Coat Jacket </h4>
110 |                     <p>Lorem Ipsum is simply dummy text of the
111 |                         printing and typesetting industry.</p>
112 |                     <div class="flex justify-between">
113 |                         <h3 class="text-4xl font-black text-orange-400">$234</h3>
114 |                         <button
115 |                             class="py-4 px-9 bg-gradient-to-r from-[#A4BC46] to-[#85A019] rounded-xl uppercase text-white font-medium">
116 |                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
117 |                                 stroke="currentColor" class="w-6 h-6 inline">
118 |                                 <path stroke-linecap="round" stroke-linejoin="round"
119 |                                     d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
120 |                             </svg>
121 | 
122 |                             Buy Now</button>
123 |                     </div>
124 |                 </div>
125 |             </div>
126 |         </section>
127 |     </main>
128 |     <footer>
129 | 
130 |     </footer>
131 | </body>
132 | 
133 | </html>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |     content: ["./src/**/*.{html,js}"],
4 |     theme: {
5 |       extend: {},
6 |     },
7 |     plugins: [],
8 |   }


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