Creative-Frontend/index.html at main · FgrReloaded/Creative-Frontend · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creative Project Showcase</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    .gradient-bg {
      background: linear-gradient(135deg, #302a2a 0%, #292626 50%, #2b3139 100%);
      background-size: 200% 200%;
      animation: gradient-animation 12s ease infinite;
    }

    @keyframes gradient-animation {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .card-hover {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    }

    .image-hover {
      transition: transform 0.4s ease;
      overflow: hidden;
    }

    .card-hover:hover .image-hover {
      transform: scale(1.05);
    }

    .shine-effect {
      position: relative;
      overflow: hidden;
    }

    .shine-effect::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.1) 50%,
          rgba(255, 255, 255, 0) 100%);
      transform: rotate(30deg);
      animation: shine 6s infinite;
    }

    @keyframes shine {
      0% {
        left: -50%;
      }

      100% {
        left: 150%;
      }
    }
  </style>
</head>

<body class="font-['Raleway'] bg-gray-50">
  <header class="gradient-bg text-white relative overflow-hidden">
    <div class="container mx-auto px-4 py-24 text-center">
      <div class="max-w-3xl mx-auto relative z-10">
        <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-200 to-pink-200">
            Innovative Creations
          </span>
        </h1>
        <p class="text-xl md:text-2xl text-gray-100 font-light mb-8">
          Where Imagination Meets Digital Reality
        </p>
        <div class="shine-effect inline-block rounded-full">
          <button
            class="bg-white/10 backdrop-blur-lg px-8 py-3 rounded-full font-medium hover:bg-white/20 transition-all">
            Explore Innovations
          </button>
        </div>
      </div>
    </div>
  </header>

  <section class="py-20">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">
        <span class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
          Featured Websites
        </span>
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 project-lists">

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

  <script src="projects.js"></script>
  <script src="script.js"></script>
</body>

</html>