UX-UI-landing-page/index.html at main · Itsavezkhan/UX-UI-landing-page · 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
<!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">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>UX/UI landing page</title>
</head>

<body>
    <header class="flex w-full h-auto py-2 px-14 justify-between items-center capitalize">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdiWIDHVdy10rPoUuHoDED5wJxq6YfUXyjkg&usqp=CAU
        " class="w-10 cursor-pointer" alt="">

        <ul class=" hidden flex space-x-14 text-blue-800 font-medium text-lg cursor-pointer md:flex ">
            <li>home</li>
            <li>about</li>
            <li>services</li>
            <li>contact</li>
        </ul>

        <input type="button" value="sign up"
            class="bg-orange-400 py-2 px-5 active:bg-orange-300 active:text-white rounded-full text-white font-medium capitalize cursor-pointer">

    </header>

    <div class="px-14 mt-10 flex flex-col md:flex-row m-auto container items-center justify-between md:px-4">
        <div class="text-center md:w-1/2 md:text-left md:mb-4 md:px-20" >
            <h1 class="uppercase text-9xl font-medium text-blue-900 mb-4 md:text-6xl">ux/ui designs</h1>
            <p class="text-lg font-medium text-blue-700 sp mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Eum tenetur, veniam est odit iste dignissimos nemo quaerat voluptate vero. Unde debitis praesentium
                voluptate facere laborum!</p>

            <button
                class="bg-orange-400 font-semibold text-xl py-2 px-5 active:bg-orange-300 active:text-white rounded-full text-white  capitalize cursor-pointer">register</button>
        </div>

        <div class="mt-6 md:ml-6lg:ml-60 ">
            <img src="https://www.konverge.com/media/33507/ux-ui-design.png" class="md-w-20" alt="">
        </div>

    </div>


</body>

</html>