Création des pages + responsive header
This commit is contained in:
parent
bc611cba13
commit
aee3325163
23
about/index.html
Normal file
23
about/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elite Solar</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/header.css">
|
||||||
|
<script type="text/javascript" src="../assets/js/header.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Elite Solar</h1>
|
||||||
|
<img id="burger-menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"></svg>
|
||||||
|
<ul id="menu" class="invisible">
|
||||||
|
<li><a href="../">Accueil</a></li>
|
||||||
|
<li class="active"><a href="../about">Qui sommes-nous ?</a></li>
|
||||||
|
<li><a href="../product">Nos produits</a></li>
|
||||||
|
<li><a href="../contact">Contact</a></li>
|
||||||
|
<li><a href="../faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
assets/css/header.css
Normal file
80
assets/css/header.css
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
header {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
float: left;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li.active a {
|
||||||
|
background-color: dodgerblue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li a:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu li a {
|
||||||
|
color: black;
|
||||||
|
padding: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#burger-menu {
|
||||||
|
transform: translateY(25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
#menu li a {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.visible {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
#menu {
|
||||||
|
float: right;
|
||||||
|
/*display: block;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#burger-menu {
|
||||||
|
display: none;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.invisible {
|
||||||
|
display : none;
|
||||||
|
|
||||||
|
}
|
||||||
|
#menu li a {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
float: none;
|
||||||
|
/*display: none;*/
|
||||||
|
margin-top: 80px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#burger-menu {
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
assets/css/style.css
Normal file
3
assets/css/style.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
9
assets/img/close-menu.svg
Normal file
9
assets/img/close-menu.svg
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<svg fill="#000000" height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<polygon points="512,59.076 452.922,0 256,196.922 59.076,0 0,59.076 196.922,256 0,452.922 59.076,512 256,315.076 452.922,512
|
||||||
|
512,452.922 315.076,256 "/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 472 B |
6
assets/img/open-menu.svg
Normal file
6
assets/img/open-menu.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<svg fill="#000000" height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 80" xml:space="preserve">
|
||||||
|
<rect width="100" height="20" rx="8"></rect>
|
||||||
|
<rect y="30" width="100" height="20" rx="8"></rect>
|
||||||
|
<rect y="60" width="100" height="20" rx="8"></rect>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 406 B |
12
assets/js/header.js
Normal file
12
assets/js/header.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
function burgerMenu() {
|
||||||
|
const btn = document.getElementById("burger-menu");
|
||||||
|
const menu = document.getElementById("menu");
|
||||||
|
|
||||||
|
if (btn.src.endsWith("assets/img/open-menu.svg")) {
|
||||||
|
btn.src = btn.src.replace("open-menu.svg", "close-menu.svg");
|
||||||
|
menu.className = "";
|
||||||
|
} else {
|
||||||
|
btn.src = btn.src.replace("close-menu.svg", "open-menu.svg");
|
||||||
|
menu.className = "invisible";
|
||||||
|
}
|
||||||
|
}
|
||||||
23
contact/index.php
Normal file
23
contact/index.php
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elite Solar</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/header.css">
|
||||||
|
<script type="text/javascript" src="../assets/js/header.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Elite Solar</h1>
|
||||||
|
<img id="burger-menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"></svg>
|
||||||
|
<ul id="menu" class="invisible">
|
||||||
|
<li><a href="../">Accueil</a></li>
|
||||||
|
<li><a href="../about">Qui sommes-nous ?</a></li>
|
||||||
|
<li><a href="../product">Nos produits</a></li>
|
||||||
|
<li class="active"><a href="../contact">Contact</a></li>
|
||||||
|
<li><a href="../faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
faq/index.html
Normal file
23
faq/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elite Solar</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/header.css">
|
||||||
|
<script type="text/javascript" src="../assets/js/header.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Elite Solar</h1>
|
||||||
|
<img id="burger-menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"></svg>
|
||||||
|
<ul id="menu" class="invisible">
|
||||||
|
<li><a href="../">Accueil</a></li>
|
||||||
|
<li><a href="../about">Qui sommes-nous ?</a></li>
|
||||||
|
<li><a href="../product">Nos produits</a></li>
|
||||||
|
<li><a href="../contact">Contact</a></li>
|
||||||
|
<li class="active"><a href="../faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
index.html
Normal file
23
index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elite Solar</title>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/header.css">
|
||||||
|
<script type="text/javascript" src="assets/js/header.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Elite Solar</h1>
|
||||||
|
<img id="burger-menu" onclick="burgerMenu()" src="assets/img/open-menu.svg"></svg>
|
||||||
|
<ul id="menu" class="invisible">
|
||||||
|
<li class="active"><a href="./">Accueil</a></li>
|
||||||
|
<li><a href="about">Qui sommes-nous ?</a></li>
|
||||||
|
<li><a href="product">Nos produits</a></li>
|
||||||
|
<li><a href="contact">Contact</a></li>
|
||||||
|
<li><a href="faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
product/index.html
Normal file
23
product/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Elite Solar</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/header.css">
|
||||||
|
<script type="text/javascript" src="../assets/js/header.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Elite Solar</h1>
|
||||||
|
<img id="burger-menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"></svg>
|
||||||
|
<ul id="menu" class="invisible">
|
||||||
|
<li><a href="../">Accueil</a></li>
|
||||||
|
<li><a href="../about">Qui sommes-nous ?</a></li>
|
||||||
|
<li class="active"><a href="../product">Nos produits</a></li>
|
||||||
|
<li><a href="../contact">Contact</a></li>
|
||||||
|
<li><a href="../faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user