-
Notifications
You must be signed in to change notification settings - Fork 0
/
resources.html
95 lines (83 loc) · 5.79 KB
/
resources.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resources</title>
<link rel="stylesheet" href="resources.css">
</head>
<body onload="renderResources()">
<header>
<nav>
<div class="topnav">
<div class="nav-menu">
<img src="img/Duck.png" width="100" height="100" align="middle" />
<a href="index.html" style="text-align:right">HOME</a>
<a href=" resources.html"> RESOURCES</a>
</div>
</div>
</nav>
</header>
<main>
<h1 style="color:#075988; text-align: left;"> <b>Makerspace Lab Resources</b> </h1>
<section class="resources_section">
<div id="resourceContainer">
</div>
</section>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-0c641bd3-e390-4a4a-a4ef-aef1fee01fc5"></div>
</main>
<script>
function renderResources() {
fetch("./db/resources.json")
.then(response => {
return response.json();
})
.then(data => {
let resources = data.resources;
let resourceContainer = document.getElementById("resourceContainer");
for (let i = 0; i < resources.length; i++) {
resourceContainer.innerHTML += `
<div class="container">
<div class="flex-left">
<h3>` + resources[i].title + `</h3>
<img src="`+ resources[i].image + `" alt="picture">
</div>
<div class="flex-right">
<p class="right-desc">`+ resources[i].description + `</p>
<form action="https://forms.gle/YAFNM6VkJ1RztLpE6">
<button class="resource-signup-btn">Sign up</button>
</form>
<form action="https://drive.google.com/file/d/1FRGu3IZK1Vzd5dPeTjfgYOC0jcVOMaGq/view?usp=sharing">
<button class="resource-tutorial-btn"> Watch Tutorial</button>
</form>
</div>`
}
});
}
</script>
<div id="footer" class="flex-footer">
<div id="flex-footer-el-1">
<div class="logo" style="font-size:25px;"> <img src="img\Duck.png" width="100" height="100" align="middle" /> <b>BEREA COLLEGE MAKERSPACE </b></div>
<div class="home"><a href="index.html" style="text-align: right; color: white; padding: 109px">HOME</a> </div>
<div class="resources13"> <a href="resources.html" style="text-align:right; color:white; padding:109px"> RESOURCES</a></div>
<div style="display:flex;flex-wrap:wrap; padding-left:130px">
<a href="https://www.instagram.com/bcmakerspace/?hl=en" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:70px;height:36px;padding:2px;margin:5px;color:deepskyblue;border-radius:50%;background-color:#0d2744;">
<svg class="niftybutton-instagram" style="display:block;fill:currentColor" data-tag="ins" data-name="Instagram" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
<path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
<path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
<circle cx="351.5" cy="160.5" r="21.5"></circle>
</svg>
</a>
</div>
</div>
<div id="flex-footer-el-2">
<p style="font-size:25px"><b>CONTACT US</b></p>
<p><img src="img/email.png" width="25" height="25" class="center"/> <a href="mailto:[email protected]"> Email us</a></p>
<div ><img src="img/add.png" width="25" height="25" class="center"/> Berea College</div>
<p>Danforth Technology Building</p>
<p>126 N. Main St</p>
<p>Berea, KY 40404</p>
</div>
</div>
</body>
</html>