mirror of
https://github.com/Aviortheking/Blog_IMIE.git
synced 2025-04-22 10:52:09 +00:00
80% of the home page
This commit is contained in:
theomemin
parent
97c15c5468
commit
e06bffb8b1
@ -55,13 +55,15 @@ table {
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.test{
|
||||
height: 300vh;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.test2{
|
||||
margin-top: 70px;
|
||||
float: right;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 100px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.nav_imie{
|
||||
@ -72,7 +74,6 @@ body{
|
||||
.nav_blog{
|
||||
height: 80px;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.item_nav_imie{
|
||||
@ -110,19 +111,24 @@ body{
|
||||
}
|
||||
.bloc_principal{
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
margin-top: 100px;
|
||||
height: 500px;
|
||||
margin-top: 70px;
|
||||
background: url("../img/img-home.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 1px 1px 30px 1px lightgrey;
|
||||
}
|
||||
.cover-black{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
.bloc_principal_titre{
|
||||
text-align: center;
|
||||
padding-top: 13px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #ffef2b;
|
||||
background-color: #fdee5a;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 22px;
|
||||
}
|
||||
@ -136,16 +142,25 @@ body{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.bloc-plus{
|
||||
margin-top: 40px;
|
||||
float: right;
|
||||
width: 120px;
|
||||
height: 25px;
|
||||
background-color: #fdee5a;
|
||||
}
|
||||
.p-home {
|
||||
width: 500px;
|
||||
padding-top: 20px;
|
||||
margin-right: 50px;
|
||||
color: grey;
|
||||
color: white;
|
||||
line-height: 23px;
|
||||
}
|
||||
.article-home{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: white;
|
||||
margin: 40px auto auto 20px;
|
||||
margin: 90px auto auto 0;
|
||||
box-shadow: 1px 1px 30px 1px lightgrey;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
@ -157,14 +172,38 @@ body{
|
||||
padding-top: 22px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.cat-home{
|
||||
.cat-home-ops{
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
background-color: #f2d761;
|
||||
background-color: #64bdea;
|
||||
text-align: center;
|
||||
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{
|
||||
padding-top: 3px;
|
||||
color: white;
|
||||
@ -185,17 +224,40 @@ body{
|
||||
display: block;
|
||||
}
|
||||
.p-home-article{
|
||||
padding-top: 10px;
|
||||
padding-top: 20px;
|
||||
color:#848484;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.footer-article-home{
|
||||
.footer-article-home-digi{
|
||||
width:300px;
|
||||
height: 5px;
|
||||
background-color: #f2d761;
|
||||
background-color: #6bb194;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
#twi{
|
||||
@ -221,7 +283,12 @@ body{
|
||||
width: 20px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
#info-plus{
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#titre-home{
|
||||
color: white;
|
||||
padding-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav_blog">
|
||||
|
||||
@ -11,24 +11,23 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div class="bloc_principal">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-homediv">
|
||||
<div class="bloc_principal_titre">
|
||||
<h1>L'actualité de nos campus...</h1>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 test1">
|
||||
<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>
|
||||
<p class="p-home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
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
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
|
||||
<p class="p-home">Vin reprehenderit
|
||||
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>
|
||||
</div>
|
||||
<div class="bloc_principal">
|
||||
<div class="cover-black">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 content-homediv">
|
||||
<div class="bloc_principal_titre">
|
||||
<h1>L'actualité de nos campus...</h1>
|
||||
</div>
|
||||
<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>
|
||||
<p class="p-home">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
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
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
|
||||
<div class="bloc-plus" ><p id="info-plus">En savoir plus</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,8 +49,8 @@
|
||||
<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">
|
||||
<p class="cat-home-name">OPS</p>
|
||||
<div class="cat-home-dev">
|
||||
<p class="cat-home-name">DEV</p>
|
||||
</div>
|
||||
<div class="date-home">
|
||||
<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,
|
||||
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!
|
||||
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
|
||||
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
|
||||
</div>
|
||||
<div class="footer-article-home">
|
||||
<div class="footer-article-home-dev">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -73,8 +71,8 @@
|
||||
<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">
|
||||
<p class="cat-home-name">OPS</p>
|
||||
<div class="cat-home-digi">
|
||||
<p class="cat-home-name">DIGI</p>
|
||||
</div>
|
||||
<div class="date-home">
|
||||
<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,
|
||||
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!
|
||||
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
|
||||
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
|
||||
</div>
|
||||
<div class="footer-article-home">
|
||||
<div class="footer-article-home-digi">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -96,7 +93,7 @@
|
||||
<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">
|
||||
<div class="cat-home-ops">
|
||||
<p class="cat-home-name">OPS</p>
|
||||
</div>
|
||||
<div class="date-home">
|
||||
@ -106,10 +103,76 @@
|
||||
<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!
|
||||
ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.</p>
|
||||
minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium!</p>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user