Skip to content

Commit 61d1539

Browse files
ankitkr437ankitkr437
committed
added footer
1 parent 8d4c374 commit 61d1539

File tree

8 files changed

+159
-97
lines changed

8 files changed

+159
-97
lines changed

‎public/images/logo1.png

2.13 KB
Loading

‎src/App.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
*{
22
font-family: BinancePlex,Arial,sans-serif!important;
33
}
4-
4+
/* .footer{
5+
width: 100%;
6+
padding-left: 2vw;
7+
padding-right: 2vw;
8+
} */

‎src/App.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Exchanges from './components/exchanges/Exchanges.jsx';
88
import Cryptocurrencies from './components/cryptoCurrencies/Cryptocurrencies.jsx';
99
import CryptoDetails from './components/cryptoDetails/Cryptodetails.jsx'
1010
import News from './components/news/News.jsx';
11+
import Footer from "./components/footer/Footer";
1112

1213
const App = () => {
1314
return (
@@ -28,8 +29,9 @@ const App = () => {
2829
</Routes>
2930

3031
</div>
31-
<div className="footer">
32-
</div>
32+
{/* <div className="footer"> */}
33+
<Footer />
34+
{/* </div> */}
3335
</div>
3436
);
3537
};

‎src/components/footer/Footer.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.footer-container{
2+
display: flex;
3+
flex-direction: column;
4+
background-color: rgb(43, 84, 159);
5+
height: 32vh;
6+
width: 100%;
7+
justify-content: center;
8+
align-items: center;
9+
/* padding-left: 3vw;
10+
padding-right: 3vw;
11+
padding-top: 3vh;
12+
padding-bottom: 3vh; */
13+
}
14+
.about-footer{
15+
display: flex;
16+
flex-direction: row;
17+
margin-bottom: 5vh;
18+
}
19+
.footer-bottom-container{
20+
padding-left: 2vw;
21+
padding-right: 2vw;
22+
display: flex;
23+
width: 71%;
24+
/* height: 6vh; */
25+
/* background-color: rgb(29, 64, 130); */
26+
flex-direction: row;
27+
justify-content: space-between;
28+
align-items: center;
29+
}
30+
.crypto-logo{
31+
margin-right: 1vw;
32+
}
33+
.about-content-container{
34+
width: 40%;
35+
}
36+
.about-us-title{
37+
font-size: 20px;
38+
font-weight: 600;
39+
color: white;
40+
margin-bottom: 1vh;
41+
}
42+
.about-content{
43+
font-size: 13px;
44+
font-weight: 300;
45+
color: rgb(187, 196, 196);
46+
}
47+
.copyright{
48+
color: rgb(255, 255, 255);
49+
}
50+
.footer-link{
51+
display: flex;
52+
}
53+
.footer-link-item{
54+
color: white;
55+
margin-left: 3vw;
56+
margin-left: 3vw;
57+
}
58+
@media (max-width:700px) {
59+
.footer-container{
60+
height: 36vh;
61+
}
62+
.about-footer{
63+
flex-direction: column;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
.about-content-container{
68+
text-align: center;
69+
}
70+
.footer-bottom-container{
71+
width: 100%;
72+
flex-direction:column-reverse;
73+
justify-content: center;
74+
align-items: center;
75+
margin-top: -3vh;
76+
}
77+
.copyright{
78+
font-size: 14px;
79+
font-weight: 400;
80+
margin-top: 2vh;
81+
}
82+
.crypto-logo{
83+
width: 100%;
84+
margin-right: 0;
85+
margin-bottom: 2vh;
86+
text-align: center;
87+
}
88+
.about-content-container{
89+
width: 100%;
90+
}
91+
.footer-link{
92+
/* flex-direction: column; */
93+
width: 100%;
94+
justify-content: space-around;
95+
text-align: center;
96+
}
97+
.footer-link-item{
98+
margin-bottom: 1vh;
99+
}
100+
}

‎src/components/footer/Footer.jsx

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,46 @@
1-
import React from 'react'
2-
import './Footer.css'
1+
import React from "react";
2+
import "./Footer.css";
3+
import { Link } from "react-router-dom";
34
const Footer = () => {
45
return (
5-
<footer>
6-
<div class="footer-content">
7-
<h3>Cryptoworld</h3>
8-
<p>Foolish Developer --- source code.</p>
9-
<ul class="socials">
10-
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
11-
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
12-
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
13-
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
14-
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
15-
</ul>
16-
</div>
17-
</footer>
18-
)
19-
}
6+
<>
7+
<div className="footer-container">
8+
<div className="about-footer">
9+
<div className="crypto-logo">
10+
<img
11+
src="/images/logo1.png"
12+
className="crypto-logo-img"
13+
alt="Crypto-logo img"
14+
></img>
15+
</div>
16+
<div className="about-content-container">
17+
<p className="about-us-title">ABOUT US</p>
18+
<p className="about-content">
19+
A website which allows a user to manage a portfolio of
20+
cryptocurrency coins, displays latest prices, volume and trending
21+
news for each crypto.
22+
</p>
23+
</div>
24+
</div>
25+
<div className="footer-bottom-container">
26+
<p className="copyright">
27+
Copyright © 2022 CryptoWorld. All Rights Reserved
28+
</p>
29+
<div className="footer-link">
30+
<Link to="/" className="footer-link-item">
31+
Home
32+
</Link>
33+
<Link to="/cryptocurrencies" className="footer-link-item">
34+
Cryptocurrencies
35+
</Link>
36+
<Link to="/news" className="footer-link-item">
37+
News
38+
</Link>
39+
</div>
40+
</div>
41+
</div>
42+
</>
43+
);
44+
};
2045

21-
export default Footer
46+
export default Footer;

‎src/components/footer/Fopter.css

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎src/components/navbar/Header.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
.home,.about,.skills,.contact,.signup{
4747
text-decoration: none;
4848
color: white;
49-
font-size: 20px;
49+
font-size: 18px;
5050
padding: 10px 20px;
5151
margin: 0 20px;
5252
cursor: pointer;
@@ -60,7 +60,8 @@
6060
display: flex;
6161
position: absolute;
6262
top: 15px;
63-
left: 35px;
63+
left: 10px;
64+
font-size: 25px;
6465
}
6566
.nav-links{
6667
display: none;
@@ -69,7 +70,7 @@
6970
position: absolute;
7071
display: block;
7172
list-style: none;
72-
background-color: rgb(41, 120, 210);
73+
background-color: rgb(43, 84, 159);
7374
top: 0;
7475
/* left: 75px; */
7576
transition: all 0.5s ease-out;

‎src/components/navbar/Header.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ const Header = () => {
88
return (
99
<nav className="navbar">
1010
<Link to="/" className="home">
11-
<h3 className="logo">
11+
<h4 className="logo">
1212
<img
13-
src="/images/cryptologo.png"
13+
src="/images/logo1.png"
1414
className="Cryptologo"
1515
alt="Cryptologo"
1616
></img>
1717
Cryptoworld
18-
</h3>
18+
</h4>
1919
</Link>
2020
<ul
2121
className={isMobile ? "nav-links-mobile" : "nav-links"}

0 commit comments

Comments
 (0)