design_slider
Table des matières
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 de 127.0.0.1