Skip to content

Commit 5bb1ba5

Browse files
vkguruvkguru
committed
header and footer
1 parent eef5766 commit 5bb1ba5

File tree

6 files changed

+308
-2
lines changed

6 files changed

+308
-2
lines changed

‎src/Component/Footer.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import LogoFooter from './assets/logowhite.png';
3+
4+
function Footer() {
5+
return (
6+
<footer className="footer">
7+
<div className="ft">
8+
<div className="ft-col">
9+
<img src={LogoFooter} alt="EduKolab white logo" />
10+
</div>
11+
12+
<div className="ft-col">
13+
<ul>
14+
<li><a href="/">Courses</a></li>
15+
<li><a href="/">Assessment</a></li>
16+
<li><a href="/">Further Study</a></li>
17+
</ul>
18+
</div>
19+
20+
<div className="ft-col">
21+
<ul>
22+
<li><a href="/">About EduKolab</a></li>
23+
<li><a href="/">The Team</a></li>
24+
<li><a href="/">Contact Us</a></li>
25+
</ul>
26+
</div>
27+
</div>
28+
<div className="copyright">
29+
<p className="copy">&copy; 2020 copyright EduKolab.</p>
30+
</div>
31+
</footer>
32+
);
33+
}
34+
35+
export default Footer;

‎src/Component/Header.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from 'react';
2+
import Logo from './assets/logo.png';
3+
4+
function Header() {
5+
const [showMenu, setShowMenu] = useState(false);
6+
7+
const menu = <React.Fragment>
8+
<div className="menu">
9+
<ul>
10+
<li><a href="/">Courses</a></li>
11+
<li><a href="/">Assessment</a></li>
12+
<li><a href="/">Further Study</a></li>
13+
<li><a href="/">About EduKolab</a></li>
14+
</ul>
15+
</div>
16+
17+
<div className="cta">
18+
<a href="/" className="cta-login">Login</a>
19+
<a href="/" className="cta-reg">Register</a>
20+
</div>
21+
</React.Fragment>;
22+
23+
return (
24+
<React.Fragment>
25+
<nav className="nav">
26+
<div className="nav-main">
27+
<div className="logo">
28+
<a href="/"><img src={Logo} alt="Edukolab logo" /></a>
29+
</div>
30+
31+
{ menu }
32+
33+
<div className="hambuger">
34+
<span className="bar" onClick={() => setShowMenu(!showMenu)}></span>
35+
<span className="bar" onClick={() => setShowMenu(!showMenu)}></span>
36+
</div>
37+
</div>
38+
</nav>
39+
{showMenu && <div className="mobile-menu">
40+
<ul class="m-menu">
41+
<li><a href="/">Courses</a></li>
42+
<li><a href="/">Assessment</a></li>
43+
<li><a href="/">Further Study</a></li>
44+
<li><a href="/">About EduKolab</a></li>
45+
</ul>
46+
<div class="m-cta">
47+
<a href="/" className="cta-login">Login</a>
48+
<a href="/" className="cta-reg">Register</a>
49+
</div>
50+
</div>}
51+
</React.Fragment>
52+
);
53+
}
54+
55+
export default Header;

‎src/Component/assets/logo.png‎

7.8 KB
Loading

‎src/Component/assets/logowhite.png‎

11.6 KB
Loading

‎src/app.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
.nav {
7+
width: 100%;
8+
height: 80px;
9+
display: flex;
10+
flex-direction: row;
11+
background-color: #f1f1f1;
12+
}
13+
14+
.nav-main {
15+
display: flex;
16+
width: 95%;
17+
margin: 0 auto;
18+
}
19+
20+
.logo {
21+
width: 20%;
22+
}
23+
24+
.logo img {
25+
width: 35%;
26+
height: auto;
27+
}
28+
29+
.menu {
30+
width: 55%;
31+
display: inline-block;
32+
text-align: center;
33+
}
34+
35+
.menu ul li {
36+
display: inline-block;
37+
margin: 30px 15px;
38+
vertical-align: middle;
39+
}
40+
41+
.menu ul li a, .m-menu li a {
42+
font-size: 16px;
43+
color: #161940;
44+
font-weight: 500;
45+
}
46+
47+
.menu ul li a:hover {
48+
border-bottom: 1px solid #161940;
49+
}
50+
51+
.cta {
52+
width: 25%;
53+
margin: auto 0;
54+
text-align: right;
55+
}
56+
57+
.cta-login {
58+
background-color: #4b4d6c;
59+
color: #fff;
60+
font-weight: 600;
61+
padding: 10px 20px;
62+
margin: 10px;
63+
border-radius: 5px;
64+
cursor: pointer;
65+
}
66+
67+
.cta-reg {
68+
background-color: #40447c;
69+
color: #fff;
70+
font-weight: 600;
71+
padding: 10px 20px;
72+
margin: 10px;
73+
border-radius: 5px;
74+
cursor: pointer;
75+
}
76+
77+
.cta-reg:hover, .cta-login:hover {
78+
color: #fff;
79+
box-shadow: 1px 2px 8px 4px rgba(164, 164, 208, 0.52);
80+
}
81+
82+
.footer {
83+
background-color: #161940;
84+
width: 100%;
85+
}
86+
87+
.ft {
88+
width: 90%;
89+
margin: 0 auto;
90+
padding: 50px 0;
91+
display: flex;
92+
}
93+
94+
.ft-col {
95+
width: 33.33%;
96+
}
97+
98+
.ft-col img {
99+
width: 30%;
100+
}
101+
102+
.ft-col ul {
103+
margin: 0 30%;
104+
}
105+
106+
.ft-col ul li {
107+
margin: auto;
108+
display: flex;
109+
flex-direction: column;
110+
}
111+
112+
.ft-col ul li a {
113+
color: #fff;
114+
line-height: 40px;
115+
font-size: 15px;
116+
}
117+
118+
.ft-col ul li a:hover {
119+
color: #f1f1f1;
120+
}
121+
122+
.copyright {
123+
padding: 20px 0;
124+
border-top: 2px dashed #fff;
125+
}
126+
127+
.copy {
128+
text-align: center;
129+
color: #fff;
130+
font-size: 13px;
131+
}
132+
133+
@media only screen and (min-width:900px) {
134+
.hambuger {
135+
display: none;
136+
}
137+
}
138+
139+
@media only screen and (max-width:768px) {
140+
.logo {
141+
width: 50%;
142+
}
143+
144+
.logo img {
145+
width: 45%;
146+
}
147+
148+
.menu, .cta {
149+
display: none;
150+
}
151+
152+
.bar {
153+
width: 100%;
154+
display: block;
155+
border: 1px solid #000;
156+
text-align: right;
157+
margin: 9px 0;
158+
}
159+
160+
.hambuger {
161+
width: 20px;
162+
margin: auto 15px;
163+
}
164+
165+
.nav-main {
166+
justify-content: space-between;
167+
}
168+
169+
.ft {
170+
flex-direction: column;
171+
}
172+
173+
.ft-col {
174+
width: 100%;
175+
}
176+
177+
.ft-col ul {
178+
margin: 20px;
179+
}
180+
181+
.copy {
182+
text-align: left;
183+
margin-left: 40px;
184+
}
185+
186+
.mobile-menu {
187+
display: block;
188+
width: 100%;
189+
height: 100vh;
190+
position: absolute;
191+
background-color: #fff;
192+
}
193+
194+
.m-menu {
195+
margin-top: 30px;
196+
list-style-type: none;
197+
line-height: 40px;
198+
text-align: center;
199+
}
200+
201+
.m-cta {
202+
display: flex;
203+
flex-direction: column;
204+
margin: auto 30%;
205+
text-align: center;
206+
}
207+
}

‎src/app.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
2+
import Header from './Component/Header.js';
3+
import Footer from './Component/Footer.js';
4+
import './app.css';
25

36
function App() {
4-
return <div className="App">Learn React</div>;
7+
return (
8+
<Fragment>
9+
<Header />
10+
<div className="App">Learn React</div>
11+
<Footer />
12+
</Fragment>
13+
);
514
}
615

716
export default App;

0 commit comments

Comments
 (0)