tailwind-practice-project/index.html at main · M-AamirBakhtiar/tailwind-practice-project · 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
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Beginner Tailwind Site</title>
  </head>
  <body>
    <!-- === === === === Start of Header/Navigation === === === === -->
    <div class="bg-gradient-to-br from-white to-gray-300">
      <!-- left decoration circle -->
      <div class="absolute top-0 left-0 transform translate-y-2">
        <div class="absolute bg-gradient-to-br from-teal-100 to-teal-200 w-64 h-64 rounded-full opacity-50"></div>
        <div class="absolute ml-10 mt-10 bg-gradient-to-br from-purple-100 to-purple-200 w-64 h-64 rounded-full opacity-50"></div>
        <div class="absolute ml-24 bg-gradient-to-br from-red-100 to-red-200 w-64 h-64 rounded-full opacity-50"></div>
      </div>

      <!-- right decoration circle -->
      <div class="hidden lg:block absolute top-0 right-0 mr-48 transform -translate-x-64 translate-y-64">
        <div class="absolute bg-gradient-to-br from-teal-100 to-teal-200 w-64 h-64 rounded-full opacity-50"></div>
        <div class="absolute ml-10 mt-10 bg-gradient-to-br from-purple-100 to-purple-200 w-64 h-64 rounded-full opacity-50"></div>
        <div class="absolute ml-24 bg-gradient-to-br from-red-100 to-red-200 w-64 h-64 rounded-full opacity-50"></div>
      </div>

      <!-- navigation -->
      <div class="text-gray-600 relative">
        <div class="container mx-auto flex justify-between px-6 lg:px-0 py-6">
          <!-- left header section -->
          <div class="flex items-center space-x-4">
            <a class="font-bold text-2xl text-teal-800" href="#">Beginner Tailwind</a>
            <a class="hidden lg:inline-block hover:text-gray-900" href="#">About</a>
            <a class="hidden lg:inline-block hover:text-gray-900" href="#">What You'll Learn</a>
            <a class="hidden lg:inline-block hover:text-gray-900" href="#">Pricing</a>
            <a class="hidden lg:inline-block hover:text-gray-900" href="#">FAQ</a>
          </div>

          <!-- right header section -->
          <div class="flex items-center space-x-4">
            <a class="hover:text-gray-900" href="#">Login</a>
            <a
              class="
                hidden
                lg:inline-block
                p-3
                bg-purple-300
                hover:bg-purple-200
                text-purple-700
                hover:text-purple-600
                rounded
                shadow
                hover:shadow-xl
                transition
                duration-500
              "
              href="#"
              >Get the Course</a
            >
          </div>
        </div>
      </div>
      <!-- === === === === End of Header/Navigation === === === === -->

      <!-- === === === === Start of Hero === === === === -->
      <section class="relative">
        <div class="container mx-auto px-6 lg:px-0 py-24 text-center">
          <!-- heading -->
          <h1 class="mb-4 text-4xl lg:text-6xl font-extrabold tracking-wide">
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-teal-500">Beginner</span>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-500 via-purple-600 to-purple-500"> Tailwind</span>
          </h1>

          <!-- paragraph -->
          <p class="mb-8 text-lg lg:text-2xl text-gray-700">Make good looking designs quickly. All without a single line of custom css.</p>

          <!-- call to action -->
          <a
            class="
              inline-block
              mb-16
              lg:mb-32
              py-3
              px-12
              rounded
              bg-gradient-to-br
              from-purple-500
              to-purple-700
              hover:to-purple-600
              text-purple-100
              hover:text-white
              shadow-lg
              hover:shadow-2xl
              font-bold
              text-lg
              tracking-wide
              transition
              duration-500
            "
            href="#"
            >Get the Course</a
          >

          <div class="relative">
            <!-- teaser image -->
            <img
              class="rounded-lg shadow-2xl border-4 border-purple-400"
              src="https://i.imgur.com/wysbBMS.png"
              alt="A preview of what we will build"
            />

            <!-- left sliding info box -->
            <div
              class="
                lg:absolute
                top-0
                right-0
                bg-yellow-100
                lg:transform lg:translate-x-4 lg:-translate-y-4
                text-left
                mt-8
                lg:mt-0
                py-4
                px-8
                rounded
                shadow-lg
                text-yellow-800
                border-t-4 border-yellow-500
              "
            >
              <p><strong>We'll create BeginnerTailwind.com</strong> <span class="opacity-75">(it's the site you are on now)</span></p>
              <p>We'll do it all without a single line of custom CSS!</p>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- === === === === End of Hero === === === === -->

    <!-- === === === === Start of Overview === === === === -->
    <!-- === === === === End of Overview === === === === -->

    <!-- === === === === Start of About Me === === === === -->
    <!-- === === === === End of About Me === === === === -->

    <!-- === === === === Start of What you will Learn === === === === -->
    <!-- === === === === End of What you will Learn === === === === -->

    <!-- === === === === Start of What you will Build === === === === -->
    <!-- === === === === End of What you will Build === === === === -->

    <!-- === === === === Start of Pricing === === === === -->
    <!-- === === === === End of Pricing === === === === -->

    <!-- === === === === Start of FAQ === === === === -->
    <!-- === === === === End of FAQ === === === === -->
    <script type="module" src="/main.js"></script>
  </body>
</html>