-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (101 loc) · 3.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="A guide to using the Raspberry pi">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The Pi Guide</title>
</head>
<body>
<header>
<img src="img/logo.svg" alt="logo" class="logo">
<img src="img/burger.svg" alt="burger" class="burger">
<nav>
<ul>
<li><a href="#home" class="link">Home</a></li>
<li><a href="#about" class="link">About the Pi</a></li>
<li><a href="#models" class="link">Models</a></li>
<li><a href="#setup" class="link">Setup</a></li>
<li><a href="#buying" class="link">Where to buy</a></li>
<li><img src="img/logo_black.svg" alt="logo black" id="logo-black"></li>
</ul>
</nav>
</header>
<div class="container">
<div id="home">
<h1 class="main-title"><span>So you want to learn more about the raspberry pi? Well you came to the right place. </span></h1>
<img src="img/pi.png" alt="pi" id="pi">
</div>
<div id="about">
<h1><span>About the Pi </span></h1><img src="img/pi_logo.png" alt="pi logo" id="pi-logo">
<p>Raspberry Pi is a series of small single-board computers developed in the United Kingdom by the Raspberry Pi Foundation to promote teaching of basic computer science in schools and in developing countries. According to the Raspberry Pi Foundation, more than 5 million Raspberry Pis were sold by February 2015, making it the best-selling British computer.</p>
</div>
<div id="models">
<h1><span>Models</span></h1>
<p class="description">Here are some of the most popular Raspberry Pi’s to get you started.</p>
<ul>
<li>
<p>
25$
Raspberry Pi Model A+
512MB RAM
ARMv8 1.4GHz CPU
</p>
<img src="img/pi_model_a.png" alt="pi model a">
</li>
<li>
<p>
35$
Raspberry Pi Model B+
1GB RAM
ARMv8 1.4GHz CPU
</p>
<img src="img/pi_model_b.png" alt="pi model b">
</li>
<li>
<p>
5$
Raspberry Pi Zero v1.3
512MB RAM
1GHz single-core CPU
</p>
<img src="img/pi_zero.png" alt="pi zero">
</li>
</ul>
</div>
<div id="setup">
<h1><span>Setup</span></h1>
<p>First you need to have a bootable SD card. You can buy one online, or make one yourself <a href="https://www.raspberrypi.org/documentation/installation/installing-images/" target="_blank">(read more)</a>. Then you put the card in your Pi, and boot it up. You should see an installation guide, asking you which linux distro you want to install. This totally depends on what you plan on using your Pi for. I’m currently rocking a Debian desktopless environment on my home server.</p>
<img src="img/setup.png" alt="setup">
</div>
<div id="buying">
<h1><span>Where to buy?</span></h1>
<p>You can visit Raspberry Pi’s own website, to find a reseller near you.</p>
<a href="https://www.raspberrypi.org/" target="_blank">Check it out</a>
</div>
</div>
<footer>
<p>This is not an official guide. For an official guide visit www.raspberrypi.org.</p>
</footer>
<!--Eventlistener for mobile-->
<script>
(function(){
var menu = document.querySelector("ul"),
menulink = document.querySelector(".burger"),
link = document.getElementsByClassName("link");
menulink.addEventListener("click", function(e){
menu.classList.toggle("active");
e.preventDefault();
});
for (var i = 0; i < link.length; i++) {
link[i].addEventListener("click", function(e){
menu.classList.toggle("active");
});
}
})();
</script>
</body>
</html>