-
Notifications
You must be signed in to change notification settings - Fork 1
/
mikebrg.html
127 lines (112 loc) · 8.1 KB
/
mikebrg.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Michael Borg | TwidGrid</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Squada+One|Source+Code+Pro|Merriweather:300|Abril+Fatface" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="inc/standard.css">
<link rel="icon" type="image/x-icon" href="img/favicon.png">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.head
{
position: relative;
background-size: cover;
background-image: url('img/surface.jpg');
background-position: center;
min-height: 400px;
}
.responsive-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
list-style-type: none;
margin: 0;
}
.table-cell {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
}
.table-cell img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.table-cell h3 {
margin: 12px 0 8px;
font-size: 1.2em;
color: #333;
}
.table-cell p {
margin: 0;
font-size: 0.9em;
color: #666;
}
</style>
</head><body>
<div class="cont">
<div id="head"><div class="block"><a href="index.html" class="not"><div class="ban">TwidGrid - Michael Borg</div></a></div></div>
<div class="block-978" style="padding-bottom: 39px; padding-top: 39px;">
<p><p>
<ul class="responsive-table">
<li class="table-cell"><a href=" http://www.google.com/ "target="_blank"><img src="img/ google-3-375x375.png " alt=" Google "></a><h3> Google </h3> </li>
<li class="table-cell"><a href=" https://www.youtube.com/ "target="_blank"><img src="img/ youtube-1-375x375.jpg " alt=" YouTube "></a><h3> YouTube </h3> </li>
<li class="table-cell"><a href=" https://www.facebook.com/ "target="_blank"><img src="img/ facebook-2-375x375.png " alt=" Facebook "></a><h3> Facebook </h3> </li>
<li class="table-cell"><a href=" http://instagram.com/ "target="_blank"><img src="img/ instagram-1-375x375.jpg " alt=" Instagram "></a><h3> Instagram </h3> </li>
<li class="table-cell"><a href=" https://www.wikipedia.com/ "target="_blank"><img src="img/ wikipedia-2-375x375.jpg " alt=" Wikipedia "></a><h3> Wikipedia </h3> </li>
<li class="table-cell"><a href=" https://chatgpt.com/ "target="_blank"><img src="img/ openai-375x375.jpg " alt=" ChatGPT "></a><h3> ChatGPT </h3> </li>
<li class="table-cell"><a href=" https://www.billboard.com/charts/hot-100 "target="_blank"><img src="img/ billboard-500x500.png " alt=" Billboard Hot 100 "></a><h3> Billboard Hot 100 </h3> </li>
<li class="table-cell"><a href=" https://genius.com/ "target="_blank"><img src="img/ genius-1-376x376.png " alt=" Genius "></a><h3> Genius </h3> </li>
<li class="table-cell"><a href=" https://www.spotify.com/ "target="_blank"><img src="img/ spotify-logo-600x600.png " alt=" Spotify "></a><h3> Spotify </h3> </li>
<li class="table-cell"><a href=" https://www.imdb.com/ "target="_blank"><img src="img/ imdb-1-375x375.jpg " alt=" IMDb "></a><h3> IMDb </h3> </li>
<li class="table-cell"><a href=" https://trakt.tv/ "target="_blank"><img src="img/ trakt-logo-375x375.jpg " alt=" Trakt "></a><h3> Trakt </h3> </li>
<li class="table-cell"><a href=" https://netflix.com/ "target="_blank"><img src="img/ netflix-2-375x375.png " alt=" Netflix "></a><h3> Netflix </h3> </li>
<li class="table-cell"><a href=" https://www.plex.tv/ "target="_blank"><img src="img/ plex-375x375.png " alt=" Plex "></a><h3> Plex </h3> </li>
<li class="table-cell"><a href=" https://github.com/ "target="_blank"><img src="img/ github-392x392.jpg " alt=" Github "></a><h3> Github </h3> </li>
<li class="table-cell"><a href=" https://www.messenger.com/ "target="_blank"><img src="img/ messenger-2-375x375.png " alt=" Messenger "></a><h3> Messenger </h3> </li>
<li class="table-cell"><a href=" https://web.whatsapp.com/ "target="_blank"><img src="img/ whatsapp-1-375x375.png " alt=" WhatsApp "></a><h3> WhatsApp </h3> </li>
<li class="table-cell"><a href=" https://onedrive.live.com/ "target="_blank"><img src="img/ onedrive-320x320.png " alt=" OneDrive "></a><h3> OneDrive </h3> </li>
<li class="table-cell"><a href=" https://outlook.com/ "target="_blank"><img src="img/ outlook-1-320x320.png " alt=" Outlook "></a><h3> Outlook </h3> </li>
<li class="table-cell"><a href=" https://www.gmail.com/ "target="_blank"><img src="img/ gmail-2-375x375.png " alt=" Gmail "></a><h3> Gmail </h3> </li>
<li class="table-cell"><a href=" https://www.icloud.com/ "target="_blank"><img src="img/ icloud-375x375.png " alt=" iCloud "></a><h3> iCloud </h3> </li>
<li class="table-cell"><a href=" https://www.flaticon.com/ "target="_blank"><img src="img/ flaticon-375x375.png " alt=" Flaticons "></a><h3> Flaticons </h3> </li>
<li class="table-cell"><a href=" https://www.freepik.com/ "target="_blank"><img src="img/ freepik-1-375x375.jpg " alt=" Freepik "></a><h3> Freepik </h3> </li>
<li class="table-cell"><a href=" https://www.awardspace.com/ "target="_blank"><img src="img/ awardspace-383x383.png " alt=" AwardSpace "></a><h3> AwardSpace </h3> </li>
<li class="table-cell"><a href=" https://www.speedtest.net/ "target="_blank"><img src="img/ speed-375x375.png " alt=" Speedtest "></a><h3> Speedtest </h3> </li>
<li class="table-cell"><a href=" https://www.go.com.mt/ "target="_blank"><img src="img/ go-375x375.png " alt=" GO "></a><h3> GO </h3> </li>
<li class="table-cell"><a href=" https://www.scanmalta.com/ "target="_blank"><img src="img/ scan-350x350.png " alt=" Scan "></a><h3> Scan </h3> </li>
<li class="table-cell"><a href=" https://timesofmalta.com/ "target="_blank"><img src="img/ timesofmalta-350x350.png " alt=" Times of Malta "></a><h3> Times of Malta </h3> </li>
<li class="table-cell"><a href=" https://www.apsbank.com.mt/ "target="_blank"><img src="img/ aps-375x375.jpg " alt=" APS Bank "></a><h3> APS Bank </h3> </li>
<li class="table-cell"><a href=" https://www.bov.com/ "target="_blank"><img src="img/ bov-375x375.jpg " alt=" Bank of Valletta "></a><h3> Bank of Valletta </h3> </li>
<li class="table-cell"><a href=" https://www.bnf.bank/ "target="_blank"><img src="img/ bnf-300x300.png " alt=" BNF Bank "></a><h3> BNF Bank </h3> </li>
<li class="table-cell"><a href=" https://www.forgeofempires.com/ "target="_blank"><img src="img/ foe-375x375.png " alt=" Forge of Empires "></a><h3> Forge of Empires </h3> </li>
<li class="table-cell"><a href=" https://un-play.heroesofhistorygame.com/ "target="_blank"><img src="img/ heroes-of-history-innogames-logo-black-375x375.png " alt=" Heroes of history "></a><h3> Heroes of history </h3> </li>
<li class="table-cell"><a href=" https://eu-game.riseofcultures.com/ "target="_blank"><img src="img/ riseofcultures-375x375.png " alt=" Rise of Cultures "></a><h3> Rise of Cultures </h3> </li>
<li class="table-cell"><a href=" https://eu-game.sunrisevillagegame.com/ "target="_blank"><img src="img/ sunrise-375x375.png " alt=" Sunrise Village "></a><h3> Sunrise Village </h3> </li>
</ul>
</div></div>
<footer class="foot">
<div class="block fo-1">
TwidGrid is a small web development studio based in Central Malta.
<p>© <span id="current-year"></span> TwidGrid. Est Malta.</p>
</div>
</footer>
<script>
// JavaScript to update the year dynamically
document.getElementById("current-year").textContent = new Date().getFullYear();
</script>
</body>
</html>