zvevqx
/
flask_LPE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

inte phase 2 ok dev start menu fix / home fix

Browse Source
main
zvevqx 1 year ago
parent ad64fec36a
commit 63002741a0
6 changed files with 489 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      html_int/cdc.md
  2. 387
      html_int/home.html
  3. 1
      html_int/img/p02.svg
  4. 1
      html_int/img/picto/picto_pe_07.svg
  5. 24
      html_int/index.js
  6. 60
      html_int/style.css

37
html_int/cdc.md
Unescape View File

@ -0,0 +1,37 @@
# menu
en dur
# template
home anim + ---acceuil p5 + p3 / 8
blog (tumblr)
actualite
vitrine -> 1 seul md same as acceuil
--- contact same as acceuil
# content
meta yaml
author
date
cat
titre
gal
# md
unique
accceuil
contact
vitrine
post
actualite
avoir
blog (flux rss)

387
html_int/home.html
Unescape View File

@ -0,0 +1,387 @@
<!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="homeSpacer">
</div>
<div class="picto_sun">
<img src="img/picto/sun.svg" class="yellow_filter">
</div>
<div class="picto_shape">
<img src="img/picto/picto_pe_07.svg" class="pink_filter">
</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 id="logo">
<img src="img/logo.svg" alt="logo">
</div>
<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>
<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>
</div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="index.js"></script>
</body>
</html>

1
html_int/img/p02.svg
View File

File diff suppressed because one or more lines are too long

1
html_int/img/picto/picto_pe_07.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

24
html_int/index.js
Unescape View File

@ -1,11 +1,33 @@
$(document).ready(function(){ $(document).ready(function(){
if ($('#homeSpacer')){
$('#content').css({height:'0',overflow:'hidden'});
$('#homeSpacer').click(function(){
$(this).css('height','0');
$('#content').css({height:'auto',overflow:'auto'});
$('nav').css('z-index','1000');
$("body").css('overflow','auto');
});
}
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
var sun_x = getRndInteger(0, 850);
var sun_y = getRndInteger(0, 550);
var shape_x = getRndInteger(-1500, 200);
var shape_y = getRndInteger(0, 500);
$('.picto_sun').css({top:sun_y , left:sun_x,});
$('.picto_shape').css({top:shape_y , left:shape_x,});
$('#topBtn').click(function(){ $('#topBtn').click(function(){
$('.menuItem').toggleClass('open') $('.menuItem').toggleClass('open')
}); });
$('.menuItem').click(function(){ $('.menuItem').click(function(){
$('.menuItem').removeClass('active'); $('.menuItem').removeClass('active');
$('.menuItem').toggleClass('open'); $('.menuItem').toggleClass('open');

60
html_int/style.css
Unescape View File

@ -52,26 +52,33 @@ table {
/*edit variable here*/ /*edit variable here*/
:root{ :root{
--menu_h: 70px; --menu_h: 70px;
--base_padding:20px; --base_padding:20px;
--hover_color-menu: #fae5d4; --hover_color-menu: #fae5d4;
--menu-font-size : 3em; --menu-font-size : 3em;
} }
body{ body{
font-family: 'courier_primeregular'; font-family: 'courier_primeregular';
background-size:cover;
min-height:100vh; min-height:100vh;
font-size:10px; font-size:10px;
height:auto; height:auto;
background:url('img/gradient-back.svg') no-repeat center center;
background-size:cover;
}
#homeSpacer{
height:calc(100vh - var(--menu_h));
transition:all 0.6s ease;
z-index:1000;
} }
nav{ nav{
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1000; cursor: pointer;
} }
#menu #topBtn{ #menu #topBtn{
@ -103,7 +110,6 @@ nav{
height:calc(var(--menu_h)) !important; height:calc(var(--menu_h)) !important;
border: solid 3px var(--hover_color-menu)!important; border: solid 3px var(--hover_color-menu)!important;
} }
@ -158,23 +164,30 @@ nav{
} }
#content{ #content{
position: absolute; // min-height: 100vh;
top:0px;
background:url('img/gradient-back.svg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
/*! z-index: -1; */ /*! z-index: -1; */
} }
.picto{ .picto_sun{
width: 250px; width: 250px;
height: 250px; height: 250px;
position: absolute; position: fixed;
top:250px; z-index: -1;
left:450px;
z-index: 0;
} }
.picto_shape{
width: 2250px;
height: 950px;
position: fixed;
z-index: -1;
opacity:0.8;
}
.yellow_filter{
filter: invert(58%) sepia(80%) saturate(3514%) hue-rotate(343deg) brightness(107%) contrast(87%);
}
.pink_filter{
filter: invert(92%) sepia(27%) saturate(4960%) hue-rotate(292deg) brightness(137%) contrast(104%);
}
@keyframes pulse { @keyframes pulse {
0% { 0% {
@ -193,6 +206,11 @@ nav{
/*! fill:yellow; */ /*! fill:yellow; */
} }
#content{
position : relative;
}
#logo{ #logo{
position: absolute; position: absolute;
width:150px; width:150px;

Write Preview
Loading…
Cancel
Save