Skip to content

Commit 125e2b7

Browse files
KajalDeore04KajalDeore04
committed
fixed the navbar, removed the unncessary spaces to make it look even
1 parent 9b8d0a1 commit 125e2b7

File tree

3 files changed

+157
-155
lines changed

3 files changed

+157
-155
lines changed

‎images/logomain.png

-4.58 KB
Loading

‎index.html

+144-145
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,29 @@
6868
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
6969
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
7070
<div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
71-
</div>
71+
</div>
7272

7373
<header class="header">
74-
<a href="#" class="logo"><img src="./images/logomain.png" alt="" style="width: 100px; height: 70px" /></a>
74+
<a href="#" class="logo"><img src="./images/logomain.png" alt="" style="width: 185px; " /></a>
7575
<div class="fas fa-bars"></div>
7676
<nav class="navbar">
7777
<ul>
78-
<i class='icons bx bxs-home'></i>
79-
<li style="margin-left: 1px;"><a href="#home">home</a></li>
80-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
81-
<i class='icons bx bx-laptop'></i>
82-
<li style="margin-left: 1px;"><a href="./backend/public/index.html">Projects</a></li>
83-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
84-
<i class='icons bx bxs-contact'></i>
85-
<li style="margin-left: 1px;"><a href="#contact">contact</a></li>
86-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
87-
<button id="login">Log In</button>
78+
<li>
79+
<i class='icons bx bxs-home'></i>
80+
<a href="#home">Home</a>
81+
</li>
82+
83+
<li>
84+
<i class='icons bx bx-laptop'></i>
85+
<a href="./backend/public/index.html">Projects</a>
86+
</li>
87+
88+
<li>
89+
<i class='icons bx bxs-contact'></i>
90+
<a href="#contact">Contact</a>
91+
</li>
92+
93+
<li><button id="login">Log In</button></li>
8894
<h3 id="name"></h3>
8995
<img id="image" onclick="ProfileClicked()" />
9096
<button onclick="logout()" id="logout">Logout</button>
@@ -145,13 +151,9 @@ <h6>Mobile-App Projects</h6>
145151
<h6>Data Analytics Projects</h6>
146152

147153
<p class="text-black">
148-
The Project will include Visualizating of Data and the
149-
Rescanning. As per the Statistics and the giving space. This
150-
</p>
151-
152-
<p class="text-trans-none">
153-
The project will include Visualizating of Data and Rescanning.
154-
As per the Statistics and the giving space.
154+
The Project will include the Visualization of Data, which will involve creating interactive and
155+
informative graphs, charts, and other visual representations to help stakeholders understand and analyze
156+
the data.
155157
</p>
156158
</div>
157159
</div>
@@ -363,136 +365,133 @@ <h3 class="chatbox__title">Precious IT Services</h3>
363365
<script>
364366
//Custom Cursor
365367

366-
const coords = { x: 0, y: 0 };
367-
const circles = document.querySelectorAll(".circle");
368-
369-
const colors = [
370-
"#55a5ea",
371-
"#55a5ea",
372-
"#55a5ea",
373-
"#55a5ea",
374-
"#55a5ea",
375-
"#55a5ea",
376-
"#55a5ea",
377-
"#55a5ea",
378-
"#3fbcc0c6",
379-
"#3fbcc0c6",
380-
"#3fbcc0c6",
381-
"#3fbcc0c6",
382-
"#3fbcc0c6",
383-
"#3fbcc0c6",
384-
"fff",
385-
"fff",
386-
"fff",
387-
"fff",
388-
"fff",
389-
"fff",
390-
"fff",
391-
];
392-
393-
circles.forEach(function (circle, index) {
394-
circle.x = 0;
395-
circle.y = 0;
396-
circle.style.backgroundColor = colors[index % colors.length];
397-
});
398-
399-
window.addEventListener("mousemove", function (e) {
400-
coords.x = e.clientX;
401-
coords.y = e.clientY;
402-
});
403-
404-
function animateCircles() {
405-
let x = coords.x;
406-
let y = coords.y;
407-
408-
circles.forEach(function (circle, index) {
409-
circle.style.left = x - 12 + "px";
410-
circle.style.top = y - 12 + "px";
411-
412-
circle.style.scale = (circles.length - index) / circles.length;
413-
414-
circle.x = x;
415-
circle.y = y;
416-
417-
const nextCircle = circles[index + 1] || circles[0];
418-
x += (nextCircle.x - x) * 0.3;
419-
y += (nextCircle.y - y) * 0.3;
420-
});
421-
422-
requestAnimationFrame(animateCircles);
423-
}
424-
425-
animateCircles();
426-
427-
// Function to toggle dark mode
428-
function toggleDarkMode() {
429-
const isDarkMode = isDarkModePreferred();
430-
setDarkModePreference(!isDarkMode);
431-
applyDarkModePreference();
432-
}
433-
434-
// Function to apply dark mode preference
435-
function applyDarkModePreference() {
436-
const isDarkMode = isDarkModePreferred();
437-
if (isDarkMode) {
438-
document.body.classList.add("dark-mode");
439-
document.getElementById("theme-icon").src = "assets/images/icons8-sun.svg";
440-
} else {
441-
document.body.classList.remove("dark-mode");
442-
document.getElementById("theme-icon").src = "assets/images/moon_solid.svg";
443-
}
444-
}
445-
446-
// Function to set dark mode preference
447-
document.addEventListener("DOMContentLoaded", () => {
448-
const currentTheme = localStorage.getItem("theme");
449-
const switchCheckbox = document.getElementById("switch"); // Define switchCheckbox here
450-
const starRating = document.querySelector(".star_rating");
451-
const thankYouMessage = document.querySelector(".thank_you_message");
452-
if (switchCheckbox) {
453-
// Check if switchCheckbox is not null
454-
function applyDarkModeStyles() {
455-
document.body.classList.remove("light-mode");
456-
document.body.classList.add("dark-mode");
457-
starRating.style.backgroundColor = "#2d2828";
458-
thankYouMessage.style.backgroundColor = "#2d2828";
459-
}
460-
461-
function applyLightModeStyles() {
462-
document.body.classList.remove("dark-mode");
463-
document.body.classList.add("light-mode");
464-
starRating.style.backgroundColor = "white";
465-
thankYouMessage.style.backgroundColor = "white";
466-
}
467-
468-
if (currentTheme) {
469-
if (currentTheme === "dark-mode") {
470-
applyDarkModeStyles();
471-
switchCheckbox.checked = true;
472-
} else {
473-
applyLightModeStyles();
474-
}
475-
}
476-
477-
switchCheckbox.addEventListener("change", () => {
478-
if (switchCheckbox.checked) {
479-
applyDarkModeStyles();
480-
localStorage.setItem("theme", "dark-mode");
481-
} else {
482-
applyLightModeStyles();
483-
localStorage.setItem("theme", "light-mode");
368+
const coords = { x: 0, y: 0 };
369+
const circles = document.querySelectorAll(".circle");
370+
371+
const colors = [
372+
"#55a5ea",
373+
"#55a5ea",
374+
"#55a5ea",
375+
"#55a5ea",
376+
"#55a5ea",
377+
"#55a5ea",
378+
"#55a5ea",
379+
"#55a5ea",
380+
"#3fbcc0c6",
381+
"#3fbcc0c6",
382+
"#3fbcc0c6",
383+
"#3fbcc0c6",
384+
"#3fbcc0c6",
385+
"#3fbcc0c6",
386+
"fff",
387+
"fff",
388+
"fff",
389+
"fff",
390+
"fff",
391+
"fff",
392+
"fff",
393+
];
394+
395+
circles.forEach(function (circle, index) {
396+
circle.x = 0;
397+
circle.y = 0;
398+
circle.style.backgroundColor = colors[index % colors.length];
399+
});
400+
401+
window.addEventListener("mousemove", function (e) {
402+
coords.x = e.clientX;
403+
coords.y = e.clientY;
404+
});
405+
406+
function animateCircles() {
407+
let x = coords.x;
408+
let y = coords.y;
409+
410+
circles.forEach(function (circle, index) {
411+
circle.style.left = x - 12 + "px";
412+
circle.style.top = y - 12 + "px";
413+
414+
circle.style.scale = (circles.length - index) / circles.length;
415+
416+
circle.x = x;
417+
circle.y = y;
418+
419+
const nextCircle = circles[index + 1] || circles[0];
420+
x += (nextCircle.x - x) * 0.3;
421+
y += (nextCircle.y - y) * 0.3;
422+
});
423+
424+
requestAnimationFrame(animateCircles);
484425
}
485-
});
486-
} else {
487-
console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
488-
}
489-
});
490426

491-
</script>
492-
</body>
427+
animateCircles();
428+
429+
// Function to toggle dark mode
430+
function toggleDarkMode() {
431+
const isDarkMode = isDarkModePreferred();
432+
setDarkModePreference(!isDarkMode);
433+
applyDarkModePreference();
434+
}
493435

436+
// Function to apply dark mode preference
437+
function applyDarkModePreference() {
438+
const isDarkMode = isDarkModePreferred();
439+
if (isDarkMode) {
440+
document.body.classList.add("dark-mode");
441+
document.getElementById("theme-icon").src = "assets/images/icons8-sun.svg";
442+
} else {
443+
document.body.classList.remove("dark-mode");
444+
document.getElementById("theme-icon").src = "assets/images/moon_solid.svg";
445+
}
446+
}
494447

495-
</html>
448+
// Function to set dark mode preference
449+
document.addEventListener("DOMContentLoaded", () => {
450+
const currentTheme = localStorage.getItem("theme");
451+
const switchCheckbox = document.getElementById("switch"); // Define switchCheckbox here
452+
const starRating = document.querySelector(".star_rating");
453+
const thankYouMessage = document.querySelector(".thank_you_message");
454+
if (switchCheckbox) {
455+
// Check if switchCheckbox is not null
456+
function applyDarkModeStyles() {
457+
document.body.classList.remove("light-mode");
458+
document.body.classList.add("dark-mode");
459+
starRating.style.backgroundColor = "#2d2828";
460+
thankYouMessage.style.backgroundColor = "#2d2828";
461+
}
462+
463+
function applyLightModeStyles() {
464+
document.body.classList.remove("dark-mode");
465+
document.body.classList.add("light-mode");
466+
starRating.style.backgroundColor = "white";
467+
thankYouMessage.style.backgroundColor = "white";
468+
}
469+
470+
if (currentTheme) {
471+
if (currentTheme === "dark-mode") {
472+
applyDarkModeStyles();
473+
switchCheckbox.checked = true;
474+
} else {
475+
applyLightModeStyles();
476+
}
477+
}
478+
479+
switchCheckbox.addEventListener("change", () => {
480+
if (switchCheckbox.checked) {
481+
applyDarkModeStyles();
482+
localStorage.setItem("theme", "dark-mode");
483+
} else {
484+
applyLightModeStyles();
485+
localStorage.setItem("theme", "light-mode");
486+
}
487+
});
488+
} else {
489+
console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
490+
}
491+
});
496492

493+
</script>
494+
</body>
497495

498496

497+
</html>

‎main.css

+13-10
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ body {
6161
margin: 2rem;
6262
padding-top: 6rem;
6363
display: inline-block;
64-
font-size: 3.5rem;
64+
font-size: 5.5rem;
6565
color: #002e5f;
6666
position: relative;
6767
letter-spacing: 0.2rem;
@@ -217,7 +217,7 @@ label:before {
217217
top: 1px;
218218
border-radius: 50%;
219219
cursor: pointer;
220-
background: #000;
220+
background: transparent;
221221
transition: 0.4s;
222222
}
223223

@@ -299,8 +299,8 @@ body.night {
299299
list-style-type: none;
300300
display: flex;
301301
align-items: center;
302-
padding-top: 0.5rem;
303-
justify-content: space-around;
302+
303+
justify-content: space-evenly;
304304

305305

306306
}
@@ -361,9 +361,7 @@ body.night {
361361
background-color: #2d0b00;
362362
} */
363363

364-
.header .navbar ul li {
365-
margin: 0 1.5rem;
366-
}
364+
367365

368366
.header .navbar ul li a {
369367
font-size: 2rem;
@@ -1196,7 +1194,13 @@ footer {
11961194

11971195
ul li {
11981196
list-style: none;
1199-
margin-bottom: 12px;
1197+
margin-right: 30px;
1198+
align-self: center;
1199+
display: flex;
1200+
justify-content: center;
1201+
align-items: center;
1202+
gap: 7px;
1203+
12001204
}
12011205

12021206
ul li a {
@@ -1209,8 +1213,7 @@ ul li a {
12091213
12101214
.newsletter h4 {
12111215
/* margin-bottom: 15px; */
1212-
margin-bottom: 3rem;
1213-
margin-top: -2rem;
1216+
12141217
}
12151218

12161219
*/ .newsletter-form {

0 commit comments

Comments
 (0)