Skip to content

Commit 3739367

Browse files
DamonsasDamonsas
committed
fixed button
1 parent ea4053d commit 3739367

File tree

5 files changed

+83
-70
lines changed

5 files changed

+83
-70
lines changed

‎asset/JS/Script.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ const navToggle = document.querySelector('.nav-toggle');
66
navLinks.classList.toggle('active');
77
});
88

9+
document.querySelectorAll('.nav-links a').forEach(link => {
10+
link.addEventListener('click', () => {
11+
navLinks.classList.remove('active');
12+
});
13+
});
914

1015
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1116
anchor.addEventListener('click', function (e) {

‎asset/_base-index.scss‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ body{
4343
@include text(#fff);
4444
margin-top: 10px;
4545
}
46-
46+
}
4747
.nav {
4848
position: fixed;
4949
top: 0;
@@ -58,7 +58,7 @@ body{
5858
margin: 0 auto;
5959
padding: 1rem 2rem;
6060
display: flex;
61-
justify-content: space-around;
61+
justify-content: space-between;
6262
align-items: center;
6363

6464
.logo {
@@ -99,16 +99,17 @@ body{
9999
}
100100
}
101101

102-
.nav-toggle {
103-
display: none;
104-
background: none;
105-
border: none;
106-
color: var(--light);
107-
font-size: 1.5rem;
108-
cursor: pointer;
109-
}
110-
}
111-
}
102+
.nav-toggle {
103+
display: none;
104+
background: none;
105+
border: none;
106+
color: var(--light);
107+
font-size: 1.5rem;
108+
cursor: pointer;
109+
}
110+
}
111+
}
112+
112113
.cta-buttons {
113114
display: flex;
114115
gap: 1rem;
@@ -181,7 +182,7 @@ body{
181182

182183
}
183184
}
184-
}
185+
185186
.propos-content {
186187
display: flex;
187188
align-items: center;
@@ -459,26 +460,27 @@ body{
459460
@media (max-width: 768px) {
460461
.nav {
461462
.nav-container {
462-
.nav-links {
463-
display: none;
464-
flex-direction: column;
465-
position: absolute;
466-
top: 100%;
467-
left: 0;
468-
width: 100%;
469-
background: var(--dark);
470-
padding: 2rem;
471-
gap: 1rem;
472-
473-
&.active {
474-
display: flex;
475-
}
476-
}
477-
.nav-toggle {
478-
display: block;
479-
}
480-
}
481-
}
463+
.nav-links {
464+
display: none;
465+
flex-direction: column;
466+
position: absolute;
467+
top: 100%;
468+
left: 0;
469+
width: 100%;
470+
background: var(--dark);
471+
padding: 2rem;
472+
gap: 1rem;
473+
}
474+
475+
.nav-links.active {
476+
display: flex;
477+
}
478+
479+
.nav-toggle {
480+
display: block !important;
481+
margin-left: 3rem;
482+
483+
}}}
482484

483485
.about {
484486
.about-content {

‎asset/style.css‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ body p {
4444
color: #fff;
4545
margin-top: 10px;
4646
}
47-
body .nav {
47+
48+
.nav {
4849
position: fixed;
4950
top: 0;
5051
width: 100%;
@@ -54,35 +55,35 @@ body .nav {
5455
z-index: 1000;
5556
transition: all 0.3s ease;
5657
}
57-
body .nav .nav-container {
58+
.nav .nav-container {
5859
max-width: 1200px;
5960
margin: 0 auto;
6061
padding: 1rem 2rem;
6162
display: flex;
62-
justify-content: space-around;
63+
justify-content: space-between;
6364
align-items: center;
6465
}
65-
body .nav .nav-container .logo {
66+
.nav .nav-container .logo {
6667
font-size: 1.5rem;
6768
font-weight: 800;
6869
background: var(--gradient-main);
6970
-webkit-background-clip: text;
7071
-webkit-text-fill-color: transparent;
7172
background-clip: text;
7273
}
73-
body .nav .nav-container .nav-links {
74+
.nav .nav-container .nav-links {
7475
display: flex;
7576
list-style: none;
7677
gap: 2rem;
7778
}
78-
body .nav .nav-container .nav-links a {
79+
.nav .nav-container .nav-links a {
7980
color: var(--light);
8081
text-decoration: none;
8182
font-weight: 500;
8283
transition: all 0.3s ease;
8384
position: relative;
8485
}
85-
body .nav .nav-container .nav-links a::after {
86+
.nav .nav-container .nav-links a::after {
8687
content: "";
8788
position: absolute;
8889
bottom: -5px;
@@ -92,24 +93,25 @@ body .nav .nav-container .nav-links a::after {
9293
background: var(--accent);
9394
transition: width 0.3s ease;
9495
}
95-
body .nav .nav-container .nav-links a:hover::after {
96+
.nav .nav-container .nav-links a:hover::after {
9697
width: 100%;
9798
}
98-
body .nav .nav-container .nav-toggle {
99+
.nav .nav-container .nav-toggle {
99100
display: none;
100101
background: none;
101102
border: none;
102103
color: var(--light);
103104
font-size: 1.5rem;
104105
cursor: pointer;
105106
}
106-
body .cta-buttons {
107+
108+
.cta-buttons {
107109
display: flex;
108110
gap: 1rem;
109111
justify-content: center;
110112
flex-wrap: wrap;
111113
}
112-
body .cta-buttons .btn {
114+
.cta-buttons .btn {
113115
padding: 1rem 2rem;
114116
border: none;
115117
border-radius: 50px;
@@ -121,25 +123,26 @@ body .cta-buttons .btn {
121123
align-items: center;
122124
gap: 0.5rem;
123125
}
124-
body .cta-buttons .btn.btn-primary {
126+
.cta-buttons .btn.btn-primary {
125127
background: var(--accent);
126128
color: var(--dark);
127129
}
128-
body .cta-buttons .btn.btn-secondary {
130+
.cta-buttons .btn.btn-secondary {
129131
background: transparent;
130132
color: white;
131133
border: 2px solid white;
132134
}
133-
body .cta-buttons .btn:hover {
135+
.cta-buttons .btn:hover {
134136
transform: translateY(-2px);
135137
box-shadow: var(--shadow-lg);
136138
}
137-
body .about {
139+
140+
.about {
138141
padding: 6rem 2rem;
139142
max-width: 1200px;
140143
margin: 0 auto;
141144
}
142-
body .about .section-title {
145+
.about .section-title {
143146
font-size: 2rem;
144147
font-family: Arial, Helvetica, sans-serif;
145148
color: #fff;
@@ -151,22 +154,22 @@ body .about .section-title {
151154
-webkit-text-fill-color: transparent;
152155
background-clip: text;
153156
}
154-
body .about .hero-subtitle {
157+
.about .hero-subtitle {
155158
font-size: 1.5rem;
156159
font-family: Arial, Helvetica, sans-serif;
157160
color: #fff;
158161
text-align: center;
159162
}
160-
body .about .about-content {
163+
.about .about-content {
161164
display: grid;
162165
grid-template-columns: 1fr 2fr;
163166
gap: 4rem;
164167
align-items: center;
165168
}
166-
body .about .about-content .about-image {
169+
.about .about-content .about-image {
167170
position: relative;
168171
}
169-
body .about .about-content .about-image img {
172+
.about .about-content .about-image img {
170173
width: 100%;
171174
border-radius: 20px;
172175
box-shadow: var(--shadow-xl);
@@ -459,7 +462,8 @@ body .about .about-content .about-image img {
459462
display: flex;
460463
}
461464
.nav .nav-container .nav-toggle {
462-
display: block;
465+
display: block !important;
466+
margin-left: 3rem;
463467
}
464468
.about .about-content {
465469
grid-template-columns: 1fr;

‎asset/style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,30 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
99
<link href="./asset/style.css" rel="stylesheet">
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11+
1012

1113

1214
</head>
1315

1416
<body>
17+
<div class="scroll-indicator"></div>
1518
<header>
1619

1720
<nav class="nav">
18-
<div class="nav-container">
19-
<div class="logo"><h1>Portfolio del Danhaxe </h1></div>
20-
<ul class="nav-links">
21-
<li><a href="#home">Accueil</a></li>
22-
<li><a href="#about">À propos</a></li>
23-
<li><a href="#projects">Projets</a></li>
24-
<li><a href="#skills">Compétences</a></li>
25-
<li><a href="#contact">Contact</a></li>
26-
</ul>
27-
<button class="nav-toggle">
28-
<i class="fas fa-bars"></i>
29-
</button>
30-
</div>
31-
</nav>
21+
<div class="nav-container">
22+
<div class="logo">Portfolio del Danhaxe</div>
23+
<ul class="nav-links">
24+
<li><a href="#about">À propos</a></li>
25+
<li><a href="#projects">Projets</a></li>
26+
<li><a href="#skills">Compétences</a></li>
27+
<li><a href="#contact">Contact</a></li>
28+
</ul>
29+
<button class="nav-toggle">
30+
<i class="fas fa-bars"></i>
31+
</button>
32+
</div>
33+
</nav>
3234

3335
</header>
3436
<section id="home" class="about">
@@ -341,7 +343,7 @@ <h3 class="project-title">Commissions Artistiques</h3>
341343
Commander
342344
</a>
343345
<a href="https://www.instagram.com/danhaxe/" class="project-link" target="_blank">
344-
<i class="fas fa-instagram">Voir sur Instagram fiche Commissions</i>
346+
<i class="fas fa-external-link-alt"></i>Voir sur Instagram fiche Commissions
345347
</a>
346348
</div>
347349
</div>

0 commit comments

Comments
 (0)