mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-05-10 22:14:30 +02:00
add contenu, images, burger menu
This commit is contained in:
parent
3df9fd681c
commit
9cae4114fa
33 changed files with 619 additions and 174 deletions
194
index.html
194
index.html
|
|
@ -21,7 +21,7 @@
|
|||
<meta property="og:image" content="assets/images/logo_dark.svg">
|
||||
<meta property="og:image:width" content="1800">
|
||||
<meta property="og:image:height" content="945">
|
||||
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
|
||||
<link rel="icon" type="image/x-icon" href="./assets/images/logodark.svg">
|
||||
<title>RUX Pina Vetrano — DWT — Heaj</title>
|
||||
<!-- CSS and Javascript -->
|
||||
<link rel="stylesheet" href="assets/css/normalize.css">
|
||||
|
|
@ -30,17 +30,19 @@
|
|||
</head>
|
||||
|
||||
<body data-theme="light">
|
||||
<button class="js-theme-trigger">Theme</button>
|
||||
<!-- <img class="full-width mgrid-start02 tgrid-start01 tgrid-end03 dgrid-start dgrid-end06" src="assets/images/akitadog.jpg"
|
||||
alt="akita dog sur le site">-->
|
||||
<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__linklogo">
|
||||
|
||||
<a href="index.html">
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.75 71.07">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.75 71.07">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
|
|
@ -80,16 +82,6 @@
|
|||
</button>
|
||||
<div class="btn__lightdark--blockd">
|
||||
|
||||
<button class="btn btn__lightdark">
|
||||
|
||||
<span class="text__darklight"></span>
|
||||
|
||||
<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>
|
||||
<div class="header__navigation">
|
||||
|
||||
|
|
@ -97,11 +89,11 @@
|
|||
|
||||
<ul class="list--header">
|
||||
<li>
|
||||
<a class="link link--header link--active" href="index.html">accueil</a>
|
||||
<a class="link link--header link--active" href="#partie0">Partie //01</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link link--header" href="experience.html">expérience</a>
|
||||
<a class="link link--header" href="#partie1">Partie //02</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
|
@ -117,16 +109,13 @@
|
|||
<div class="header__navigation--m">
|
||||
<ul class="list__m--header">
|
||||
<li>
|
||||
<a class="link mlink--header mlink--active" href="index.html">accueil</a>
|
||||
<a class="link mlink--header mlink--active" href="#partie0">Partie //01</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link mlink--header" href="experience.html">expérience</a>
|
||||
<a class="link mlink--header" href="#partie1">Partie //02</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="btn__lightdark--block">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<section class="headback">
|
||||
<div class="fond">
|
||||
|
|
@ -135,10 +124,165 @@
|
|||
<!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></code></pre>-->
|
||||
<h1 class="title">Rethinking User Experience</h1>
|
||||
</section>
|
||||
<section class="#partie1">L’atelier RUXRéaliser une interface adaptée et compréhensible pour l’utilisateur, pour une
|
||||
navigation facile et rapide”</section><a href="#partie1" class="nav__link link--visited link--color">Que le spectacle commence ! 👏 </a>
|
||||
<section class="grid">
|
||||
<div class="strip strip--1"></div>
|
||||
<h1 class=" title mgrid-start01 mgrid-end04" id="partie0">Phase 0 : Synopsis</h1>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">L’atelier RUX <strong>(rethinking UX)</strong> 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 partie1_blackfill">Le directeur de la Haute école Albert Jacqard nous à
|
||||
donner une mission ! </p>
|
||||
<div class="strip strip--3"></div>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Repenser notre cours de récré</p>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/plancour.png" srcset="assets/images/plancour@2x.png 2x"
|
||||
alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">schéma illustré de la cour</figcaption>
|
||||
</figure>
|
||||
<div class="strip strip--cash"></div>
|
||||
<p class="mgrid-start01 mgrid-end04 partie1_blackfill">Notre budget est limité à 200k€ +-</p>
|
||||
<figure class="img__content">
|
||||
<img class="image_undertxt" src="assets/images/cour.png" srcset="assets/images/cour@2x.png 2x"
|
||||
alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
|
||||
<figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<p class="grid__discu">
|
||||
<h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
|
||||
<div class="mgrid-start01 mgrid-end04">
|
||||
<ul class="discu__liste">
|
||||
<li class="discu__el discu__el--pink">— On choisit quel nom pour la Team ?</li>
|
||||
<li class="discu__el discu__el--blue">— Les Rases moquettes en référence au fait qu’on va réajuster la cour
|
||||
!</li>
|
||||
<li class="discu__el discu__el--green">— Hahahahaha, allez !
|
||||
</li>
|
||||
<li class="discu__el">On se met au boulot !</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid grid--content">
|
||||
<p class="mgrid-start01 mgrid-end04">Pour bien commencer n’importe quel projet il faut avant tout … un client ! Le client nous a demandé de
|
||||
concevoir et repenser l’agencement de la cour de l’école, cependant il nous a donné des contraintes et a
|
||||
répondu à certaines de nos questions.</p>
|
||||
<p class="mgrid-start02 mgrid-end04">Et c’est à ce moment précis que l’on a mis la première vitesse. Notre tout nouvel atelier consistait à
|
||||
repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
|
||||
notre stratégie d’apprentissage ! </p>
|
||||
<p class="mgrid-start01 mgrid-end04 content__objet">
|
||||
La fusion d'un <mark>travail collaboratif</mark>, des travaux de recherches qui nous permettent d’aller découvrir le monde
|
||||
extérieur et <mark>nos utilisateurs</mark> et le travail pratique, ainsi que la partie individuelle pour mettre en œuvre notre
|
||||
site web, <mark>mon site web~</mark>, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Ou notre <mark>Case-study</mark> pour
|
||||
faire plus élégant.</p>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="grid reseaux">
|
||||
<h2>Retrouvez-moi sur :</h2>
|
||||
<ul class="reseaux__liste">
|
||||
<li class="reseaux__el">
|
||||
<a href="https://www.behance.net/pinavetran661a">
|
||||
<span class="reseaux__txt">Behance</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M8.84 10.835h-1.965v-1.859h1.783c1.878 0 1.646 1.859.182 1.859zm5.789 1.058h2.624c-.115-1.687-2.36-1.81-2.624 0zm-5.9.396h-1.854v1.947h1.824c1.782-.001 1.673-1.947.03-1.947zm15.271-.289c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-13.357-.733c1.668-.853 1.607-3.981-1.587-4.028h-4.056v8.73h3.771c3.958 0 3.891-3.967 1.872-4.702zm3.357-3.166h4v-.875h-4v.875zm4.943 3.693c-.545-3.505-6.053-3.711-6.053.872 0 4.526 5.18 3.818 5.949 1.56h-1.848c-.645.748-2.508.531-2.404-1.184h4.41c.009-.555-.009-.953-.054-1.248z" />
|
||||
</svg></a>
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="https://dribbble.com/Lilflamby">
|
||||
<span class="reseaux__txt">dribbble</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M11.455 9.985c-1.419.417-3.11.632-5.067.646.405-1.654 1.518-3.03 3.003-3.784.777 1.016 1.464 2.063 2.064 3.138zm.965 1.93c-.124-.28-.254-.559-.391-.835-1.622.51-3.561.769-5.804.772l-.008.148c0 1.404.504 2.692 1.34 3.695 1.266-1.901 2.891-3.164 4.863-3.78zm-3.97 4.641c1.569 1.225 3.671 1.589 5.624.836-.252-1.488-.65-2.94-1.19-4.352-1.819.542-3.285 1.714-4.434 3.516zm7.075-9.13c-.977-.754-2.197-1.209-3.525-1.209-.49 0-.964.068-1.418.184.764 1.028 1.441 2.086 2.035 3.172 1.236-.524 2.204-1.24 2.908-2.147zm8.475 4.574c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5 0c0-3.866-3.135-7-7-7s-7 3.134-7 7 3.135 7 7 7 7-3.134 7-7zm-5.824-1.349c.157.324.305.651.447.98 1.26-.217 2.641-.204 4.143.042-.073-1.292-.566-2.474-1.354-3.403-.807 1.005-1.89 1.798-3.236 2.381zm.914 2.132c.489 1.309.865 2.651 1.119 4.023 1.312-.88 2.241-2.284 2.497-3.909-1.317-.228-2.522-.268-3.616-.114z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="https://medium.com/@pinavetranopro">
|
||||
<span class="reseaux__txt">medium</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm6.974 17.557v-.235l-1.092-1.072c-.096-.073-.144-.194-.124-.313v-7.874c-.02-.119.028-.24.124-.313l1.118-1.072v-.235h-3.869l-2.758 6.88-3.138-6.88h-4.059v.235l1.308 1.575c.128.115.194.285.176.457v6.188c.038.223-.032.451-.189.614l-1.471 1.784v.235h4.17v-.235l-1.471-1.784c-.158-.163-.233-.389-.202-.614v-5.352l3.66 7.985h.425l3.143-7.985v6.365c0 .17 0 .202-.111.313l-1.13 1.098v.235h5.49z" />
|
||||
</svg></a>
|
||||
</li>
|
||||
|
||||
<li class="reseaux__el">
|
||||
<a href="https://www.instagram.com/pina.p_f/">
|
||||
<span class="reseaux__txt">Instagram</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="https://www.linkedin.com/in/pina-vetrano-55b4a1235/">
|
||||
<span class="reseaux__txt">Linkdin</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="https://twitter.com/PetitFlamb">
|
||||
<span class="reseaux__txt">Twitter</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="mailto:pinavetranopro@gmail.com">
|
||||
<span class="reseaux__txt">Me Contacter</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="reseaux__el">
|
||||
<a href="https://github.com/Pina-Vetrano">
|
||||
<span class="reseaux__txt">Github</span>
|
||||
<svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<nav>
|
||||
<ul class="list--footer">
|
||||
<li class="link link--footer"><a href="http://dwm.re/"><img class="DWT" src="assets/images/dwt.svg"
|
||||
alt="Logo de l'option DWT de la HEAJ."></a></li>
|
||||
<li class="link link--footer"><a href="ui-kit.html" title="UI-KiT">UI-Kit</a>
|
||||
</li>
|
||||
<li class="link link--footer"><a href="credits.html" title="Crédits">Crédits</a></li>
|
||||
<li class="link link--footer"><a href="case-study.html" title="case-study">Case-study</a></li>
|
||||
</ul>
|
||||
<small class="footer__date link link--footer"><a class="copy" href="https://pinavetrano.be/">Pina
|
||||
Vetrano</a> © <span class="date"></span></small>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue