e-tandem_UI/home.html
2024-11-27 16:57:43 +01:00

191 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>e-TANDEM - Index</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/main.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon.png">
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
</head>
<body>
<header class="top-bar fixed-top">
<div class="d-grid gap-3 align-items-center">
<nav class="navbar navbar-expand-lg bg-body-tertiary" aria-label="Main navigation">
<div class="container">
<a class="navbar-brand" href="home.html">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</a>
<button id="menu-toggle" class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-label="Toggle main menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
<div class="offcanvas-header">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
</ul>
<div class="d-flex align-items-center gap-2 ms-auto">
<div class="col">
<label for="lang">Choisir la langue</label>
<select id="lang" class="lang-select form-select form-select-sm" aria-label="Select language">
<option selected>Français</option>
<option>Deutsch</option>
<option>Italiano</option>
<option>Rumantsch</option>
<option>English</option>
</select>
</div>
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="hero hero-primary container-fluid">
<div class="d-flex">
<div class="row">
<div class="col-lg-4 bottom-anchored order-2 order-lg-1 ">
<img class="img-fluid" src="static/img/public-ban-home.png">
</div>
<div class="col-lg-4 order-1 order-lg-2">
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Lautre manière dapprofondir ses connaissances linguistiques</h1>
<p>La méthode TANDEM vous ouvre un nouvel horizon dapprentissage.<br> A linverse des cours de langues traditionnels, laccent est mis sur la communication orale.</p>
<p>Deux personnes de langues différentes forment un TANDEM et senseignent réciproquement leur langue. Les deux sont donc à la fois apprenant·e·s et enseignant·e·s.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<a href="connect.html"><button type="button" class="btn btn-primary btn-hero-primary btn-lg rounded px-4 me-md-2">Se connecter</button></a>
<a href="create-account.html"><button type="button" class="btn btn-outline-secondary btn-lg rounded px-4">Créer un compte</button></a>
</div>
</div>
</div>
</div>
</div>
<section id="tandem-explanations">
<header class="container mb-5">
<h1 class="display-4 fw-semibold mb-5 mb-lg-3">Le TANDEM linguistique</h1>
<p class="fs-4 fw-light lh-sm">Parle-moi dans ta langue et je t'enseignerai la mienne</p>
</header>
<div class="container">
<article>
<h1 class="display-6 fw-bold mb-3">Qui?</h1>
<p>Toute personne souhaitant améliorer ses connaissances linguistiques peut participer à un TANDEM linguistique. Les seuls critères sont:</p>
<ul>
<li>Maîtriser parfaitement la langue que vous proposez (min. C1)</li>
<li>Avoir des connaissances de base dans la langue recherchée (A1-A2)</li>
<li>La fiabilité, la motivation, l'ouverture d'esprit et le respect mutuel</li>
</ul>
</article>
<article>
<h1 class="display-6 fw-bold mb-3">Quand?</h1>
<p>Mettez-vous d'accord sur la fréquence de vos rencontres et la durée de votre TANDEM. Après une période d'au moins six mois, décidez ensemble si vous souhaitez continuer, suspendre ou arrêter l'apprentissage en binôme. Le Forum du bilinguisme vous conseille des rencontres d'une heure ou de 90 minutes tous les 15 jours au minimum, idéalement une fois par semaine.</p>
</article>
<article>
<h1 class="display-6 fw-bold mb-3">Où?</h1>
<p>Il existe une multitude d'endroits où vous pouvez vous rencontrer: dans un café, dans un parc, au bord du lac, à la caféteria de votre lieu de travail ou de formation, au restaurant durant votre pause de midi, en promenade, ... Varier le lieu de rencontre peut stimuler la conversation et vous permettre de partager vos passions et/ou loisirs avec votre partenaire TANDEM.</p>
</article>
<article>
<h1 class="display-6 fw-bold mb-3">Que faire pendant une rencontre?</h1>
<p>Pour commencer, apprenez à vous connaître. Parlez de votre famille, vos hobbies, votre travail, vos études... Vous pouvez ensuite échanger et discuter d'opinions et de points de vues (articles, films, reportages, etc.), avoir des discussions professionnelles (partage d'expériences, vocabulaire ciblé), faire des activités créatives (décrire des photos), apprendre des expressions sur la langue partenaire, faire des jeux de rôles, ...</p>
<a class="btn btn-cta rounded mt-2" href="https://www.bilinguisme.ch/TANDEMs-linguistiques/Activites-et-entrainement/Sites-Web-applications-et-livres" target="_blank" rel="noopener">Pour davantage d'idées</a>
</article>
<article id="tandem-method">
<div class="row">
<div class="col order-2 order-lg-1 bottom-anchored">
<img class="img-fluid" src="static/img/gfx2.png">
</div>
<div class="col-lg-6 order-1 order-lg-2 align-content-center">
<h1 class="display-6 fw-bold mb-3">Avec la méthode TANDEM<sup>&#x24C7;</sup></h1>
<ul>
<li>Vous pourrez pratiquer régulièrement la langue partenaire</li>
<li>Vous pourrez enrichir votre vocabulaire et développer un lexique</li>
<li>Vous pourrez surmonter vos blocages quant à la pratique orale d'une langue</li>
<li>Vous allez découvrir une autre culture</li>
</ul>
<a class="btn btn-cta rounded mt-2" href="create-account.html">Créer un compte</a>
</div>
</div>
</article>
</div>
</section>
<section id="partners">
<div class="container">
<h1 class="display-6 fw-bold mb-3">Partenaires TANDEM</h1>
<div class="partners-logo-grid">
<div class="partner-logo">
<img src="static/img/logo_partners/CH_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/BE_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/NE_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/SO_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Fribourg_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/JU_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Stadt-Biel_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Stadt-bern_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo/logo_e-tandem-Bilinguisme_FR.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Wohlen_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Murten_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Post_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Hopital-fribourg_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/insel-gruppe_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/SpitalZentrum_logo.svg">
</div>
<div class="partner-logo">
<img src="static/img/logo_partners/Hauptstadtregion_logo.svg">
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
</div>
</footer>
</body>
</html>