branch/MenuButton.html at main · govind357/branch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section>
            <div class="max-w-[870px] min-[870px]:mx-auto py-[60px] mx-10">
                <h2 class="text-[28px] min-[900px]:text-[40px] text-center  text-[#314438] pb-[40px]">Explore our
                    products</h2>
                <div
                    class="max-w-[870px] max-[899px]:flex-col max-[899px]:justify-center max-[899px]:items-center flex flex-row justify-around text-center min-[1120px]:mx-auto gap-[20px] ">
                    <div>
                        <img class="max-w-[6400px] w-[100%] h-[95%] px-auto h-[236]" src="images/product1.jpeg" alt="">
                        <h4 class="min-[900px]:text-[27px] font-bold text-[24px]  pt-[10px] text-[#314438]">Chairs</h4>
                        <p class="text-[18px] min-[900px]:text-[18x] text-[#8dc0d2]">SEE ALL</p>
                    </div>
                    <div>
                        <img class="max-w-[500px] w-[100%] h-[95%] px-auto h-[236]" src="images/product2.jpg" alt="">
                        <h4 class="min-[900px]:text-[27px] pt-[10px] text- font-bold text-[24px] text-[#314438]">Desks
                        </h4>
                        <p class="text-[18px] min-[900px]:text-[18px] text-[#8dc0d2]">SEE ALL</p>
                    </div>
                    <div>
                        <img class="max-w-[500px] w-[100%] h-[95%] px-auto h-[236]" src="images/product3.jpeg" alt="">
                        <h4 class="min-[900px]:text-[27px] pt-[10px] font-bold text-[24px] text-[#314438]">Accessories
                        </h4>
                        <p class="text-[18px] min-[900px]:text-[18px] text-[#8dc0d2]">SEE ALL</p>
                    </div>
                    <div>
                        <img class="max-w-[500px] w-[100%] h-[95%] px-auto h-[236]" src="images/poruct4.webp" alt="">
                        <h4 class="min-[900px]:text-[27px] pt-[10px] font-bold text-[24px] text-[#314438]">Bundles</h4>
                        <p class="text-[18px] min-[900px]:text-[18px] text-[#8dc0d2]">SEE ALL</p>
                    </div>
                </div>
                <div class="text-center mt-[40px] min-[900px]:mt-[80px]">
                    <a class=" border-2 border-solid py-[15px] px-[53px] text-[13px] bg-[#314438] max-w-[249px] max-h-[49px] text-white font-bold"
                        href="#">SHOP COLLECTION</a>
                </div>
            </div>
        </section>
</body>
</html>