Synapsion-Energie-Group/services.html at main · enes-balikci/Synapsion-Energie-Group · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Services | Synapsion Energie Group</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="title">Synapsion Energie Group</div>
 <!-- Hamburger Menü Butonu ve Açılır Menü -->
<style>
.menu-btn {
  background: none;
  border: none;
  font-size: 2em;
  padding: 8px 14px;
  cursor: pointer;
  color: #2d3a4e;
  display: flex;
  align-items: center;
}
.menu-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 52px;
  right: 16px;
  min-width: 170px;
  background: #f6f7fa;
  box-shadow: 0 4px 18px #0001;
  border-radius: 14px;
  z-index: 100;
  padding: 10px 0;
}
.menu-nav a {
  color: #2d3a4e;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 24px;
  display: block;
  border-radius: 8px;
  transition: background 0.16s;
}
.menu-nav a:hover {
  background: #e6eefb;
  color: #1976d2;
}
@media (min-width: 700px) {
  .menu-btn { display: none; }
  .menu-nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    box-shadow: none;
    background: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
  }
  .menu-nav a { padding: 0 18px; }
}
</style>
<div style="position:relative;">
  <button class="menu-btn" id="menu-toggle" aria-label="Menu" aria-expanded="false">
    ☰ Menu
  </button>
  <nav class="menu-nav" id="main-menu">
    <a href="services.html">Services</a>
    <a href="apropos.html">À propos</a>
    <a href="contact.html">Contact</a>
  </nav>
</div>
<script>
const btn = document.getElementById('menu-toggle');
const nav = document.getElementById('main-menu');
btn.onclick = function(e) {
  e.stopPropagation();
  const shown = nav.style.display === "flex";
  nav.style.display = shown ? "none" : "flex";
  btn.setAttribute("aria-expanded", !shown);
};
document.addEventListener('click', function(e) {
  if (!btn.contains(e.target) && !nav.contains(e.target) && window.innerWidth<700) {
    nav.style.display = "none";
    btn.setAttribute("aria-expanded", false);
  }
});
window.addEventListener('resize', function() {
  if(window.innerWidth>=700){
    nav.style.display = "flex";
    btn.setAttribute("aria-expanded", true);
  } else {
    nav.style.display = "none";
    btn.setAttribute("aria-expanded", false);
  }
});
</script>
  </header>
  <main>
    <h2>Nos services</h2>
    <p>
      Nous proposons des offres d’électricité verte, des audits énergétiques personnalisés,<br>
      des conseils pour optimiser votre consommation et des solutions innovantes pour les entreprises et les particuliers.
    </p>
  </main>
  <footer>
    © 2025 Synapsion Energie Group — Tous droits réservés.
  </footer>
  <script src="theme-toggle.js"></script>
</body>
</html>