ajout des deux autres pages vides et mise en page rudimentaire de l'accueil
This commit is contained in:
hugogogo
53
index.html
53
index.html
@@ -7,13 +7,62 @@
|
||||
<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/index.css" type="text/css" rel="stylesheet">
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
}
|
||||
#all_container {
|
||||
width: 550px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
#for_txt {
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#for_img {
|
||||
}
|
||||
#for_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
#for_links > * {
|
||||
margin: auto;
|
||||
}
|
||||
#for_links > :first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
#for_links > :last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
#for_links #kosmopolit a {
|
||||
color: #ee1998;
|
||||
}
|
||||
#for_links #litterall a {
|
||||
color: #8fce3c;
|
||||
}
|
||||
#for_links #lea a {
|
||||
color: #0c9cb5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="index">
|
||||
<img src="./docs/kosmopolit_logo.png">
|
||||
<div id="all_container">
|
||||
<div id="for_txt">
|
||||
<img src="./docs/kosmopolit_logo.png" alt="logo kosmopolit">
|
||||
</div>
|
||||
<div id="for_img">
|
||||
<img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit">
|
||||
</div>
|
||||
<div id="for_links">
|
||||
<h3 id="kosmopolit"><a href="./pages/kosmopolit.html">KOSMOPOLIT l'association</a></h3>
|
||||
<h3 id="litterall"><a href="./pages/litterall.html">LITTER<i>all</i></a></h3>
|
||||
<h3 id="lea"><a href="./pages/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
44
pages/kosmopolit.html
Normal file
44
pages/kosmopolit.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="sticky">
|
||||
<div class="nav_left">
|
||||
<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
|
||||
<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
|
||||
<a href="./pages/litterall.html"><p>litterall</p></a>
|
||||
<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container_main">
|
||||
<aside class="page_content sticky">
|
||||
<div class="table_box"> <!-- container use to adjust padding -->
|
||||
<h2>sommaire</h2>
|
||||
<a href="./pages/kosmopolit.html#kosmopolit"><p>kosmopolit</p></a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<div class="page_title">
|
||||
<h1 id="anchor_kosmopolit">KOSMOPOLIT</i></h1>
|
||||
<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="relative_content">
|
||||
</aside>
|
||||
</div>
|
||||
<footer class="page_footer">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="sticky">
|
||||
<div class="nav_left">
|
||||
<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
|
||||
<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
|
||||
<a href="./pages/litterall.html"><p>litterall</p></a>
|
||||
<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container_main">
|
||||
<aside class="page_content sticky">
|
||||
<div class="table_box"> <!-- container use to adjust padding -->
|
||||
<h2>sommaire</h2>
|
||||
<a href="./pages/kosmopolit.html#lettredeeda"><p>l.e.a</p></a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<div class="page_title">
|
||||
<h1 id="anchor_lettredeeda">lettres d'europe et d'ailleurs</i></h1>
|
||||
<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="relative_content">
|
||||
</aside>
|
||||
</div>
|
||||
<footer class="page_footer">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
<body>
|
||||
<nav class="sticky">
|
||||
<div class="nav_left">
|
||||
<a class="nav_logo" href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
|
||||
<a href=""><p>kosmopolit</p></a>
|
||||
<a href=""><p>litterall</p></a>
|
||||
<a href=""><p>l.e.a</p></a>
|
||||
<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
|
||||
<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
|
||||
<a href="./pages/litterall.html"><p>litterall</p></a>
|
||||
<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
|
||||
</div>
|
||||
<div class="nav_right">
|
||||
</div>
|
||||
@@ -30,10 +30,7 @@
|
||||
<a href="./pages/litterall.html#anchor_previous"><p>anciens numeros</p></a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- main
|
||||
ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
|
||||
ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
|
||||
-->
|
||||
|
||||
<main>
|
||||
<div class="page_title">
|
||||
<h1 id="anchor_litterall">LITTER<i>all</i></h1>
|
||||
@@ -48,52 +45,121 @@
|
||||
<img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
|
||||
<p class="right"><small>credit: Jeffrey Trehudic</small></p>
|
||||
</div>
|
||||
<h2 id="anchor_last">dernier numero</h2>
|
||||
<div class="image">
|
||||
<h2 id="anchor_last">dernier numero de la revue</h2>
|
||||
<div class="image horizontal">
|
||||
<img src="./docs/revues/litt23.jpg" alt="revue litterall">
|
||||
<div class="vertical">
|
||||
<p><small><i>paru le XX/XX/XXXX</i></small></p>
|
||||
<p>infos sur le dernier numero de litterall</p>
|
||||
<p>sommaire ...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="anchor_previous">anciens numeros</h2>
|
||||
<div class="gallery">
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 26</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 25</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 24</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 23</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 22</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 21</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 20</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 19</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 18</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
|
||||
<p>litterall numero 17</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 16</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 15</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 14</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 13</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 12</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 11</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 10</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 09</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 08</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 07</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 06</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 05</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 04</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 03</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 02</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
|
||||
<p>litterall numero 01</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -136,9 +136,6 @@ body aside.page_content {
|
||||
top: calc(var(--nav-height) + 1px);
|
||||
height: calc(100vh - var(--nav-height));
|
||||
margin-right: var(--aside-margin);
|
||||
/*
|
||||
border-right: 1px solid lightgrey;
|
||||
*/
|
||||
}
|
||||
/* asides elements only have width if they have a child*/
|
||||
body aside.page_content .table_box {
|
||||
@@ -148,8 +145,6 @@ body aside.page_content .table_box {
|
||||
box-sizing: border-box;
|
||||
padding: var(--gap-unit);
|
||||
/*for style*/
|
||||
/*
|
||||
*/
|
||||
border-left: 1px solid lightgrey;
|
||||
}
|
||||
/*to put space between elements*/
|
||||
|
||||
@@ -23,11 +23,13 @@
|
||||
|
||||
/*design*/
|
||||
.gallery {
|
||||
font-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.gallery .card {
|
||||
font-size: 100%;
|
||||
display: flex;
|
||||
flex: 0 1 0;
|
||||
padding: 0px;
|
||||
@@ -50,6 +52,10 @@
|
||||
border-width: var(--gallery-img-border-width);
|
||||
border-color: var(--gallery-img-border-color);
|
||||
}
|
||||
.gallery .card p {
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/*IMAGE single*/
|
||||
@@ -64,7 +70,10 @@
|
||||
.image img {
|
||||
height: 400px;
|
||||
width: auto;
|
||||
margin-right: auto;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.image p {
|
||||
margin-left: calc(var(--gap-unit) * 2 );
|
||||
}
|
||||
/*images in full page*/
|
||||
.image.full img {
|
||||
|
||||
@@ -59,8 +59,13 @@ h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
small {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
/*specials settings*/
|
||||
body p, body p *, body h1, body h1 *, body h2, body h2 * {
|
||||
|
||||
Reference in New Issue
Block a user