Ci-dessous, les différences entre deux révisions de la page.
design_slider [29/04/2019 15:33] ilyes0537 |
design_slider [21/08/2020 13:25] |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | | ||
- | |||
- | ====! 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 | ||
- | |||
- | * { | ||
- | margin: 0; | ||
- | padding: 0; | ||
- | } | ||
- | html{ height: | ||
- | body{ min-height: | ||
- | 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; | ||
- | position: absolute; | ||
- | 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:hover{ color:#fff; 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:50%; } | ||
- | .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: | ||
- | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||