-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlms.html
222 lines (198 loc) · 7.3 KB
/
lms.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>LMS VTS Offerings - Skunkworks</title>
<link href="./css/styles.css" rel="stylesheet">
<style>
body {
font-family: 'IBM Plex Sans', Arial, sans-serif;
background-color: #121212;
color: #ffffff;
margin: 0;
padding: 0;
}
header {
background-color: #161616;
padding: 16px 32px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #262626;
}
header h1 {
color: #ffffff;
font-size: 2.5rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.section {
padding: 40px 20px;
text-align: center;
}
h2 {
color: #cccccc;
font-size: 2rem;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: #1c1c1c;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
.card h3 {
font-size: 1.5rem;
color: #0f62fe;
margin-bottom: 10px;
}
.card p {
color: #cccccc;
font-size: 1rem;
margin-bottom: 10px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
footer {
background-color: #161616;
color: #ffffff;
text-align: center;
padding: 20px 0;
border-top: 1px solid #262626;
}
footer p {
margin: 5px 0;
}
footer a {
color: #0f62fe;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>LMS VTS Offerings</h1>
</header>
<section class="section" id="lms-options">
<h2>Our LMS VTS Offerings</h2>
<div class="grid-container">
<div class="card" data-image-key="Moodle">
<h3>Moodle</h3>
<p>Get Moodle hosting, LMS integration, and more.</p>
</div>
<div class="card" data-image-key="OpenEdx">
<h3>OpenEdx</h3>
<p>Discover the flexibility of OpenEdx for your online courses.</p>
</div>
<div class="card" data-image-key="GitHub">
<h3>GitHub Classroom</h3>
<p>Leverage GitHub for education with GitHub Classroom.</p>
</div>
<div class="card" data-image-key="Google_Classroom">
<h3>Google Classroom</h3>
<p>Streamline learning and collaboration with Google Classroom.</p>
</div>
</div>
</section>
<section class="section" id="lms-support">
<h2>Support Services</h2>
<div class="grid-container">
<div class="card" data-image-key="Cloud_hosting">
<h3>Hosting</h3>
<p>Get secure and scalable hosting solutions, installation, configuration, backups, and more.</p>
</div>
<div class="card" data-image-key="System_integration">
<h3>Integration</h3>
<p>Connect all your applications for a full view of your customers.</p>
</div>
<div class="card" data-image-key="Custom_software">
<h3>Custom Themes & Features</h3>
<p>Get a custom solution with a range of themes and features to choose from.</p>
</div>
<div class="card" data-image-key="Technical_support">
<h3>Implementation and Support</h3>
<p>Get full support for the implementation of secure on-site or hosted solutions.</p>
</div>
<div class="card" data-image-key="Consultant">
<h3>Consulting</h3>
<p>Get expert advice on Moodle-based online learning solutions.</p>
</div>
<div class="card" data-image-key="Data_analysis">
<h3>Reporting and Analytics</h3>
<p>Get a deeper understanding of Moodle’s reporting capabilities and how to leverage insights.</p>
</div>
<div class="card" data-image-key="Instructional_design">
<h3>Course Design</h3>
<p>Get assistance in creating high quality, engaging learning content.</p>
</div>
<div class="card" data-image-key="Training">
<h3>Training</h3>
<p>Onboard staff with training designed around the unique needs of administrators, course creators, educators, L&D professionals, and teachers.</p>
</div>
</div>
</section>
<footer>
<p>© 2024 Skunkworks. All rights reserved.</p>
<p><a href="https://blog.skunkworks.africa/" target="_blank">Visit our blog</a></p>
</footer>
<script>
// Function to fetch images from Wikimedia Commons
function fetchImage(imageKey, callback) {
var apiUrl = `https://en.wikipedia.org/w/api.php?action=query&titles=File:${imageKey}.jpg&prop=imageinfo&iiprop=url&format=json&origin=*`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
var pages = data.query.pages;
var page = Object.values(pages)[0];
if (page.imageinfo) {
callback(page.imageinfo[0].url);
} else {
console.error('Image not found on Wikimedia Commons');
callback(null);
}
})
.catch(error => {
console.error('Error fetching image:', error);
callback(null);
});
}
document.addEventListener('DOMContentLoaded', function () {
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
var imageKey = card.getAttribute('data-image-key');
fetchImage(imageKey, function (imageUrl) {
if (imageUrl) {
var imgElement = document.createElement('img');
imgElement.src = imageUrl;
imgElement.alt = imageKey;
card.insertBefore(imgElement, card.firstChild);
} else {
card.style.display = 'none'; // Hide the card if the image is not found
}
});
});
});
</script>
</body>
</html>