Untitled

<!DOCTYPE html>
<html>
<head>
<title>L'A-PROPOS_Accueil</title>
<meta charset="utf-8"/>
<style>
/*définition polices */

/* Eléments principaux de la page */

body{
background-color: #EAE9E8;
background-image: url("ressources/wallpaper_journaux_petits.jpg"); /* mettre une couleur plus foncée sur le background (genre #EAE9E8 ) + ne pas oublier de modifier l'image pour qu'elle domine tout l'écran et ne soit pas multipliée, sinon c'et moche*/
/* overflow-x: hidden; */
margin: 0px;
padding: 0px;
color: black;
font-family: Helvetica, Georgia;
}
/*
si l'on veut un menu qui ne prend pas toute la largeur, remmettre ce code

#bloc_page{
width: 1000px;
margin: auto;
/

}

/* En-tête*/

header{
width: 100%;
}

#titre{
display: inline-block;
width: 100%;
border-bottom: solid black 1px;

}

#titre h1{
text-align: center;
font-weight: bold;
margin: 0;
background-color: #A5A5A5;
font-size: 35px;
font-family: American Typewriter;
}


#titre h2{
font-family: Helvetica ;
font-style: italic;
text-align: center;
}
/* Citation Pindare

#pindare{
font-style: normal;
}
/


/* Menu*/
nav{
display: inline-block;
width: 100%;
min-width: 1800px;
background-color: #181b1d;
margin-bottom: 50px;


}

nav ul{
float: left;
position: relative;
left: 50%;
margin-left: -40px;


}

nav ul li{
float: left;
list-style-type: none;
position: relative;
left: -50%;

}


nav ul li a{
font-size: 18px;
text-align: center;
display: inline-block;
width: 180px;
color : #9B9B9B;
text-decoration: none;
background-color: #181b1d;
text-transform: uppercase;
padding-top: 10px;
height: 30px;

}
/* Changer le focus

nav ul li a:focus{

}
*/


nav ul li:hover .rubrique_possedant_sous_liens {
color: black;

}

nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;

}
nav li:hover ul li {
float:none;
}
nav ul li a:hover{
color: white;

}
nav li ul {
position:absolute;
}

.premier_sous-lien{
padding-top: 30px;
}

/* Les articles, le corps de la page quoi */

#corps{
background-color: white;
margin: auto;
width:70%;
min-width:800px;
margin: auto;
font-size: 18px;
overflow: hidden;
font-family: Georgia;
box-shadow: 2px 2px 20px black;

}


#main{
width: 800px;
margin: auto;
padding-top:30px;
text-align: justify;
font-size: 20px;
}
#main_image{
width: 800px;
height: 400px;
display: inline-block;
border-left: solid black 0px;
border-radius: 5px;
/*border-top: red solid 2px;*/
/*box-shadow: 10px -5px 30px grey;*/

}
#video{
margin: auto;
width: 1000px;
height: 500px;
display: inline-block;
border-left: solid black 0px;
border-radius: 5px;
}


.derniers_articles {

padding:1px;
margin: 15px;
float: left;
width: 28%;
position: relative;
border-radius: 8px;
text-align: justify;
height: 350px;
}
section a{
text-decoration: none;
color: black;
}
section img{
width: 100%;
display: inline-block;
/*box-shadow: 10px -5px 30px grey;*/
height: 250px;
border : solid black 0px;
border-radius: 5px;
border-bottom: black solid 4px;
}

section strong{
text-transform: uppercase;
color: purple;
}
.lire_la_suite{
display: none;
padding: 2px;
height: 15px;
background: url('ressources/fond_degraderouge.png') repeat-x;
border: 1px solid #760001;
border-radius: 4px;
color: white;
text-decoration: none;
position: relative;
top: 5px;
left: 10px;
}

section:hover .lire_la_suite{
display: inline;

}
section .nom_article{
text-transform: uppercase;
font-weight: bolder;
}


/*ici pour changer la couleur de la bordure du bas pour rubriques */

section #main_image{
border-bottom-color: red;
}

section #image2{
border-bottom-color: blue;
}
section #image3{
border-bottom-color: green;
}
section #image4{
border-bottom-color: grey;
}
section #image5{
border-bottom-color: purple;
}
section #image6{
border-bottom-color: maroon;
}
section #image7{
border-bottom-color: magenta;
}

/* Pied-de-page */

footer{
display: block;
background-color: #A5A5A5;
height: 180px;
width: 100%;
margin: auto;
text-align: center;
border-radius: 2px;
box-shadow: 2px 2px 20px black;
position: relative;
}
footer ul li{
list-style-type: none;
display: inline-block;
width: 60px;
}
footer .logo_social{
width: 40px;

}


</style>
</head>

<body>
<div id="bloc_page">

<!-- En-tête -->

<header>
<div id="titre">
<h1 >Mon super site</h1>


<!--
Cette ligne sera a rajouter si on veut mettre la citation
<h2>Saisir l'A-PROPOS est, en toute choses, le plus grand mérite. <span id="pindare"> Pindare </span></h2>
-->
</div>

<!-- Menu -->

<nav id="menu1">
<ul>
<li><a href="index.html">accueil</a></li>
<li><a href="news.html">(l')à-propos</a></li>
<li><a href="infos.html">grand angle</a></li>
<li><a href="politique.html">politique</a></li>
<li><a href="hitsoire.html" class="rubrique_possedant_sous_liens">histoire</a>
<ul>
<li><a href="histoire_antique.html" class="premier_sous-lien">antique</a></li>
<li><a href="histoire_contemporaine.html">contemporaine</a></li>
</ul>
</li>
<li><a href="culture.html" class="rubrique_possedant_sous_liens">culture</a>
<ul>
<li><a href="culture_musique.html" class="premier_sous-lien">musique</a></li>
<li><a href="culture_cinema.html">cinéma</a></li>
<li><a href="culture_series_tv.html">séries TV</a></li>
<li><a href="culture_jeux_videos.html">jeux vidéos</a></li>
</ul>
</li>
<li><a href="fable.html">fable</a></li>
</ul>

</nav>
</header>


<!-- Les articles -->

<div id="corps">

<!-- Attention dans cette partie on devra pouvoir changer les sujets faciement, cf code php je pense, il faudra modifier le code html, celui-ci n'étant que provisoire -->

<section id="main">
<a href="#">
<img id="main_image" src="ressources/image.jpg" alt="Mon Image3" >
<p><strong>Grand Angle.</strong><span class="nom_article"> Le site de MoA enfin ouvert !! </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque quis ultrices. Pellentesque accumsan ex vitae egestas tincidunt. Vestibulum nec commodo ex. Cras sed libero lorem<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>


<section id="article2"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image4.jpg" alt="image_article2" id="image2"><br/>
<p><strong>Cinéma.</strong><span class="nom_article"> Peter Pan, ce héros </span>Morbi sit amet aliquam semper blandit neque quis ultricesAliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article3"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image2.jpg" alt="image_article2" id="image3"><br/>
<p><strong>Musique.</strong><span class="nom_article"> La France en finale !! </span>Morbi sit amet sodales ligula. Aliquam neque quis ultrices. Aliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article4"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image3.jpg" alt="image_article2" id="image4"> <br/>
<p><strong>Fable.</strong><span class="nom_article"> Justin bieber en tournée </span>Morbi sit amet sodales blandit neque oliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article5"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image3.jpg" alt="image_article2" id="image5"><br/>
<p><strong> Histoire.</strong><span class="nom_article"> La vie </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque quis ultrices. Yamelo lio apetui<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article6"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image4.jpg" alt="image_article2" id="image6"><br/>
<p><strong>Jeux Vidéos.</strong><span class="nom_article"> L'appât du gain </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque emper blandit neque<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article7"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image2.jpg" alt="image_article2" id="image7"><br/>
<p><strong>Politique.</strong><span class="nom_article"> Révolution des kiwis </span>MorAliquam semper blandit neque quis egestas tincidunt<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
</div>

<!-- Pied-de-page -->

<footer>
<div id="footer">
<h1>L'A-PROPOS | Tous droits réservés</h1>
<h2>Suivez nous sur les réseaux sociaux !!</h2>
<ul>
<li><img src="ressources/logo_facebook_bruit.png" class="logo_social" alt="logo_facebook" title="L'APRPSfb"></li>
<li><img src="ressources/logo_twitter_bruit.png" class="logo_social" alt="logo_twitter" title="#L'APRPS"></li>
<li><img src="ressources/logo_snapchat_bruit.png" class="logo_social" alt="logo_snapchat" title="L'APRPSdesnap"></li>
<li><img src="ressources/logo_instagram_bruit.png" class="logo_social" alt="logo_instagram" title="L'APRPSinsta"></li>

</ul>

</div>
</footer>
</div>
</body>
</html>