250 lines
8.8 KiB
HTML
250 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>kosmopolit</title>
|
|
<base href="../" />
|
|
<meta name="description" content="description du site web">
|
|
<meta name="keywords" content="truc, bidule, chouette">
|
|
<!--
|
|
<link href="./styles/style.css" type="text/css" rel="stylesheet">
|
|
<link href="./styles/header.css" type="text/css" rel="stylesheet">
|
|
<link href="./styles/litterall.css" type="text/css" rel="stylesheet">
|
|
-->
|
|
<style>
|
|
/*general settings*/
|
|
body {
|
|
margin: 0px;
|
|
padding: 1%;
|
|
width: calc(98%);
|
|
}
|
|
.horizontal {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.horizontal > * {
|
|
margin: 20px;
|
|
}
|
|
.vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.vertical > * {
|
|
margin: 20px 0px;
|
|
}
|
|
|
|
/*GALLERY*/
|
|
/*
|
|
----- ---- --- ----
|
|
' '' '' '' '
|
|
' '' '' '' '
|
|
'-----''----''---''----'
|
|
---- --- --- ------
|
|
' '' '' '' '
|
|
' '' '' '' '
|
|
'----''---''---''------'
|
|
------ ---
|
|
' '' '
|
|
' '' '
|
|
'------''---'
|
|
|
|
|
|
-------------
|
|
' --------- '
|
|
' ' ' '
|
|
' ' ' '
|
|
' ' ' '
|
|
' --------- '
|
|
' ~ ~ ~~ '
|
|
' ~~ ~ ~~ '
|
|
-------------
|
|
|
|
-------- --------- ---------- ---------
|
|
' ------ '' ------- '' -------- '' ------- '
|
|
' ' ' '' ' ' '' ' ' '' ' ' '
|
|
' ' ' '' ' ' '' ' ' '' ' ' '
|
|
' ------ '' ------- '' -------- '' ------- '
|
|
' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ '
|
|
'--------''---------''----------''---------'
|
|
----------- -------
|
|
' --------- '' ----- '
|
|
' ' ' '' ' ' '
|
|
' ' ' '' ' ' '
|
|
' --------- '' ----- '
|
|
' ~~ ~~ '' ~~~ '
|
|
'-----------''-------'
|
|
|
|
|
|
-------- --------- ---------- ---------
|
|
' '' '' '' '
|
|
' '' '' '' '
|
|
' '' '' '' '
|
|
'--------''---------''----------''---------'
|
|
~~~ ~~ ~~~~ ~ ~~~ ~~ ~ ~~~ ~~ ~
|
|
----------- -------
|
|
' '' '
|
|
' '' '
|
|
' '' '
|
|
'-----------''-------'
|
|
~~~ ~ ~~ ~~~~
|
|
|
|
*/
|
|
.gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.gallery .card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
margin: 3px 6px 3px 0px;
|
|
border: 1px solid lightgrey;
|
|
}
|
|
.gallery .card > * {
|
|
margin: 5px;
|
|
}
|
|
.gallery .card img {
|
|
max-height: 200px;
|
|
border: 1px solid lightgrey;
|
|
}
|
|
.gallery .card p {
|
|
display: none;
|
|
}
|
|
.gallery::after {
|
|
content: "";
|
|
flex: 100;
|
|
}
|
|
|
|
/*settings specifics*/
|
|
main {
|
|
margin-left: 20px;
|
|
}
|
|
img#dernier_numero {
|
|
width: 240px;
|
|
max-width: 98vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- main
|
|
ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
|
|
ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
|
|
-->
|
|
<main class="vertical">
|
|
<!-- article
|
|
-->
|
|
<article class="vertical">
|
|
<h1>
|
|
texte de presentation
|
|
</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus. Praesent sit amet augue interdum, laoreet magna sit amet, dignissim eros. Sed nec enim condimentum, condimentum nunc sed, congue elit. Nullam tellus lorem, faucibus vitae eros in, ultricies luctus ligula. Aenean tristique, ante sed dictum faucibus, risus nisl pretium quam, quis consequat ipsum risus a lacus. Integer pulvinar, ex nec lacinia vulputate, est elit dictum risus, sit amet sollicitudin metus turpis nec odio. Morbi orci felis, sollicitudin eu enim id, sollicitudin viverra dolor. Ut vestibulum quis mauris vitae faucibus. Suspendisse ultricies diam est, sit amet tempor est tristique ac. Ut at posuere magna. Fusce ut bibendum elit. Pellentesque vulputate, leo ac bibendum suscipit, quam magna consectetur odio, hendrerit convallis elit eros ac leo. Suspendisse interdum libero id mi molestie sollicitudin. Praesent auctor quis lorem non cursus. Nullam sit amet semper turpis. Maecenas sed hendrerit erat.
|
|
</p>
|
|
<p>
|
|
Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
|
|
</p>
|
|
<div class="image_container">
|
|
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
|
|
</div>
|
|
<div class="gallery" id="tous_numeros">
|
|
<div class="card">
|
|
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/lion.jpg" alt="lion">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
|
|
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
|
|
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
|
|
</div>
|
|
<div class="card">
|
|
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
<div class="card">
|
|
<img id="last-child-img" src="./docs/revues/litt21.jpg" alt="revue litterall">
|
|
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|