avior/Blog_IMIE
1
0
Fork 0
mirror of https://github.com/Aviortheking/Blog_IMIE.git synced 2025-06-08 00:09:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

80% of the home page

Browse Source
This commit is contained in:
theomemin 2018-12-17 16:32:46 +01:00
parent 97c15c5468
commit e06bffb8b1
3 changed files with 177 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
project/assets/css/style.css
View File

@ -55,13 +55,15 @@ table {
body{ body{
margin: 0; margin: 0;
} }
.test{ .test{
height: 300vh; height: 300vh;
background-color: #eeeeee; background-color: #eeeeee;
} }
.test2{ .test2{
margin-top: 70px; margin: auto;
float: right; text-align: center;
margin-top: 100px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
.nav_imie{ .nav_imie{
@ -72,7 +74,6 @@ body{
.nav_blog{ .nav_blog{
height: 80px; height: 80px;
background-color: white; background-color: white;
} }
.item_nav_imie{ .item_nav_imie{
@ -110,19 +111,24 @@ body{
} }
.bloc_principal{ .bloc_principal{
width: 100%; width: 100%;
height: 440px; height: 500px;
margin-top: 100px; margin-top: 70px;
background: url("../img/img-home.jpg"); background: url("../img/img-home.jpg");
background-position: center; background-position: center;
background-size: cover; background-size: cover;
box-shadow: 1px 1px 30px 1px lightgrey; box-shadow: 1px 1px 30px 1px lightgrey;
} }
.cover-black{
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
.bloc_principal_titre{ .bloc_principal_titre{
text-align: center; text-align: center;
padding-top: 13px; padding-top: 13px;
width: 100%; width: 100%;
height: 50px; height: 50px;
background-color: #ffef2b; background-color: #fdee5a;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 22px; font-size: 22px;
} }
@ -136,16 +142,25 @@ body{
display: inline-block; display: inline-block;
float: left; float: left;
} }
.bloc-plus{
margin-top: 40px;
float: right;
width: 120px;
height: 25px;
background-color: #fdee5a;
}
.p-home { .p-home {
width: 500px;
padding-top: 20px; padding-top: 20px;
margin-right: 50px; margin-right: 50px;
color: grey; color: white;
line-height: 23px;
} }
.article-home{ .article-home{
width: 300px; width: 300px;
height: 300px; height: 300px;
background-color: white; background-color: white;
margin: 40px auto auto 20px; margin: 90px auto auto 0;
box-shadow: 1px 1px 30px 1px lightgrey; box-shadow: 1px 1px 30px 1px lightgrey;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
@ -157,14 +172,38 @@ body{
padding-top: 22px; padding-top: 22px;
padding-right: 10px; padding-right: 10px;
} }
.cat-home{ .cat-home-ops{
margin-top: 10px; margin-top: 10px;
height: 20px; height: 20px;
width: 50px; width: 50px;
background-color: #f2d761; background-color: #64bdea;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
} }
.cat-home-dev{
margin-top: 10px;
height: 20px;
width: 50px;
background-color: #f2d761;
text-align: center;
display: inline-block;
}
.cat-home-digi{
margin-top: 10px;
height: 20px;
width: 50px;
background-color: #6bb194;
text-align: center;
display: inline-block;
}
.cat-home-devops{
margin-top: 10px;
height: 20px;
width: 75px;
background-color: #9142b7;
text-align: center;
display: inline-block;
}
.cat-home-name{ .cat-home-name{
padding-top: 3px; padding-top: 3px;
color: white; color: white;
@ -185,17 +224,40 @@ body{
display: block; display: block;
} }
.p-home-article{ .p-home-article{
padding-top: 10px; padding-top: 20px;
color:#848484; color:#848484;
font-size: 15px;
line-height: 18px;
} }
.footer-article-home{ .footer-article-home-digi{
width:300px; width:300px;
height: 5px; height: 5px;
background-color: #f2d761; background-color: #6bb194;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
#titre-article-home{ .footer-article-home-dev{
width:300px;
height: 5px;
background-color: #f2d761;
position: absolute;
bottom: 0;
}
.footer-article-home-ops{
width:300px;
height: 5px;
background-color: #64bdea;
position: absolute;
bottom: 0;
}
.footer-article-home-devops{
width:300px;
height: 5px;
background-color: #9142b7;
position: absolute;
bottom: 0;
}
#titre-article-dev{
font-weight:bold; font-weight:bold;
} }
#twi{ #twi{
@ -221,7 +283,12 @@ body{
width: 20px; width: 20px;
margin-left: 8px; margin-left: 8px;
} }
#info-plus{
padding-top: 5px;
}
#titre-home{ #titre-home{
color: white;
padding-bottom: 20px; padding-bottom: 20px;
font-size: 20px; font-size: 20px;
} }

2
project/assets/html/includes/header.html
View File

@ -14,7 +14,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</ </div>
</div> </div>
</div> </div>
<nav class="nav_blog"> <nav class="nav_blog">

127
project/assets/html/index.html
View File

@ -11,24 +11,23 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="bloc_principal"> <div class="bloc_principal">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-homediv"> <div class="cover-black">
<div class="bloc_principal_titre"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-homediv">
<h1>L'actualité de nos campus...</h1> <div class="bloc_principal_titre">
</div> <h1>L'actualité de nos campus...</h1>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 test1"> </div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 test2"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 test2">
<h2 id="titre-home">Ceci est un magnifique titre</h2> <h2 id="titre-home">Ceci est un magnifique titre</h2>
<p class="p-home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <p class="p-home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p class="p-home">Vin reprehenderit <div class="bloc-plus" ><p id="info-plus">En savoir plus</p></div>
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div>
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -50,8 +49,8 @@
<div class="contenue-home"> <div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4> <h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes"> <div class="etiquettes">
<div class="cat-home"> <div class="cat-home-dev">
<p class="cat-home-name">OPS</p> <p class="cat-home-name">DEV</p>
</div> </div>
<div class="date-home"> <div class="date-home">
<p class="date-home-name">26-06-2018</p> <p class="date-home-name">26-06-2018</p>
@ -60,10 +59,9 @@
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, <p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
</div> </div>
<div class="footer-article-home"> <div class="footer-article-home-dev">
</div> </div>
</div> </div>
@ -73,8 +71,8 @@
<div class="contenue-home"> <div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4> <h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes"> <div class="etiquettes">
<div class="cat-home"> <div class="cat-home-digi">
<p class="cat-home-name">OPS</p> <p class="cat-home-name">DIGI</p>
</div> </div>
<div class="date-home"> <div class="date-home">
<p class="date-home-name">26-06-2018</p> <p class="date-home-name">26-06-2018</p>
@ -83,10 +81,9 @@
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, <p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
</div> </div>
<div class="footer-article-home"> <div class="footer-article-home-digi">
</div> </div>
</div> </div>
@ -96,7 +93,7 @@
<div class="contenue-home"> <div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4> <h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes"> <div class="etiquettes">
<div class="cat-home"> <div class="cat-home-ops">
<p class="cat-home-name">OPS</p> <p class="cat-home-name">OPS</p>
</div> </div>
<div class="date-home"> <div class="date-home">
@ -106,10 +103,76 @@
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, <p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
</div> </div>
<div class="footer-article-home"> <div class="footer-article-home-ops">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 articles-home">
<div class="article-home">
<div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes">
<div class="cat-home-ops">
<p class="cat-home-name">OPS</p>
</div>
<div class="date-home">
<p class="date-home-name">26-06-2018</p>
</div>
</div>
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
</div>
<div class="footer-article-home-ops">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 articles-home">
<div class="article-home">
<div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes">
<div class="cat-home-devops">
<p class="cat-home-name">DEVOPS</p>
</div>
<div class="date-home">
<p class="date-home-name">26-06-2018</p>
</div>
</div>
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
</div>
<div class="footer-article-home-devops">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 articles-home">
<div class="article-home">
<div class="contenue-home">
<h4 id="titre-article-home">Mettre en place un serveur web sous linux</h4>
<div class="etiquettes">
<div class="cat-home-ops">
<p class="cat-home-name">OPS</p>
</div>
<div class="date-home">
<p class="date-home-name">26-06-2018</p>
</div>
</div>
<p class="p-home-article">Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos,
et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius
post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
</div>
<div class="footer-article-home-ops">
</div> </div>
</div> </div>