makefest-website/index.html at main · usirg/makefest-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
<!doctype html>
<html class="dark">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://rsms.me/inter/inter.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js" async></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <!-- ... -->
</head>

<body class="dark:bg-black font-sans">

  <div class="max-w-screen-xl mx-auto p-0 space-y-0">
    <!-- header -->
    <div class="z-50 bg-gray-900 p-2 pb-1 sm:h-auto sticky top-0 ">

      <!-- title -->
      <div class="-space-y-0 sm:-space-y-1">

        <div
          class="leading-none text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl word-spacing-sm tracking-tightest font-black">
          <span class="text-red-800">Make</span>
          <span class="text-red-600">Fest</span>
        </div>

        <div class="leading-none text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-black text-gray-600">
          game dev and other fun stuff
        </div>

      </div>

      <!-- info button -->
      <a href="info.html" class="m-2 w-12 h-12 absolute top-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg"
          class="top-0 right-0 absolute h-8 sm:h-9 md:h-10 lg:h-11 xl:h-12 w-8 sm:w-9 md:w-10 lg:w-11 xl:w-12 stroke-0 stroke-current text-gray-600 hover:text-gray-200"
          viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
            clip-rule="evenodd" />
        </svg>
      </a>

      <!-- past, present, future -->
      <div
        class="h-12 items-center text-base sm:text-lg md:text-xl lg:text-2xl flex justify-between m-auto text-center px-0 my-0 sm:max-w-screen-sm font-bold text-gray-700">
        <a class="active:bg-blue-500 active:text-gray-100 text-gray-200 bg-blue-500 hover:bg-gray-400 px-6 py-0 border border-transparent rounded-full focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"
          href="./index.html">past</a>
        <a class="active:bg-blue-500 active:text-gray-100 bg-gray-500 hover:bg-gray-400 px-6 py-0 border border-transparent rounded-full focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"
          href="./index-present.html">present</a>
        <a class="active:bg-blue-500 active:text-gray-100 bg-gray-500 hover:bg-gray-400 px-6 py-0 border border-transparent rounded-full focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"
          href="./index-future.html">future</a>
      </div>
    </div>

    <!-- cards     -->
    <div class="bg-black flex flex-wrap justify-around">

        <a href="mfs/mf1.html" class="sm:max-w-screen-sm py-2 sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="images/play_640x360.jpg" alt="Tin Can Alley">
          <div class="rounded-2xl rounded-t-none h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 1</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Oct 2020</div>
              <div class="px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base truncate">Workshop Spieleentwicklung</div>
          </div>
        </a>
        <a href="mfs/mf2.html" class="sm:max-w-screen-sm py-2 sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="images/race_640x360.jpg" alt="Tin Can Alley">
          <div class="rounded-2xl rounded-t-none h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 2</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Nov 2020 - Feb 2021</div>
              <div class="px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base truncate">Starterkurs Spieleentwicklung</div>
          </div>
        </a>
        <a href="mfs/mf3.html" class="sm:max-w-screen-sm py-2 sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="images/trebuchet_640x360.jpg" alt="Tin Can Alley">
          <div class="rounded-2xl rounded-t-none h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 3</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Feb 2021</div>
              <div class="px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base">Aufbaukurs Spieleentwicklung</div>
          </div>
        </a>
        <a href="mfs/mf4.html" class="sm:max-w-screen-sm py-2 w-full sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="https://res.cloudinary.com/simhub/video/upload/v1628250701/gdc4_pozufu.jpg" alt="GDC4">
          <div class="rounded-2xl h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 4</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Mar-Jun 2021</div>
              <div class="w-full px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base truncate">Aufbaukurs Spieleentwicklung</div>
          </div>
        </a>
        <a href="mfs/mf5.html" class="sm:max-w-screen-sm py-2 w-full sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="https://res.cloudinary.com/simhub/video/upload/v1628257333/gdc5_eopnq7.jpg" alt="GDC5">
          <div class="rounded-2xl h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 5</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Mar-Jun 2021 </div>
              <div class="px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base truncate">Starterkurs Spieleentwicklung</div>
          </div>
        </a>
        <a href="mfs/mf6.html" class="sm:max-w-screen-sm py-2 w-full sm:w-[49%] lg:w-[32%]">
          <img class="rounded-2xl rounded-b-none" src="https://res.cloudinary.com/simhub/video/upload/v1628278662/coding_jvxlva.jpg" alt="GDC5">
          <div class="rounded-2xl h-20 bg-gray-800 relative">
              <div class="px-4 py-2 absolute top-0 left-0 text-gray-400 font-black text-2xl">MF 6</div>
              <div class="px-4 py-2 absolute top-0 right-0 text-gray-600 font-black text-xl">Jul 2021 </div>
              <div class="px-4 py-2 absolute bottom-0 left-0 text-gray-300 font-black text-base truncate">Crashkurs Spieleentwicklung</div>
          </div>
        </a>
    </div>

  </div>

</body>

</html>