mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-28 22:37:51 +02:00
refacto(all): Rebuild website on my standards
This commit is contained in:
Hactarus
parent
9d197e1363
commit
c56c4138e3
3 changed files with 134 additions and 165 deletions
|
|
@ -1,30 +1,3 @@
|
|||
@import 'normalize.css';
|
||||
|
||||
@font-face {
|
||||
font-family: 'MoodboardFont';
|
||||
font-weight: 400;
|
||||
src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
|
||||
url('../fonts/moodboardfont-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Queensides';
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Queensides-3z7Ey.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'QueensidesL';
|
||||
font-weight: 300;
|
||||
src: url('../fonts/QueensidesLight-ZVj3l.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'QueensidesM';
|
||||
font-weight: 700;
|
||||
src: url('../fonts/QueensidesMedium-x30zV.ttf');
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
|
|
@ -32,55 +5,12 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg-head: #77A3D2;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg-head: #77A3D2;
|
||||
--color-bg: white;
|
||||
--color-bg-sctn-pink: #EDCCE7;
|
||||
--color-bg-sctn-green: #CDFB52;
|
||||
--color-bg-sctn-blue: #52f8fb;
|
||||
--color-bg-sctn-fuscia: #FF00C7;
|
||||
--color-active: #FF00C7;
|
||||
--color-visited: #4B003B;
|
||||
--color-hover: #EDCCE7;
|
||||
--color-link: #000000;
|
||||
--color-icone: #fff;
|
||||
--color-discu-pink: #FFB4EF;
|
||||
--color-link-f: #00fa6c;
|
||||
--color-link-block: #4B003B;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--color-bg: white;
|
||||
--color-txt: #001f1f;
|
||||
--color-link: #000000;
|
||||
--color-icone: #000;
|
||||
--color-discu-pink: #FFB4EF;
|
||||
--color-discu-green: #CEFFB2;
|
||||
--color-discu-blue: #B4E9FF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #000000;
|
||||
--color-txt: #ffffff;
|
||||
--color-txt-b: #000000;
|
||||
--color-link: #ffff;
|
||||
--color-icone: #fff;
|
||||
--color-discu-pink: #4B003B;
|
||||
--color-discu-green: #1C4D00;
|
||||
--color-discu-blue: #00354B;
|
||||
}
|
||||
}
|
||||
|
||||
/*BTN THEME*/
|
||||
[data-theme="dark"] .btn__dark {
|
||||
display: none;
|
||||
|
|
|
|||
67
assets/css/style_hactarus.css
Normal file
67
assets/css/style_hactarus.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/* Navigation */
|
||||
body {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
header > nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
/* Decorations */
|
||||
.strip {
|
||||
box-sizing: border-box;
|
||||
width: 90%;
|
||||
height: 4em;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
margin-left: -19px;
|
||||
background-color: #FF00C7;
|
||||
|
||||
}
|
||||
|
||||
.strip>.strip--1 {
|
||||
top: 55em;
|
||||
transform: skew(30deg) rotate(30deg);
|
||||
}
|
||||
|
||||
.strip>.strip--2 {
|
||||
top: 82em;
|
||||
transform: skew(-30deg) rotate(-30deg);
|
||||
}
|
||||
|
||||
.strip>.strip--3 {
|
||||
top: 109em;
|
||||
transform: skew(30deg) rotate(30deg);
|
||||
}
|
||||
|
||||
.strip>.strip--cash {
|
||||
max-width: 100%;
|
||||
background-image: url(/assets/images/stripeuro.png);
|
||||
background-size: cover;
|
||||
filter: invert(1);
|
||||
margin-top: -19em;
|
||||
}
|
||||
162
index.html
162
index.html
|
|
@ -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">
|
||||
L’atelier RUX (rethinking UX)
|
||||
est de
|
||||
réaliser une interface adaptée et
|
||||
compréhensible pour
|
||||
l’utilisateur, 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>L’atelier RUX (rethinking UX) est de réaliser une interface adaptée et compréhensible pour l’utilisateur,
|
||||
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€
|
||||
+- </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 d’exposition, 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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue