TailwindCSS_Responsive_Layouts/index.html at tailwind_css/first · AmitJalal/TailwindCSS_Responsive_Layouts · 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/main.css" />
  <title>Practice</title>
</head>

<body id="body" class="bg-gradient-to-r from-pink-500 to-purple-500 p-12">
  <!-- Menu -->
  <div id="menu" class="md:hidden">
    <button class="font-bold bg-yellow-500 py-4 px-6 mb-4">Menu</button>
  </div>

  <div class="grid gap-4">
    <!--Nav Buttons -->
    <nav id="nav" class="hidden flex-col sm:flex-row sm:flex-wrap md:grid md:grid-cols-5 gap-4 md:order-2">
      <button class="btn">Tacos</button>
      <button class="btn">Beers</button>
      <button class="btn">Wines</button>
      <button class="btn">Deserts</button>
      <button class="btn">Reservations</button>
    </nav>
    <!-- Buttons Ends-->

    <!-- Banner Starts -->
    <div class="box-border grid md:grid-flow-col items-center gap-4">
      <div class="h-[25rem] col-span-2">
        <div
          class="relative h-full bg-cover bg-center bg-[url('/images/banner.jpg')] object-cover bg-no-repeat flex items-center justify-center space-y-36 md:space-y-0">
          <span class="absolute md:top-28 md:left-12 max-w-max bg-yellow-500 text-slate-800 font-bold px-2 py-4">Terry's
            Taco Joint</span>
          <span class="absolute md:top-48 md:left-12 max-w-max bg-yellow-500 text-slate-800 font-bold px-2 py-4">Pretty
            Good Tacos!</span>
        </div>
      </div>
      <div class="grid gap-4 sm:grid-flow-col col-span-2 md:grid-flow-row md:col-span-1">
        <div class="flex flex-col justify-center items-center h-28 md:h-48 bg-yellow-500">
          <h2 class="box-border text-7xl font-light">$1.99</h2>
          <p class="font-extrabold text-xl">Tacos</p>
        </div>
        <div class="flex flex-col justify-center items-center h-28 md:h-48 bg-yellow-500">
          <h2 class="box-border text-7xl font-light">$3.99</h2>
          <p class="font-extrabold text-xl">Kombucha</p>
        </div>
      </div>
    </div>
    <!-- Banner Ends -->
    <!-- Cards -->
    <section class="order-3 grid gap-4 sm:grid-cols-2 md:grid-cols-4">
      <article class="article">
        <div class="card-sm bg-[url('/images/card1.jpg')] object-cover"></div>
        <h3 class="card-bold">Tacos</h3>
        <p class="text-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </article>
      <article class="article">
        <div class="card-sm bg-[url('/images/card-beer.jpg')] object-cover"></div>
        <h3 class="card-bold">Beer</h3>
        <p class="text-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </article>
      <article class="article">
        <div class="card-sm bg-[url('/images/card-wine.webp')] object-cover"></div>
        <h3 class="card-bold">Wine</h3>
        <p class="text-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </article>
      <article class="article">
        <div class="card-sm bg-[url('/images/card-music.png')] object-cover"></div>
        <h3 class="card-bold">Music</h3>
        <p class="text-center">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </article>
    </section>
    <!-- Cards End -->

    <!-- Hero Banner -->
    <section
      class="order-4 box-border w-full p-10 bg-white flex flex-col justify-center items-center md:flex-row gap-4">
      <!-- <div class="w-1/4 h-[288px] sm:h-full bg-red-600">
        <div class="w-[170px] h-[128px] md:w-[399px] md:h-[299px] sm:h-full bg-contain bg-center bg-[url('/images/tacos.png')] bg-no-repeat object-cover"></div>
    </div> -->
      <img src="./images/tacos.png" alt="" />
      <div class="w-3/4 flex flex-col justify-center items-start gap-4">
        <h2 class="heading-bold">Featured Taco</h2>
        <h3 class="heading-bold">
          Slim Profile, easy to hold and loaded with cheese.
        </h3>
        <h3 class="heading-bold">
          This is the one you have been waiting for
        </h3>
        <button class="bg-yellow-500 px-4 py-2 max-w-max">
          Learn More &nbsp ->
        </button>
      </div>
    </section>
    <!-- Hero Banner Ends -->

    <!-- Photos Section -->
    <section class="order-5 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 gap-4">
      <article>
        <img src="./images/1.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/2.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/3.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/4.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/5.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/6.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/7.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/8.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/9.jpg" alt="" class="img" />
      </article>
      <article>
        <img src="./images/10.jpg" alt="" class="img" />
      </article>
    </section>
    <!-- Photos Section Ends -->
  </div>
  <script src="./script.js"></script>
</body>

</html>