diff --git a/assets/css/style.css b/assets/css/style.css index 9ad0c59..ac84b92 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -50,22 +50,38 @@ html { --color-bg-sctn-blue: #52f8fb; --color-bg-sctn-fuscia: #FF00C7; --color-active: #FF00C7; - --color-visited: #573138; + --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; } @@ -74,6 +90,14 @@ html { display: inline; } +.logoDWT__dark-mode { + display: none; +} + +.logo__dark-mode { + display: none; +} + body { font-family: 'QueensidesM'; font-size: 18px; @@ -84,12 +108,17 @@ body { background-color: var(--color-bg); } -.logoDWT__dark-mode { - display: none; +/*LINK*/ +a :link { + text-decoration: none; } -.logo__dark-mode { - display: none; +a { + color: var(--color-bg-sctn-fuscia); +} + +a :visited { + color: var(--color-visited); } @@ -121,10 +150,6 @@ body { margin-top: 2em; } -.img__content { - padding-bottom: 3em; -} - .mgrid-start01 { grid-column-start: 1; } @@ -167,41 +192,33 @@ body { /*HEADER*/ -body[data-menu] .list__m--header { - margin-top: 30px; - display: flex; - flex-direction: column; - align-items: center; - gap: 3em; - padding: 0; - padding-top: 1em; - list-style: none; -} body[data-menu] .mlink--header, .link--header { - font-size: 28px; + font-size: 26px; color: var(--color-link); } -.btn--burger { - z-index: 4; - outline: none; - cursor: pointer; - border: none; - background-color: #9c6b5ca3; - padding: 2vh 2vh 2vh 2vh; - border-radius: 4px; - position: fixed; -} header { display: flex; + margin-top: auto; + position: fixed; + width: 100%; + z-index: 2; + top: 84vh; + flex-direction: row-reverse; justify-content: space-around; - align-items: center; - background-color: #77A3D2; - padding-top: 1rem; - padding-bottom: 1rem; +} + +.js-theme-trigger { + width: 11%; +} + +.header__navigation { + margin: 1vw; + display: flex; + z-index: 3; } .fond { @@ -214,48 +231,24 @@ header { filter: contrast(130%); } -.headtitle { - max-width: 100%; -} - .headtitle h1 { visibility: hidden; } -.header__linklogo { - position: relative; - width: 69px; - height: 50%; - display: block; +.rux { + background-color: var(--color-active); + margin-top: 1rem; } .header--second { display: flex; align-items: center; flex-direction: row-reverse; -} - -.header__navigation { - display: none; -} - -.header__navigation--m { - display: none; -} - -/*Burger Menu button*/ -.header__menu--burger { - width: 60px; - height: 60px; - border: none; - position: relative; - overflow: hidden; - background-size: cover; - background-color: transparent; - z-index: 1; - overflow: hidden; - position: relative; + /* padding: 5px 30px 2px; */ + border: 2px solid #000000d1; + color: black; + background-color: var(--color-txt-b); } .header--no-display { @@ -270,7 +263,6 @@ header { } -/*Header*/ .header__btn--theme { color: var(--color-bg-head); width: 35px; @@ -297,18 +289,16 @@ header { text-decoration: none; list-style: none; display: flex; - gap: 35px; + gap: 21px; padding: 0; font-size: 28px; + size: 28px; } .header__span--none { display: none; } -.header__navigation { - display: none; -} .home--heading .section--content .logo { display: block; @@ -317,18 +307,24 @@ header { } .title { - font-size: 47px; - margin-top: 2rem; + font-size: 38px; + margin-top: 0; text-align: center; font-family: 'moodboardFont'; font-weight: 300; background: black; - margin-left: -7vw; - margin-right: -17vw; + margin-left: -10vw; + margin-right: -3vw; color: white; text-transform: uppercase; } +.title--medium { + font-size: 14px; + background: none; + color: var(--color-txt-b); + text-align: center; +} p { font-size: 20px; @@ -340,7 +336,6 @@ p { background: #000000; color: #ffffff; box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7; - max-width: 22ch; } img { @@ -349,6 +344,10 @@ img { float: left; } +.img__content { + padding-bottom: 3em; +} + .element_dot { text-align: center; } @@ -356,7 +355,7 @@ img { .slide { overflow-x: scroll; width: auto !important; - height: 542px; + height: 364px; overflow-y: hidden; } @@ -382,6 +381,10 @@ img { height: 354px; } +.image_sequence { + min-width: 25%; +} + .strip { box-sizing: border-box; width: 90%; @@ -419,7 +422,7 @@ img { } .highlight { - background: linear-gradient(120deg, #c7e4a0 0%, #bbe2ff 100%); + background: linear-gradient(120deg, #ff00e329 0%, #74ff0069 100%); background-repeat: no-repeat; background-size: 100% 20%; background-position: 0 60%; @@ -431,17 +434,15 @@ img { padding: 1em; } -.list--header, .list--footer, .list { text-decoration: none; list-style: none; - display: flex; - gap: 50px; padding: 0; + background-color: var(--color-txt-b); } -body[data-menu] .header__navigation--m { +body[data-menu] { position: fixed; top: -57px; padding-top: 0px; @@ -455,6 +456,7 @@ body[data-menu] .header__navigation--m { backdrop-filter: blur(15px); margin-top: -4em; z-index: 2; + } .discu__el { @@ -464,27 +466,23 @@ body[data-menu] .header__navigation--m { align-items: center; margin-top: 1em; border-radius: 3px; + } .discu__el--pink { - background-color: #ff00c84b; + background-color: var(--color-discu-pink); padding: 2rem; - margin-left: -4em; - margin-right: 3em; } .discu__el--green { - background-color: #5eff004d; + background-color: var(--color-discu-green); padding: 2rem; - margin-right: -4rem; } .discu__el--blue { - background-color: #00b3ff4b; + background-color: var(--color-discu-blue); padding: 2rem; - margin-left: -3em; - margin-right: -3rem; } @@ -498,7 +496,6 @@ body[data-menu] .header__navigation--m { } .section__color { - margin-top: 3em; padding-bottom: 4em; } @@ -570,29 +567,55 @@ body[data-menu] .header__navigation--m { } } -.reseaux__el { - text-decoration: none; - border-radius: 25px; - display: inline-flex; - align-items: center; -} - -.reseaux { +.equipe { list-style: none; - margin-top: 5rem; } -.reseaux__el a { - width: 35px; - height: 45px; - display: inline-block-; - background-color: border; +.equipe__grid { + margin-top: 5em; } -.reseaux__txt { - position: absolute; - visibility: hidden; - pointer-events: none; +.el__equipe { + font-size: 30px; +} + +.equipe__liste { + list-style: none; + display: grid; +} + +.equipe__txt { + font-size: 30px; +} + +.equipe__liste .equipe__el { + position: relative; + margin-top: 7em; +} + +.equipe__icon { + width: 18vh; + border-radius: 7px; +} + +.DWT { + width: 37px; + height: 47px; + filter: drop-shadow(2px 4px 6px black); +} + + +.footer__el { + display: inline-block; + flex-direction: row; + justify-content: center; + margin-left: 1vh; +} + +.footer__liste { + display: initial; + gap: 30px; + float: inherit; } .section__color--slot { @@ -629,20 +652,378 @@ h3 { list-style: " — "; } -@media only screen and (min-width: 750px) {} - -.header__navigation { - margin-left: 30px; +footer { display: flex; - z-index: 3; + padding-bottom: 10px; + padding-top: 15px; + color: var(--color-primary); + border-top: solid 3px; } -body[data-menu] .list__m--header { - display: none; +.equipe { + margin-top: 8rem; + display: grid; } -body[data-menu] .header__navigation--m { - display: none; +/* reseaux */ +.reseaux__el { + text-decoration: none; + border-radius: 25px; + display: inline-flex; + align-items: center; +} + +.reseaux { + list-style: none; + margin-top: 5rem; +} + +.reseaux__el a { + width: 35px; + height: 45px; + display: inline-block; + background-color: border; +} + +.reseaux__txt { + position: absolute; + visibility: hidden; + pointer-events: none; +} + +.reseaux__icon { + width: 100%; + height: 100%; +} + +.reseaux__liste .reseaux__el { + position: relative; + width: 5em; + height: 3em; + margin: 1px 1px 0px; +} + +.reseaux__el:active { + transform: scale(0.98); +} + +.reseaux__liste .reseaux__el a { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + z-index: 1; + font-weight: 400; + text-decoration: none; + overflow: hidden; + transition: 0.5s; + backdrop-filter: blur(15px); +} + + +.reseaux__liste .reseaux__el a::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + transition: 0, 5s; +} + +.reseaux__liste .reseaux__el:hover a::before { + transform: skewX(45deg) translateX(100px); +} + +.reseaux__liste .reseaux__el::before { + content: ''; + position: absolute; + left: 60%; + transform: translateX(90%); + bottom: -9px; + width: 30px; + height: 10px; + border-radius: 10px; + transition: 0.02s; +} + +.reseaux__liste .reseaux__el:hover::before { + bottom: 0; + height: 50%; + width: 80%; + border-radius: 30px; + transition-delay: 0.2s; +} + +.reseaux__liste .reseaux__el::after { + content: ''; + position: absolute; + left: 60%; + transform: translateX(-50%); + top: -5px; + width: 30px; + height: 10px; + border-radius: 10px; + transition: 0.05s; + border-bottom: #b2f098; +} + +.reseaux__liste .reseaux__el:hover::after { + top: 0; + height: 50%; + width: 80%; + border-radius: 30px; + transition-delay: 0.008s; +} + +/*icone des contacts*/ +.contact__icon { + width: 47px; + height: 47px; + fill: var(--color-icone); +} + +@media only screen and (min-width: 800px) { + + .grid { + display: grid; + grid-template-columns: 1fr 6fr 6fr 1fr 1fr; + padding-left: 0; + padding-right: 0; + gap: 3em 20px; + } + + .grid>* { + grid-column: 1/-1; + } + + .grid>figure { + margin: 0; + } + + + .tgrid-start01 { + grid-column-start: 1; + } + + .tgrid-start02 { + grid-column-start: 2; + } + + .tgrid-start03 { + grid-column-start: 3; + } + + .tgrid-start04 { + grid-column-start: 4; + } + + .tgrid-start05 { + grid-column-start: 5; + + } + + .tgrid-start06 { + grid-column-start: 5; + + } + + .tgrid-end01 { + grid-column-end: 1; + } + + .tgrid-end02 { + grid-column-end: 2; + } + + .tgrid-end03 { + grid-column-end: 3; + } + + .tgrid-end04 { + grid-column-end: 4; + } + + .tgrid-end05 { + grid-column-end: 5; + } + + .tgrid-end06 { + grid-column-end: 6; + } + + .tgrid-end07 { + grid-column-end: 7; + } + + header { + top: 0em; + height: 2%; + width: 71%; + } + + +} + +.list--header, +.list { + text-decoration: none; + list-style: none; + display: flex; + gap: 46px; +} + +@media only screen and (min-width: 750px) { + .header__navigation { + display: flex; + z-index: 3; + + } + + .grid { + display: grid; + grid-template-columns: 1fr 6fr 6fr 1fr 1fr; + padding-left: 0; + padding-right: 0; + gap: 3em 20px; + } + + .grid>* { + grid-column: 1/-1; + } + + .grid>figure { + margin: 0; + } + + + .tgrid-start01 { + grid-column-start: 1; + } + + .tgrid-start02 { + grid-column-start: 2; + } + + .tgrid-start03 { + grid-column-start: 3; + } + + .tgrid-start04 { + grid-column-start: 4; + } + + .tgrid-start05 { + grid-column-start: 5; + + } + + .tgrid-start06 { + grid-column-start: 5; + + } + + .tgrid-end01 { + grid-column-end: 1; + } + + .tgrid-end02 { + grid-column-end: 2; + } + + .tgrid-end03 { + grid-column-end: 3; + } + + .tgrid-end04 { + grid-column-end: 4; + } + + .tgrid-end05 { + grid-column-end: 5; + } + + .tgrid-end06 { + grid-column-end: 6; + } + + .tgrid-end07 { + grid-column-end: 7; + } + + .title { + font-size: 47px; + margin-top: 0; + text-align: center; + font-family: 'moodboardFont'; + font-weight: 300; + } + + + .header--second { + border: none; + box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7; + } + + p { + max-width: 55ch; + font-size: 21px; + } + + figcaption { + font-size: 19px; + } + + .image_sequence { + min-width: 25%; + } + + .image_sequence--m { + max-width: 10%; + } + + a { + color: #00fa6c; + } + + .strip--cash { + max-width: 47%; + background-image: url(/assets/images/stripeuro.png); + background-size: cover; + filter: invert(1); + margin-top: -17em; + position: static; + } + + .discu__liste { + display: inline-flex; + gap: 1rem; + margin-bottom: 5rem; + } + + .number-nav { + font-family: "Queensides"; + } + + .js-theme-trigger { + width: 6%; + } + + footer { + display: flex; + padding-bottom: 10px; + padding-top: 15px; + color: var(--color-primary); + border-top: solid 3px; + justify-content: center; + } + + .slide { + height: 500px; + } } @media only screen and (min-width: 1024px) { @@ -650,7 +1031,7 @@ body[data-menu] .header__navigation--m { /*GRID*/ .grid { display: grid; - grid-template-columns: 1fr 6fr 6fr 1fr; + grid-template-columns: 1fr 6fr 6fr 1fr 1fr; padding-left: 0; padding-right: 0; gap: 3em 20px; @@ -741,30 +1122,20 @@ body[data-menu] .header__navigation--m { gap: 9em 20px; } + /*HEADER*/ header { - display: flex; - margin-top: auto; - position: fixed; - width: 100%; - z-index: 2; - height: 19%; - top: 0em; + height: 6%; } - .header__navigation { - margin-left: 30px; - display: flex; - z-index: 3; + .header--second { + box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7; + border: none; } - - body[data-menu] .list__m--header { - display: none; - } - - body[data-menu] .header__navigation--m { - display: none; + .list--header, + .list { + gap: 25vh; } /*Natif Heading*/ @@ -774,11 +1145,14 @@ body[data-menu] .header__navigation--m { } p { - max-width: 65ch; + max-width: 43ch; + font-size: 21px; } + figcaption { - font-size: 23px; + font-size: 18px; } + .img__content { padding-bottom: 3em; } @@ -789,55 +1163,116 @@ body[data-menu] .header__navigation--m { } .partie1_blackfill { - max-width: 57ch; padding: 2.25em 18px; } - .fond { - padding-bottom: 100%; - padding-top: 120vh; - } - - .btn--burger { - display: none; - } - /*STRIP*/ .strip { - box-sizing: border-box; - width: 90%; - height: 11em; - z-index: -1; - position: absolute; - margin-left: 3vw; + height: 7em; } .strip--1 { - top: 127em; - transform: skew(30deg) rotate(30deg); - background-color: #FF00C7; + top: 116rem; } .strip--2 { - top: 175em; + top: 164rem; } - .discu__liste{ - margin-left: 10rem; - margin-right: 25em; + + /*PHILACTÈRE*/ + .discu__liste { + display: inline-flex; + gap: 1rem; } + .discu__el { display: flex; } + .discu__el--pink { padding: 3rem; } + .discu__el--green { padding: 3rem; } + .discu__el--blue { padding: 3rem; } - .grid--mega { - grid-template-columns: 1fr 6fr 6fr 6fr 5fr 4fr 1fr; + + /*images*/ + .image_undertxt--slide { + min-width: 36%; + max-width: 77%; } + + /*footer*/ + footer { + display: flex; + padding-bottom: 10px; + padding-top: 15px; + color: var(--color-primary); + border-top: solid 3px; + justify-content: center; + } + + .DWT { + margin-top: -9rem; + width: 95px; + + height: 100px; + filter: drop-shadow(2px 4px 6px black); + } + + /*list--footer*/ + .footer__liste { + + padding-bottom: 0em; + } + + .strip--3 { + display: none; + } + + a:hover { + color: #00fa6c; + font-weight: 700; + } + + a { + color: var(--color-active); + text-decoration: none; + } + + .list--header, + .list { + gap: 11vh; + } + + .strip--cash { + margin-top: -21em; + position: static; + margin-left: 34em; + } + + .discu__liste { + display: inline-flex; + gap: 1rem; + margin-bottom: 3rem; + } + + .title--medium { + font-size: 28px; + text-align: center; + } + + .equipe__liste { + display: flex; + } + + .equipe__txt { + margin-left: 2rem; + } + } \ No newline at end of file diff --git a/assets/images/20230206_083447.jpg b/assets/images/20230206_083447.jpg deleted file mode 100644 index bfec8c3..0000000 Binary files a/assets/images/20230206_083447.jpg and /dev/null differ diff --git a/assets/images/20230206_083448.jpg b/assets/images/20230206_083448.jpg deleted file mode 100644 index ba96d4d..0000000 Binary files a/assets/images/20230206_083448.jpg and /dev/null differ diff --git a/assets/images/20230206_083501.jpg b/assets/images/20230206_083501.jpg deleted file mode 100644 index b9a0d9d..0000000 Binary files a/assets/images/20230206_083501.jpg and /dev/null differ diff --git a/assets/images/amandine.png b/assets/images/amandine.png new file mode 100644 index 0000000..0858058 Binary files /dev/null and b/assets/images/amandine.png differ diff --git a/assets/images/backgroundv2.png b/assets/images/backgroundv2.png deleted file mode 100644 index c83d058..0000000 Binary files a/assets/images/backgroundv2.png and /dev/null differ diff --git a/assets/images/backgroundv3.png b/assets/images/backgroundv3.png deleted file mode 100644 index bf5640c..0000000 Binary files a/assets/images/backgroundv3.png and /dev/null differ diff --git a/assets/images/banceau.png b/assets/images/banceau.png new file mode 100644 index 0000000..9438779 Binary files /dev/null and b/assets/images/banceau.png differ diff --git a/assets/images/banceau@2x.png b/assets/images/banceau@2x.png new file mode 100644 index 0000000..3ef346c Binary files /dev/null and b/assets/images/banceau@2x.png differ diff --git a/assets/images/bancs.png b/assets/images/bancs.png new file mode 100644 index 0000000..b1bafb7 Binary files /dev/null and b/assets/images/bancs.png differ diff --git a/assets/images/bancs@2x.png b/assets/images/bancs@2x.png new file mode 100644 index 0000000..4347ba0 Binary files /dev/null and b/assets/images/bancs@2x.png differ diff --git a/assets/images/bancsv2.png b/assets/images/bancsv2.png new file mode 100644 index 0000000..4bfad90 Binary files /dev/null and b/assets/images/bancsv2.png differ diff --git a/assets/images/bancsv2@2x.png b/assets/images/bancsv2@2x.png new file mode 100644 index 0000000..73b1f7c Binary files /dev/null and b/assets/images/bancsv2@2x.png differ diff --git a/assets/images/bloopers.PNG b/assets/images/bloopers.PNG deleted file mode 100644 index 712076a..0000000 Binary files a/assets/images/bloopers.PNG and /dev/null differ diff --git a/assets/images/bloopersPNG.PNG b/assets/images/bloopersPNG.PNG new file mode 100644 index 0000000..fa7b28c Binary files /dev/null and b/assets/images/bloopersPNG.PNG differ diff --git a/assets/images/celia.png b/assets/images/celia.png new file mode 100644 index 0000000..442a634 Binary files /dev/null and b/assets/images/celia.png differ diff --git a/assets/images/dessin1.PNG b/assets/images/dessin1.PNG deleted file mode 100644 index b0ad5a6..0000000 Binary files a/assets/images/dessin1.PNG and /dev/null differ diff --git a/assets/images/interview1.PNG b/assets/images/interview1.PNG deleted file mode 100644 index efde93c..0000000 Binary files a/assets/images/interview1.PNG and /dev/null differ diff --git a/assets/images/jessy.png b/assets/images/jessy.png new file mode 100644 index 0000000..9282ec8 Binary files /dev/null and b/assets/images/jessy.png differ diff --git a/assets/images/justin.png b/assets/images/justin.png new file mode 100644 index 0000000..73dc724 Binary files /dev/null and b/assets/images/justin.png differ diff --git a/assets/images/patio.png b/assets/images/patio.png new file mode 100644 index 0000000..e356fe0 Binary files /dev/null and b/assets/images/patio.png differ diff --git a/assets/images/patio@2x.png b/assets/images/patio@2x.png new file mode 100644 index 0000000..9a08961 Binary files /dev/null and b/assets/images/patio@2x.png differ diff --git a/assets/images/photo1.jpg b/assets/images/photo1.jpg deleted file mode 100644 index 8b4b228..0000000 Binary files a/assets/images/photo1.jpg and /dev/null differ diff --git a/assets/images/photo2.jpg b/assets/images/photo2.jpg deleted file mode 100644 index 2673b2b..0000000 Binary files a/assets/images/photo2.jpg and /dev/null differ diff --git a/assets/images/photo3.jpeg b/assets/images/photo3.jpeg deleted file mode 100644 index 46f3c22..0000000 Binary files a/assets/images/photo3.jpeg and /dev/null differ diff --git a/assets/images/photo4.jpeg b/assets/images/photo4.jpeg deleted file mode 100644 index da795dc..0000000 Binary files a/assets/images/photo4.jpeg and /dev/null differ diff --git a/assets/images/photo5.jpeg b/assets/images/photo5.jpeg deleted file mode 100644 index db62dfe..0000000 Binary files a/assets/images/photo5.jpeg and /dev/null differ diff --git a/assets/images/photo6.jpeg b/assets/images/photo6.jpeg deleted file mode 100644 index bc22ff5..0000000 Binary files a/assets/images/photo6.jpeg and /dev/null differ diff --git a/assets/images/photo7.jpg b/assets/images/photo7.jpg deleted file mode 100644 index 04d3d2b..0000000 Binary files a/assets/images/photo7.jpg and /dev/null differ diff --git a/assets/images/pneu.png b/assets/images/pneu.png new file mode 100644 index 0000000..4802b3a Binary files /dev/null and b/assets/images/pneu.png differ diff --git a/assets/images/pneu@2x.png b/assets/images/pneu@2x.png new file mode 100644 index 0000000..538b448 Binary files /dev/null and b/assets/images/pneu@2x.png differ diff --git a/assets/images/scan.jpg b/assets/images/scan.jpg deleted file mode 100644 index 3d48fc1..0000000 Binary files a/assets/images/scan.jpg and /dev/null differ diff --git a/assets/images/scan0001.jpg b/assets/images/scan0001.jpg deleted file mode 100644 index d94d88d..0000000 Binary files a/assets/images/scan0001.jpg and /dev/null differ diff --git a/assets/images/scan0002.jpg b/assets/images/scan0002.jpg deleted file mode 100644 index 32411c2..0000000 Binary files a/assets/images/scan0002.jpg and /dev/null differ diff --git a/assets/images/scan0003.jpg b/assets/images/scan0003.jpg deleted file mode 100644 index 77dafbc..0000000 Binary files a/assets/images/scan0003.jpg and /dev/null differ diff --git a/assets/images/scan0004.jpg b/assets/images/scan0004.jpg deleted file mode 100644 index e44ce74..0000000 Binary files a/assets/images/scan0004.jpg and /dev/null differ diff --git a/assets/images/taboisret.png b/assets/images/taboisret.png new file mode 100644 index 0000000..e794c20 Binary files /dev/null and b/assets/images/taboisret.png differ diff --git a/assets/images/taboisret@2x.png b/assets/images/taboisret@2x.png new file mode 100644 index 0000000..715eacd Binary files /dev/null and b/assets/images/taboisret@2x.png differ diff --git a/assets/images/user1.png b/assets/images/user1.png index b6b3d55..05a6e1c 100644 Binary files a/assets/images/user1.png and b/assets/images/user1.png differ diff --git a/assets/images/user1@2x.png b/assets/images/user1@2x.png index 2e94107..b0e43ac 100644 Binary files a/assets/images/user1@2x.png and b/assets/images/user1@2x.png differ diff --git a/assets/images/user2.png b/assets/images/user2.png index 9cb5da4..bf47919 100644 Binary files a/assets/images/user2.png and b/assets/images/user2.png differ diff --git a/assets/images/user2@2x.png b/assets/images/user2@2x.png index 1c9dc3e..cedfae1 100644 Binary files a/assets/images/user2@2x.png and b/assets/images/user2@2x.png differ diff --git a/assets/images/user3.png b/assets/images/user3.png index e3409a9..b807c8c 100644 Binary files a/assets/images/user3.png and b/assets/images/user3.png differ diff --git a/assets/images/user3@2x.png b/assets/images/user3@2x.png index 02e53eb..8ec58ba 100644 Binary files a/assets/images/user3@2x.png and b/assets/images/user3@2x.png differ diff --git a/assets/js/app.js b/assets/js/app.js index c93ea33..dca9107 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -29,20 +29,6 @@ if(activeTheme !== null){ // permet de prendre en compte la dernière modification du theme. -// navigation - -let navButton = document.querySelector(".btn--burger") - -navButton.addEventListener("click", toggleNavigation) - -function toggleNavigation() { - if (!document.body.hasAttribute("data-menu")) { - document.body.setAttribute("data-menu", true); - - } else { - document.body.removeAttribute("data-menu"); - } -} //BURGER MENU // FERMER NAV QUAND ON CLIQUE SUR UN LIEN // diff --git a/index.html b/index.html index 964b9f9..77d4222 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -11,7 +11,7 @@ - + @@ -21,7 +21,7 @@ - + RUX Pina Vetrano — DWT — Heaj @@ -30,8 +30,6 @@ -
-
-
@@ -89,30 +50,36 @@ @@ -124,75 +91,54 @@
-
- -
- illustration portant les initiales de l'atelier Rethinking User Experience. RUX
-
+
-

Synopsis

-

L’atelier RUX (rethinking UX) +

0 Synopsis +

+

+ 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”

-

Le directeur de la Haute école +

Le + directeur de la Haute école Albert Jacquard nous à donner une mission !

-

Repenser notre cours de récré +

+ Repenser notre cours de récré

-

Notre budget est limité à 200k€ - +-

+

Notre + budget est limité à + 200k€  + +- 

-
+
plan de la cour de la Haute École Albert Jacquard + srcset="assets/images/plancour@2x.png 2x" + alt="plan de la cour de la Haute École Albert Jacquard schématisé" loading="lazy" decoding="async">
schéma illustré de la cour
-
+
plan de la cour de la Haute École Albert Jacquard + alt="plan de la cour de la Haute École Albert Jacquard, plan large" loading="lazy" decoding="async">
Photo prise de la cour "plan large"
-
-

Création de l'Équipe

+
+

1 Création + de l'Équipe

  • On choisit quel nom pour la Team ? (Célia)
  • @@ -204,15 +150,18 @@
-
-

Prémices

-

Et c’est à ce moment précis que l’on a mis la +

+

2 Prémices +

+

Et c’est à ce moment + précis que l’on a mis la première vitesse.

-

Notre +

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 !

-

+

La fusion d'un travail collaboratif, des travaux de recherches qui nous permettent d’aller découvrir le monde extérieur et nos utilisateurs et le travail pratique, ainsi que la partie @@ -222,37 +171,52 @@ faire plus élégant.

-
-

Prémices bis

-

La première étape à été d'observer la +

+

3 Prémices + bis

+

La première étape à été + d'observer la cour afin d'avoir un visuel plus globale sur la cour.

-

Une fois terminé, la classe qui était bavarde se retrouve tout de suite dans un silence le plus total. +

Une fois terminé, la + classe qui était bavarde se + retrouve tout de suite dans un silence le plus total. J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas été posées dans un ordre précis.

-

Le directeur, celui qui était censé répondre à nos questions, a +

Le directeur, celui qui + était censé répondre à + nos questions, a commencé à expliquer la situation. En faisant cela, il a transformé nos questions en réponses.

-

Voici les questions:

- Voici les questions: +

+
Aller sur Miro -

- Les questions ont été posées au directeur. Il nous a expliqué son point de vue, sa vision des choses. Il - avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment A, B - et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les gens se - parquent là.

-

+

+ Il nous a expliqué son point de vue, sa vision des choses. Il + avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment + A, B et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les + gens se + parquent à coté du préau.

+

Il imagine cela comme un Forum ( une zone de discussion). Où il y aurait la possibilité de manger, des lieux d’exposition, déco des murs, activités, zone de lecture. Distribution des diplômes. Lieu de concert. Boîte à livres.

-
-

Guide d'entretien

-

Alors pour cette étape, je suis partie du principe que je ne sais pas +

+

4 Guide + d'entretien

+

Alors pour cette étape, + je suis partie du + principe que je ne sais pas ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes camarades, il est important de comprendre les utilisateurs, leurs raisonnements comment ils utilisent la cour, leur temps libre.

-

Et pour cela, on prépare un guide d'entretien

-
+

Et pour cela, on + prépare un guide d'entretien

+
Voici le guide d'entretiens en entier:
  • Introduction :
  • @@ -297,7 +261,7 @@
-
+
Réponses généralisé:
  • Q : Que penses tu de l’HEAJ et de ses environnements ?
  • @@ -313,75 +277,90 @@
  • R : Des tables, du sport, de la verdure.
  • Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
  • -
  • R : oui principalement
  • +
  • R : Oui principalement
-
+
photo représentant une de nos interview
Une de nos plus belles interview
-
-

Top Task & fonctions

-

Le résultat de interviews ont démontré que ce qui revenait souvent était la +

+

5 Top Task + & fonctions

+

Le résultat de + interviews ont démontré que ce qui + revenait souvent était la volonté d’ajouter des verdures, ainsi qu’un espace pour travailler.

-

Suite à cela, on pouvait choisir quel +

Suite à cela, on + pouvait choisir quel Top task nous intéressait le plus parmis celle qu'on aurait voté.

-
+
photo représentant une de nos interview + alt="tableau comportant une colonne avec les différentes tâches et l'autre des votes que les élèves ont attribués." + loading="lazy" decoding="async">
On avait droit à 3 votes maximum.😇
-
-

Audits

-
-

J'ai beaucoup aimé la préparations de nos audits. C'est à +

+

6 Audits +

+
+

J'ai + beaucoup aimé la préparations + de nos audits. C'est à dire chercher un peu partout des idées venant des architectes, des passionés par de la récup pour créer des bancs, des - supports pour les plantes. Dans la partie 7, on y trouve mon croquis qui rentre en lien avec les images + supports pour les plantes. Dans la partie 7, on y trouve mon croquis qui + rentre en lien avec les images ci-dessus.

-
+
photo représentant une de nos interview + srcset="assets/images/plante@2x.png 2x" + alt="image de succulents accroché à des bouchons de liège." loading="lazy" decoding="async">
-
+
photo représentant une de nos interview
-
+
photo représentant une de nos interview
-
+
photo représentant une de nos interview
-
+
photo représentant une de nos interview
@@ -393,37 +372,159 @@
- +
-
-

User Journey

-

-

Les User journey, est utilisés pour les recherches et améliorations selon +

+

7 User + Journey

+

Les User journey, est utilisés pour les + recherches et améliorations selon un ou des problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le - projet.

+ projet. Slidez pour naviguer dans les différentes situations

    -
  • User journey réalisé User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape
  • -
  • User journey réalisé User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape
  • -
  • User journey réalisé User journey réalisé sous forme d'une image d'un personnage 3D et de tableau expliquant le déroulement de l'étape
-
-

Intégration

-
+
+

8 Croquis +

+

Les croquis sont là pour prévisualiser nos idées + à partir des informations que l'on a précieusement recueillies.

+

Cette partie qui suit le User Journey m'a permis + de prévisualiser mes idées. Il suffit de rassembler ce que j'ai obtenu pour créer proprement mes éléments + verts ainsi que un + endroit pour se restaurer lorsqu'il pleut ou qu'il fait beau. J'ai trouvé pas mal d'éléments récupérable + pour permettre de se soulager quant à la question du budget. Où du moins, comment les 200 000€  vont + être + distribué.

+

+ RUX est un puzzle dont on + assemble les pièces + chaque jour.

+
photo représentant une de nos interview + alt="photo représentant un plan de la cour avec des croquis coloré illustrant des idées." loading="lazy" + decoding="async"> +
+
+ Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres. +
→ Représentation 3D d'un banc formant un S dont la boucle entoure l'arbre. +
+
+
+ Illustration 3D d'un banc formant un S fait de bois pour la surface du dessus et de pierres et des tiges métalliques +
+

→ Le banc forme un S dont la boucle entoure + l'arbre. + Il est en bois pour la superficie du dessus, le reste pourrait des morceaux de pierres que l'on cellerait + avec des tiges métalliques, par exemple.

+
+ Illustration 3D d'une structure rectangulaire en brique. Un espace dans le rectangle contient de l'eau et de la verdure. Un espace pour deux personnes gère l'espace restant du rectangle. +
→ Le banc se trouve dans l'emplacement creux. À coté se trouve un + emplacement d'eau. +
+
+

Cette idée d'utiliser des briques apporte un coté + frais. Le petit espace rectangle remplis d'eau et de végétation est situer à coté du banc en bois qui + pourrait nous procurer une sensation de calme.

+
+ Illustration 3D d'un gros pneu utilisé pour être assis dessus.grid-end06 +
→ Un gros pneu posé au sol et que l'ont peut tirer. +
+
+
+ Illustration 3D d'un tabouret en rondin sur roulette. +
→ Tabouret contenant des roulettes +
+
+

Un couteau à bois, des vis des roulettes et le + plus beau rondin de bois suffit à créer un tabouret mobile !

+
+

9 + Intégration

+

Et c’est à ce moment précis que + l'on ralenti.

+

Je prends conscience des impasses qui se sont mis peu à peu sur mon chemin + en codant.

+

+ Tout d'abord il y a eu le burger menu. La navigation avait un fond bleu, et était placée de façon latérale, + sur le coté gauche du mobile. Mais en le testant sur le téléphone, je me suis + bien vite rendue compte que ça n'était pas facile d'accéder aux différents liens avec une main.

+

On navigue très peu souvent sur un smartphone en ayant celui-çi posé sur un + bureau. On ressent très vite le besoin de le maintenir en main pour avoir une libertée de controle. C'est + pourquoi elle se trouve en bas. J'ai fais en sorte que l'utilisateurs (et moi même lors des phases de + tests), puisse navigué librement et rapidement. De plus, je l'ai remontée pour qu'elle soit au-dessus des + menus principaux (comme le bouton "retour en arrière" et le bouton "Home") affichés sur les smartphones.

+

Finalement, cet atelier m'as appris à mieux gérer + ma méthode de travail. Je trouvais intéressant d'aller directement voir les utilisateurs en face à face pour + qu'ils me parlent d'eux, leurs vécus, leurs ressentis. J'aime beaucoup ces échanges sociaux et avec un + objectif derrière ça rend l'atelier plus divertissant. J'ai du m'adapter à pas mal de situation, mais je les + ai surmonté. Ensuite ces ajouts d'éléments 3D de la cour, je trouvais vraiment chouette de proposer quelques + prototypes basés sur toutes nos recherches.

+
+