Skip to content

Commit a27cf61

Browse files
bhaveyxbhaveyx
authored
Merge pull request #6 from IoTics-iiitn/bhavesh
Responsive Navbar and Hero Section
2 parents 5303003 + 24baab3 commit a27cf61

File tree

13 files changed

+319
-147
lines changed

13 files changed

+319
-147
lines changed

‎client/src/App.js‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
1-
import React from 'react'
1+
import React, {useState} from 'react'
22
import Home from './pages/home/Home.js'
3+
import Navbar from './components/navbar/Navbar.js'
4+
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
5+
import Team from "./pages/team/Team"
6+
import Hero from './components/hero/Hero.js';
7+
8+
export const VisibilityContext = React.createContext()
39

410
const App = () => {
11+
12+
const [visibility, setVisibility] = useState(false)
13+
const value = {visibility, setVisibility}
14+
15+
console.log(visibility)
16+
// console.log("check")
17+
518
return (
6-
<div>
7-
{/* <h1>App</h1> */}
8-
<Home />
9-
</div>
10-
)
19+
<VisibilityContext.Provider value={value}>
20+
<Router>
21+
<Navbar visibility={visibility} />
22+
<Switch>
23+
<Route exact path="/">
24+
<Home />
25+
</Route>
26+
<Route exact path="/team">
27+
{/* <Home></Home> */}
28+
<Team></Team>
29+
</Route>
30+
</Switch>
31+
</Router>
32+
</VisibilityContext.Provider>
33+
);
34+
1135
}
1236

13-
export default App
37+
export default App

‎client/src/components/hero/Hero.css‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,59 @@
77
}
88

99
.hero-container {
10-
position: relative;
11-
top: -52px;
12-
left: 0;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
min-height: 110vh;
14+
background-image: url("./assets/background-large.png");
15+
background-repeat: no-repeat;
16+
background-color: #fcfcfc;
17+
background-size: cover;
18+
background-position: center center;
19+
font-family: "Raleway", sans-serif;
20+
height: 95vh;
21+
transform: translate(0,-9vh);
22+
max-height: 100vh;
23+
width: 100%;
1324
}
1425

15-
.bg {
16-
max-width: 100%;
17-
z-index: -10;
26+
.hero-content{
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: space-between;
30+
height: 400px;
31+
width: 80%;
32+
margin-top: 6rem;
1833
}
1934

20-
.hero-text {
21-
position: relative;
22-
top: -550px;
23-
left: 170px;
24-
color: #ff577e;
25-
font-family: "Raleway", sans-serif;
26-
height: 300px;
27-
width: 300px;
28-
line-height: 60px;
29-
font-size: 1.5rem;
35+
.hero-content img{
36+
width: 250px;
3037
}
3138

32-
.head-logo {
33-
position: relative;
34-
top: -675px;
35-
left: 100px;
36-
width: 250px;
39+
.hero-text h1{
40+
color: #ff697e;
41+
font-size: 3.4rem;
42+
font-weight: 400;
43+
}
44+
45+
@media screen and (max-width:820px) {
46+
.hero-container{
47+
background: url("./assets//background-mobile.png") no-repeat center center fixed;
48+
background-size: cover;
49+
background-position: center center;
50+
}
51+
}
52+
53+
@media screen and (max-width:650px) {
54+
.head-logo{
55+
display: none;
56+
}
57+
.hero-content{
58+
margin-top: 18rem;
59+
}
60+
.hero-text h1{
61+
color: #ff697e;
62+
font-size: 2.5rem;
63+
font-weight: 400;
3764
}
65+
}

‎client/src/components/hero/Hero.js‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,53 @@
1-
import React from 'react'
2-
3-
// importing the bg
4-
import bg from './assets/Asset6.png'
1+
import React, {useState, useEffect, useRef, useContext} from 'react'
52

63
import logo from './assets/logo.png'
4+
import {ReactComponent as BgSvg} from "./assets/background-large.svg"
75

86
import "./Hero.css"
7+
import { VisibilityContext } from "../../App";
8+
9+
10+
const Hero = (props) => {
11+
12+
// const [isVisible, setIsVisible] = useState(false)
13+
const logoRef = useRef(null)
14+
const { visibility, setVisibility } = useContext(VisibilityContext);
15+
16+
17+
const callback = (entries)=>{
18+
const [entry] = entries
19+
setVisibility(entry.isIntersecting)
20+
}
21+
22+
23+
let options = {
24+
root: null,
25+
rootMargin: "0px",
26+
threshold: 0
27+
}
28+
29+
useEffect(()=>{
30+
const observer = new IntersectionObserver(callback, options);
31+
if(logoRef.current) observer.observe(logoRef.current);
32+
33+
return ()=>{
34+
if(logoRef.current) observer.unobserve(logoRef.current)
35+
}
36+
37+
}, [options, logoRef])
938

10-
const Hero = () => {
1139
return (
12-
<div className='hero-container'>
13-
<img className='bg' src={bg} alt="" />
14-
<img className='head-logo' src={logo} alt=""/>
40+
<div className="hero-container">
41+
<div className="hero-content">
42+
<img ref={logoRef} className="head-logo" src={logo} alt="logo" />
1543
<div className="hero-text">
16-
<h1>Streamlining Your Iot Needs</h1>
44+
<h1>
45+
Streamlining <br /> Your IOT <br /> Needs...
46+
</h1>
1747
</div>
48+
</div>
1849
</div>
19-
)
50+
);
2051
}
2152

22-
export default Hero
53+
export default Hero

client/src/components/hero/assets/Asset6.png renamed to client/src/components/hero/assets/background-large.png

File renamed without changes.

‎client/src/components/hero/assets/background-large.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎client/src/components/hero/assets/background-mobile.png‎

24.8 KB
Loading

‎client/src/components/navbar/Navbar.css‎

Lines changed: 116 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,138 @@
11
@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap");
22

3-
* {
4-
box-sizing: border-box;
5-
margin: 0;
6-
padding: 0;
7-
scroll-behavior: smooth;
8-
}
9-
10-
.nav-container {
11-
top: 0;
12-
left: 0;
3+
.navbar-container {
134
display: flex;
14-
justify-content: space-between;
5+
justify-content: center;
6+
align-items: center;
157
position: fixed;
8+
top: 0;
169
width: 100%;
17-
z-index: 10;
10+
padding: 5px;
11+
min-height: 70px;
12+
z-index: 10000;
1813
}
1914

20-
.nav-container a {
21-
text-decoration: none;
22-
}
23-
24-
.active {
25-
color: #ff697e;
15+
.is-distinct {
16+
box-shadow: 0px 14px 7px 0px #0000000f;
17+
background: #f5f5f5;
2618
}
2719

28-
.unselected {
29-
color: #4564bf;
20+
.navbar {
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
width: 80%;
25+
min-height: 60px;
3026
}
3127

32-
.home {
33-
margin: 0 75px 0 0;
28+
.nav-logo img {
29+
width: 120px;
3430
}
3531

36-
.about {
37-
margin: 0 150px 0 0;
38-
}
39-
.nav-text {
32+
.nav-menu ul {
4033
display: flex;
41-
justify-content: space-between;
34+
justify-content: center;
4235
align-items: center;
43-
font-size: 0.75rem;
36+
list-style-type: none;
37+
}
38+
39+
.nav-menu ul li {
40+
margin: 0 1rem;
41+
font-size: larger;
4442
font-family: "Work Sans", sans-serif;
45-
color: #4564bf;
43+
font-size: 1.3rem;
44+
font-weight: 400;
4645
}
4746

48-
.logo {
49-
width: 140px;
50-
margin: 10px 0 12px 62px;
51-
visibility: hidden;
47+
.nav-menu ul a {
48+
text-decoration: none;
49+
color: #4564bf;
5250
}
5351

54-
/*On Scrollll */
55-
.nav-container.scroll {
56-
background-color: #f5f5f5;
57-
box-shadow: 0px 14px 7px 0px #0000000f;
58-
position: fixed;
52+
.is-active li {
53+
color: #ff577e;
5954
}
6055

61-
.logo.scroll-logo {
62-
width: 140px;
63-
margin: 10px 0 12px 62px;
64-
visibility: visible;
65-
}
56+
@media screen and (max-width: 500px) {
57+
.is-distinct {
58+
background: #ffffff;
59+
box-shadow: 0 6px 4px -8px black;
60+
z-index: 100;
61+
}
62+
.navbar {
63+
width: 90%;
64+
}
65+
.nav-menu {
66+
position: fixed;
67+
right: 0;
68+
top: 70.8px;
69+
border-radius: 4px;
70+
background: rgba(0, 0, 0, 0.25);
71+
height: 100vh;
72+
width: 100vw;
73+
transform: translate(0,-115%);
74+
transition: all 0.5s ease;
75+
z-index: -100;
76+
}
77+
.hide{
78+
transform: translate(0);
79+
}
80+
.nav-menu ul {
81+
flex-direction: column;
82+
background: #ffffff;
83+
align-items: flex-start;
84+
}
85+
.nav-menu ul a {
86+
width: 100%;
87+
line-height: 3rem;
88+
margin-left: 1rem;
89+
}
90+
.hamburger-btn {
91+
position: relative;
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
right: 5px;
96+
width: 35px;
97+
height: 35px;
98+
cursor: pointer;
99+
transition: all 0.5s ease-in-out;
100+
border-radius: 3px;
101+
z-index: 10000;
102+
}
103+
.hamburger {
104+
width: 28px;
105+
height: 1.6px;
106+
background: #000000;
107+
border-radius: 5px;
108+
transition: all 0.5s ease-in-out;
109+
}
110+
.hamburger::before,
111+
.hamburger::after {
112+
content: "";
113+
position: absolute;
114+
width: 28px;
115+
height: 1.6px;
116+
background: #000;
117+
border-radius: 5px;
118+
box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
119+
transition: all 0.5s ease-in-out;
120+
}
121+
.hamburger::before {
122+
transform: translateY(-10px);
123+
}
124+
.hamburger::after {
125+
transform: translateY(10px);
126+
}
127+
.open .hamburger {
128+
transform: translateX(-8px);
129+
background: transparent;
130+
box-shadow: none;
131+
}
132+
.open .hamburger::before {
133+
transform: rotate(45deg) translate(5px, -5px);
134+
}
135+
.open .hamburger::after {
136+
transform: rotate(-45deg) translate(5px, 5px);
137+
}
138+
}

0 commit comments

Comments
 (0)