Skip to content

Instantly share code, notes, and snippets.

@didosalah
Created August 6, 2013 14:49
Show Gist options
  • Select an option

  • Save didosalah/6165164 to your computer and use it in GitHub Desktop.

Select an option

Save didosalah/6165164 to your computer and use it in GitHub Desktop.
/
.clear{
clear: both;
}
body{
background: url(image1.png);
width: 800px;
margin: auto;
}
header {
margin-bottom: 10px;
}
header h1 {
font-size: 40px;
}
header nav {
background-color: #B28E6D;
border-radius: 15px;
height: 35px;
}
header nav ul li {
list-style-type: none;
display: inline;
margin-left: 15px;
line-height: 35px;
font-weight: bold;
}
header nav ul li a {
text-decoration: none;
color: white;
}
header nav ul li a:hover {
color: black;
}
/************************/
section {
width: 600px;
float: left;
}
section article{
background-color: #EEDCBE;
border: 5px solid #B28E6D;
border-radius: 15px;
margin-bottom: 10px
}
section article h3 {
background-color: #B28E6D;
padding-left: 10px;
}
section article p {
padding: 0px 5px;
text-align: justify;
}
aside {
background-color: #EEDCBE;
margin-left: 605px;
border: 5px solid #B28E6D ;
border-bottom-right-radius: 15px;
}
aside h3 {
background-color: #B28E6D;
text-align: center;
margin-top: 0px;
}
aside p {
padding: 0px 5px ;
text-align: justify;
}
aside ul li {
list-style-type: none;
background-color: #3B5998;
margin-left: -40px;
text-align: center;
margin-bottom: 3px;
}
aside ul li +li {
list-style-type: none;
background-color: #35BEEA;
margin-left: -40px;
text-align: center;
margin-bottom: 3px;
}
aside ul li a {
text-decoration: none;
color: white ;
font-weight: bold;
}
aside ul li a:hover {
color: black ;
}
footer {
background-color: #EEDCBE;
border: 5px solid #B28E6D;
text-align: center;
border-radius: 15px;
font-weight: bold;
}
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>DidoSalah.Com</h1>
<nav>
<ul>
<li><a href="">Accueil</a></li>
<li><a href="">Services</a></li>
<li><a href="">Partenaires</a></li>
<li><a href="">Contactez-Nous</a></li>
<li><a href="">DialectuTo.Com</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h3>Premier titre</h3>
<p>
Sous l'onglet Insertion, les galeries incluent des éléments conçus pour
être coordonnés avec l'aspect général de votre document. Vous pouvez
utiliser ces galeries pour insérer des tables, des en-têtes, des pieds
de page, des listes, des pages de garde et tout autre bloc de
construction d'un document. Lorsque vous créez des images, des
graphiques ou des diagrammes, ils sont également coordonnés avec
l'aspect de votre document actuel.
</p>
<p>
Vous pouvez facilement modifier la mise en forme du texte sélectionné
dans le document en choisissant une apparence pour celui-ci dans la
galerie Styles rapides sous l'onglet Écriture. Vous pouvez également
mettre en forme le texte directement en utilisant les autres contrôles
de l'onglet Écriture. La plupart des contrôles permettent d'utiliser le
thème actuel ou de définir une mise en forme directement.
</p>
</article>
<article>
<h3>Deuxième titre</h3>
<p>
Sous l'onglet Insertion, les galeries incluent des éléments conçus pour
être coordonnés avec l'aspect général de votre document. Vous pouvez
utiliser ces galeries pour insérer des tables, des en-têtes, des pieds
de page, des listes, des pages de garde et tout autre bloc de
construction d'un document. Lorsque vous créez des images, des
graphiques ou des diagrammes, ils sont également coordonnés avec
l'aspect de votre document actuel.
</p>
<p>
Vous pouvez facilement modifier la mise en forme du texte sélectionné
dans le document en choisissant une apparence pour celui-ci dans la
galerie Styles rapides sous l'onglet Écriture. Vous pouvez également
mettre en forme le texte directement en utilisant les autres contrôles
de l'onglet Écriture. La plupart des contrôles permettent d'utiliser le
thème actuel ou de définir une mise en forme directement.
</p>
</article>
</section>
<aside>
<h3>Editorial</h3>
<p>
Sous l'onglet Insertion, les galeries incluent des éléments conçus pour
être coordonnés avec l'aspect général de votre document. Vous pouvez
utiliser ces galeries pour insérer des tables, des en-têtes, des pieds
de page, des listes, des pages de garde et tout autre bloc de
construction d'un document.
</p>
<h3>Nous rejoindre sur</h3>
<ul>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li><a href="https://twitter.com/">Twitter</a></li>
</ul>
</aside>
<footer class="clear" >
-- DialecTuto.Com || Tutorial Html5-Css3 --
</footer>
</body>
</html>
// alert('Hello world!');
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment