parent
7d293b0aac
commit
ad64fec36a
16 changed files with 1284 additions and 0 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,12 @@ |
|||||||
|
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 28, 2024 */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'courier_primeregular'; |
||||||
|
src: url('courierprime-regular-webfont.woff2') format('woff2'), |
||||||
|
url('courierprime-regular-webfont.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 4, 2024 */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'script12_btroman'; |
||||||
|
src: url('script_12_pitch_bt-webfont.woff2') format('woff2'), |
||||||
|
url('script_12_pitch_bt-webfont.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
|
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 861 B |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,535 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||||
|
<title>LA PETITE ECOLE</title> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<link rel="stylesheet" href="fonts/courierprime.css"> |
||||||
|
<link rel="stylesheet" href="fonts/script.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="logo"> |
||||||
|
<img src="img/logo.svg" alt="logo"> |
||||||
|
</div> |
||||||
|
<nav> |
||||||
|
<div id="menu"> |
||||||
|
<div id="topBtn"> |
||||||
|
<div>LA PETITE ECOLE</div> |
||||||
|
<div>☓</div> |
||||||
|
</div> |
||||||
|
<ul > |
||||||
|
<li class="menuItem"><a href="index.html"><span><img src="img/barre.svg" alt="bar"></span><h3>Blog </h3></a> </li> |
||||||
|
<li class="menuItem"><span><img src="img/barre.svg" alt="bar"></span><h3>Actualite </h3></li> |
||||||
|
<li class="menuItem"><span><img src="img/barre.svg" alt="bar"></span><h3>Vitrine </h3></li> |
||||||
|
<li class="menuItem"><span><img src="img/barre.svg" alt="bar"></span><h3>Recherche </h3></li> |
||||||
|
<li class="menuItem"><span><img src="img/barre.svg" alt="bar"></span><h3>Contact </h3></li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</nav> |
||||||
|
<div id="content"> |
||||||
|
|
||||||
|
<div class="wrapper"> |
||||||
|
<h1>Welcome to la petit ecole</h1> |
||||||
|
<<p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p>p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p> |
||||||
|
|
||||||
|
<div class="gal"> |
||||||
|
<div class="gal-img"> |
||||||
|
<img src="https://images.unsplash.com/photo-1527681192512-bca34fd580bb?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="crabe"> |
||||||
|
</div><div class="gal-img"> |
||||||
|
<img src="https://images.unsplash.com/photo-1527681192512-bca34fd580bb?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="crabe"> |
||||||
|
</div><div class="gal-img"> |
||||||
|
<img src="https://images.unsplash.com/photo-1527681192512-bca34fd580bb?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="crabe"> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p><p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p> |
||||||
|
<p> |
||||||
|
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-direction: row | row-reverse | column | column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
row (default): left to right in ltr; right to left in rtl |
||||||
|
row-reverse: right to left in ltr; left to right in rtl |
||||||
|
column: same as row but top to bottom |
||||||
|
column-reverse: same as row-reverse but bottom to top |
||||||
|
|
||||||
|
flex-wrap |
||||||
|
two rows of boxes, the first wrapping down onto the second |
||||||
|
|
||||||
|
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
||||||
|
|
||||||
|
.container { |
||||||
|
flex-wrap: nowrap | wrap | wrap-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
nowrap (default): all flex items will be on one line |
||||||
|
wrap: flex items will wrap onto multiple lines, from top to bottom. |
||||||
|
wrap-reverse: flex items will wrap onto multiple lines from bottom to top. |
||||||
|
|
||||||
|
There are some visual demos of flex-wrap h |
||||||
|
|
||||||
|
|
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<script src="js/jquery-3.7.1.min.js"></script> |
||||||
|
<script src="index.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,24 @@ |
|||||||
|
|
||||||
|
$(document).ready(function(){ |
||||||
|
|
||||||
|
$('#topBtn').click(function(){ |
||||||
|
$('.menuItem').toggleClass('open') |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
$('.menuItem').click(function(){ |
||||||
|
$('.menuItem').removeClass('active'); |
||||||
|
$('.menuItem').toggleClass('open'); |
||||||
|
$(this).addClass('active'); |
||||||
|
}); |
||||||
|
|
||||||
|
$(document).scroll(function() { |
||||||
|
var dtop = $(document).scrollTop(); |
||||||
|
var maxH = $(document).height(); |
||||||
|
var windowh = $(window).height(); |
||||||
|
var ratio = maxH / windowh;
|
||||||
|
var topval = dtop+(dtop/ratio)+140;
|
||||||
|
$('#logo').css('top',topval ); |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,232 @@ |
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/ |
||||||
|
v2.0 | 20110126 |
||||||
|
License: none (public domain) |
||||||
|
*/ |
||||||
|
|
||||||
|
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, img, ins, kbd, q, s, samp, |
||||||
|
small, strike, strong, sub, sup, tt, var, |
||||||
|
b, u, i, center, |
||||||
|
dl, dt, dd, ol, ul, li, |
||||||
|
fieldset, form, label, legend, |
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td, |
||||||
|
article, aside, canvas, details, embed, |
||||||
|
figure, figcaption, footer, header, hgroup, |
||||||
|
menu, nav, output, ruby, section, summary, |
||||||
|
time, mark, audio, video { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
font-size: 100%; |
||||||
|
font: inherit; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
/* HTML5 display-role reset for older browsers */ |
||||||
|
article, aside, details, figcaption, figure, |
||||||
|
footer, header, hgroup, menu, nav, section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
body { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
ol, ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
blockquote, q { |
||||||
|
quotes: none; |
||||||
|
} |
||||||
|
blockquote:before, blockquote:after, |
||||||
|
q:before, q:after { |
||||||
|
content: ''; |
||||||
|
content: none; |
||||||
|
} |
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* END OF RESET */ |
||||||
|
|
||||||
|
/*edit variable here*/ |
||||||
|
|
||||||
|
:root{ |
||||||
|
--menu_h: 70px; |
||||||
|
--base_padding:20px; |
||||||
|
--hover_color-menu: #fae5d4; |
||||||
|
--menu-font-size : 3em; |
||||||
|
} |
||||||
|
|
||||||
|
body{ |
||||||
|
|
||||||
|
font-family: 'courier_primeregular'; |
||||||
|
background-size:cover; |
||||||
|
min-height:100vh; |
||||||
|
font-size:10px; |
||||||
|
height:auto; |
||||||
|
} |
||||||
|
|
||||||
|
nav{ |
||||||
|
position: fixed; |
||||||
|
width: 100%; |
||||||
|
z-index: 1000; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
#menu #topBtn{ |
||||||
|
height:var(--menu_h); |
||||||
|
width:100%; |
||||||
|
background:#fff; |
||||||
|
position: relative; |
||||||
|
border-bottom: solid 3px var(--hover_color-menu) |
||||||
|
} |
||||||
|
|
||||||
|
#menu #topBtn { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 9fr 1fr; |
||||||
|
grid-template-rows: 1fr; |
||||||
|
min-height: 100%; |
||||||
|
/*! align-self: center; */ |
||||||
|
} |
||||||
|
|
||||||
|
#menu #topBtn div{ |
||||||
|
align-self: center; |
||||||
|
padding:var(--base_padding); |
||||||
|
font-size:var(--menu-font-size); |
||||||
|
} |
||||||
|
#menu #topBtn div:last-of-type{ |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.open{ |
||||||
|
height:calc(var(--menu_h)) !important; |
||||||
|
border: solid 3px var(--hover_color-menu)!important; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.active{ |
||||||
|
height:calc(var(--menu_h)) !important; |
||||||
|
border: solid 3px var(--hover_color-menu)!important; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
#menu ul{ |
||||||
|
width:100%; |
||||||
|
background: #fff; |
||||||
|
line-height: var(--menu_h); |
||||||
|
transition: all ease 0.3s; |
||||||
|
height: 0; |
||||||
|
//overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#menu ul li{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding:calc(var(--base_padding)-6); |
||||||
|
height:0; |
||||||
|
border: solid 0px var(--hover_color-menu); |
||||||
|
background: #fff; |
||||||
|
font-size:var(--menu-font-size); |
||||||
|
overflow: hidden; |
||||||
|
transition: all ease 0.3s; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
#menu ul li span{ |
||||||
|
width: 100px; |
||||||
|
display:block; |
||||||
|
padding: 0 20px 0 15px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#menu ul li span img{ |
||||||
|
width: 20px; |
||||||
|
display:inline-block; |
||||||
|
//padding: 0 20px 0 15px; |
||||||
|
} |
||||||
|
|
||||||
|
#menu ul li h3, #menu ul li span{ |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
|
||||||
|
#menu ul li:hover{ |
||||||
|
background:var(--hover_color-menu); |
||||||
|
} |
||||||
|
|
||||||
|
#content{ |
||||||
|
position: absolute; |
||||||
|
top:0px; |
||||||
|
background:url('img/gradient-back.svg') no-repeat center center; |
||||||
|
background-size: cover; |
||||||
|
background-attachment: fixed; |
||||||
|
min-height: 100vh; |
||||||
|
/*! z-index: -1; */ |
||||||
|
} |
||||||
|
.picto{ |
||||||
|
width: 250px; |
||||||
|
height: 250px; |
||||||
|
position: absolute; |
||||||
|
top:250px; |
||||||
|
left:450px; |
||||||
|
z-index: 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@keyframes pulse { |
||||||
|
0% { |
||||||
|
fill: #FFF33B; |
||||||
|
} |
||||||
|
50% { |
||||||
|
fill: #FF4136; |
||||||
|
} |
||||||
|
100% { |
||||||
|
fill: #FFF33B; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.picto svg{ |
||||||
|
animation: pulse 25s infinite; |
||||||
|
/*! fill:yellow; */ |
||||||
|
} |
||||||
|
|
||||||
|
#logo{ |
||||||
|
position: absolute; |
||||||
|
width:150px; |
||||||
|
height:auto; |
||||||
|
top:calc(var(--menu_h)*2); |
||||||
|
left:var(--menu_h); |
||||||
|
z-index: 500; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
.wrapper{ |
||||||
|
padding-top:150px; |
||||||
|
width:60%; |
||||||
|
margin:auto; |
||||||
|
z-index:100; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.wrapper h1{ |
||||||
|
font-size: 6em; |
||||||
|
padding-bottom: 0.5em; |
||||||
|
font-family: 'script12_btroman'; |
||||||
|
} |
||||||
|
.wrapper p{ |
||||||
|
font-size: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper .gal{ |
||||||
|
margin: 3em 0 3em 0; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 1fr 1fr 1fr; |
||||||
|
column-gap:3em; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper .gal .gal-img img{ |
||||||
|
max-width: 100%; |
||||||
|
height:auto; |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue