bonjour a tous,
je ne suis pas sur de mon architecture html/css, alors si une ame généreuse pouvait regarder et me dire ce qu'il va pas, j'en serai ravi....car sait un devoir a rendre!
merci d'avance
je ne suis pas sur de mon architecture html/css, alors si une ame généreuse pouvait regarder et me dire ce qu'il va pas, j'en serai ravi....car sait un devoir a rendre!
<!doctype html>
<html lang="fr">
<head>
<!------------------------------balises-meta--------------------------------->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!-----------------------------styles-css------------------------------------>
<link rel="stylesheet" href="css/style.css" media="all">
<link rel="stylesheet" href="css/slide.css" media="all">
<link rel="stylesheet" href="css/example.css" media="all">
<link rel="stylesheet" href="css/font-awesome.min.css" media="all">
<!-----------------------------styles-font----------------------------------->
<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<!-----------------------------script---------------------------------->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<!-----------------------------title----------------------------------->
<title>Overlord</title>
</head>
<body>
<div id="wrapper">
<!---------------------------header------------------------------------>
<header>
<div id="logo">
<figure><img src="img/logo.png" width="270" height="150" alt="logo-overlord"></figure>
</div>
<ul class="horizontal-r">
<li><a href="#">CONTACT</a></li>
<li><a href="#">ARCHIVES</a></li>
<li><a href="#">ACCUEIL</a></li>
</ul>
</header>
<!--------------------------content------------------------------------->
<div id="content">
<section>
<div class="container">
<div id="slides">
<img src="img/AVION.jpg" alt="">
<img src="img/plage2.jpg" alt="">
<img src="img/ville.jpg" alt="">
</div>
</div>
</section>
<div class="clear"></div>
<section>
<article class="info p-news">
<figure>
<a href="#"><img width="220" height="120" alt="logo-overlord" src="img/yalta.jpg" /></a>
</figure>
<h1>La demande</h1>
<p><a href="#">Le premier ministre Winston churhil et les plus hautes autorité militaire planifient l'ouverture du second front, choisissant sa date, sa localisation ainsi que le nom de l'opération : elle se baptise "Overlord" et est initialement prévue le 14 juin 1944.</a></p>
</article>
<article class="info p-news">
<figure>
<a href="#"><img width="220" height="120" alt="logo-overlord" src="img/saut.jpg" /></a>
</figure>
<h1>Parrachutage</h1>
<p><a href="#">Un parrachutage de milliers d'hommes est prévu la nuit avant le débarquement pour détruires des cannons dissimulés en direction des plages et prendre d'assault deux ponts et les tenir jusqu'au matin du débarquement pour avoir du renforts.</a></p>
</article>
<article class="info p-news">
<figure>
<a href="#"><img width="220" height="120" alt="logo-overlord" src="img/plan3.jpg" /></a>
</figure>
<h1>Le plan</h1>
<p><a href="#">Après des recherches très longues et dangereuse pour faire les repèrrages (cartes, photographies, test de sable....), le choix c'est tourné sur la normandie pour plusieurs raisons (qualité du sable, plage très longues pour débarqué hommes et matèriels).</a></p>
</article>
<article class="info">
<figure>
<a href="#"><img width="220" height="120" alt="logo-overlord" src="img/logo.jpg" /></a>
</figure>
<h1>Débarquement</h1>
<p><a href="#">Les premières barges d'assault de la 1ere division américaine("la big red one")accompagné par le régiment de la 29ème division débarque sur la plage avec difficulté par tous les obstacles que rommel à ordonné de mettre en place.</a> </p>
</article>
</section>
<div class="clear"></div>
<section>
<article class="art-2 info-l">
<figure>
<img src="img/mulberry.jpg" width="300" height="160" alt="logo-overlord" />
</figure>
<h2>les ports flottants pour débarqué des plages, le matèriels et les hommes.</h2>
<p>Une question se pose sur le faite qu'apres le débarquement, comment alimenté la tête de pont, la solution fût trouver par le genie allié avec des plans élaborré par winston churchil pour construire un port artificiel flottant qui sera irrigé devant les plages.</p>
<p><a href="#">>>lire la suite</a></p>
</article>
<article class="art-2 info-l">
<figure>
<img src="img/chard.jpg" width="300" height="160" alt="logo-overlord" />
</figure>
<h2>La ménagerie de percy Hobbart.</h2>
<p>"Hobart Funnies" est l'expression consacrée pour désigner la collection d'engins utilitaires, parfois aussi de mort, qu'on traduit généralement par la "Ménagerie de Hobart", principalement aggrégée à la 79ème Division blindée britannique. </p>
<p><a href="#">>>lire la suite</a></p>
</article>
<article id="info-r">
<h2>Omaha beach</h2>
<p>Cette plage et aussi appelée "omaha blood"</p>
<div class="separation"></div>
<h2>Utah beach</h2>
<p>Le débarquement commença à 6h30 en mème temps que omaha beach.</p>
<div class="separation"></div>
<h2>Gold beach</h2>
<p>Le débarquement avait débuté à 7 h 35, une heure après le débarquement à Omaha Beach </p>
<div class="separation"></div>
<h2>Sword beach</h2>
<p>La plage s'étend sur 8Km de Ouistreham à st Aubin-sur-mer et qui est situé aux environ de Caen</p>
</article>
</section>
<section>
<article class="art-2-2 art-p-r">
<figure>
<a href="#"><img src="img/bombardier .jpg" width="460px" height="160px" alt="logo-overlord" /></a>
</figure>
<div class="legend">
<p>Bombardier de la royal air force.</p>
</div>
</article>
<article class="art-2-2">
<figure>
<a href="#"><img src="img/chasseur.jpg" width="460px" height="160px" alt="logo-overlord" /></a>
</figure>
<div class="legend">
<p>chasseurs de la royal air force</p>
</div>
</article>
</section>
</div>
<div class="clear"></div>
<!-------------------------footer--------------------------------------->
<footer>
<ul id="main-secondaire" class="p-dim">
<li><a href="">omaha</a></li>
<li><a href="">utha</a></li>
<li><a href="">sword</a></li>
<li><a href="">gold</a></li>
<li><a href="">pointe du hoc</a></li>
</ul>
<ul id="main-secondaire" class="p-dim">
<li><a href="">la demande</a></li>
<li><a href="">la conférence</a></li>
<li><a href="">la préparration</a></li>
<li><a href="">l'entrainement</a></li>
<li><a href="">le débarquement</a></li>
</ul>
<ul id="main-secondaire" class="p-dim">
<li><a href="">omaha</a></li>
<li><a href="">utha</a></li>
<li><a href="">sword</a></li>
<li><a href="">gold</a></li>
<li><a href="">pointe du hoc</a></li>
</ul>
<ul id="main-secondaire" class="p-dim">
<li><a href="">la demande</a></li>
<li><a href="">la conférence</a></li>
<li><a href="">la préparration</a></li>
<li><a href="">l'entrainement</a></li>
<li><a href="">le débarquement</a></li>
</ul>
<ul id="main-secondaire" class="p-dim">
<li><a href="">omaha</a></li>
<li><a href="">utha</a></li>
<li><a href="">sword</a></li>
<li><a href="">gold</a></li>
<li><a href="">pointe du hoc</a></li>
</ul>
<ul id="main-secondaire">
<li><a href="">la demande</a></li>
<li><a href="">la conférence</a></li>
<li><a href="">la préparration</a></li>
<li><a href="">l'entrainement</a></li>
<li><a href="">le débarquement</a></li>
</ul>
</footer>
</div>
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 340,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
</body>
</html> /*****************************reset*******************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/****************** HTML5 display-role reset for older browsers *************************/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************style********************************/
html body{
font-family: 'Philosopher', sans-serif;
margin: 0;
padding: 0;
border: 0;
color:#8b6c42;
font-size: 100%;
font: inherit;
vertical-align: baseline;
background:#e1ce9a none repeat scroll 0 0 ;
}
#wrapper{
width:960px;
min-height:900px;
margin:0 auto;
border:1px solid #8b6c42;
background:-moz-linear-gradient(#e1ce9a, #8b6c42) repeat scroll 0 0;
background:-webkit-linear-gradient(#e1ce9a, #8b6c42)repeat scroll 0 0;
background:-o-linear-gradient(#e1ce9a, #8b6c42)repeat scroll 0 0;
background:linear-gradient(#e1ce9a, #8b6c42)repeat scroll 0 0;
}
#content{
margin:0 10px;
}
h1, h2, h3{
color: #904818;
}
p{font-size:14px;}
img{float:left;}
/**********************************header****************************/
header{
height:300px;
margin-top:0;
margin-left:0;
/*border:1px solid #8b6c42;*/
}
header #logo figure img{
float:left;
margin-top:60px;
margin-left:30px;
}
header ul.horizontal-r{
height:60px;
clear:both;
padding:0;
margin-top:240px;
/*border:1px solid #8b6c42;*/
}
header ul.horizontal-r li{
float:right;
list-style:outside none none;
margin-right:20px;
}
header ul.horizontal-r li a{
text-decoration:none;
text-align:center;
color:#8b6c42;
font-size:14px;
font-weight:300;
display:block;
padding:10px;
margin-top:35px;
}
header ul.horizontal-r li a:hover{
color:#fff;
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
}
/************************************content-article-1**************************/
section{
width:940px;
min-height:340px;
padding-bottom:20px;
}
article.info{
width:220px;
float:left;
}
article.p-news{padding-right:20px;}
article.info figure img{
width:220px;
height:120px;
border:none;
vertical-align:middle;
}
article.info h1{
clear:both;
padding:10px 0;
}
article.info p{
text-align:left;
color:#e1ce9a;
}
article.info p a{
text-decoration:none;
color:#e1ce9a;
}
article.info p a:hover{
color:#fff;
}
/************************************content-article-2**************************/
.clear{clear:both;}
article.art-2{
width:700px;
float:left;
}
article.info-l{
padding:0 20px 0 0;
}
article.art-2 h2{
padding:3px 0;
}
article.art-2 figure img{
width:300px;
height:160px;
margin:0 20px 0 0;
}
article.art-2 p{
text-align:justify;
color:#e1ce9a;
}
article.art-2 p a{
color:#e1ce9a;
}
article.art-2 p a:hover{
color:#fff;
}
#info-r{
width:220px;
margin-top:-170px;
float:left;
}
#info-r p{
text-align:left;
margin-bottom:10px;
color:#e1ce9a;
}
#info-r div.separation{
border-top:1px dotted #8b6c42;
border-bottom:1px dotted #8b6c42;
padding:2px 0;
}
/************************************content-article-2-2**************************/
.clear{clear:both;}
article.art-2-2{
width:460px;
height:235px;
float:left;
}
article.art-p-r{
padding:0 20px 0 0;
}
article.art-2-2 figure img{
width:460px;
height:160px;
}
article.art-2-2 .legend{
width:460px;
height:75px;
float:left;
background:#904818 none repeat scroll 0 0;
color:#e1ce9a;
}
article.art-2-2 p{
margin-top:25px;
text-align:center;
color:#e1ce9a;
font-size:18px;
}
/************************************footer**************************/
.clear{clear:both;}
footer{
width:940px;
min-height:150px;
bottom:0;
margin:0 10px;
}
#main-secondaire{
width:140px;
text-align:center;
font-size:14px;
float:left;
}
#main-secondaire.p-dim{
padding-right:20px;
}
#main-secondaire li{
list-style:outside none none;
}
#main-secondaire li a{
color:#e1ce9a;
}
#main-secondaire li a:hover{
color:#fff;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}merci d'avance