Savoirs communs

Outils pour utilisateurs

Outils du site

Piste:
design_slider

Différences

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

Lien vers cette vue comparative

design_slider [29/04/2019 16:12]
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; 
-  } 
-  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; 
-  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; 
-  } 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
  
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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki