Skip to content

Commit 5dc31cb

Browse files
RohanKumar01RohanKumar01
committed
Fixes inn Navbar
1 parent e7ee869 commit 5dc31cb

File tree

3 files changed

+77
-134
lines changed

3 files changed

+77
-134
lines changed

Diff for: ‎index.html

+7-68
Original file line numberDiff line numberDiff line change
@@ -31,43 +31,20 @@
3131
<h1>LAZAREV.</h1>
3232
<div class="nav-part2">
3333
<div class="nav-elem">
34-
<h4>Case Studies</h4>
34+
<h4>
35+
What we do
36+
<i class="ri-arrow-down-s-line"></i>
37+
</h4>
3538
<h5><span>Case Studies</span></h5>
3639
</div>
3740
<div class="nav-elem">
38-
<h4>Areas of expertise</h4>
39-
<h5><span>🔥 AI & ML</span></h5>
40-
<h5><span>FinTech</span></h5>
41-
<h5><span>RealEstate</span></h5>
42-
<h5><span>E-Commerce</span></h5>
43-
<h5><span>Web3</span></h5>
41+
<h4>Cases</h4>
4442
</div>
4543
<div class="nav-elem">
46-
<h4>UI/UX Design</h4>
47-
<h5><span>UX Audit</span></h5>
48-
<h5><span>UI Design</span></h5>
49-
<h5><span>UX Design</span></h5>
50-
<h5><span>UX Research</span></h5>
44+
<h4>Outcomes</h4>
5145
</div>
5246
<div class="nav-elem">
53-
<h4>Product Design</h4>
54-
<h5><span>SaaS</span></h5>
55-
<h5><span>Mobile App</span></h5>
56-
<h5><span>Web App</span></h5>
57-
<h5><span>Website Design</span></h5>
58-
</div>
59-
<div class="nav-elem">
60-
<h4>Design Process</h4>
61-
<h5><span>MVP</span></h5>
62-
<h5><span>Relaunch</span></h5>
63-
</div>
64-
<div class="nav-elem">
65-
<h4>About Agency</h4>
66-
<h5><span>Our Story</span></h5>
67-
<h5><span>Client's Feedback</span></h5>
68-
<h5><span>Careers</span></h5>
69-
<h5><span></span></h5>
70-
<h5><span>News & Articles</span></h5>
47+
<h4>News</h4>
7148
</div>
7249
</div>
7350
<button>
@@ -79,44 +56,6 @@ <h3>Let's Talk</h3>
7956
></path>
8057
</svg>
8158
</button>
82-
<div id="nav-bottom"></div>
83-
<!-- <div id="nav-bottom">
84-
<div class="bottom-div">
85-
<h5><span>Case Studies</span></h5>
86-
</div>
87-
<div class="bottom-div">
88-
<h5><span>🔥 AI & ML</span></h5>
89-
<h5><span>FinTech</span></h5>
90-
<h5><span>RealEstate</span></h5>
91-
<h5><span>E-Commerce</span></h5>
92-
<h5><span>Web3</span></h5>
93-
</div>
94-
95-
<div class="bottom-div">
96-
<h5><span>UX Audit</span></h5>
97-
<h5><span>UI Design</span></h5>
98-
<h5><span>UX Design</span></h5>
99-
<h5><span>UX Research</span></h5>
100-
</div>
101-
102-
<div class="bottom-div">
103-
<h5><span>SaaS</span></h5>
104-
<h5><span>Mobile App</span></h5>
105-
<h5><span>Web App</span></h5>
106-
<h5><span>Website Design</span></h5>
107-
</div>
108-
<div class="bottom-div">
109-
<h5><span>MVP</span></h5>
110-
<h5><span>Relaunch</span></h5>
111-
</div>
112-
<div class="bottom-div">
113-
<h5><span>Our Story</span></h5>
114-
<h5><span>Client's Feedback</span></h5>
115-
<h5><span>Careers</span></h5>
116-
<h5><span></span></h5>
117-
<h5><span>News & Articles</span></h5>
118-
</div>
119-
</div> -->
12059
</nav>
12160
<div id="main">
12261
<div id="page1">

Diff for: ‎script.js

+52-41
Original file line numberDiff line numberDiff line change
@@ -43,42 +43,52 @@ function LocomotiveAnimation() {
4343
function navAnimation() {
4444
var nav = document.querySelector("nav");
4545

46-
nav.addEventListener("mouseenter", function () {
47-
let tl = gsap.timeline();
46+
let tl = gsap.timeline();
4847

49-
tl.to("#nav-bottom", {
50-
height: "15vh",
51-
duration: 0.5,
52-
});
53-
tl.to(".nav-part2 h5", {
54-
display: "block",
55-
duration: 0.1,
56-
});
57-
tl.to(".nav-part2 h5 span", {
58-
y: 0,
59-
// duration:0.3,
60-
stagger: {
61-
amount: 0.5,
62-
},
63-
});
64-
});
65-
nav.addEventListener("mouseleave", function () {
66-
let tl = gsap.timeline();
67-
tl.to(".nav-part2 h5 span", {
68-
y: 25,
69-
stagger: {
70-
amount: 0.2,
71-
},
72-
});
73-
tl.to(".nav-part2 h5", {
74-
display: "none",
75-
duration: 0.1,
76-
});
77-
tl.to("#nav-bottom", {
78-
height: 0,
79-
duration: 0.2,
80-
});
48+
tl.to("#nav-bottom", {
49+
borderBottom: "1px solid #dadada",
50+
scrollTrigger: {
51+
trigger: "#page1",
52+
scroller: "body",
53+
// markers: true,
54+
//Markrs to see strt and end of scroll trigger
55+
start: "top 50%",
56+
scrub: true,
57+
},
8158
});
59+
// tl.to("#nav-bottom", {
60+
// height: "15vh",
61+
// duration: 0.5,
62+
// });
63+
// tl.to(".nav-part2 h5", {
64+
// display: "block",
65+
// duration: 0.1,
66+
// });
67+
// tl.to(".nav-part2 h5 span", {
68+
// y: 0,
69+
// // duration:0.3,
70+
// stagger: {
71+
// amount: 0.5,
72+
// },
73+
// });
74+
// });
75+
// nav.addEventListener("mouseleave", function () {
76+
// let tl = gsap.timeline();
77+
// tl.to(".nav-part2 h5 span", {
78+
// y: 25,
79+
// stagger: {
80+
// amount: 0.2,
81+
// },
82+
// });
83+
// tl.to(".nav-part2 h5", {
84+
// display: "none",
85+
// duration: 0.1,
86+
// });
87+
// tl.to("#nav-bottom", {
88+
// height: 0,
89+
// duration: 0.2,
90+
// });
91+
// });
8292
}
8393
function page2Animation() {
8494
var rightElems = document.querySelectorAll(".right-elem");
@@ -230,10 +240,11 @@ function loadingAnimaton() {
230240
});
231241
}
232242

233-
LocomotiveAnimation();
234-
loadingAnimaton();
235-
navAnimation();
236-
page2Animation();
237-
// page3VideoAnimation();
238-
page4Videonimation();
239-
page6Animation();
243+
// LocomotiveAnimation();
244+
245+
// loadingAnimaton();
246+
// navAnimation();
247+
// page2Animation();
248+
// // page3VideoAnimation();
249+
// page4Videonimation();
250+
// page6Animation();

Diff for: ‎style.css

+18-25
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ nav {
2525
display: flex;
2626
align-items: flex-start;
2727
width: 100%;
28-
padding: 2vw 6.8vw;
28+
padding: 1vw 6.8vw;
2929
justify-content: space-between;
30-
height: 10vh;
30+
height: 8vh;
3131
z-index: 10;
3232
background-color: black;
3333
}
@@ -51,9 +51,12 @@ nav button {
5151
background: #0ba34e;
5252
border-radius: 50px;
5353
display: flex;
54+
font-family: Grotesk;
55+
font-weight: 500;
5456
justify-content: space-between;
5557
align-items: center;
56-
padding: 0.8vw 1.1vw;
58+
/* margin-top: -5vw; */
59+
padding: 0.5vw 0.8vw;
5760
border: none;
5861
}
5962

@@ -74,32 +77,38 @@ nav button svg {
7477
.nav-part2 {
7578
display: flex;
7679
gap: 2vw;
77-
align-items: flex-start;
80+
align-items: flex-end;
7881
padding: 1vh 0;
7982
position: relative;
8083
z-index: 10;
8184
}
8285

8386
.nav-part2 h4 {
84-
font-size: 0.73vw;
87+
font-size: 1vw;
88+
cursor: pointer;
8589
text-transform: uppercase;
8690
font-weight: 600;
91+
font-family: Grotesk;
8792
margin-bottom: 1.5vw;
8893
}
8994

95+
.nav-part2 h4:hover {
96+
color: #0ba34e;
97+
}
98+
9099
.nav-part2 h5 {
91100
margin-bottom: 0.6vw;
92101
/* background-color: red; */
93102
display: none;
94103
overflow: hidden;
95104
}
96105

97-
.nav-part2 h5 span {
106+
/* .nav-part2 h5 span {
98107
font-size: 0.77vw;
99108
font-weight: 400;
100109
transform: translateY(25px);
101110
display: inline-block;
102-
}
111+
} */
103112

104113
#nav-bottom {
105114
width: 79%;
@@ -109,25 +118,9 @@ nav button svg {
109118
top: 100%;
110119
background-color: #111;
111120
z-index: 9;
112-
border-bottom: 1px solid #fff;
121+
/* border-bottom: 1px solid #fff; */
113122
}
114-
/*
115-
#nav-bottom {
116-
position: absolute;
117-
border-bottom: 1px solid #dadada;
118-
width: 89%;
119-
bottom: 0%;
120-
height: 0%;
121-
display: flex;
122-
align-items: flex-start;
123-
justify-content: space-between;
124-
padding: 2vw 15vw;
125-
padding-left: 18vw;
126-
padding-top: 3vw;
127-
transition: all ease 0.5s;
128-
/* background: red; */
129-
/* margin-left: -2vw;
130-
} */
123+
131124
#page1 {
132125
height: 100vh;
133126
width: 100%;

0 commit comments

Comments
 (0)