updates
This commit is contained in:
parent
46aa198fad
commit
e44c65cbce
9 changed files with 602 additions and 381 deletions
24
404.html
24
404.html
|
|
@ -11,7 +11,7 @@
|
|||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body data-platform="public">
|
||||
<body data-platform="public" data-screen="404">
|
||||
<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">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container" data-screen="404">
|
||||
<main class="container">
|
||||
<div class="wrapper container">
|
||||
<div class="text-center">
|
||||
<h1 class="display-1 fw-bold">404</h1>
|
||||
|
|
@ -58,9 +58,25 @@
|
|||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container-fluid">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
|
||||
<div class="col mb-3">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Forum du bilinguisme</h5>
|
||||
<p>
|
||||
Place Robert-Walser 7, CP 439<br>
|
||||
2501 Biel/Bienne
|
||||
</p>
|
||||
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
|
||||
<br>
|
||||
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
24
connect.html
24
connect.html
|
|
@ -11,7 +11,7 @@
|
|||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body data-platform="public">
|
||||
<body data-platform="public" data-screen="connect">
|
||||
<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">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container" data-screen="connect">
|
||||
<main class="container">
|
||||
<div class="wrapper container">
|
||||
<div class="col-11 col-lg-5 mx-auto">
|
||||
<form class="form-sign mb-3">
|
||||
|
|
@ -69,9 +69,25 @@
|
|||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container-fluid">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg"></a>
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
|
||||
<div class="col mb-3">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Forum du bilinguisme</h5>
|
||||
<p>
|
||||
Place Robert-Walser 7, CP 439<br>
|
||||
2501 Biel/Bienne
|
||||
</p>
|
||||
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
|
||||
<br>
|
||||
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<script src="static/js/check.js"></script>
|
||||
</head>
|
||||
|
||||
<body data-platform="public">
|
||||
<body data-platform="public" data-screen="create-account">
|
||||
<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">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid" data-screen="connect">
|
||||
<main class="container-fluid">
|
||||
<div class="wrapper container">
|
||||
<div class="col-11 col-lg-5 mx-auto">
|
||||
<form class="form-sign mb-3">
|
||||
|
|
@ -66,8 +66,24 @@
|
|||
|
||||
<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 class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
|
||||
<div class="col mb-3">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Forum du bilinguisme</h5>
|
||||
<p>
|
||||
Place Robert-Walser 7, CP 439<br>
|
||||
2501 Biel/Bienne
|
||||
</p>
|
||||
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
|
||||
<br>
|
||||
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<!-- Modal -->
|
||||
|
|
@ -92,7 +108,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
34
home.html
34
home.html
|
|
@ -11,7 +11,7 @@
|
|||
<script src="static/js/vendor/bootstrap.bundle.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-screen="homepage">
|
||||
<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">
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<ul class="navbar-nav">
|
||||
|
||||
</ul>
|
||||
<div class="d-flex align-items-center gap-2 ms-auto">
|
||||
<div id="side-lang" class="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">
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
<option>English</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <a class="btn btn-sm btn-cta rounded col-auto" href="connect.html">Se connecter</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,6 +48,7 @@
|
|||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -56,16 +56,16 @@
|
|||
<div class="hero hero-primary container-fluid">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 bottom-anchored order-2 order-lg-1 ">
|
||||
<div class="col-md-8 col-lg-6 col-xxl-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">
|
||||
<div class="col-lg-6 col-xxl-4 order-1 order-lg-2">
|
||||
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">L’autre manière d’approfondir ses connaissances linguistiques</h1>
|
||||
<p>La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage.<br> A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale.</p>
|
||||
<p>Deux personnes de langues différentes forment un TANDEM et s’enseignent 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 class="btn-stack">
|
||||
<a class="btn btn-primary btn-hero-primary btn-lg rounded" href="connect.html">Se connecter</a>
|
||||
<a class="btn btn-outline-secondary btn-lg rounded" href="create-account.html">Créer un compte</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,8 +185,24 @@
|
|||
|
||||
<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 class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
|
||||
<div class="col mb-3">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Forum du bilinguisme</h5>
|
||||
<p>
|
||||
Place Robert-Walser 7, CP 439<br>
|
||||
2501 Biel/Bienne
|
||||
</p>
|
||||
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
|
||||
<br>
|
||||
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -15,12 +15,12 @@
|
|||
<h1>Forum du bilinguisme HTML/CSS maquettes</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="home.html">Page d'accueil</a></li>
|
||||
<li><a href="connect.html">Page de connexion</a></li>
|
||||
<li><a href="create-account.html">Création de compte</a></li>
|
||||
<li><a href="profile.html">Profil utilisateur</a></li>
|
||||
<li><a href="tandem-list.html">Recherche TANDEM</a></li>
|
||||
<li><a href="404.html">Error 404</a></li>
|
||||
<li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a></li>
|
||||
<li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li>
|
||||
<li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li>
|
||||
<li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li>
|
||||
<li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
|
||||
<li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
183
profile.html
183
profile.html
|
|
@ -12,7 +12,7 @@
|
|||
<script src="static/js/js.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-screen="profile">
|
||||
<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">
|
||||
|
|
@ -23,15 +23,107 @@
|
|||
<button type="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="custom-toggler navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu">
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="mainNav" aria-label="Main menu" data-bs-scroll="false">
|
||||
<!-- <div class="offcanvas-header">
|
||||
<button type="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">
|
||||
<nav class="side-menu" id="offSideMenu">
|
||||
<div class="user-avatar">
|
||||
<img src="static/img/avatars/default-avatar.svg" alt="Priscilla">
|
||||
<p class="user-pseudo">Forum du Bilinguisme</p>
|
||||
</div>
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-ui" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
Rechercher des TANDEMs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
||||
</svg>
|
||||
Mes TANDEMs
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="profile.html" role="menuitem" class="nav-link active" aria-current="page">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
|
||||
</svg>
|
||||
Mon profil</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859M12 3v8.25m0 0-3-3m3 3 3-3" />
|
||||
</svg>
|
||||
Demandes reçues <span class="badge rounded-pill ms-2">101</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path d="M9,3.75h-2.09c-.99,0-1.86.64-2.15,1.59l-2.41,7.84c-.07.21-.1.44-.1.66v4.16c0,1.24,1.01,2.25,2.25,2.25h15c1.24,0,2.25-1.01,2.25-2.25v-4.16c0-.22-.03-.45-.1-.66l-2.41-7.84c-.29-.94-1.16-1.59-2.15-1.59h-2.09M2.25,13.5h3.86c.85,0,1.63.48,2.01,1.24l.26.51c.38.76,1.16,1.24,2.01,1.24h3.22c.85,0,1.63-.48,2.01-1.24l.26-.51c.38-.76,1.16-1.24,2.01-1.24h3.86M12,13.25V5M12,5l3,3M12,5l-3,3" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"/>
|
||||
</svg>
|
||||
Demandes envoyées</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
|
||||
</svg>
|
||||
Statistiques</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-ui" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
Espace documentaire</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="d-flex align-items-center gap-2 ms-auto">
|
||||
<div class="separator menu-admin">
|
||||
<a class="btn-link" data-bs-toggle="collapse" href="#sideMenuAdmin" role="button" aria-expanded="false" aria-controls="sideMenuAdmin">Administration</a>
|
||||
</div>
|
||||
<div id="sideMenuAdmin" class="collapse">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
Gérer les comptes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
||||
</svg>
|
||||
Gérer les signalements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
|
||||
</svg>
|
||||
Langues</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon-ui">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
|
||||
</svg>
|
||||
Dictionnaire</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
<div id="side-lang" class="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">
|
||||
|
|
@ -42,29 +134,74 @@
|
|||
<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 data-screen="profile">
|
||||
<main>
|
||||
<div class="hero hero-secondary container-fluid">
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
|
||||
<img class="img-fluid" src="static/img/ban-4.png">
|
||||
</div>
|
||||
<div class="col-lg-6 order-1 order-lg-2">
|
||||
<h1 class="display-5 fw-bold lh-1 mb-3 mb-lg-5">Mon profil</h1>
|
||||
<p class="lead">La méthode TANDEM vous ouvre un nouvel horizon d’apprentissage.<br> A l’inverse des cours de langues traditionnels, l’accent est mis sur la communication orale.</p>
|
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Aenean id dui auctor, viverra augue facilisis, accumsan arcu. Suspendisse sollicitudin laoreet lacus eu varius. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="profile" class="container my-5">
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row my-3">
|
||||
<div id="secondary-nav" class="col-lg-3">
|
||||
<nav class="side-menu">
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link active" aria-current="page">Rechercher des TANDEMs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Mes TANDEMs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="profile.html" role="menuitem" class="nav-link">Mon profil</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Demandes reçues <span class="badge rounded-pill">101</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Demandes envoyées</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Statistiques</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Espace documentaire</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="separator menu-admin">Admin</div>
|
||||
<ul class="nav flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Gérer les comptes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Gérer les signalements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Langues</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" role="menuitem" class="nav-link">Dictionnaire</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<section id="profile" class="col-lg-8">
|
||||
<form>
|
||||
<section class="panel mb-3">
|
||||
<h1 class="fs-2 mb-4">Informations générales</h1>
|
||||
|
|
@ -88,7 +225,7 @@
|
|||
<label class="col-form-label">Pseudo</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input class="form-control" type="text" id="user-pseudo" placeholder="Hot's Design" disabled readonly>
|
||||
<input class="form-control" type="text" id="user-pseudo" placeholder="Forum du Bilinguisme" disabled readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
|
|
@ -400,12 +537,30 @@
|
|||
<button type="button" class="btn btn-cta rounded w-100 py-3" type="submit">Sauvegarder les modifications</button>
|
||||
</form>
|
||||
</section>
|
||||
</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 class="row row-cols-1 row-cols-sm-2 row-cols-lg-5 py-5">
|
||||
<div class="col mb-3">
|
||||
<a href="https://www.bilinguisme.ch/" target="_blank" rel="noopener"><img class="img-fluid" src="static/img/logo/forum-bilinguisme.svg" alt="Forum du Bilinguisme"></a>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h5>Forum du bilinguisme</h5>
|
||||
<p>
|
||||
Place Robert-Walser 7, CP 439<br>
|
||||
2501 Biel/Bienne
|
||||
</p>
|
||||
<a class="text-link" href="mailto:support@e-tandem.ch">support@e-tandem.ch</a>
|
||||
<br>
|
||||
<a class="text-link" href="tel:+41 32 323 22 80">+41 32 323 22 80</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ body {
|
|||
overflow-x: hidden;
|
||||
letter-spacing: .125px;
|
||||
font-variant-ligatures: no-common-ligatures;
|
||||
margin: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5{
|
||||
font-family: var(--bs-ttl-font-family);
|
||||
|
|
@ -82,16 +83,21 @@ h1, h2, h3, h4, h5{
|
|||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
min-height: calc(100vh - var(--top-bar))
|
||||
}
|
||||
/* [data-platform="public"] > [data-screen="connect"]{
|
||||
background-color: var(--accent-normal);
|
||||
} */
|
||||
[data-screen="404"] .container{
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
min-height: calc(100vh - var(--top-bar));
|
||||
margin-top: var(--top-bar);
|
||||
}
|
||||
[data-screen="search"] .container-fluid > .row{
|
||||
/* Screens */
|
||||
/* [data-screen="error404"], [data-screen="connect"]{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
[data-screen="error404"] main, [data-screen="connect"] main{
|
||||
margin: auto 0;
|
||||
} */
|
||||
[data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -199,7 +205,6 @@ h1, h2, h3, h4, h5{
|
|||
font-weight: initial;
|
||||
}
|
||||
#tandem-explanations{
|
||||
box-shadow: 0 20px 10px -20px rgba(0,0,0,0.45) inset;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
background-color: var(--background-wrapper);
|
||||
|
|
@ -307,12 +312,10 @@ article li:not(:first-of-type){
|
|||
padding: 0.5em 1.5em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-hero-secondary{
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-cta{
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
|
|
@ -326,6 +329,11 @@ article li:not(:first-of-type){
|
|||
color: var(--bs-gray-600);
|
||||
border-color: var(--bs-gray-500);
|
||||
}
|
||||
.btn-stack{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
/* forms */
|
||||
.lang-select{
|
||||
max-width: 12em;
|
||||
|
|
@ -426,9 +434,6 @@ nav .icon-ui{
|
|||
}
|
||||
/* media queries */
|
||||
@media (width <= 576px) {
|
||||
body{
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
:root{
|
||||
--div-padding: 2em;
|
||||
--bottom-bar: 40px;
|
||||
|
|
@ -536,7 +541,6 @@ nav .icon-ui{
|
|||
}
|
||||
@media (576px <= width <= 992px) {
|
||||
.btn-stack{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.partners-logo-grid{
|
||||
|
|
|
|||
BIN
static/img/ban-4.png
Normal file
BIN
static/img/ban-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
|
|
@ -12,7 +12,7 @@
|
|||
<script src="static/js/js.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-screen="search">
|
||||
<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">
|
||||
|
|
@ -142,8 +142,8 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main data-screen="search">
|
||||
<div class="hero hero-primary container-fluid">
|
||||
<main>
|
||||
<div class="hero hero-secondary container-fluid">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 bottom-anchored order-2 order-lg-1 ">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue