Skip to content

Navbar updated #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vimal-java-dev merged 1 commit into from
Oct 13, 2025
Merged

Navbar updated #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{
"liveServer.settings.port": 5501
"liveServer.settings.port": 5501,
"files.refactoring.autoSave": false,
"notebook.codeActionsOnSave": {}
}
36 changes: 31 additions & 5 deletions css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,52 @@ h3 {
margin-bottom: 1rem;
}

/* Section */
section {
border-radius: 12px;
}

/* ===================================================
===== Navbar =====
=================================================== */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
background-color: #7a7878;
padding: 10px 20px;
color: white;
color: rgb(201, 238, 99);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

/* Brand container (logo + name) */
.brand {
display: flex;
align-items: center;
gap: 8px;
/* space between logo and text */
font-size: 1.4rem;
font-weight: 600;
color: rgb(201, 238, 99);
text-decoration: none;
}

/* Logo image */
.logo {
height: 32px;
width: 32px;
object-fit: contain;
border-radius: 6px;
/* optional for a softer look */
}

/* .logo {
font-size: 20px;
font-weight: bold;
}
} */

.nav-links {
list-style: none;
Expand All @@ -58,7 +84,7 @@ h3 {

.nav-links li a {
text-decoration: none;
color: white;
color: rgb(201, 238, 99);
transition: color 0.3s;
}

Expand Down Expand Up @@ -112,7 +138,7 @@ h3 {
.container {
width: 85%;
margin: auto;
padding: 3rem 0;
padding: 1rem 0;
}

/* Fade-in animation */
Expand Down
8 changes: 4 additions & 4 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
color: rgb(201, 238, 99);
position: relative;
}

Expand Down Expand Up @@ -164,7 +164,7 @@ body.dark header.navbar {
}

body.dark nav ul li a {
color: #e0e0e0;
color: rgb(201, 238, 99);
}

body.dark nav ul li a:hover {
Expand Down Expand Up @@ -219,7 +219,7 @@ body.dark #darkModeToggle:hover {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
/* margin-top: 10px; */
}

/* Elegant visitor counter */
Expand All @@ -240,7 +240,7 @@ body.dark #darkModeToggle:hover {
/* glow */
backdrop-filter: blur(12px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 auto;
/* margin: 0 auto; */
}

/* Hover effect for interactivity */
Expand Down
19 changes: 12 additions & 7 deletions css/mini-services.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
#services-preview .service-card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
background: #fff3e0; /* Slight highlight color */
background: #fff3e0;
/* Slight highlight color */
}

#services-preview .service-card i {
Expand All @@ -24,21 +25,23 @@

#services-preview .service-card:hover i {
transform: rotate(10deg) scale(1.1);
color: #ff8c42; /* Slight color change on hover */
color: #ff8c42;
/* Slight color change on hover */
}

#services-preview .service-card h3 {
transition: color 0.3s ease;
}

#services-preview .service-card:hover h3 {
color: #d2691e; /* Darker highlight on hover */
color: #d2691e;
/* Darker highlight on hover */
}

/* ===================================================
===== Mini Services Preview Section =====
=================================================== */
#services-preview{
#services-preview {
text-align: center;
}

Expand Down Expand Up @@ -66,21 +69,23 @@ body.dark {
color: #e0e0e0;
}

body.dark #services-preview .service-card {
body.dark #services-preview .service-card {
background: #242424;
color: #e0e0e0;
}

body.dark #services-preview .service-card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
background: #fff3e0; /* Slight highlight color */
background: #fff3e0;
/* Slight highlight color */
}

body.dark #services-preview .service-card p {
transition: color 0.3s ease;
}

body.dark .service-card:hover p {
color: #000000; /* Darker highlight on hover */
color: #000000;
/* Darker highlight on hover */
}
Binary file added images/logo.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 22 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,22 @@
<body>
<!-- Header / Navbar -->
<nav class="navbar">
<div class="logo">Vimal Tech</div>
<div>
<a href="index.html" class="brand">
<img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
<span class="brand-name">Vimal Tech</span>
</a>
</div>

<ul class="nav-links" id="nav-links">
<li><a href="#hero" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#tech-stack">Tech Stack</a></li>
<li><a href="services.html">Services</a></li> <!-- New Services link -->
<li><a href="#services-preview">Services-Preview</a></li>
<li><a href="#visitor-counter">Visitor-Counter</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="services.html">Services</a></li> <!-- New Services link -->
<li><a href="#contact">Contact</a></li>
</ul>
<!-- hamburger icon -->
Expand Down Expand Up @@ -104,12 +111,24 @@ <h3>Project Consulting</h3>
</div>
</div>

<div class="services-preview" style="margin-top:20px">
<div class="services-preview" style="margin-top:20px; margin-bottom:10px">
<a href="services.html" target="_blank" class="btn">View All Services</a><br /><br />
<a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">Alex Food Corner Live Project</a>
</div>
</section>

<!-- Visitor Counter Section -->
<section id="visitor-counter" class="container fade-in counter-container">
<div class="visitor-count-card">
<div class="visitor-count">
<h2 style="color: #222">Visitor Counter</h2>
<h3 style="color: #604848">
👋 Total Visitors: <span id="visitorCount">Loading...</span>
</h3>
</div>
</div>
</section>

<!-- Skills Section -->
<section id="skills" class="container fade-in">
<h2>Skills</h2>
Expand Down Expand Up @@ -218,18 +237,6 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
</div>
</section><br />

<!-- Visitor Counter Section -->
<section class="container fade-in counter-container">
<div class="visitor-count-card">
<div class="visitor-count">
<h2 style="color: #222">Visitor Counter</h2>
<h3 style="color: #604848">
👋 Total Visitors: <span id="visitorCount">Loading...</span>
</h3>
</div>
</div>
</section><br />

<!-- Contact Section -->
<section id="contact" class="container fade-in">
<h2>Contact Me</h2>
Expand Down
8 changes: 7 additions & 1 deletion services.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,13 @@
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="logo">Vimal Tech</div>
<div>
<a href="index.html" class="brand">
<img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
<span class="brand-name">Vimal Tech</span>
</a>
</div>

<ul class="nav-links" id="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="services.html" class="active">Services</a></li>
Expand Down