refacto(all): Rebuild website on my standards

This commit is contained in:
Hactarus 2023-03-14 00:48:52 +01:00
parent 9d197e1363
commit c56c4138e3
3 changed files with 134 additions and 165 deletions

View file

@ -44,98 +44,70 @@
<body data-theme="light">
<header>
<button class="js-theme-trigger">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
</svg></button>
<div class="header--second">
<div class="btn__lightdark--blockd">
<nav class="header--nav">
<ul class="header--nav--list">
<li>
<a href="#synopsis">Synopsis</a>
</li>
<li>
<a href="#team_building">Création de l'Équipe</a>
</li>
<li>
<a href="#premices">Prémices</a>
</li>
<li>
<a href="#ebauche">Ébauche</a>
</li>
<li>
<a href="#entretiens">Guide d'entretien</a>
</li>
<li>
<a href="#tasks">Top Task & fonctions</a>
</li>
<li>
<a href="#audits">Audits</a>
</li>
<li>
<a href="#journey">User Journey</a>
</li>
<li>
<a href="#croquis">Croquis</a>
</li>
<li>
<a href="#integration">Intégration</a>
</li>
<li>
<button class="js-theme-trigger" alt="theme switcher">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
clip-rule="evenodd">
<path
d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
</svg>
</button>
</li>
</ul>
</nav>
<section class="headback">
<div class="fond">
<img class="headtitle" src="assets/images/headlogo.png"
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
</div>
<div class="header__navigation">
<nav>
<ul class="list--header">
<li>
<a class="link" href="#partie0">0</a>
</li>
<li>
<a class="link" href="#partie1">1</a>
</li>
<li>
<a class="link" href="#partie2">2</a>
</li>
<li>
<a class="link" href="#partie3">3</a>
</li>
<li>
<a class="link" href="#partie4">4</a>
</li>
<li>
<a class="link" href="#partie5">5</a>
</li>
<li>
<a class="link" href="#partie6">6</a>
</li>
<li>
<a class="link" href="#partie7">7</a>
</li>
<li>
<a class="link" href="#partie8">8</a>
</li>
<li>
<a class="link" href="#partie9">9</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</header>
<div class="headback">
<div class="fond">
<img class="headtitle" src="assets/images/headlogo.png"
alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
</div>
</div>
<section class="grid grid--content" id="partie0">
<div id="strips" alt="decotration: lignes rose en diagonales">
<div class="strip strip--1"></div>
<h1 class="title mgrid-start01 mgrid-end08 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">0 </span>Synopsis
</h1>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
Latelier RUX (rethinking UX)
est de
réaliser une interface adaptée et
compréhensible pour
lutilisateur, pour une
navigation facile et rapide”</p>
<div class="strip strip--2"></div>
<p class="mgrid-start02 mgrid-end05 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Le
directeur de la Haute école
Albert Jacquard nous à
donner une mission ! </p>
<div class="strip strip--3"></div>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end05 partie1_blackfill">
Repenser notre cours de récré
</p>
<p class="mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start03 dgrid-end05 partie1_blackfill">Notre
</div>
<section class="grid" id="synopsis">
<h2>Synopsis</h2>
<p>Latelier RUX (rethinking UX) est de réaliser une interface adaptée et compréhensible pour lutilisateur,
pour une navigation facile et rapide”</p>
<p>Le directeur de la Haute école Albert Jacquard nous à donner une mission ! </p>
<p>Repenser notre cours de récré</p>
<p>Notre
budget est limité à
200k€&nbsp;
+-&nbsp;</p>
<div class="strip strip--cash"></div>
200k€ ±</p>
<figure class="img__content tgrid-start02 tgrid-end05 dgrid-start02 dgrid-end03">
<img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
srcset="assets/images/plancour@2x.png 2x"
@ -148,7 +120,7 @@
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
</figure>
</section>
<section class="grid" id="partie1">
<section class="grid" id="team_building">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">1 </span>Création
de l'Équipe</h2>
@ -163,7 +135,7 @@
</ul>
</div>
</section>
<section class="grid section__color section__color--pink" id="partie2">
<section class="grid section__color section__color--pink" id="premices">
<h2 class="title mgrid-start01 mgrid-end07 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">2 </span>Prémices
</h2>
@ -184,7 +156,7 @@
faire plus élégant.
</p>
</section>
<section class="grid section__color section__color--green" id="partie3">
<section class="grid section__color section__color--green" id="ebauche">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">3 </span>Prémices
bis</h2>
@ -217,7 +189,7 @@
lieux dexposition, déco des murs, activités, zone de
lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
</section>
<section class="grid" id="partie4">
<section class="grid" id="entretiens">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">4 </span>Guide
d'entretien</h2>
@ -299,7 +271,7 @@
<figcaption class="figcaption">Une de nos plus belles interview</figcaption>
</figure>
</section>
<section class="grid section__color section__color--blue" id="partie5">
<section class="grid section__color section__color--blue" id="tasks">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">5 </span>Top Task
& fonctions</h2>
@ -317,7 +289,7 @@
<figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
</figure>
</section>
<section class="grid section__color section__color--pink" id="partie6">
<section class="grid section__color section__color--pink" id="audits">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">6 </span>Audits
</h2>
@ -387,7 +359,7 @@
</div>
</section>
<section class="grid section__color section__color--green" id="partie7">
<section class="grid section__color section__color--green" id="journey">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">7 </span>User
Journey</h2>
@ -409,7 +381,7 @@
srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
</ul>
</section>
<section class="grid section__color section__color--blue" id="partie8">
<section class="grid section__color section__color--blue" id="croquis">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">8 </span>Croquis
</h2>
@ -476,7 +448,7 @@
<p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end04">Un couteau à bois, des vis des roulettes et le
plus beau rondin de bois suffit à créer un tabouret mobile !</p>
</section>
<section class="grid" id="partie9">
<section class="grid" id="integration">
<h2 class="title mgrid-start01 mgrid-end04 tgrid-start02 tgrid-end05 dgrid-start01 dgrid-end07"><span
class="number-nav">9
</span>Intégration</h2>