pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

en cours de mise en page de la page litterall

Browse Source
This commit is contained in:
hugogogo
2021-01-23 12:37:54 +01:00
parent 8b75c43519
commit f80db17a7b
9 changed files with 152 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/exemple_litterall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

0
docs/fond.png → docs/kosmopolit_fond.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

0
docs/logo KOSMOPOLIT grand bleu.png → docs/kosmopolit_logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 120 KiB

10
index.html
View File

@@ -8,20 +8,22 @@
<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>
</style>
</head>
<body>
<div id="main">
<img class="contain" src="./docs/fond.png">
<img class="contain" src="./docs/kosmopolit_fond.png">
<div class="container-link">
<a class="link-index container-link-asso">
<a class="link-index container-link-asso" href="./pages/asso.html">
<div class="dot-link dot-link-asso"></div>
<h1 class="menu-link link-asso">KOSMOPOLIT l'association</h1>
</a>
<a class="link-index container-link-litterall">
<a class="link-index container-link-litterall" href="./pages/litterall.html">
<div class="dot-link dot-link-litterall"></div>
<h1 class="menu-link link-litterall">LITTERall</h1>
</a>
<a class="link-index container-link-lettredeeda">
<a class="link-index container-link-lettredeeda" href="./pages/lettredeeda.html">
<div class="dot-link dot-link-lettredeeda"></div>
<h1 class="menu-link link-lettredeeda">lettres d'europe et d'ailleurs</h1>
</a>

0
pages/lettresdeeda.html → pages/lettredeeda.html
View File

90
pages/litterall.html
View File

@@ -0,0 +1,90 @@
<!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>
body {
margin: 0px;
padding: 20px;
width: calc(100% - 40px);
}
#main, #main * {
display: flex;
flex-wrap: wrap;
}
.vertical {
flex-direction: column;
}
.vertical > * {
margin: auto;
}
.img_container {
border: 1px solid red;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
grid-gap: 16px;
justify-content: center;
padding: initial;
/*
flex-grow: 0;
justify-content: flex-start;
margin: 20px;
*/
}
.img_container img {
margin: 2px;
}
</style>
</head>
<body>
<!-- la barre de navigation -->
<nav>
</nav>
<!-- -->
<header>
</header>
<!-- -->
<aside>
</aside>
<!-- -->
<main>
<!-- -->
<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.
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>
<img class="centre" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<div class="img_container">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
<img class="horizontal" src="./docs/exemple_litterall.jpg" alt="revue litterall">
</div>
</article>
</main>
<!-- -->
<footer>
</footer>
</body>
</html>

6
styles/litterall.css Normal file
View File

@@ -0,0 +1,6 @@
#main {
padding: 20px;
}
#main article {
margin: 20px;
}

1
styles/menu.css
View File

@@ -1,3 +1,4 @@
body {
display: flex;
flex-direction: column;

76
styles/style.css
View File

@@ -1,3 +1,6 @@
/*/////////////////////////////////////////////*/
/*IMPORT CSS*/
@import url(./reset.css);
@import url(./fonts.css);
@import url(./header.css);
@@ -9,33 +12,41 @@
/*/////////////////////////////////////////////*/
/*GLOBAL VARIABLE*/
:root {
/* color range */
--color-purple: #ee1998;
--color-pink: #ff7bca;
--color-green: #8fce3c;
--color-yellow: #e3e00a;
--color-blue: #51cee4;
--color-water: #0c9cb5;
/* colors texts */
--color-texts: rgb(1, 1, 1);
--color-texts: rgb(1, 1, 1);
--color-texts-special: rgb(1, 1, 1);
/* colors links */
--color-links: rgb(120, 1, 1);
--color-links: rgb(120, 1, 1);
--color-links-hover: rgb(120, 1, 1);
--color-links-visited: rgb(120, 1, 1);
--color-links-active: rgb(120, 1, 1);
/* colors titles */
--color-title-1: rgb(120, 1, 1);
--color-title-2: rgb(120, 1, 1);
--color-title-3: rgb(120, 1, 1);
--color-title-4: rgb(120, 1, 1);
--color-title-5: rgb(120, 1, 1);
--color-title-6: rgb(120, 1, 1);
/* colors buttons */
--primary-hue: 12;
--color-button: hsl(var(primary-hue), 1%, 1%);
/* color range */
--color-purple: #ee1998;
--color-pink: #ff7bca;
--color-green: #8fce3c;
--color-yellow: #e3e00a;
--color-blue: #51cee4;
--color-water: #0c9cb5;
--primary-hue: 12;
--color-button: hsl(var(primary-hue), 1%, 1%);
/* fonts */
--font-titles: 'paradroid';
--font-texts: 'louisgeorge';
--font-fallback: 'cabrion';
--font-titles: 'paradroid';
--font-texts: 'louisgeorge';
--font-fallback: 'cabrion';
}
/*GLOBAL VARIABLE*/
/*/////////////////////////////////////////////*/
@@ -45,13 +56,19 @@
html {
scroll-behavior: smooth;
}
main {
min-height: calc(100vh - 70px);
}
body {
display: flex;
flex-direction: column;
}
main {
min-height: calc(100vh - 70px);
}
/*/////////////////////////////////////////////*/
/*TEXTS*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-titles), var(--font-fallback), sans-serif;
}
@@ -61,9 +78,18 @@ a, p, li {
a, a > * {
cursor: pointer;
}
a, a:visited, a:hover, a:link {
a, a:link {
color: var(--color-links);
}
a:visited {
color: var(--color-links-visited);
}
a:hover {
color: var(--color-links-hover);
}
a:active {
color: var(--color-links-active);
}
li *, li p, article b, article em,
article i, article a, article var {
display: inline;
@@ -82,10 +108,6 @@ em {
font-weight: 600;
color: var(--article-em);
}
/*GENERAL SETTINGS*/
/*/////////////////////////////////////////////*/