Différences

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

--- design_slider [29/04/2019 15:53] – ilyes0537
+++ design_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 ! ====
-- Mockup slide événement V1 (svg):
+====1 - Mockup slide événement V1 (svg):====
 https://drive.google.com/open?id=1HYdokgZFo8rd55Z96109VI5mypmg2mXT
 {{:photos:projet-evenements.png?400|}}
-- Mockup slide article V1 (svg):
+====2 - Mockup slide article V1 (svg):====
 https://drive.google.com/drive/folders/104PG-PKbtvoBqA-PkSEZbclzO3SA2OqL
 {{:photos:mockup_article_sanitamtam.png?400|}}
-- Mockup image Actu-Agenda-radio (svg):
+====3 - Mockup image Actu-Agenda-radio (svg):====
 https://drive.google.com/open?id=1KMa9E7FtuOwH-t52LiNfUz1FoEQLSYKt
 {{:photos:actu-agenda-radio.png?400|}}
-- Mockup image Avis-Agenda-palais-des-sports (svg) :
+====4 - Mockup image Avis-Agenda-palais-des-sports (svg) :====
 https://drive.google.com/open?id=1r4G10icoLDobKnlpylHz08MlkDoBFzLc
 {{:photos:avis_agenda_-_palais_des_sports.png?400|}}
-- Mockup image événement-concert (svg) :
+====5 - Mockup image événement-concert (svg) :====
 https://drive.google.com/open?id=1wCIZy4YKqvNfHRe2LSDONur6kfUJCNfG
 {{:photos:evenement-concert.png?400|}}
-- Mockup image Support-existant (svg) :
+====6 - Mockup image Support-existant (svg) :====
 https://drive.google.com/open?id=18pxyZOavt9YYJRHKvQJqLGcg1Qm_Az5W
@@ Ligne 80: / Ligne 80: @@
 ====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====
@@ 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%;
   margin-top: 50%;
   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{
+  padding: 25px 0px 0px 5px;
-footer p{
+  font-size: 27px;
-    padding: 25px 0px 0px 5px;
+  text-shadow: 2px 2px 2px #000;
-    font-size: 27px;
+  margin-left: 10%;
-    text-shadow: 2px 2px 2px #000;
+  }
-    margin-left: 10%;
+  footer a, footer a:hover{
-}
+  color:#fff;
+  text-decoration: none;
-footer a, footer a:hover{ color:#fff; text-decoration: none; }
+  }
+  article{
-article{
+  margin: 3% 3% 3% 3%;
-    margin: 3% 3% 3% 3%;
+  height: 41%;
-    height: 41%;
+  position: absolute;
-    position: absolute;
+  }
-}
+  .container{
+  display: flex;
-.container{
+  width: 100%;
-    display: flex;
+  margin-top: 42vh;
-    /*border: 1px solid #000;*/
+  transform: translateY(-50%);
-    width: 100%;
+  z-index: 0;
-    margin-top: 42vh;
+  margin-left: 9vh;
-    transform: translateY(-50%);
+  padding-top: 6%;
-    z-index: 0;
+  }
-    margin-left: 9vh;
+  .gauche, .droite{
-    padding-top: 6%;
+  max-width: 50%;
-}
+  width:50%;
+  }
-.gauche, .droite{ max-width: 50%; width:50%; }
+  .gauche{
-.gauche{background: #ffffff80; opacity: 0.8; border-radius: 20px; padding: 20px; text-align: justify; line-height: 36px; }
+  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;
+  }
-.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;}
-/*.gauche p{ background: #ffffff80; opacity: 0.8; border-radius: 20px; padding: 20px; text-align: justify; line-height: 36px; }
-.date{ margin-top: 12%; }*/