task/index.html at main · anish013326/task · 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <style>
      .right {
        background: url(https://img.freepik.com/premium-photo/photo-young-beautiful-front-portrait-woman-cute-girl-model-face_763111-62864.jpg);
        background-position: center;
        background-size: cover;


      }
      .page02{
        background: url(WhatsApp\ Image\ 2024-05-20\ at\ 14.47.13_76728950.jpg);
        background-position: center;
        background-size: cover;
      }
      .card01{
        background: url(https://m.media-amazon.com/images/S/aplus-media/sota/dad59d6e-26b4-466b-a60e-aacb82915d41._SL300__.jpg);
        background-position:center;
        background-size: cover;
      }
      .card02{
        background: url(https://images.unsplash.com/photo-1610085927744-7217728267a6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZnVsbCUyMGhkJTIwd2FsbHBhcGVyfGVufDB8fDB8fHww);
        background-position:center;
        background-size: cover;
      }
      .card04{
        background: url(https://plus.unsplash.com/premium_photo-1669239115468-bf7412c1da94?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8b3V0ZG9vcnxlbnwwfHwwfHx8MA%3D%3D);
        background-position:center;
        background-size: cover;
      }
      .card05{
        background: url(https://images.unsplash.com/photo-1439792675105-701e6a4ab6f0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZGFya3xlbnwwfHwwfHx8MA%3D%3D);
        background-position:center;
        background-size:cover;
      }
      .card06{
        background: url(https://images.unsplash.com/photo-1557973350-f61cc5d1a5ff?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        background-position:top;
        background-size:cover;
      }
      .card07{
        background: url(https://images.unsplash.com/photo-1554322662-5b660295377d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        background-position:center;
        background-size:cover;
      }
      .card08{
        background: url(https://plus.unsplash.com/premium_photo-1672762542894-caaa8d4f0a77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fG91dGRvb3J8ZW58MHx8MHx8fDA%3D);
        background-position:top;
        background-size:cover;
      }
      .box02{
        background: url(https://images.unsplash.com/photo-1514315384763-ba401779410f?q=80&w=1883&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        background-position:center;
        background-size:cover;
      }


    </style>
  </head>
  <body>
    <div class="main w-full font-[Gilroy]">
      <div class="page01 w-screen h-screen flex">
        <div class="left h-full w-[45vw] rounded">
          <div
            class="nav w-full h-[8vh] items-center justify-center flex gap-10"
          >
            <i class="ri-money-cny-circle-fill text-5xl"></i>
            <a
              class="text-m px-[1.5vw] py-1.5 rounded-full bg-gray-300 opacity-[60%]"
              href="#"
              >главно <i class="ri-arrow-down-s-line"></i
            ></a>
            <a class="text-m hover:px-4 hover:py-2 hover:bg-gray-300 hover:rounded-full" href="#">Пател</a>
            <a class="anish04 text-m" href="#">АНиш</a>
            <a class="text-m" href="#">Стая Ганду</a>
          </div>
          <div class="text">
            <h1 class="anish text-6xl mx-[5vw] my-[10vh]">
              ТЕРРИТОРИЯ КРАСИВЫХ ЛЮДЕЙ
            </h1>
            <h1 class="text-5xl mx-[5vw] my-[10vh]">Hello and <br> <span class="text-blue-500 text-4xl hover:text-red-500 hover:text-7xl">WELCOME</span> to the Host ?</h1>
          </div>
        </div>
        <div class="right h-screen w-[55vw] px-4 py-3">
          <div class="nav flex w-full h-fit py-5">
            <div class="left flex gap-7">
              <div class="icon w-fit h-fit">
                <i
                  class="ri-map-pin-line px-3 py-3 bg-gray-300 text-white rounded-full hover:text-2xl"
                ></i>
                <i
                  class="ri-arrow-right-s-line px-3 py-3 bg-white -ml-[1vw] rounded-full hover:bg-pink-300"
                ></i>
              </div>
              <div class="text ">
                <h1 class="text-sm text-black font-semibold">lo rem</h1>
                <p class="text-xs text-black font-medium ">
                  Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="flex w-[33vw] h-10 gap-5 justify-end ">
                  <button class="px-4 py-1 bg-blue-300 rounded-full text-white hover:text-black hover:font-semibold " >Shop Now</button>
                  <i class="ri-shopping-bag-line px-3 py-2 bg-white rounded-full hover:text-red-500"></i>
                  <i class="ri-menu-3-fill px-3 py-2 bg-white rounded-full hover:bg-pink-400"></i>
              </div>
            </div>
          </div>
          <div class="text w-[25vw] h-10 bg-white flex items-center absolute top-[72%] left-[50%] translate-x-[50%] translate-y-[50%] rounded">
            <i class="ri-search-line text-2xl px-1"></i>
            <p class="opacity-[50%]">Lorem ipsum dolor sit amet consectetur </p>
            <i class="ri-close-line text-2xl px-1 mx-4"></i>
          </div>
        </div>
      </div>

      <div class="page02 w-screen h-screen">
        <h1 class="absolute top-[150%] left-[35%] translate-x-[50%] translate-y-[50%] text-4xl ">ТЕРРИТОРИЯ </h1>
        <div class="01 flex justify-evenly pt-[10vh]">
        <div class="w-[25vw] h-[30vh] bg-gray-300 mr-[10vw] rounded">
          <div class="flex p-5 ">
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
            <h2 class="px-[1vw] py-3 rounded-[50%] bg-white border-1 ">01</h2>
            <h2 class=" px-[.8vw] py-3 rounded-full bg-gray-200 border-1 ml-[-.5vw]">04</h2>
          </div>
          <p class="mt-[2vh] p-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus ratione fugit unde, dolorum error.
          </p>
        </div>
        <div class="w-[25vw] h-[30vh] bg-gray-300">
          <div class="flex p-5 ">
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
            <h2 class="px-[1vw] py-3 rounded-[50%] bg-white border-1 ">01</h2>
            <h2 class=" px-[.8vw] py-3 rounded-full bg-gray-200 border-1 ml-[-.5vw]">04</h2>
          </div>
          <p class="mt-[2vh] p-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus ratione fugit unde, dolorum error.
          </p>
        </div>
        </div>
        <div class="flex justify-evenly  pt-[10vh]">
        <div class="w-[25vw] h-[30vh] bg-gray-300 mr-[10vw] rounded">
          <div class="flex p-5 ">
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
            <h2 class="px-[1vw] py-3 rounded-[50%] bg-white border-1 ">01</h2>
            <h2 class=" px-[.8vw] py-3 rounded-full bg-gray-200 border-1 ml-[-.5vw]">04</h2>
          </div>
          <p class="mt-[2vh] p-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus ratione fugit unde, dolorum error.
          </p>
        </div>
        <div class="w-[25vw] h-[30vh] bg-gray-300 rounded">
          <div class="flex p-5  ">
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
            <h2 class="px-[1vw] py-3 rounded-[50%] bg-white border-1 ">01</h2>
            <h2 class=" px-[.8vw] py-3 rounded-full bg-gray-200 border-1 ml-[-.5vw]">04</h2>
          </div>
          <p class="mt-[2vh] p-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus ratione fugit unde, dolorum error.
          </p>
        </div>
        </div>

      </div>

      <div class="page04 w-screen h-screen  ">
        <h1 class="pt-[10vh] mx-[6vw] text-4xl">ТЕРРИТОРИЯ <span class="opacity-50"> / КРАСИВЫХ ЛЮДЕЙ</span> </h1>
      <div class="box flex mx-[6vw] mt-[6vh] gap-2  ">
        <div class="left w-[45vw] h-[42vh] flex gap-2 ">
          <div class=" card01 w-[22vw] h-[42vh] bg-gray-200 rounded flex items-end justify-end">
            <i class="ri-arrow-right-s-line py-2 px-3 bg-white rounded-full m-2"></i>
          </div>
          <div class=" card02 w-[22vw] h-[42vh] bg-gray-200 rounded rounded flex items-end justify-end">
            <i class="ri-arrow-right-s-line py-2 px-3 bg-white rounded-full m-2"></i>
          </div>
        </div>
        <div class="right02 w-[40vw] h-[42vh]  flex flex-col gap-2   ">
          <div class="card04 h-[21vh] w-[40vw] bg-blue-300 rounded ">
          <p class="text-white p-2 opacity-50">ЕРРИТОРИЯ <br> ЛЮДЕЙ</p>
          </div>
          <div class=" card05 h-[21vh] w-[40vw] bg-gray-200 rounded">
            <p class="text-white p-2 opacity-50">ЛЮДЕЙ</p>
          </div>
        </div>
      </div>
      <div class="box flex mx-[6vw] mt-[6vh] gap-2   ">
        <div class="card06 w-[28vw] h-[25vh]  rounded flex ">
          <i class="ri-arrow-right-s-line py-2 px-3 w-fit h-fit bg-white rounded-full m-2 flex  "></i>
        </div>
        <div class="card07 w-[28vw] h-[25vh]  rounded">
          <i class="ri-arrow-right-s-line py-2 px-3 w-fit h-fit bg-white rounded-full m-2 flex  "></i>

        </div>
        <div class="card08 w-[28vw] h-[25vh]  rounded">
          <i class="ri-arrow-right-s-line py-2 px-3 w-fit h-fit bg-red-300 rounded-full m-2 flex  "></i>
        </div>

      </div>
      <div class="w-full h-[.2vh] bg-black mt-5 opacity-50"></div>
      </div>

      <div class="footer w-screen h-[45vh] flex mx-[6vw] gap-[4vw]">

      <div class=" w-[28vw] h-[45vh]  ">
        <p class="text-4xl  m-5">МАНИКЮР Косметология </p>
        <h3 class="px-1 py-2 w-[8vw] bg-gray-100 rounded flex justify-center m-5  opacity-50">lorem12</h3>
        <h3 class="px-1 py-2 w-[8vw] bg-gray-100 rounded flex justify-center m-5 opacity-50 ">сметология</h3>
      </div>
      <div class="box02 w-[45vh] h-[45vh] rounded-full bg-red-300 "></div>
      <div class=" w-[28vw] h-[45vh]">
        <p class="text-sm ">Lorem, Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci iure optio debitis expedita dolores autem! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur labore dolores quibusdam illo sequi ex! ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nemo enim excepturi unde nisi aliquid!
        </p>
        <div class="flex items-center  justify-end mt-[10vh]">
          <h2 class="font-medium text-sm">ТЕРРИТОРИЯ</h2>
          <i class="ri-arrow-right-s-line py-2 px-3 w-fit h-fit bg-pink-300 rounded-full m-2 flex  "></i>

        </div>
      </div>


    </div>
    <script src="js.js"></script>
  </body>
</html>