@chrisdavidmills bonjour! je souhaite être évaluer pour “structurer une page de contenu” merci beaucoup Aller au contenu
Rechercher…
Tous les essentiels
Retour à GitHub
@Fenosoaliva
@Fenosoaliva
Fenosoaliva / bapwxyr.markdown
Crééil y a 2 heures
0
Code
Révisions
1
BaPWXYr
bapwxyr.markdown
BaPWXYr
Un stylo par Fenosoaliva sur CodePen .
Licence .
index.html
< html lang =" fr " >
< tête >
< jeu de caractères méta =" utf-8 " >
< title > Observation des oiseaux </ title >
< link href =" https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700 " rel =" feuille de style " >
<!--[si lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</ tête >
< corps >
< en-tête >
< h1 > Observation des oiseaux </ h1 >
< img src =" images/dove.png " alt =" un simple logo de colombe " >
< lien rel =" feuille de style " href =" style.css " >
</ en- tête >
< navigation >
< ul >
< li > < span > Accueil </ span > </ li >
< li > < a href =" # " > Démarrer </ a > </ li >
< li > < a href =" # " > Photos </ a > </ li >
< li > < a href =" # " > Équipement </ a > </ li >
< li > < a href =" # " > Forum </ a > </ li >
</ ul >
</ nav >
< principal >
< article >
< h2 > Bienvenue </ h2 >
< p > Bienvenue sur notre faux site d'observation d'oiseaux. S'il s'agissait d'un vrai site, ce serait l'endroit idéal pour en savoir plus sur l'observation des oiseaux, que vous soyez un débutant cherchant à apprendre à observer les oiseaux ou un expert souhaitant partager des idées, des conseils et des photos avec d'autres comme les gens d'esprit. </ p >
< p > Alors ne perdez pas de temps ! Obtenez ce dont vous avez besoin, puis éteignez cet ordinateur et sortez au grand air ! </ p >
</ article >
< à part >
< h2 > Photos favorites </ h2 >
< a href =" favorite-1.jpg " > < img src =" images/favorite-1_th.jpg " alt =" Petit oiseau noir, griffes noires, long bec fin noir, liens vers une version agrandie de l'image " > < / un >
< a href =" favorite-2.jpg " > < img src =" images/favorite-2_th.jpg " alt =" Moitié supérieure d'un joli oiseau au plumage bleu vif sur le cou, bec clair, coiffe bleue, liens vers version agrandie de l'image " > </ a >
< a href =" favorite-3.jpg " > < img src =" images/favorite-3_th.jpg " alt =" Moitié supérieure d'un grand oiseau au plumage blanc, très longue cassure incurvée étroite de couleur claire, liens vers une version agrandie de l'image " > </ a >
< a href =" favorite-4.jpg " > < img src =" images/favorite-4_th.jpg " alt =" Grand oiseau, plumage principalement blanc avec plumage noir sur le dos et l'arrière, long bec blanc droit, liens vers plus gros version de l'image " > </ a >
</ à part >
</ principal >
< pied de page >
< p > Cet exemple de faux site Web est CC0 — n’importe quelle partie de ce code peut être réutilisée comme bon vous semble. Exemple original écrit par Chris Mills, 2016. </ p >
< p > < a href =" http://game-icons.net/lorc/originals/dove.html " > Icône Colombe </ a > par Lorc. </ p >
</ pied de page >
</ corps >
</ html >
style.css
/* || Configuration générale */
html , corps {
marge : 0 ;
rembourrage : 0 ;
}
html {
taille de police : 10 px ;
couleur de fond : # a9a9a9 ;
}
corps {
largeur : 70 % ;
largeur min : 800 px ;
marge : 0 auto ;
}
/* || typographie */
h1 , h2 , h3 {
font-family : ‘Cinzel Decorative’ , cursive;
couleur : # 2a2a2a ;
}
p , entrée , li {
font-family: ‘Roboto Condensed’, sans-serif;
color: #2a2a2a;
}
h1 {
font-size: 4rem;
text-align: center;
text-shadow: 2px 2px 10px black;
}
h2 {
font-size: 3rem;
text-align: center;
}
h3 {
font-size: 2.2rem;
}
p, li {
font-size: 1.6rem;
line-height: 1.5;
}
/* || header layout */
header {
margin-bottom: 10px;
display: flex;
flex-flow: row wrap;
}
body > * {
background-color: red;
padding: 1%;
}
main, header, nav, article, aside, footer, section {
background-color: rgba(0,255,0,0.5);
padding: 1%;
}
h1 {
flex: 5;
text-transform: uppercase;
}
header img {
display: block;
height: 60px;
padding-top: 20.15px;
}
nav {
height: 50px;
flex: 100%;
display: flex;
}
nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}
nav li {
display: inline;
text-align: center;
flexible : 1 ;
}
nav a , nav span {
affichage : bloc en ligne ;
taille de police : 2 rem ;
hauteur : 3 rem ;
hauteur de ligne : 1.7 ;
text-transform : majuscule ;
texte-décoration : aucun ;
couleur : noir;
}
/* || mise en page principale */
principal {
affichage : flexible ;
}
article , rubrique {
flex : 4 ;
}
de côté {
flexible : 1 ;
marge-gauche : 10 px ;
rembourrage : 1 % ;
}
de côté un {
affichage : bloc ;
flotteur : gauche ;
largeur : 50 % ;
}
de côté img {
largeur max : 100 % ;
}
pied de page {
marge-haut : 10 px ;
}
@Fenosoaliva
Ajouter du texte d’en-têteAjouter du texte en gras, <Ctrl+b>Ajouter du texte en italique, <Ctrl+i>
Ajoutez une citation, <Ctrl+Maj+.>Ajouter du code, <Ctrl+e>Ajouter un lien, <Ctrl+k>
Ajouter une liste à puces, <Ctrl+Maj+8>Ajouter une liste numérotée, <Ctrl+Maj+7>Ajouter une liste de tâches, <Ctrl+Maj+l>
Mentionner directement un utilisateur ou une équipe
