PW-Skills-Website/index.html at main · mic-720/PW-Skills-Website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PWSkills</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-slate-950">
    <!-- navbar goes here-->
    <nav class="w-full h-14 bg-indigo-200 flex justify-between items-center px-4 md:p-8 ">
        <div class="text-2xl text-indigo-700 font-bold">PWSkills</div>
        <ul class="md:flex font-semibold hidden">
            <li class="m-[10px] cursor-pointer">Home</li>
            <li class="m-[10px] cursor-pointer">About</li>
            <li class="m-[10px] cursor-pointer">Contact Us</li>
        </ul>
        <div class="hidden md:block px-2 py-2 bg-indigo-700 text-white rounded-md cursor-pointer font-bold">Login/Signup</div>
        <div class="md:hidden font-bold text-4xl">
            <a href="#">&#8801;</a>
        </div>
    </nav>
    <!-- navbar ends here -->

    <!-- Image section starts here -->
    <header class="w-full h-auto">
        <img class="hidden w-full md:block" src="https://cdn.pwskills.com/assets/uploads/banners/63a18cca807628f5968f528a/web.jpg" >
        <img class="w-full md:hidden" src="https://cdn.pwskills.com/assets/uploads/banners/63a18cca807628f5968f528a/mobile.jpg">
    </header>
    <!-- Image section ends here-->

    <!-- Our students section -->
    <div class="h-auto w-100 flex flex-wrap flex-col justify-center items-center p-10 ">
        <div class="w-full h-auto flex flex-wrap justify-center items-center flex-col">
            <p class="text-indigo-800 text-bold text-2xl md:text-4xl text-center ">"Pure Hardwork,No Shortcuts!"</p>
            <div class="w-36 h-1 border-b-4 border-yellow-400 mt-2 rounded-2xl md:mt-4 mb-12"></div>
        </div>
        <div class="w-full flex justify-evenly items-center flex-wrap ">
            <div class="flex flex-col items-center mb-12">
                <!-- <img class="w-44 h-44" src="https://pwskills.com/images/landing-page/statistics/books-icon.svg"> -->
                <img class="w-44 h-44 rounded-full mb-2" src="pw.jpg">
                <p class="text-3xl font-bold text-white">600+</p>
                <p class="text-2xl font-bold text-gray-500">Different Courses</p>
            </div>
            <div class="flex flex-col items-center mb-12">
                <!-- <img class="w-44 h-44" src="https://pwskills.com/images/landing-page/statistics/books-icon.svg"> -->
                <img class="w-44 h-44 rounded-full mb-2" src="pw.jpg">
                <p class="text-3xl font-bold text-white">600+</p>
                <p class="text-2xl font-bold text-gray-500">Different Courses</p>
            </div>
            <div class=" flex flex-col items-center mb-12">
                <!-- <img class="w-44 h-44" src="https://pwskills.com/images/landing-page/statistics/books-icon.svg"> -->
                <img class="w-44 h-44 rounded-full mb-2" src="pw.jpg">
                <p class="text-3xl font-bold text-white">600+</p>
                <p class="text-2xl font-bold text-gray-500">Different Courses</p>
            </div>
        </div>
    </div>
    <!-- Our students section ends here -->

    <!-- Our product section -->
    <div class="h-auto w-100 flex flex-wrap flex-col items-center p-10 ">
        <div class="w-full h-auto flex flex-wrap justify-center items-center flex-col">
            <p class="text-indigo-800 text-bold text-2xl md:text-4xl text-center ">"Our Products"</p>
            <div class="w-36 h-1 border-b-4 border-yellow-400 mt-2 rounded-2xl md:mt-4 mb-12"></div>
        </div>
        <div class="w-full h-auto flex flex-wrap justify-between">
            <div class="w-64 flex flex-col items-center mb-12 border-2 border-white rounded-md p-2 text-center">
                <img class="w-36 h-36 p-1 rounded-full" src="pw.jpg" alt="">
                <p class="text-white font-bold text-2xl">PWSkills Lab</p>
                <p class="text-gray-500 font-semibold text-base">Lorem ipsum dolor sit amet consectetur</p>
            </div>
            <div class="w-64 flex flex-col items-center mb-12 rounded-md p-2 text-center">
                <img class="w-36 h-36 p-1 rounded-full" src="pw.jpg" alt="">
                <p class="text-white font-bold text-2xl">Job Portal</p>
                <p class="text-gray-500 font-semibold text-base">Lorem ipsum dolor sit amet consectetur</p>
            </div>
            <div class="w-64 flex flex-col items-center mb-12 rounded-md p-2 text-center">
                <img class="w-36 h-36 p-1 rounded-full" src="pw.jpg" alt="">
                <p class="text-white font-bold text-2xl">Experience Portal</p>
                <p class="text-gray-500 font-semibold text-base">Lorem ipsum dolor sit amet consectetur</p>
            </div>
            <div class="w-64 flex flex-col items-center mb-12 rounded-md p-2 text-center">
                <img class="w-36 h-36 p-1 rounded-full" src="pw.jpg" alt="">
                <p class="text-white font-bold text-2xl">Affiliate</p>
                <p class="text-gray-500 font-semibold text-base">Lorem ipsum dolor sit amet consectetur</p>
            </div>
            <div class="w-64 flex flex-col items-center mb-12 rounded-md p-2 text-center">
                <img class="w-36 h-36 p-1 rounded-full" src="pw.jpg" alt="">
                <p class="text-white font-bold text-2xl">Hall Of Fame</p>
                <p class="text-gray-500 font-semibold text-base">Lorem ipsum dolor sit amet consectetur</p>
            </div>
        </div>
    </div>
     <!-- Our product section ends here -->

     <!-- Our footer Starts here -->
     <footer class="w-full bg-grey-900 px-4 text-white pt-8 flex flex-col md:flex-row flex-wrap justify-between md:px-12 mb-5">
        <div>
            <img class="w-40 h-16" src="https://pwskills.com/images/PWSkills-white.png" alt="">
            <p class="mt-4 mb-2">Email us: support@pwskills.com</p>
            <p class="text-gray-500 text-sm">Copyright © 2024 PW Skills | Blog</p>
            <!-- <img src="https://pwskills.com/images/PWSkills-white.png" alt=""> -->
        </div>
        <div>
            <h2 class="font-bold text-xl mt-4">PW Skills</h2>
            <div class="w-32 h-1 border-b-2 border-yellow-400 rounded-2xl my-2"></div>
            <p>About Us</p>
            <p>FAQs</p>
            <p>Privacy Policy</p>
        </div>
        <div>
            <h2 class="font-bold text-xl mt-4">Products</h2>
            <div class="w-32 h-1 border-b-2 border-yellow-400 rounded-2xl my-2"></div>
            <p>PW Skills Lab</p>
            <p>Job Portal</p>
            <p>Experience Portal</p>
            <p>Become an affiliate</p>
            <p>Hall of fame</p>
        </div>
        <div>
            <h2 class="font-bold text-xl mt-4">Links</h2>
            <div class="w-32 h-1 border-b-2 border-yellow-400 rounded-2xl my-2"></div>
            <p>Discord Channel</p>
            <p>PW Youtube</p>
            <p>Careers</p>
        </div>
     </footer>
     <!-- Our footer ends here -->
</body>
</html>