-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (149 loc) · 7.65 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/assets/svg/code-slash.svg" type="image/x-icon">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/pages/home/home.css">
<title>Développement web</title>
</head>
<body>
<div id="app">
<header>
<div class="h-skew-back"></div>
<div class="topbar">
<a href="#" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-code-slash"
viewBox="0 0 16 16">
<path
d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0" />
</svg>
</a>
<nav id="navigation">
<ul>
<li><a href="#" class="nav-link">Accueil</a></li>
<li><a href="/pages/html.html" class="nav-link">HTML</a></li>
<li><a href="/pages/css.html" class="nav-link">CSS</a></li>
<li><a href="/pages/js.html" class="nav-link">JavaScript</a></li>
<li><a href="/pages/other.html" class="nav-link">Autre</a></li>
</ul>
</nav>
<button id="menuButton">
<span>
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e8eaed">
<path d="m287-446.67 240 240L480-160 160-480l320-320 47 46.67-240 240h513v66.66H287Z" />
</svg>
</span>
</button>
</div>
</header>
<main>
<div class="title">
<h1>Les bases du
<ul class="animate-title">
<li class="main">Developpement web</li>
<li class="main">HTML</li>
<li class="main">CSS</li>
<li class="main">JavaScript</li>
</ul>
</h1>
<p>Un site pour répertorier les bases à connaitre pour commencer a créer des applications web.</p>
<a href="#" class="start">Commence maintenant !</a>
</div>
<div class="content">
<section>
<aside>
<img src="./assets/images/mamie.jpg" alt="grand mere devant un ordinateur" draggable="false">
</aside>
<article>
<h2>Réalisable par <strong class="second">tout le monde</strong> !</h2>
<p>
Oui c'est à la porté de n'importe quelle personne <strong class="main">motivé</strong> qui s'en
donne les moyens !
</p>
</article>
</section>
<section>
<article>
<h2>Le <strong class="second">cursus</strong> à suivre</h2>
<p>
Le monde du developpement web et si vaste qu'il est au début très complexe de savoir par où
commencer.
Ce site à pour but de guider pas à pas <strong class="main">les bases nécessaires pour
débuter</strong>,
mais aussi partager du contenue permettant d'approfondirs les notions cités.
</p>
</article>
<aside>
<img src="./assets/images/languages.jpeg" alt="liste de languages de programmation pour le web"
draggable="false">
</aside>
</section>
<section>
<aside>
<img src="./assets/images/escargot.jpeg" alt="escargot sur un skate" draggable="false">
</aside>
<article>
<h2>Peut importe ton <strong class="second">rythme</strong> !</h2>
<p>
Chaque personne est unique, et apprend <strong class="main">à sa façon</strong> et <strong class="main">à
la
vitesse</strong> qu'il souhaite.
</p>
</article>
</section>
</div>
</main>
<footer>
<div class="f-skew-back"></div>
<div class="f-top">
<div>
<h2>Legal:</h2>
<p>Ce site ne contient aucune mention legal,<br>par contre je siphonne toutes vos données !</p>
</div>
<div class="socials">
<h2>Réseaux:</h2>
<ul>
<li>
<div>
<a href="https://github.com">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
class="bi bi-github" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
</svg>
</a>
</div>
</li>
<li>
<div>
<a href="https://linkedin.com">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
class="bi bi-discord" viewBox="0 0 16 16">
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
<p>Copyright © Kevin Stefanelli - Tout droit réservé</p>
</footer>
</div>
<script src="/src/main.js"></script>
</body>
</html>