footer svg links

Author: DannyDevSe

index.html

@@ -84,28 +84,151 @@
 		</header>
 		<main class="has-text-centered">
 			<h1>Hello World!</h1>
-			<button class="button">Button</button>
-			<a href="https://x.com/FourGamesAB">X/Twitter</a>
-			<a href="https://www.tiktok.com/@fourgamesab">TikTok</a>
-			<a href="https://bsky.app/profile/fourgamesab.bsky.social">Bluesky</a>
-			<a href="https://www.instagram.com/fourgamesab/">Instagram</a>
-			<a href="https://www.linkedin.com/in/four-games-ab-undefined-34bb003b9/">LinkedIn</a>
-			<a href="https://store.steampowered.com/publisher/fourgamesab">Steam</a>
-			<a href="https://discord.com/invite/bQTPTc5Qrt">Discord</a>
-			<a href="https://www.youtube.com/@FourGamesAB/join">YouTube</a>
-			<a href="https://github.com/fourgames">GitHub</a>
-			<a href="https://www.reddit.com/user/FourGamesAB/">Reddit</a>
-			<a href="https://mastodon.gamedev.place/@fourgamesab">Mastodon</a>
-			<a href="https://fourgames.se/">Four Games</a>
-			<a href="https://www.twitch.tv/fourgamesab">Twitch</a>
 		</main>
 		<footer>
 			<footer class="footer">
 				<div class="content has-text-centered">
 					<p>
-						<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is
+						© <span id="year"></span> Four Games and contributors. Hosted by Four Games.
+						<a href="https://github.com/fourgames/website">Website source code on GitHub</a> .
+					</p>
+					<div class="buttons is-centered mt-5">
+						<a
+							href="https://www.youtube.com/@FourGamesAB"
+							class="button is-light is-rounded"
+							title="YouTube"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/youtube-brands-solid-full.svg" alt="YouTube" />
+							</span>
+						</a>
+
+						<a
+							href="https://discord.com/invite/bQTPTc5Qrt"
+							class="button is-light is-rounded"
+							title="Discord"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/discord-brands-solid-full.svg" alt="Discord" />
+							</span>
+						</a>
+
+						<a
+							href="https://bsky.app/profile/fourgamesab.bsky.social"
+							class="button is-light is-rounded"
+							title="Bluesky"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/bluesky-brands-solid-full.svg" alt="Bluesky" />
+							</span>
+						</a>
+
+						<a
+							href="https://github.com/fourgames"
+							class="button is-light is-rounded"
+							title="GitHub"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/github-brands-solid-full.svg" alt="GitHub" />
+							</span>
+						</a>
+
+						<a
+							href="https://mastodon.gamedev.place/@fourgamesab"
+							class="button is-light is-rounded"
+							title="Mastodon"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/mastodon-brands-solid-full.svg" alt="Mastodon" />
+							</span>
+						</a>
+
+						<a
+							href="https://store.steampowered.com/publisher/fourgamesab"
+							class="button is-light is-rounded"
+							title="Steam"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/steam-brands-solid-full.svg" alt="Steam" />
+							</span>
+						</a>
+
+						<a
+							href="https://www.twitch.tv/fourgamesab"
+							class="button is-light is-rounded"
+							title="Twitch"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/twitch-brands-solid-full.svg" alt="Twitch" />
+							</span>
+						</a>
+
+						<a
+							href="https://x.com/FourGamesAB"
+							class="button is-light is-rounded"
+							title="X (Twitter)"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/x-twitter-brands-solid-full.svg" alt="X" />
+							</span>
+						</a>
+
+						<a
+							href="https://www.tiktok.com/@fourgamesab"
+							class="button is-light is-rounded"
+							title="TikTok"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/tiktok-brands-solid-full.svg" alt="TikTok" />
+							</span>
+						</a>
+
+						<a
+							href="https://www.reddit.com/user/FourGamesAB/"
+							class="button is-light is-rounded"
+							title="Reddit"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/reddit-brands-solid-full.svg" alt="Reddit" />
+							</span>
+						</a>
+
+						<a
+							href="https://www.linkedin.com/in/four-games-ab-undefined-34bb003b9/"
+							class="button is-light is-rounded"
+							title="LinkedIn"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/linkedin-brands-solid-full.svg" alt="LinkedIn" />
+							</span>
+						</a>
+
+						<a
+							href="https://www.instagram.com/fourgamesab/"
+							class="button is-light is-rounded"
+							title="Instagram"
+							target="_blank"
+						>
+							<span class="icon">
+								<img src="src/assets/instagram-brands-solid-full.svg" alt="Instagram" />
+							</span>
+						</a>
+					</div>
+					<p>
+						<!-- <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is
 						licensed <a href="https://opensource.org/license/mit">MIT</a>. The website content is licensed
-						<a href="https://creativecommons.org/licenses/by-nc-sa/4.0//">CC BY NC SA 4.0</a>.
+						<a href="https://creativecommons.org/licenses/by-nc-sa/4.0//">CC BY NC SA 4.0</a>. -->
 					</p>
 				</div>
 			</footer>