Nous avons pas encore héberger les forums. Mais je peux te passer le code HTML5 de ma page d'accueil et le CSS3 de cette dernière.
HTML5
Code:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="Feuille de style/style_accueil.css" />
<title>Forum de Philippe</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="mindstrom">
<a href="Accueil.html"><img src="http://i40.servimg.com/u/f40/17/00/30/76/mindst10.jpg" alt="Logo de mindstrom" id="logo" /></a>
</div>
<nav>
<ul>
<li><a href="Accueil.html">ACCUEIL</a></li>
<li><a href="Rapport_robot.html">RAPPORT ROBOT</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</nav>
</header>
<hr>
<hr>
<div id="banniere_image">
<img src="http://i40.servimg.com/u/f40/17/00/30/76/bannia14.jpg" alt="forum de philippe pinet" />
</div>
<section>
<article>
<h1>Mon premier forum !</h1>
<p>C'est mon premier site. J'espère que celà vous conviendra. Donc comme je le dis ci-contre, je suis un 4ème secondaire en informatique.
<br />
<br />
Ce forum a pour but de me faire travailler en HTML5 et en CSS3 avant tout. Mais c'est aussi ici là que je placerai mes rapports en robotique (Mindstrom, robot lego.) dans la partie "Rapport Robot". Vous pourrez aussi me contacter en cliquant dans la barre de navigation sur "Contact".</p>
<h3>Projet actuel pour le robot</h3>
<p>Aucun</p>
<h3> Mon dernier rapport posté :</h3>
<p>Aucun</p>
<p>le xx/xx/xx</p>
</article>
<aside>
<h1>À propos de l'auteur</h1>
<p id="photo_philippe"><img src="http://i40.servimg.com/u/f40/17/00/30/76/moi10.jpg" alt="image de philippe pinet" /></p>
<p>Bonjour à vous ! Je me présente : Philippe Pinet. Je suis en 4 TTp à l'Institue Don Bosco Wolume Saint Pierre, Avenue du Val d'Or 90 D.</p>
</aside>
</section>
<br />
<footer>
<div id="mes_photos">
<h1>Mes photos</h1>
<table>
<tr>
<td><img src="http://i40.servimg.com/u/f40/17/00/30/76/icone110.jpg" alt="Photographie" /></td>
<td><img src="http://i40.servimg.com/u/f40/17/00/30/76/icone110.jpg" alt="Photographie" /></td>
<td><img src="http://i40.servimg.com/u/f40/17/00/30/76/icone110.jpg" alt="Photographie" /></td>
<td><img src="http://i40.servimg.com/u/f40/17/00/30/76/icone110.jpg" alt="Photographie" /></td>
</tr>
</table>
</div>
<div id="mes_rapports">
<h1>Mes rapports</h1>
<ul>
<li><a href="Suivre_une_ligne_noire.html">Suivre une ligne noire</a></li>
<li><a href="#">Rapport 2</a></li>
<li><a href="#">Rapport 3</a></li>
<li><a href="#">Rapport 4</a></li>
</ul>
<ul>
<li><a href="#">Rapport 5</a></li>
<li><a href="#">Rapport 6</a></li>
<li><a href="#">Rapport 7</a></li>
<li><a href="#">Rapport 8</a></li>
</ul>
</div>
<hr>
<p class="copyright">Copyright Philippe - Tous droits réservés</p>
</footer>
</div>
</body>
</html>
CSS3
Code:
html
{
text-align:
}
/* Header */
header
{
background: url('images/separateur.png') repeat-x bottom;
}
#mindstrom
{
display: inline-block;
}
/* Navigation */
nav
{
display: inline-block;
width: 740px;
text-align: right;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 30px;
}
nav a
{
font-size: 30px;
color: Black;
padding-bottom: 3px;
text-decoration: none;
}
nav a:hover
{
color: DarkRed;
border-bottom: 3px solid DarkRed;
}
nav a:visited
{
font-size: 30px;
color: Black;
padding-bottom: 3px;
text-decoration: none;
}
/* Bannière */
#banniere_image
{
margin-top: 30px;
height: 170px;
width: 1150px;
border-radius: 5px;
background: no-repeat;
text-align: center;
box-shadow: 4px 4px 4px 4px black;
margin-bottom: 15px;
padding: 10px
}
/* Corps */
body
{
background-color: White;
padding-left: 30px;
padding-right: 30px;
margin: 0px;
}
article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
article
{
width: 625px;
margin-right: 200px;
margin-left: 100px
}
article p
{
font-size: 15px;
}
aside
{
position: relative;
width: 235px;
background-color: DimGray;
box-shadow: 0px 2px 5px black;
border-radius: 5px;
padding: 10px;
color: white;
font-size:15px;
}
#photo_philippe
{
text-align: center;
}
#photo_philippe img
{
border: 1px solid black;
}
aside img
{
margin-right: 5px;
}
/* Footer */
footer
{
padding-top: 25px;
}
footer p, footer ul
{
font-size: 15px;
}
footer h1
{
font-size: 16px;
}
#mes_photos, #mes_rapports
{
display: inline-block;
vertical-align: top;
}
#mes_photos
{
width: 35%;
}
#mes_rapports
{
width: 31%;
padding-left: 300px;
}
#mes_photos img
{
border: 1px solid black;
margin-right: 2px;
}
#mes_rapports ul
{
display: inline-block;
vertical-align: top;
margin-top: 0px;
width: 48%;
list-style-image: ;
padding-left: 2px;
}
#mes_rapports a
{
text-decoration: none;
color: Maroon;
}
.copyright
{
font-style: italic;
font-size: 10px;
color: green;
text-align: right;
}
J'imagine que tu sais comment faire à partir de là ^^.
Pour ta deuxième question : Je serais prêt à aider pour le thème mais c'est vrai que je n'ai jamais fait de forum aussi complexe que ça mais j'ai quelque connaissance avec GIMP, en HTML5 et en CSS3. Donc si tu me dis quoi faire en détail, je veux bien t'aider.
Comme dit sur ma candidature, je suis plus là comme une aide pas comme développeur à plein temps ^^. Mais je suis prêt à aider en effet.
