Outils pour utilisateurs

Outils du site


design_slider
                                Design slide

! Conception des Mockups avec inkscape !

1 - Mockup slide événement V1 (svg):

2 - Mockup slide article V1 (svg):

3 - Mockup image Actu-Agenda-radio (svg):

4 - Mockup image Avis-Agenda-palais-des-sports (svg) :

5 - Mockup image événement-concert (svg) :

6 - Mockup image Support-existant (svg) :

! 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)