-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (152 loc) · 8.76 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bienvenue | Français avec Yash</title>
<meta name="description" content="French Language Site Made by Yash">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Custom JS -->
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://ysboomofficial.github.io/Yash-Website-SML5202/">
<div class="site-logo"></div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div id="mynavbar" class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Bienvenue</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.html">Greetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.html">Numbers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page4.html">Grammar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page5.html">Resources</a>
</li>
</ul>
</div>
</nav>
<div id="jumbotron" class="mt-5 p-5 bg-primary">
<h1>Bienvenue !</h1>
<p>Welcome to Français avec Yash. So I heard you wanna start learning French? 🤔<br>Well, you came to
the right place! Lets get started! C'est parti !</p>
</div>
<div class="container-fluid">
<!-- Info about French + Rand word gen -->
<h4 style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">Before we dive in, take a look at
the information below</h4>
<div class="row" style="margin-bottom: 0.5em;">
<div class="col-sm-4">
<ul class="list-group">
<li style="text-align: center;" class="list-group-item list-group-item-primary">
3 reasons why you should learn
French
</li>
<li class="list-group-item">
French is the <a
href="https://en.wikipedia.org/wiki/List_of_languages_by_total_number_of_speakers">7th
most spoken language by population</a> with more than 250 million people speak
French around the world
</li>
<li class="list-group-item">
A good knowledge of both French and English makes you a more well rounded candidate for
job applications and it allows you to apply for jobs in both France and French-speaking
countries
</li>
<li class="list-group-item">
Learning a language can be fun and a great hobby
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-group">
<li style="text-align: center;" class="list-group-item list-group-item-primary">
Who is this site for and how
can you get the most out of it?
</li>
<li class="list-group-item">
This site is aimed at complete beginners to the french language
</li>
<li class="list-group-item">
But it may also be good for learners who want to refresh their knowledge of the
fundamentals
</li>
</ul>
</div>
<div class="col-sm-4">
<div class="rand-word-container">
<h5 style="text-align: center;">Generate a random French word!</h5>
<div class="rand-words" style="font-size: 1rem;">
<p id="rand-fr-word">apprendre</p>
<p id="rand-en-word">learn</p>
</div>
<button onclick="getRandomWord()" id="rand-word-btn">Generate</button>
</div>
</div>
</div>
<br>
<!-- Images about france -->
<h4 style="text-align: center; margin-bottom: 0.5em;">Here are a few images linked to France, can you tell
what they are of?</h4>
<p style="text-align: center;"><strong><em>Psst: Hover over the images if you don't know what they
are</em></strong></p>
<br>
<div class="row" style="margin-bottom: 0.5em;">
<div class="col-sm-4" style="align-self: center;">
<div class="img-cards">
<abbr title="A Flag of France">
<a
href="https://commons.wikimedia.org/wiki/File:Flag_of_France_(1958%E2%80%931976,_2020-).svg"><img
src="images/french-flag.svg" alt="Flag of France" style="width:100%;"></a></abbr>
</div>
</div>
<div class="col-sm-4" style="align-self: center;">
<div class="img-cards">
<abbr title="A Map of France">
<a href="https://commons.wikimedia.org/wiki/File:Pr%C3%A9fectures_de_France_2016.svg"><img
src="images/french-map.svg" alt="Map of France" style="width:100%;"></a>
</abbr>
</div>
</div>
<div class="col-sm-4" style="align-self: center;">
<div class="img-cards">
<abbr title="A French Croissant and Baguette">
<a
href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/62c8b828-bd69-4067-8265-1697c8b3a50d/d4i4xnk-c8fb535a-9d0b-4cb7-adb9-591ab274f6b2.jpg/v1/fill/w_900,h_888,q_75,strp/baguette__croissant_et_chocolat_s__il_vous_plait__by_joseluisrg-d4i4xnk.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi82MmM4YjgyOC1iZDY5LTQwNjctODI2NS0xNjk3YzhiM2E1MGQvZDRpNHhuay1jOGZiNTM1YS05ZDBiLTRjYjctYWRiOS01OTFhYjI3NGY2YjIuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9ODg4In1dXX0.Qv1Fgl-lRV06Q5Q6CAtJd4nKKkZdRuv8Hr4SEXy3HfQ"><img
src="images/french-food.jpg" alt="French Food" style="width:100%;"></a>
</abbr>
</div>
</div>
</div>
<br>
<h6 style="text-align: center; margin-bottom: 0.5em;">Ready to move on? Great! Now lets cover some <a
class="bottom-link" href="page2.html">greetings</a> shall we?</h6>
</div>
<footer>
<p><a href="https://ysboomofficial.github.io/Yash-Website-SML5202/">Yash-Website-SML5202
</a> is maintained by <a href="https://github.com/YSBoomOfficial">Yash</a>.</p>
<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</p>
<p>Student Number: 190349635</p>
</footer>
</body>
</html>