image de fond

This commit is contained in:
hugogogo
2020-11-30 18:12:46 +01:00
parent a558c6e6cd
commit c1f8942f06
27 changed files with 51 additions and 218 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

47
index-test.html Normal file
View File

@@ -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>

View File

@@ -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">
<script type="text/javascript" src="script.js" defer></script>
<link href="./styles/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="fullpage">
<h1>titre exemple</h1>
<p>texte exemple</p>
<div id="main">
<img class="contain" src="./docs/fond.png">
</div>
</body>
</html>

212
style.css
View File

@@ -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*/
/*////////////////////////////////////////////////////*/