Différences

Ci-dessous, les différences entre deux révisions de la page.

--- design_slider [29/04/2019 16:01]
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://drive.google.com/open?id=1HYdokgZFo8rd55Z96109VI5mypmg2mXT
-{{:photos:projet-evenements.png?400|}}
-====2 - Mockup slide article V1 (svg):====
-https://drive.google.com/drive/folders/104PG-PKbtvoBqA-PkSEZbclzO3SA2OqL
-{{:photos:mockup_article_sanitamtam.png?400|}}
-====3 - Mockup image Actu-Agenda-radio (svg):====
-https://drive.google.com/open?id=1KMa9E7FtuOwH-t52LiNfUz1FoEQLSYKt
-{{:photos:actu-agenda-radio.png?400|}}
-====4 - Mockup image Avis-Agenda-palais-des-sports (svg) :====
-https://drive.google.com/open?id=1r4G10icoLDobKnlpylHz08MlkDoBFzLc
-{{:photos:avis_agenda_-_palais_des_sports.png?400|}}
-====5 - Mockup image événement-concert (svg) :====
-https://drive.google.com/open?id=1wCIZy4YKqvNfHRe2LSDONur6kfUJCNfG
-{{:photos:evenement-concert.png?400|}}
-====6 - Mockup image Support-existant (svg) :====
-https://drive.google.com/open?id=18pxyZOavt9YYJRHKvQJqLGcg1Qm_Az5W
-{{:photos:support-existant.png?400|}}
-==== ! Conception des Sliders en HTML et CSS ! ====
-====Slider Evénement HTML - CSS====
-====Code HTML====
-     <!DOCTYPE html>
-     <html lang=fr dir=ltr>
-     <head>
-     <meta charset="UTF-8">
-     <link rel="stylesheet" href="css/styles.css">
-     <title>Slider</title>
-     </head>
-     <body>
-     <header><img src="./img/logo_sanitamtam.png" alt=""></header>
-     <article>
-       <div class="container">
-          <div class="gauche">
-              <h1>Journée de la terre au Sanitas.</h1>
-              <h2>Jeudi 18 avril 2019</h2>
-              <h3>13 place neuve - 37000 Tours.</h3>
-              <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'importance du travail
-      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'après midi, Pluriel(le)s et ses partenaires installent des stands et proposent des animations pour compléter cette action
-      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'oubliez pas vos gants et de porter des chaussures fermées.</p>
-          </div>
-          <div class="droite"><img src="./img/FB_IMG_1555080324040_0.jpg" alt="" /></div>
-      </div>
-  </article>
-  <footer>
-          <img class="bat" src="img/bat.png" alt="banner" />
-          <p>Pour plus de renseignements rendez-vous sur <a href="//www.sanitamtam.fr" title="">www.sanitamtam.fr</a></p>
-  </footer>
-  </body>
-  </html>
-====Code CSS====
-  html{ height:100%; }
-  body{ min-height:100%;  font-family: "sans-serif"; }
-  header{height: 38px;background: #e6332aff;color:#e6332aff;box-shadow: 1px 1px 5px 3px #666666ff;}
-  header img{width:300px;height:200px;z-index: 1000;position: absolute;}
-  body {background-image: url(../img/logo-background.png);background-repeat: no-repeat;background-position: 5% center;background-
-  size: 70%;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: 28px;}
-  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: 2px 2px 2px #000;margin-left: 10%;}
-  footer a, footer a:hover{ color:#fff; text-decoration: none; }
-  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: 9vh;padding-top: 6%;}
-  .gauche, .droite{ max-width: 50%; width:50%; }
-  .gauche{background: #ffffff80;opacity: 0.8;border-radius: 20px;padding: 20px;text-align: justify;line-height: 36px;}
-  .droite img{max-height: 89%;padding-left: 13vh;max-width: 67%;}
-  .gauche h1{ color:#e6332a; }
-  .gauche h2{ padding: 18px; }
-  .gauche h3{padding-bottom: 14px;}
-  .date h1{ color:#000000; }
-  h1{text-align: center;font-size: 53px;line-height: 35px;font-weight: 400;margin-bottom: 20px;}
-====Slider Article HTML-CSS====
-====Code HTML====
-  <!DOCTYPE html>
-  <html lang=fr dir=ltr>
-  <head>
-  <meta charset="UTF-8">
-  <link rel="stylesheet" href="css/styles.css">
-  <title>Slider</title>
-  </head>
-  <body>
-  <header><img src="./img/logo_sanitamtam.png" alt=""></header>
-  <article>
-    <div class="container">
-        <div class="gauche">
-            <h1>Lorem ipsum</h1>
-            <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'importance du travail 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'après midi, Pluriel(le)s et ses partenaires installent des stands et proposent des animations pour compléter cette action
-  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'oubliez pas vos gants et de porter des chaussures fermées.</p>
-        </div>
-        <div class="droite"><img src="./img/FB_IMG_1555080324040_0.jpg" alt="" /></div>
-    </div>
-  </article>
-  <footer>
-        <img class="bat" src="img/bat.png" alt="banner" />
-        <p>Pour plus de renseignements rendez-vous sur <a href="//www.sanitamtam.fr" title="">www.sanitamtam.fr</a></p>
-  </footer>
-  </body>
-  </html>
-====Code CSS====
-  html{ height:100%; }
-  body{ min-height:100%;  font-family: "sans-serif"; }
-  header{ height: 38px; background: #58b344ff; color:#e6332aff; box-shadow: 1px 1px 5px 3px #666666ff; }
-  header img{ width:300px; height:200px; z-index: 1000; position: absolute;}
-  body {background-image: url(../img/logo-background.png);background-repeat: no-repeat;background-position: 5% center;background-
-  size: 70%;font-size: 25px;}
-  body::after {content: '';display: block;height: 50px; /* Set same as footer's height */}
-  footer {background: #58b344ff;color: #fff;box-shadow: 1px 1px 5px 5px #666666ff;z-index: 10000;height: 48px;position: absolute;
-  width: 100%;
-  margin-top: 50%;
-  padding-bottom: 28px;}
-  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: 2px 2px 2px #000;margin-left: 10%;}
-  footer a, footer a:hover{ color:#fff; text-decoration: none; }
-  article{margin: 3% 3% 3% 3%;height: 41%;position: absolute;}
-  .container{    display: flex;/*border: 1px solid #000;*/ width: 100%; margin-top: 42vh; transform: translateY(-50%);z-index: 0;
-   margin-left: 9vh;padding-top: 6%;}
-  .gauche, .droite{ max-width: 50%; width:50%; }
-  .gauche{background: #ffffff80; opacity: 0.8; border-radius: 20px; padding: 20px; text-align: justify; line-height: 36px; }
-  .droite img{max-height: 89%;padding-left: 13vh;max-width: 67%;}
-  .gauche h1{ color:#e6332a; }
-  .gauche h2{ padding: 18px; }
-  .date h1{ color:#000000; }
-  h1{ text-align: center; font-size: 53px; line-height: 35px; font-weight: 400; margin-bottom: 20px;}

Savoirs communs

Outils pour utilisateurs

Outils du site

Différences

Outils de la page