mini_pro_tailwindcss/index.html at main · zikou058/mini_pro_tailwindcss · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./src/output.css" rel="stylesheet">
  <link href="./src/input.css" rel="stylesheet">
  <title> tailwind cli </title>
</head>
<body>
<main class="w-screen h-full">
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/f0f99a70c2e2521f9b427a2e/pexels-photo-917494.jpeg')]
              h-[760px] w-screen bg-cover bg-center">
    <div class="flex justify-between items-center pt-10">
      <h1 class="text-white text-3xl p-4 text-zinc-400 font-bold ml-30">Logo</h1>
      <h1 class="mr-30 h-10 w-10"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
      </svg>
      </h1>
    </div>
    <div class="text-center mt-20">
      <h1 class="font-bold text-[90px]">Travel</h1>
    </div>
    <div class="text-center flex flex-col items-center justif-center h-screen mt-40 gap-6 text-white">
      <h1 class="text-3xl font-bold ">we provide best guidance</h1>
      <p class="text-lg px-50">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
      <button class="bg-yellow-500 text-black font-bold text-lg px-18 py-3 rounded-4xl">READ MORE</button>
    </div>
  </div>
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/3483e3aea7075fb0aa6bf01d/pexels-photo-1428277.jpeg')] w-screen h-[640px] bg-cover bg-center">
    <div class=" text-white flex flex-col justif-center space-8">
      <h1 class="text-[50px] font-bold mt-30 ml-30 ">What do You Know About Us</h1>
      <div class="pl-40 pr-20">
        <p class="text-xl pt-20 pl-60">Journez is a tour agency, specializing in organizing tours to all destinations. We are happy to make your holidays unforgettable and amazing! Our agents are experts in finding you the most comfortable and interesting place for you to have breathtaking holidays.
        Select the country you’d like to visit and provide our agents with estimated time – they’ll find and offer the most suitable tours and hotels.</p>
        <p class="text-lg text-yellow-400 font-bold pt-20 pl-60 ">During our work we organized countless journeys for our clients. We started as a small tour bureau, and soon we expanded our offers list.
        Today we have valuable experience travelling and we can advise the most stunning resorts, cities and countries to visit!</p>
      </div>
    </div>
  </div>
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/6fa56c231b5f5c33ac0b5830/pexels-photo-691571.jpeg')] w-screen h-[853px] bg-bottom bg-cover">
    <div class="columns-3 gap-1 pl-54 pr-28 pt-20 pb-20 text-white">
      <div class="w-[300px] ">
        <div class=""><img src="https://images03.nicepage.com/a1389d7bc73adea1e1c1fb7e/0300a99382c25c3fb2d428de/1.jpg" alt="Description de l'image" class="w-[313px] h-[340px] object-cover ">
          <h1 class="text-3xl font-bold py-6">mountains travel</h1>
          <p class=" pb-2 ">Sample text. Click to select the text box. Click again or double click to start editing the text.</p>
          <div class="flex items-center gap-12 pt-5">
            <h1 class="text-3xl font-bold ">$ 600</h1>
            <button class="bg-yellow-400 text-black px-10 py-3 rounded-3xl font-bold">BOOK NOW</button>
        </div>
      </div>
      <div class="">
        <img src="https://images03.nicepage.com/a1389d7bc73adea1e1c1fb7e/102758e34c375ab8bd4146ca/3.jpg" alt="Description de l'image" class="w-[313px] h-[340px] object-cover mt-8">
        <h1 class="text-3xl font-bold py-6">forest travel</h1>
        <p class="pb-4">Sample text. Click to select the text box. Click again or double click to start editing the text.</p>
        <div class="flex items-center gap-12 pt-3">
          <h1 class="text-3xl font-bold">$ 800</h1>
          <button class="bg-yellow-400 text-black px-10 py-3 rounded-3xl font-bold ">BOOK NOW</button>
        </div>
      </div>
      <div class="">
        <img src="https://images03.nicepage.com/a1389d7bc73adea1e1c1fb7e/8425d5b3ef115f608760cbd5/2.jpg" alt="Description de l'image" class="w-[313px] h-[340px] object-cover">
        <h1 class="text-3xl font-bold py-6">ocean travel</h1>
        <p class="pb-4">Sample text. Click to select the text box. Click again or double click to start editing the text.</p>
        <div class="flex items-center gap-12 pt-3">
          <h1 class="text-3xl font-bold ">$ 700</h1>
          <button class="bg-yellow-400 text-black px-10 py-3 rounded-3xl font-bold">BOOK NOW</button>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/262a933a943d5867bedc468a/pexels-photo-2310641.jpeg')] w-screen h-[720px] bg-cover bg-center">
    <h1 class="text-6xl text-white font-bold pl-40 pt-14">What Can We Offer for You</h1>
    <div class="py-24 px-96 text-white flex flex-col gap-20">
      <div class="flex items-center justif-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-18 text-yellow-300">
        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /></svg>
        <div class="flex flex-col">
          <h1 class="font-bold text-3xl">Various Destinations</h1>
          <p class="text-xl pt-5">Sample text. Click to select the text box. Click again</p>
        </div>
      </div>
      <div class="flex items-center justif-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-18 text-yellow-300">
        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
        </svg>
        <div class="flex flex-col">
          <h1 class="font-bold text-3xl">Everything is Included</h1>
          <p class="text-xl pt-5">Sample text. Click to select the text</p>
        </div>
      </div>
      <div class=" flex items-center justif-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-18 text-yellow-300">
        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
        </svg>
        <div class="flex flex-col">
          <h1 class="font-bold text-3xl">Affordable Prices</h1>
          <p class="text-xl pt-5">Sample text. Click to select the text box. Click again or double click</p>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-[url('https://images03.nicepage.com/a1389d7bc73adea1e1c1fb7e/04c1f4988d0957b48db286c7/pexels-photo-2909067.jpeg?version=')] bg-center bg-center w-screen h-[277px]">
    <div class="flex items-center justify-around pt-14 px-30 text-xl text-white">
      <div>
        <img src="./src/images/countries.png" alt="countries image" class="w-28 h-28 rounded-lg shadow-lg ">
        <p>visited countries</p>
      </div>
      <div>
        <img src="./src/images/customer-service.png" alt="customer-service" class="w-28 h-28 rounded-lg shadow-lg">
        <p>happy clients</p>
      </div>
      <div>
        <img src="./src/images/destination.png" alt="destination image" class="w-28 h-28 rounded-lg shadow-lg">
        <p>tracking tours</p>
      </div>
      <div>
        <img src="./src/images/tourism.png" alt="tourism image" class="w-28 h-28 rounded-lg shadow-lg">
        <p>travel tours</p>
      </div>
    </div>
  </div>
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/5a6f1737f6005a41afa18394/pexels-photo-4406222.jpeg')] bg-bottom bg-cover w-screen h-[563px]">
    //
    <div class="w-full overflow-x-auto h-[560px] pt-24">
      <div class="flex gap-90 pl-80">
        <!-- Item 1 -->
        <div class="flex items-center gap-10 min-w-max ">
          <img src="https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/321a602f753f56b988c51b1d/grayscale-photography-of-woman-wearing-coat-and-fedora-hat-2947337.jpg" class="w-80 h-80 rounded-full">
          <div class="flex flex-col items-start">
            <h1 class="text-white font-bold text-4xl pb-10">Linda Larson</h1>
            <p class="text-white text-xl w-[600px] leading-loose">
              There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed.
            </p>
            <button class="bg-yellow-300 rounded-2xl font-bold py-2 px-10 mt-8">READ MORE</button>
          </div>
        </div>
        <!-- Item 2 -->
        <div class="flex items-center gap-10 min-w-max pr-40">
          <img src="https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/1f969468ea205425b70c5c31/pexels-photo-555790.jpg" class="w-80 h-80 rounded-full">
          <div class="flex flex-col items-start">
            <h1 class="text-white font-bold text-4xl pb-10">John Jackson</h1>
            <p class="text-white text-xl w-[600px] leading-loose">
              There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed.
            </p>
            <button class="bg-yellow-300 rounded-2xl font-bold py-2 px-10 mt-8">READ MORE</button>
          </div>
        </div>

      </div>
    </div>
    //
  </div>
  <div class="bg-[url('https://images02.nicepage.com/a1389d7bc73adea1e1c1fb7e/57c47ae9986458b8a759cc53/pexels-photo-3520653.jpeg')] bg-cover bg-center w-screen h-[578px]">
    <div class="flex flex-col items-center justif-center gap-8 ">
      <h1 class="text-5xl font-bold text-white pt-40"> Contact Us</h1>
      <p class="text-white text-xl">We channel creativity, colors, copy and code to help our clients with better branding. </p>
      <input  type="text"
      placeholder="Enter your E-mail"
      class="border border-gray-400 rounded px-66 py-4 w-64 bg-white text-black ">
      <button class="py-3 px-10 text-black font-bold bg-yellow-400 rounded-4xl">SUBMIT</button>
    </div>
  </div>
  <div class="bg-gray-900 bg-cover w-screen h-[141.800px]">
    <p class="text-center text-white pt-10">Sample text. Click to select the text box. Click again or double</p>
    <p class="text-center text-white ">click to start editing the text.</p>
  </div>
  <div class="bg-gray-900 bg-cover w-screen h-[141.800px]">
  <p class="text-white text-center pt-8 ">
  <a href="https://github.com/zikou058/mini_pro_tailwindcss" class="text-blue-400 underline hover:text-blue-600">
    Website Templates</a>
  created with
  <a href="https://github.com/zikou058/mini_pro_tailwindcss" class="text-blue-400 underline hover:text-blue-600">
    Website Builder Software</a>.
  </p>
  </div>
</main>
</body>
</html>