thepixelheads.github.io/index.html at main · ThePixelHeads/thepixelheads.github.io · 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
<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="styles.css">

  <title>PixelHeads | Christmas Theme</title>

  <style>
    body {
      background-color: black;
      color: white;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      position: relative;
    }

    #container {
      width: 90%;
      margin: 0 auto;
      padding: 20px;
    }

    header {
      text-align: center;
      padding: 20px;
    }

    header h1 {
      margin-bottom: 10px;
    }

    header img {
      max-width: 150px;
      height: auto;
      border-radius: 50%;
    }

    h2, h3 {
      text-align: center;
    }

    .css-button {
      background-color: #00BFFF;
      color: black;
      padding: 10px 20px;
      margin: 5px;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
    }

    .css-button:hover {
      background-color: #1E90FF;
    }

    /* LED Christmas Light Border */
    body:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 10px solid transparent;
      padding: 20px;
      border-image: url('https://example.com/led-christmas-lights.png') 30 round; /* replace with actual Christmas LED light image */
      z-index: -1;
    }

    /* Animation for glowing LED lights */
    @keyframes glow {
      0% {
        box-shadow: 0 0 5px #FF0000, 0 0 10px #FF0000, 0 0 15px #FF0000;
      }
      50% {
        box-shadow: 0 0 20px #00FF00, 0 0 30px #00FF00, 0 0 40px #00FF00;
      }
      100% {
        box-shadow: 0 0 5px #FF0000, 0 0 10px #FF0000, 0 0 15px #FF0000;
      }
    }

    /* Glow effect for header */
    header {
      animation: glow 2s infinite alternate;
    }

    /* Adjust layout for images inside the table */
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    table td {
      padding: 10px;
      text-align: center;
    }

    table td img {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 10px;
    }

    table td a {
      color: #00BFFF;
      font-weight: bold;
      text-decoration: none;
    }

    table td a:hover {
      text-decoration: underline;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      table td img {
        width: 100%;
        height: auto;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="inner">

      <header>
        <h1>PixelHeads</h1>
        <img src="images/pixelhead.png" class="img-head" />
      </header>

      <section id="main_content">
        <h2>Welcome to the Pixelheads Space for sharing!</h2>
        <h3>
          <a href="/" class="css-button">Home</a>
          <a href="3d_prints.html" class="css-button">3D Print Collection</a>
          <a href="shows.html" class="css-button">Pixelhead Shows</a>
          <a href="started.html" class="css-button">Getting Started</a>
        </h3>

        <h3>The Pixelheads are a collection of DrZz Discord staff who are here to help with all things LED related. These are links to things we think might help you along your way.</h3>
      </section>

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

</html>