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