puzzlingggg.github.io/index.html at main · PuzzlingGGG/puzzlingggg.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
<!DOCTYPE html>
<html>
  <head>
    <title>PuzzlingGGG</title>
    <meta property="og:title" content="puzzlingGGG">
    <meta property="og:description" content="just a website for me">
    <meta property="og:image" content="pfp.png">
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        text-align: center;
      }

      .card {
        width: 300px;
        margin: 20px auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .profile-image {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 10px;
        display: block;
      }

      .intro {
        font-size: 14px;
        margin-bottom: 15px;
      }

      .icons {
        font-size: 24px;
      }

      .icon-link {
        text-decoration: none;
        color: #333;
        margin: 5px;
        display: inline-block;
        position: relative;
      }

      .icon-text {
        font-size: 12px;
        display: none;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.9);
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap;
      }

      .icon-link:hover .icon-text {
        display: block;
      }

      .icon-svg {
        width: 32px;
        height: 32px;
        fill: #333;
        /* Adjust the fill color as needed */
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img class="profile-image" src="pfp.png" alt="PuzzlingGGG">
      <h1>puzzlingGGG</h1>
      <div class="icons">
        <a class="icon-link" href="https://www.youtube.com/@PuzzlingGGG/featured" title="youtube">
          <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15.812.017H4.145C1.855.017 0 1.852 0 4.116v5.768c0 2.264 1.856 4.1 4.145 4.1h11.667c2.29 0 4.145-1.836 4.145-4.1V4.116c0-2.264-1.856-4.1-4.145-4.1zM13.009 7.28 7.552 9.855a.219.219 0 0 1-.314-.196V4.35a.22.22 0 0 1 .318-.193l5.458 2.735a.216.216 0 0 1-.005.389z" />
          </svg>
          <span class="icon-text">youtube</span>
          <a class="icon-link" href="https://twitter.com/PuzzlingGGG" title="x">
            <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1668.56 1221.19">
  <circle cx="834.28" cy="610.6" r="481.33" style="stroke:#fff;stroke-miterlimit:10"/>
  <path d="m485.39 356.79 230.07 307.62-231.52 250.11h52.11l202.7-218.98 163.77 218.98h177.32L836.82 589.6l215.5-232.81h-52.11L813.54 558.46 662.71 356.79H485.39zm76.63 38.38h81.46l359.72 480.97h-81.46L562.02 395.17z" style="fill:#fff" transform="translate(52.39 -25.059)"/>
              <span class="icon-text">X</span>
          <a class="icon-link" href="https://www.tiktok.com/@puzzlingggg" title="tiktok">
            <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="834.28" cy="610.6" r="481.33" style="stroke:#fff;stroke-miterlimit:10"/>
  <path d="M8.451 19.793c.156-1.294.687-2.019 1.687-2.761 1.43-1.006 3.218-.437 3.218-.437V13.22c.435-.011.87.014 1.3.077v4.343s-1.788-.569-3.219.438c-.999.742-1.53 1.467-1.686 2.76-.005.703.126 1.621.734 2.416a5.932 5.932 0 0 1-.46-.264c-1.337-.898-1.58-2.245-1.574-3.197ZM22.035 6.979c-.984-1.079-1.356-2.168-1.49-2.933h1.237s-.247 2.006 1.553 3.979l.025.026a7.133 7.133 0 0 1-1.325-1.072ZM28 10.037v4.256s-1.58-.062-2.75-.36c-1.632-.415-2.681-1.053-2.681-1.053s-.725-.456-.784-.487v8.789c0 .49-.134 1.711-.543 2.73-.533 1.334-1.356 2.21-1.508 2.388 0 0-1 1.183-2.767 1.98-1.592.719-2.99.7-3.407.719 0 0-2.417.095-4.59-1.318a9.125 9.125 0 0 1-1.312-1.053l.011.008c2.175 1.413 4.59 1.317 4.59 1.317.419-.018 1.817 0 3.408-.719 1.765-.797 2.767-1.98 2.767-1.98.15-.179.977-1.054 1.508-2.388.408-1.019.543-2.241.543-2.73v-8.788c.059.032.783.487.783.487s1.05.638 2.683 1.054c1.17.297 2.749.36 2.749.36V9.912c.54.121 1.001.154 1.3.124Z" fill="#EE1D52"/>
  <path d="M26.7 9.913v3.334s-1.579-.062-2.748-.36c-1.633-.415-2.683-1.053-2.683-1.053s-.725-.455-.783-.488v8.79c0 .49-.134 1.712-.543 2.731-.533 1.334-1.356 2.21-1.508 2.388 0 0-1.001 1.183-2.767 1.98-1.591.719-2.99.7-3.408.719 0 0-2.415.096-4.59-1.317l-.01-.008a8.326 8.326 0 0 1-.648-.703c-.694-.846-1.12-1.847-1.227-2.133v-.003c-.172-.496-.533-1.688-.484-2.842.088-2.036.804-3.285.993-3.599a8.553 8.553 0 0 1 1.928-2.257 8.13 8.13 0 0 1 2.291-1.3 7.97 7.97 0 0 1 2.844-.572v3.375s-1.788-.567-3.218.437c-1 .742-1.53 1.467-1.687 2.76-.007.953.237 2.3 1.573 3.199.156.099.31.186.46.263a3.5 3.5 0 0 0 .84.783c1.306.826 2.4.884 3.799.347.932-.359 1.635-1.167 1.96-2.063.205-.56.202-1.123.202-1.706V4.046h3.256c.134.765.506 1.854 1.49 2.933.396.407.84.767 1.325 1.072.144.149.876.881 1.816 1.331.487.233 1 .41 1.528.531Z" fill="#000"/>
  <path d="M4.49 22.757v.002l.08.22a5.667 5.667 0 0 1-.08-.222Z" fill="#69C9D0"/>
  <path d="M10.513 13.792a8.136 8.136 0 0 0-2.291 1.3 8.554 8.554 0 0 0-1.927 2.262c-.19.312-.906 1.563-.993 3.599-.05 1.154.312 2.345.484 2.841v.004c.108.283.532 1.284 1.226 2.132.202.246.418.481.647.703a8.9 8.9 0 0 1-1.947-1.75c-.688-.838-1.112-1.828-1.223-2.12a.05.05 0 0 1 0-.007v-.003c-.172-.496-.535-1.688-.484-2.843.087-2.036.803-3.286.993-3.6a8.542 8.542 0 0 1 1.927-2.261 8.118 8.118 0 0 1 2.291-1.3 8.108 8.108 0 0 1 1.616-.456 8.372 8.372 0 0 1 2.527-.035v.962a7.971 7.971 0 0 0-2.846.572Z" fill="#69C9D0"/>
  <path d="M20.544 4.046h-3.256v16.57c0 .582 0 1.144-.202 1.705-.328.896-1.028 1.704-1.96 2.063-1.4.539-2.493.48-3.798-.347a3.51 3.51 0 0 1-.844-.78c1.112.568 2.107.558 3.34.084.932-.359 1.632-1.168 1.96-2.064.205-.56.202-1.122.202-1.704V3h4.496s-.05.412.062 1.046ZM26.7 8.991v.922a7.29 7.29 0 0 1-1.524-.53c-.94-.45-1.673-1.183-1.817-1.332.167.105.34.2.517.285 1.143.547 2.27.71 2.824.655Z" fill="#69C9D0"/>
              <span class="icon-text">tiktok</span>
        <a class="icon-link" href="https://discord.gg/KgVGtvqJKB" title="discord">
          <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M13.93 11.4a1.23 1.23 0 1 1-1.225-1.331c.683.029 1.225.59 1.225 1.277l-.001.056v-.003zm-5.604-1.33a1.338 1.338 0 0 0-.005 2.664h.005a1.278 1.278 0 0 0 1.225-1.277l-.001-.056v.003l.002-.067c0-.685-.541-1.243-1.219-1.269h-.002zM21 2.472V24c-3.023-2.672-2.057-1.787-5.568-5.052l.636 2.22H2.459a2.467 2.467 0 0 1-2.46-2.466V2.466A2.466 2.466 0 0 1 2.458 0h16.081a2.467 2.467 0 0 1 2.46 2.466v.006zm-3.42 11.376a16.004 16.004 0 0 0-1.77-7.086l.042.09a5.885 5.885 0 0 0-3.358-1.259l-.014-.001-.168.192c1.15.312 2.15.837 3.002 1.535l-.014-.011a10.068 10.068 0 0 0-4.839-1.222c-1.493 0-2.911.321-4.189.898l.064-.026c-.444.204-.708.35-.708.35a8.036 8.036 0 0 1 3.1-1.56l.056-.012-.12-.144A5.912 5.912 0 0 0 5.28 6.861l.012-.009c-1.052 2.036-1.686 4.437-1.728 6.982v.014a4.352 4.352 0 0 0 3.666 1.824h-.006s.444-.54.804-.996a3.75 3.75 0 0 1-2.093-1.406l-.007-.01c.176.124.468.284.49.3a8.638 8.638 0 0 0 4.188 1.067 8.73 8.73 0 0 0 3.36-.668l-.058.021c.528-.202.982-.44 1.404-.723l-.025.016a3.8 3.8 0 0 1-2.144 1.423l-.026.005c.36.456.792.972.792.972l.111.001a4.378 4.378 0 0 0 3.552-1.813l.009-.013z"/>
          </svg>
          <span class="icon-text">discord</span>
      </div>
      <p class="intro">(wanna be) programmer, music artist, and youtuber!</p>
    </div>
  </body>
</html>