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édentesRévision précédente
Prochaine révision		Révision précédente
design_slider [29/04/2019 15:56] – ilyes0537design_slider [21/08/2020 13:25] (Version actuelle) – modification externe 127.0.0.1
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 80: Ligne 80:
 ====Code CSS==== ====Code CSS====
  
-  html{ height:100%; } +  html{  
-  body{ min-height:100%;  font-family: "sans-serif"; } +  height:100%;  
-  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{  
-  body {background-image: url(../img/logo-background.png);background-repeat: no-repeat;background-position: 5% center;background- +  min-height:100%;   
-  size: 70%;font-size: 25px;} +  font-family: "sans-serif";  
-  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:  +  header{ 
-  absolute;width: 100%;margin-top: 50%;padding-bottom: 28px;} +  height: 38px; 
-  footer img {width: 42%;position: absolute;right: 0;z-index: 10;bottom: 14px;} +  background: #e6332aff; 
-  footer p{padding: 25px 0px 0px 5px;font-size: 27px;text-shadow: 2px 2px 2px #000;margin-left: 10%;} +  color:#e6332aff; 
-  footer a, footer a:hover{ color:#fff; text-decoration: none; } +  box-shadow: 1px 1px 5px 3px #666666ff; 
-  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%;} +  header img{ 
-  .gauche, .droite{ max-width: 50%; width:50%; } +  width:300px; 
-  .gauche{background: #ffffff80;opacity: 0.8;border-radius: 20px;padding: 20px;text-align: justify;line-height: 36px;} +  height:200px; 
-  .droite img{max-height: 89%;padding-left: 13vh;max-width: 67%;}    +  z-index: 1000; 
-  .gauche h1{ color:#e6332a; } +  position: absolute; 
-  .gauche h2{ padding: 18px; } +  } 
-  .gauche h3{padding-bottom: 14px;} +  body { 
-  .date h1{ color:#000000; } +  background-image: url(../img/logo-background.png); 
-  h1{text-align: center;font-size: 53px;line-height: 35px;font-weight: 400;margin-bottom: 20px;}+  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==== ====Slider Article HTML-CSS====
Ligne 147: Ligne 233:
  
  
-  html{ height:100%; } +  html{  
-  body{ min-height:100%;  font-family: "sans-serif"; } +  height:100%;  
-  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{  
-  body {background-image: url(../img/logo-background.png);background-repeat: no-repeat;background-position: 5% center;background- +  min-height:100%;   
-  size: 70%;font-size: 25px;} +  font-family: "sans-serif";  
-  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;+  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%;   width: 100%;
   margin-top: 50%;   margin-top: 50%;
-  padding-bottom: 28px;} +  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 img { 
-  footer a, footer a:hover{ color:#fff; text-decoration: none; } +  width: 42%; 
-  article{margin: 3% 3% 3% 3%;height: 41%;position: absolute;} +  position: absolute; 
-  .container{    display: flex;/*border: 1px solid #000;*/ width: 100%; margin-top: 42vh; transform: translateY(-50%);z-index: 0; +  right: 0; 
-   margin-left: 9vh;padding-top: 6%;} +  z-index: 10; 
-  .gauche, .droite{ max-width: 50%; width:50%; } +  bottom: 14px; 
-  .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%;}  +  footer p{ 
-  .gauche h1{ color:#e6332a; } +  padding: 25px 0px 0px 5px; 
-  .gauche h2{ padding: 18px; } +  font-size: 27px; 
-  .date h1{ color:#000000; } +  text-shadow: 2px 2px 2px #000; 
-  h1{ text-align: center; font-size: 53px; line-height: 35px; font-weight: 400; margin-bottom: 20px;}+  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.1556546219.txt.gz · Dernière modification : 21/08/2020 13:22 (modification externe)