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

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
design_slider [29/04/2019 15:33]
ilyes0537 		design_slider [21/08/2020 13:25] (Version actuelle)
Ligne 1: Ligne 1:
-                                               Design slide+                                  Design slide
  
 ====! Conception des Mockups avec inkscape ! ==== ====! Conception des Mockups avec inkscape ! ====
  
-1 - Mockup slide événement V1 (svg): +====1 - Mockup slide événement V1 (svg):====
 https://drive.google.com/open?id=1HYdokgZFo8rd55Z96109VI5mypmg2mXT https://drive.google.com/open?id=1HYdokgZFo8rd55Z96109VI5mypmg2mXT
  
 {{:photos:projet-evenements.png?400|}} {{:photos:projet-evenements.png?400|}}
  
-2 - Mockup slide article V1 (svg): +====2 - Mockup slide article V1 (svg):==== 
 https://drive.google.com/drive/folders/104PG-PKbtvoBqA-PkSEZbclzO3SA2OqL https://drive.google.com/drive/folders/104PG-PKbtvoBqA-PkSEZbclzO3SA2OqL
  
 {{:photos:mockup_article_sanitamtam.png?400|}} {{:photos:mockup_article_sanitamtam.png?400|}}
  
-3 - Mockup image Actu-Agenda-radio (svg):+====3 - Mockup image Actu-Agenda-radio (svg):====
 https://drive.google.com/open?id=1KMa9E7FtuOwH-t52LiNfUz1FoEQLSYKt https://drive.google.com/open?id=1KMa9E7FtuOwH-t52LiNfUz1FoEQLSYKt
  
 {{:photos:actu-agenda-radio.png?400|}} {{:photos:actu-agenda-radio.png?400|}}
  
-4 - Mockup image Avis-Agenda-palais-des-sports (svg) : +====4 - Mockup image Avis-Agenda-palais-des-sports (svg) :==== 
 https://drive.google.com/open?id=1r4G10icoLDobKnlpylHz08MlkDoBFzLc https://drive.google.com/open?id=1r4G10icoLDobKnlpylHz08MlkDoBFzLc
  
 {{:photos:avis_agenda_-_palais_des_sports.png?400|}} {{:photos:avis_agenda_-_palais_des_sports.png?400|}}
  
-5 - Mockup image événement-concert (svg) :+====5 - Mockup image événement-concert (svg) :====
 https://drive.google.com/open?id=1wCIZy4YKqvNfHRe2LSDONur6kfUJCNfG https://drive.google.com/open?id=1wCIZy4YKqvNfHRe2LSDONur6kfUJCNfG
  
 {{:photos:evenement-concert.png?400|}} {{:photos:evenement-concert.png?400|}}
  
-6 - Mockup image Support-existant (svg) : +====6 - Mockup image Support-existant (svg) :==== 
 https://drive.google.com/open?id=18pxyZOavt9YYJRHKvQJqLGcg1Qm_Az5W https://drive.google.com/open?id=18pxyZOavt9YYJRHKvQJqLGcg1Qm_Az5W
  
Ligne 36: Ligne 36:
 ==== ! Conception des Sliders en HTML et CSS ! ==== ==== ! Conception des Sliders en HTML et CSS ! ====
  
-Slider Evénement HTML - CSS+====Slider Evénement HTML - CSS====
  
-Code HTML+====Code HTML====
  
      <!DOCTYPE html>      <!DOCTYPE html>
Ligne 78: Ligne 78:
   </html>     </html>  
      
-Code CSS+====Code CSS====
  
-* { +  html{  
-  margin: 0; +  height:100%;  
-  padding: 0; +  } 
-} +  body{  
-html{ height:100%; } +  min-height:100%;   
-body{ min-height:100%;  font-family: "sans-serif"; } +  font-family: "sans-serif";  
-header{ +  } 
-    height: 38px; +  header{ 
-    background: #e6332aff; +  height: 38px; 
-    color:#e6332aff; +  background: #e6332aff; 
-    box-shadow: 1px 1px 5px 3px #666666ff; +  color:#e6332aff; 
-} +  box-shadow: 1px 1px 5px 3px #666666ff; 
-header img{ +  } 
-    width:300px; +  header img{ 
-    height:200px; +  width:300px; 
-    z-index: 1000; +  height:200px; 
-    position: absolute; +  z-index: 1000; 
-} +  position: absolute; 
-body {+  } 
 +  body {
   background-image: url(../img/logo-background.png);   background-image: url(../img/logo-background.png);
   background-repeat: no-repeat;   background-repeat: no-repeat;
Ligne 104: Ligne 105:
   background-size: 70%;   background-size: 70%;
   font-size: 25px;   font-size: 25px;
-} +  } 
-body::after {+  body::after {
   content: '';   content: '';
   display: block;   display: block;
   height: 50px;   height: 50px;
-} +  } 
-footer {+  footer {
   background: #e6332aff;   background: #e6332aff;
-    color: #fff; +  color: #fff; 
-    box-shadow: 1px 1px 5px 5px #666666ff; +  box-shadow: 1px 1px 5px 5px #666666ff; 
-    z-index: 10000; +  z-index: 10000; 
-    height: 48px; +  height: 48px;position:absolute; 
-    position: absolute; +  width: 100%; 
-    width: 100%; +  margin-top: 50%; 
-    margin-top: 50%; +  padding-bottom: 28px; 
-    padding-bottom: 28px; +  } 
-} +  footer img { 
-footer img { +  width: 42%; 
-    width: 42%; +  position: absolute; 
-    position: absolute; +  right: 0; 
-    right: 0; +  z-index: 10; 
-    z-index: 10; +  bottom: 14px; 
-    bottom: 14px; +  } 
-} +  footer p{ 
-footer p{ +  padding: 25px 0px 0px 5px; 
-    padding: 25px 0px 0px 5px; +  font-size: 27px; 
-    font-size: 27px; +  text-shadow: 2px 2px 2px #000; 
-    text-shadow: 2px 2px 2px #000; +  margin-left: 10%; 
-    margin-left: 10%; +  } 
-} +  footer a, footer a:hover{  
-footer a, footer a:hover{ color:#fff; text-decoration: none; }+  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; 
 +  } 
 + 
 + 
 + 
  
-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; 
-} 
  
  
design_slider.1556544820.txt.gz · Dernière modification: 21/08/2020 13:22 (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