image de fond

index-test.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title></title>
+		<meta name="description" content="description du site web">
+		<meta name="keywords" content="truc, bidule, chouette">
+		<style>
+			#fullpage {
+			    margin: 40px;
+			    padding: 50px;
+			    border: 1px solid red;
+			}
+			@font-face {
+			    font-family: 'cabrion';
+			    src: url('./fonts/cabrion/cabrion-light.woff2') format('woff2'),
+			    url('./fonts/cabrion/cabrion-light.woff') format('woff');
+			    url('./fonts/cabrion/cabrion-light.otf') format('opentype');
+			}
+			@font-face {
+			    font-family: 'paradroid';
+			    src: url('./fonts/paradroid/paradroidmono-light.woff2') format('woff2'),
+			    url('./fonts/paradroid/paradroidmono-light.woff') format('woff');
+			    url('./fonts/paradroid/paradroidmono-light.ttf') format('truetype');
+			}
+			@font-face {
+			    font-family: 'louisgeorge';
+			    src: url('./fonts/louisgeorge/louis_george_cafe.woff2') format('woff2'),
+			    url('./fonts/louisgeorge/louis_george_cafe.woff') format('woff');
+			    url('./fonts/louisgeorge/louis_george_cafe.ttf') format('truetype');
+			}
+			h1, h2, h3, h4, h5, h6 {
+			    font-family: 'louisgeorge', sans-serif;
+			}
+			a, p, li {
+			    font-family: 'cabrion', sans-serif;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="fullpage">
+			<h1>titre exemple</h1>
+			<p>texte exemple</p>
+		</div>
+	</body>
+</html>

index.html

@@ -3,16 +3,14 @@
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title></title>
+		<title>kosmopolit</title>
 		<meta name="description" content="description du site web">
 		<meta name="keywords" content="truc, bidule, chouette">
-		<link href="./style.css" type="text/css" rel="stylesheet">
+		<link href="./styles/style.css" type="text/css" rel="stylesheet">
-		<script type="text/javascript" src="script.js" defer></script>
 	</head>
 	<body>
-		<div id="fullpage">
+		<div id="main">
-			<h1>titre exemple</h1>
+			<img class="contain" src="./docs/fond.png">
-			<p>texte exemple</p>
 		</div>
 	</body>
 </html>

style.css

@@ -1,212 +0,0 @@
-/*
-@import url(./path/to/sheet.css);
-*/
-
-
-
-
-
-/*/////////////////////////////////////////////*/
-/*RESET*/
-body *:not(script) {
-	display: block;
-}
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-weight: inherit;
-	font-style: inherit;
-	font-size: 100%;
-	font-family: inherit;
-	vertical-align: baseline;
-	text-decoration: none;
-}
-:focus {
-	outline: 0;
-}
-body {
-	line-height: 1;
-	color: black;
-	background: white;
-}
-ol, ul {
-	list-style: none;
-}
-/* tables still need 'cellspacing="0"' in the markup */
-table {
-	border-collapse: separate;
-	border-spacing: 0;
-}
-caption, th, td {
-	text-align: left;
-	font-weight: normal;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: "";
-}
-blockquote, q {
-	quotes: "" "";
-}
-* {
-	cursor: default;
-}
-/*RESET*/
-/*/////////////////////////////////////////////*/
-
-
-
-
-
-
-
-/*////////////////////////////////////////////////////*/
-/*FONTS*/
-@font-face {
-	font-family: 'cabrion';
-	src: url('../font/cabrion/cabrion-light.woff2') format('woff2'),
-	url('../font/cabrion/cabrion-light.woff') format('woff');
-	url('../font/cabrion/cabrion-light.otf') format('opentype');
-}
-@font-face {
-	font-family: 'paradroid';
-	src: url('../font/paradroid/paradroidmono-light.woff2') format('woff2'),
-	url('../font/paradroid/paradroidmono-light.woff') format('woff');
-	url('../font/paradroid/paradroidmono-light.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge';
-	src: url('../font/louisgeorge/louis_george_cafe.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge_bold';
-	src: url('../font/louisgeorge/louis_george_cafe_bold.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe_bold.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe_bold.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge_bolditalic';
-	src: url('../font/louisgeorge/louis_george_cafe_bold_italic.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe_bold_italic.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe_bold_italic.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge_italic';
-	src: url('../font/louisgeorge/louis_george_cafe_italic.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe_italic.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe_italic.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge_light';
-	src: url('../font/louisgeorge/louis_george_cafe_light.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe_light.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe_light.ttf') format('truetype');
-}
-@font-face {
-	font-family: 'louisgeorge_lightitalic';
-	src: url('../font/louisgeorge/louis_george_cafe_light_italic.woff2') format('woff2'),
-	url('../font/louisgeorge/louis_george_cafe_light_italic.woff') format('woff');
-	url('../font/louisgeorge/louis_george_cafe_light_italic.ttf') format('truetype');
-}
-/*FONTS*/
-/*////////////////////////////////////////////////////*/
-
-
-
-
-
-
-
-/*/////////////////////////////////////////////*/
-/*GLOBAL VARIABLE*/
-:root {
-	/* colors */
-	--variable-name:	rgb(000, 000, 000);
-
-	/* fonts */
-	--fonts-titles:	louisgeorge_bold;
-	--fonts-textes:	louisgeorge;
-}
-/*GLOBAL VARIABLE*/
-/*/////////////////////////////////////////////*/
-
-
-
-
-
-
-/*/////////////////////////////////////////////*/
-/*GENERAL SETTINGS*/
-html {
-	scroll-behavior: smooth;
-}
-main {
-	min-height: calc(100vh - 70px);
-}
-/*GENERAL SETTINGS*/
-/*/////////////////////////////////////////////*/
-
-
-
-
-
-
-
-
-
-
-
-
-#fullpage {
-	width: 100px;
-	height: 100px;
-	border: 1px solid red;
-}
-
-
-
-
-h1, h2, h3, h4, h5, h6 {
-	font-family: 'var(--fonts-titles)', 'cabrion', sans-serif;
-}
-a, p, li {
-	font-family: 'var(--fonts-textes)', 'cabrion', sans-serif;
-}
-a, a > * {
-	cursor: pointer;
-}
-article a {
-	color: var(--article-link);
-}
-li *, li p, article b, article em,
-article i, article a, article var {
-	display: inline;
-}
-p, var {
-	color: var(--article-little);
-}
-i {
-	font-style: italic;
-}
-b {
-	font-weight: 600;
-	color: var(--article-medium);
-}
-em {
-	font-weight: 600;
-	color: var(--article-em);
-}
-/*FONTS*/
-/*////////////////////////////////////////////////////*/
-