Outils pour utilisateurs
design_slider
Différences
Ci-dessous, les différences entre deux révisions de la page.
|
design_slider [29/04/2019 16:07] ilyes0537 |
design_slider [21/08/2020 13:25] |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | Design slide | ||
| - | |||
| - | ====! Conception des Mockups avec inkscape ! ==== | ||
| - | |||
| - | ====1 - Mockup slide événement V1 (svg):==== | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | ====2 - Mockup slide article V1 (svg): | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | ====3 - Mockup image Actu-Agenda-radio (svg):==== | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | ====4 - Mockup image Avis-Agenda-palais-des-sports (svg) :==== | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | ====5 - Mockup image événement-concert (svg) :==== | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | ====6 - Mockup image Support-existant (svg) :==== | ||
| - | https:// | ||
| - | |||
| - | {{: | ||
| - | |||
| - | |||
| - | ==== ! Conception des Sliders en HTML et CSS ! ==== | ||
| - | |||
| - | ====Slider Evénement HTML - CSS==== | ||
| - | |||
| - | ====Code HTML==== | ||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <div class=" | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <p>Le Jeudi 18 avril 2019, Régie Plus, en partenariat avec Pluriel(le)s et les acteurs du quartier, propose aux | ||
| - | habitants du Sanitas de fêter la journée de la terre. | ||
| - | A cette occasion, toutes les personnes motivées et sensibles à la propreté du quartier sont invitées à rejoindre les équipes | ||
| - | de salariés de Régie Plus et à les accompagner dans leur travail quotidien : ramasser les papiers et les détritus jeter aux | ||
| - | pieds des immeubles. Cette action a pour but de sensibiliser au respect du cadre de vie et de montrer l' | ||
| - | effectuer par les salariés de Régie Plus, dont certains habitent aussi le quartier. La convivialité et le partage sont au | ||
| - | centre de ce rendez-vous ! | ||
| - | L' | ||
| - | quartier propre : jeux et bonne ambiance garantie ! | ||
| - | Rendez-vous à partir de 9h30 jardin Meffre (puis à 13h30). Pour ceux qui le désirent, le midi, possibilité de pique niquer | ||
| - | tous ensemble (chacun apporte son repas). | ||
| - | N' | ||
| - | </ | ||
| - | <div class=" | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | <img class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | | ||
| - | ====Code CSS==== | ||
| - | |||
| - | html{ | ||
| - | height: | ||
| - | } | ||
| - | body{ | ||
| - | min-height: | ||
| - | font-family: | ||
| - | } | ||
| - | header{ | ||
| - | height: 38px; | ||
| - | background: #e6332aff; | ||
| - | color:# | ||
| - | box-shadow: 1px 1px 5px 3px #666666ff; | ||
| - | } | ||
| - | header img{ | ||
| - | width: | ||
| - | height: | ||
| - | z-index: 1000; | ||
| - | position: absolute; | ||
| - | } | ||
| - | body { | ||
| - | background-image: | ||
| - | background-repeat: | ||
| - | background-position: | ||
| - | background-size: | ||
| - | font-size: 25px; | ||
| - | } | ||
| - | body::after { | ||
| - | content: ''; | ||
| - | display: block; | ||
| - | height: 50px; | ||
| - | } | ||
| - | footer { | ||
| - | background: #e6332aff; | ||
| - | color: #fff; | ||
| - | box-shadow: 1px 1px 5px 5px #666666ff; | ||
| - | z-index: 10000; | ||
| - | height: 48px; | ||
| - | width: 100%; | ||
| - | margin-top: 50%; | ||
| - | padding-bottom: | ||
| - | } | ||
| - | footer img { | ||
| - | width: 42%; | ||
| - | position: absolute; | ||
| - | right: 0; | ||
| - | z-index: 10; | ||
| - | bottom: 14px; | ||
| - | } | ||
| - | footer p{ | ||
| - | padding: 25px 0px 0px 5px; | ||
| - | font-size: 27px; | ||
| - | text-shadow: | ||
| - | margin-left: | ||
| - | } | ||
| - | footer a, footer a: | ||
| - | color:# | ||
| - | text-decoration: | ||
| - | } | ||
| - | article{ | ||
| - | margin: 3% 3% 3% 3%; | ||
| - | height: 41%; | ||
| - | position: absolute; | ||
| - | } | ||
| - | .container{ | ||
| - | display: flex; | ||
| - | width: 100%; | ||
| - | margin-top: 42vh; | ||
| - | transform: translateY(-50%); | ||
| - | z-index: 0; | ||
| - | margin-left: | ||
| - | padding-top: | ||
| - | } | ||
| - | .gauche, .droite{ | ||
| - | max-width: 50%; | ||
| - | width: | ||
| - | } | ||
| - | .gauche{ | ||
| - | background: #ffffff80; | ||
| - | opacity: 0.8; | ||
| - | border-radius: | ||
| - | padding: 20px; | ||
| - | text-align: justify; | ||
| - | line-height: | ||
| - | } | ||
| - | .droite img{ | ||
| - | max-height: 89%; | ||
| - | padding-left: | ||
| - | max-width: 67%; | ||
| - | } | ||
| - | .gauche h1{ | ||
| - | color:# | ||
| - | } | ||
| - | .gauche h2{ | ||
| - | padding: 18px; | ||
| - | } | ||
| - | .gauche h3{ | ||
| - | padding-bottom: | ||
| - | } | ||
| - | .date h1{ | ||
| - | color:# | ||
| - | } | ||
| - | h1{ | ||
| - | text-align: center; | ||
| - | font-size: 53px; | ||
| - | line-height: | ||
| - | font-weight: | ||
| - | margin-bottom: | ||
| - | } | ||
| - | | ||
| - | ====Slider Article HTML-CSS==== | ||
| - | |||
| - | ====Code HTML==== | ||
| - | |||
| - | < | ||
| - | <html lang=fr dir=ltr> | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <link rel=" | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <div class=" | ||
| - | <div class=" | ||
| - | < | ||
| - | <p>Le Jeudi 18 avril 2019, Régie Plus, en partenariat avec Pluriel(le)s et les acteurs du quartier, propose aux | ||
| - | habitants du Sanitas de fêter la journée de la terre. | ||
| - | A cette occasion, toutes les personnes motivées et sensibles à la propreté du quartier sont invitées à rejoindre les équipes de | ||
| - | salariés de Régie Plus et à les accompagner dans leur travail quotidien : ramasser les papiers et les détritus jeter aux pieds des | ||
| - | immeubles. Cette action a pour but de sensibiliser au respect du cadre de vie et de montrer l' | ||
| - | les salariés de Régie Plus, dont certains habitent aussi le quartier. La convivialité et le partage sont au centre de ce rendez- | ||
| - | vous ! | ||
| - | L' | ||
| - | quartier propre : jeux et bonne ambiance garantie ! | ||
| - | Rendez-vous à partir de 9h30 jardin Meffre (puis à 13h30). Pour ceux qui le désirent, le midi, possibilité de pique niquer tous | ||
| - | ensemble (chacun apporte son repas). | ||
| - | N' | ||
| - | </ | ||
| - | <div class=" | ||
| - | </ | ||
| - | </ | ||
| - | < | ||
| - | <img class=" | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | | ||
| - | ====Code CSS==== | ||
| - | |||
| - | |||
| - | |||
| - | html{ height: | ||
| - | body{ min-height: | ||
| - | header{ height: 38px; background: #58b344ff; color:# | ||
| - | header img{ width: | ||
| - | body {background-image: | ||
| - | size: 70%; | ||
| - | body::after {content: ''; | ||
| - | footer {background: | ||
| - | width: 100%; | ||
| - | margin-top: 50%; | ||
| - | padding-bottom: | ||
| - | footer img {width: 42%; | ||
| - | footer p{padding: 25px 0px 0px 5px; | ||
| - | footer a, footer a:hover{ color:#fff; text-decoration: | ||
| - | article{margin: | ||
| - | .container{ | ||
| - | | ||
| - | .gauche, .droite{ max-width: 50%; width:50%; } | ||
| - | .gauche{background: | ||
| - | .droite img{max-height: | ||
| - | .gauche h1{ color:# | ||
| - | .gauche h2{ padding: 18px; } | ||
| - | .date h1{ color:# | ||
| - | h1{ text-align: center; font-size: 53px; line-height: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
design_slider.txt · Dernière modification: 21/08/2020 13:25 (modification externe)
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
