interface/index.html at main · Asheshz/interface · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>INTERFACE</title>
  <link rel="icon" type="image/x-icon" href="./public/kgec.png">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    .blinking-cursor {
      border-right: 2px solid #fff;
      animation: blink-caret .75s step-end infinite;
    }

    .department-text {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
                   0 0 10px rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 640px) {
      .department-text {
        font-size: 1.25rem;
        top: 15%;
      }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
      .department-text {
        font-size: 2rem;
        top: 18%;
      }
    }

    @media (min-width: 1025px) {
      .department-text {
        font-size: 2.5rem;
        top: 20%;
      }
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: #fff }
    }
  </style>
</head>
<body>

  <script type="module" src="main.js"></script>
  <div class="main w-full font-mono">
    <nav class="w-full absolute top-0 left-0 px-4 sm:px-10 py-3 sm:py-5 flex flex-col sm:flex-row justify-center sm:justify-between items-center z-10">
      <a href="index.html">
        <img src="./public/kgec.png" class="w-[40px] sm:w-[50px] mix-blend-lighten filter saturate-150 contrast-125 mb-3 sm:mb-0">
      </a>
      <div class="flex flex-wrap justify-center gap-3 sm:gap-5 items-center">
        <a href="#" class="tracking-tight text-white hover:text-blue-400 hover:text-shadow-[0_0_20px_#60A5FA] transition-all text-sm sm:text-base">Home</a>
        <a href="about.html" class="tracking-tight text-white hover:text-blue-400 hover:text-shadow-[0_0_20px_#60A5FA] transition-all text-sm sm:text-base">About</a>
        <a href="contributors.html" class="tracking-tight text-white hover:text-blue-400 hover:text-shadow-[0_0_20px_#60A5FA] transition-all text-sm sm:text-base">Contributors</a>
        <a href="contact.html" class="tracking-tight text-white hover:text-blue-400 hover:text-shadow-[0_0_20px_#60A5FA] transition-all text-sm sm:text-base">Contact</a>

      </div>
    </nav>
    <div class="w-full h-[150vh] overflow-hidden relative">
      <div class="absolute top-[15%] sm:top-[18%] lg:top-[20%] left-[50%] -translate-x-1/2 z-10 w-full text-center">
        <div class="relative inline-block">
          <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg blur-xl opacity-75 -z-10"></div>
          <h1 class="department-text text-yellow-300 font-bold tracking-wider px-6 py-2 text-xl sm:text-2xl lg:text-3xl blinking-cursor inline-block" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 15px rgba(255,255,255,0.3), 0 0 30px rgba(234,179,8,0.3)">
            KGEC MCA Department presents
          </h1>
        </div>
      </div>
      <img src="./public/logo1.png" alt="" class="absolute top-[37%] left-[50%] -translate-x-1/2 -translate-y-1/2 mix-blend-lighten filter saturate-150 contrast-125 w-[110%] sm:w-[110%] max-w-[1200px] mx-auto">
      <div class="w-[15rem] h-[15rem] sm:w-[23rem] sm:h-[23rem] absolute top-[35%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-[-1] rounded-full bg-blue-800 blur-[60px] sm:blur-[90px] shadow-[0_0_100px_60px_rgba(29,78,216,0.8)] sm:shadow-[0_0_150px_90px_rgba(29,78,216,0.8)]">
      </div>
      <canvas id="canvas" class="w-full h-full"> </canvas>
    </div>
    <div class="w-full flex justify-center mt-[-450px] sm:mt-[-370px] mb-10 sm:mb-20 px-4">
      <a href="./public/MCA_Orientation .pdf" download class="px-4 sm:px-6 py-2 sm:py-3 bg-yellow-400 hover:bg-yellow-300 text-black font-semibold rounded-lg tracking-tight shadow-[0_4px_20px_#FDE047] hover:shadow-[0_4px_40px_#FDE047] text-sm sm:text-base transition-all z-40 relative">
        Download e-copy
      </a>
    </div>

          </div>
        </div>
      </div>
    </div>

    <script type="module" src="main.js"></script>