-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (110 loc) · 5.27 KB
/
index.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
128
129
130
131
<!-- Copyright © 2024 Matteo Collica (Matypist) -->
<!-- https://github.com/sapienzastudentsnetwork/hub -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta name="theme-color" content="blue">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Sapienza Students Network</title>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark" style="background-color: #112039">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto" style="width: auto;">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link disabled" style="color: lightgray;"><b>Homepage</b></a>
</li>
<li class="nav-item active">
<a class="nav-link disabled"><b>|</b></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../">Informatica</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<!-- Canale Telegram -->
<a class="row translate-below white-color" href="https://telegram.me/SapienzaStudentsNetwork">
<div class="bold-text">
<span class="fs-3">CANALE TELEGRAM</span><br>
<span class="fs-4">Segui il canale Telegram</span>
</div>
<i class="bi bi-telegram"></i>
</a>
<!-- Gruppi, Immagine e Server Discord -->
<div id="middlerow" class="row align-items-center">
<!-- Gruppi -->
<a id="groups" class="d-flex white-color translate-right" href="https://telegram.me/SapienzaStudentsBot">
<div id="groups_text" class="bold-text groups-justify-content">
<span class="fs-3">GRUPPI</span><br>
<span class="fs-4">Esplora i gruppi Telegram</span>
</div>
<div id="groups_icon" class="d-flex groups-justify-content">
<i class="bi bi-people"></i>
</div>
</a>
<!-- Immagine -->
<div id="image" class="d-flex justify-content-center">
<img src="SSN_logo.png" alt="Immagine" class="img-fluid">
</div>
<!-- Server Discord -->
<a id="discord" class="d-flex white-color translate-left" href="https://discord.sapienzastudents.net">
<div id="discord_icon" class="d-flex discord-justify-content">
<i class="bi bi-discord"></i>
</div>
<div id="discord_text" class="bold-text discord-justify-content">
<span class="fs-3">DISCORD</span><br>
<span class="fs-4">Unisciti al server Discord</span>
</div>
</a>
</div>
<!-- Organizzazione GitHub -->
<a class="row white-color translate-above" href="https://github.com/SapienzaStudentsNetwork">
<i class="bi bi-github"></i>
<div class="bold-text">
<span class="fs-3">ORGANIZZAZIONE GITHUB</span><br>
<span class="fs-4">Visita le nostre repository</span>
</div>
</a>
</div>
</body>
<script>
function checkViewportSize() {
const viewportWidth = window.innerWidth;
const elementIds = ["groups", "image", "discord"];
const middlerowelement = document.getElementById("middlerow");
if (viewportWidth < 769) {
elementIds.forEach((elementId) => {
const element = document.getElementById(elementId);
if (element) {
element.classList.add("row");
element.classList.remove("col");
}
});
middlerowelement.classList.remove("row");
} else {
elementIds.forEach((elementId) => {
const element = document.getElementById(elementId);
if (element) {
element.classList.remove("row");
element.classList.add("col");
}
});
middlerowelement.classList.add("row");
}
}
window.addEventListener("load", checkViewportSize);
window.addEventListener("resize", checkViewportSize);
</script>
</html>