WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Added Navbar Transitions and other Aesthetic Looks #83

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

Open
Ankit-Rattan wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Navbar Transitions and other Aesthetic Looks #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecdd91e
Adding Transitions in Navbar
Apr 5, 2023
11b510c
Navbar and other transitions and Footer logo
Ankit-Rattan Aug 8, 2023
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
14 changes: 14 additions & 0 deletions css/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
justify-content: space-between;
align-items: center;
}
nav:hover{
/* transform: scale(); */
box-shadow: 10px 10px 10px 10px rgba(40, 40, 40, 0.4);
transition-duration: 0.5s;
}

.topnav a {
float: left;
Expand All @@ -21,10 +26,13 @@
.topnav a:hover {
color: rgb(255, 255, 255);
font-weight: 500;
transform: 2s;
transform: scale(1.1);
}

.topnav a.active {
color: white;

}

.topnav .icon {
Expand All @@ -42,6 +50,12 @@
margin-bottom: auto;

}
#srch-bar:hover{
border-color: rgb(255, 255, 255);
background-color: black;
color: white;
transition-duration: 1s;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
Expand Down
19 changes: 19 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,14 @@ nav{
border: 3px solid var(--secondary-colour);
border-radius: 100px;
}
.logo img:hover{
transition: 1s;
transform: scale(1.1);
border-radius: 100%;
cursor: pointer;
box-shadow: -1px 1px 1px 1px white;

}

/* List and search button styling */
.main-menu {
Expand Down Expand Up @@ -102,6 +110,16 @@ nav{
font-size: 15px;
border-radius: 8px;
}
#main-img{
margin: auto;
}

#main-img:hover{
box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.4);
transform: scale(1.02);
transition-duration: 1s;

}

/* background styling */
.background {
Expand Down Expand Up @@ -135,6 +153,7 @@ nav{
}
.secondhalf {
width: 30%;
margin: auto;
}

.secondhalf img {
Expand Down
9 changes: 6 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</a>
<form class="srch" role="search">
<div id="srch">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<input id="srch-bar" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit"><img src="img/search.png" alt="" width="25"></button>
</div>
</form>
Expand All @@ -55,7 +55,7 @@
<div class=" box-main">
<div class="firsthalf">
<div class="secondhalf">
<img class="img" src="img/online-shop.jpg" alt="" />
<img id="main-img" class="img" src="img/online-shop.jpg" alt="" />
</div>
<p class="text-big" style="color: black; font-family: 'Josefin Sans', sans-serif;"><strong>The Shopping place
for all needs!</strong></p>
Expand Down Expand Up @@ -279,7 +279,10 @@ <h1 id="free_daily_updates">Subscribe to our newsletter</h1>

<div class="first_para">
<div class="footer_logo">
<h1>LOGO</h1>
<!-- <h1>LOGO</h1> -->
<div class="secondhalf">
<img id="main-img" class="img" src="img/online-shop.jpg" alt="" />
</div>
<div class="footer_para">

<h3 id="footer_first_head">We are the team and we truly care for you!</h3>
Expand Down