Skip to content

Commit

Permalink
Merge pull request #481 from Abhishek-IITP/main
Browse files Browse the repository at this point in the history
Add Home Button on Login/Signup Page and Improve Navbar with Login Button and Hover Effects
  • Loading branch information
PriyaGhosal authored Oct 13, 2024
2 parents 05d5ea1 + 6de506d commit dfe0231
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 14 deletions.
67 changes: 67 additions & 0 deletions assets/css/signin.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,73 @@ body {
align-items: center;
height: 100vh;
}
.navbar {
position: absolute;
top:0;
left:0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255, 255,255,0.07);
/* backdrop-filter: blur(10px); */
padding: 1rem;
}

.navbar .logo {
font-size:2rem;
color: #fff;
font-weight: 700;
text-decoration: none;
font-family: sans-serif;
}

.navbar ul {
list-style: none;
display: flex;
}

.navbar ul li {
margin-left: 20px;
font-size: 1.3rem;
color:white;
}

.navbar ul li a {
text-decoration: none;
color: #fff;
padding: 0.5rem 1rem;
transition: background-color 0.3s ease;
}

.navbar ul li a:hover {
background-color: #FEAFBF;
color: white;
border-radius: 5px;
}
.nav-link {
text-decoration: none;
position: relative;
padding-bottom: 2px;
}

.nav-link::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: rgb(255, 255, 255);
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}

.nav-link:hover::after {
visibility: visible;
transform: scaleX(1);
}

.container {
width: 100%;
Expand Down
31 changes: 31 additions & 0 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,37 @@ body.nav-active {
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
/* Styling for the navbar links */
.navbar-link {
position: relative;
display: inline-block;
color: #333; /* Adjust the color as needed */
text-decoration: none;
font-weight: 500;
padding-bottom: 5px;
}

/* Underline effect */
.navbar-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #ff69b4; /* Pink color for the underline */
transition: width 0.3s ease-in-out;
}

/* Hover effect to show the underline */
.navbar-link:hover::after {
width: 100%;
}

/* Adjust color on hover if needed */
.navbar-link:hover {
color: #ff69b4; /* Optionally change text color to pink on hover */
}

.container {
padding-inline: 16px;
Expand Down
32 changes: 19 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
<header class="header" data-header>


<div class="container">
<div class="container" style="margin-left: 13rem;">

<a href="#">
<img src="./assets/images/Skillwise_logo-removebg-preview.png" width="50" height="10" alt="SkillWise home">
Expand All @@ -86,10 +86,10 @@
</button>
</div>

<ul class="navbar-list">
<ul class="navbar-list" style="width: 50vw;">


<li class="navbar-item">
<li class="navbar-item" style="margin-left: 1rem;">
<a href="#home" class="navbar-link title-sm" data-nav-link>Home</a>
</li>

Expand Down Expand Up @@ -118,11 +118,16 @@
<a href="../Faq.html" class="navbar-link title-sm" data-nav-link>FAQ</a>
</li>


<li class="navbar-item"></li>
<a href="/signin.html" class="navbar-link title-sm" data-nav-link>LogIn</a>
</li>

</ul>

</nav>

<div class="navRightSide">
<!-- <div class="navRightSide">
<div class="searchBox">
<input class="searchInput" type="text" name="" placeholder="Search something">
<button class="searchButton SearchBTN" href="#">
Expand Down Expand Up @@ -162,17 +167,18 @@
<a href="../signin.html" class="btn btn-secondary">Start Free Trial</a>
<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
</button>
<div class="containers">
<button id="theme-toggle">
<ion-icon id="theme-icon" name="sunny-outline"></ion-icon>
</button>
</div>
</div> -->
<a href="../signin.html" class="btn">Start Free Trial</a>

<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
</button>
<div class="containers">
<button id="theme-toggle">
<ion-icon id="theme-icon" name="sunny-outline"></ion-icon>
</button>
</div>

<div class="overlay" data-overlay data-nav-toggler></div>
Expand Down
14 changes: 13 additions & 1 deletion signin.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,19 @@
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
</head>
<body>
<body style="overflow: hidden;">
<header>
<nav class="navbar">
<a href="./index.html" class="logo">SkillWise</a>
<ul style="margin-right: 2rem;">
<li>
<a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
<i class="fa-solid fa-house"></i>
</li>
</ul>
</nav>
</header>

<div class="container">
<div class="form-container">
<!-- Add SkillWise Icon/Logo -->
Expand Down
11 changes: 11 additions & 0 deletions signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
</head>
<body>
<header>
<nav class="navbar">
<a href="./index.html" class="logo">SkillWise</a>
<ul style="margin-right: 2rem;">
<li>
<a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
<i class="fa-solid fa-house"></i>
</li>
</ul>
</nav>
</header>
<div class="container">
<div class="form-container">
<!-- Add SkillWise Icon/Logo -->
Expand Down

0 comments on commit dfe0231

Please sign in to comment.