Skip to content

Commit baa0f97

Browse files
nirmalyaxnirmalyax
authored
Merge pull request #17 from DeepRahangdale/add
Larger the Icons for Header and Footer Section(Responsive)
2 parents b81bd4d + 0153087 commit baa0f97

File tree

6 files changed

+166
-20
lines changed

6 files changed

+166
-20
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
<div align="center">
88

9-
![GitHub repo size](https://img.shields.io/github/repo-size/nirmalyax/React-folio?color=yellow) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
9+
![GitHub repo size](https://img.shields.io/github/repo-size/nirmalyax/React-folio?color=yellow) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
10+
1011
</div>
1112

1213
<table align="center">
@@ -92,7 +93,7 @@ Clone down this repository. You will need `node.js` and `git` installed globally
9293

9394
```bash
9495
git clone https://github.com/username/repository-name.git
95-
96+
```
9697

9798
## 🛠 Installation and Setup Instructions
9899

@@ -105,11 +106,12 @@ Clone down this repository. You will need `node.js` and `git` installed globally
105106
<br/>
106107

107108
Runs the app in the development mode.\
108-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
109+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
109110
The page will reload if you make edits.
110111

111112
<br />
112113
Feel free to contribute to this repo.
113114

114115
### Show some ❤️&nbsp; by giving the star :star: to this repository!!
116+
115117
<h1 align=center> 🧠 Happy Hacking 🧠 </h1>

‎src/components/footer/Footer.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,18 @@ const Footer = () => {
1616
<li><a href="#contact">Contact</a></li>
1717
</ul>
1818
<div className="footer__socials">
19-
<a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
20-
<a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub /></a>
19+
<a href="https://www.linkedin.com/in/nirmalya-mondal" target="_blank" rel="noopener noreferrer">
20+
<BsLinkedin />
21+
</a>
22+
<a href="https://github.com/nirmalyax" target="_blank" rel="noopener noreferrer">
23+
<FaGithub />
24+
</a>
2125
</div>
2226
<div className="footer__copyright">
2327
<small>&copy;2023. All rights reserved.</small>
2428
</div>
2529
</footer>
26-
)
27-
}
30+
);
31+
};
2832

29-
export default Footer
33+
export default Footer;

‎src/components/footer/footer.css‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,62 @@ footer a {
6262
.footer__socials {
6363
margin-bottom: 2.6rem;
6464
}
65-
}
65+
}
66+
67+
68+
footer {
69+
margin: 5;
70+
padding: 0;
71+
}
72+
73+
74+
footer {
75+
background-color: var(--color-primary);
76+
color: #fff;
77+
text-align: center;
78+
padding: 10px 0;
79+
font-size: 1.3rem;
80+
}
81+
82+
83+
.footer__logo {
84+
text-decoration: none;
85+
color: var(--color-bg);
86+
font-weight: bold;
87+
}
88+
89+
90+
.permalinks {
91+
list-style: none;
92+
padding: 0;
93+
display: flex;
94+
justify-content: center;
95+
gap: 20px;
96+
margin: 20px 0;
97+
}
98+
99+
.permalinks li {
100+
margin: 0;
101+
}
102+
103+
.permalinks a {
104+
text-decoration: none;
105+
color: var(--color-bg);
106+
}
107+
108+
109+
.footer__socials {
110+
margin: 20px 0;
111+
}
112+
113+
.footer__socials a {
114+
text-decoration: none;
115+
color: #fff;
116+
font-size: 20px;
117+
margin: 0 15px;
118+
}
119+
120+
.footer__copyright {
121+
font-size: 1.0rem;
122+
}
123+

‎src/components/header/Header.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ const Header = () => {
77
return (
88
<header id="home">
99
<div className="container header__container">
10-
<h5>Hello I'm</h5>
11-
<h1 >Nirmalya Mondal</h1>
12-
<h5 className="text-light">Front-end Developer & Test Engineer</h5>
10+
<h5 className="header__text">Hello I'm</h5>
11+
<h1 className="header__title">Nirmalya Mondal</h1>
12+
<h5 className="header__text text-light">Front-end Developer & Test Engineer</h5>
1313
<CTA />
14-
<a href="#contact" className="scroll__down">
15-
Scroll Down &#10230;
16-
</a>
14+
<a href="#contact" className="scroll__down">
15+
Scroll Down &#10230;
16+
</a>
1717
<HeaderSocials />
1818
</div>
1919
</header>

‎src/components/header/HeaderSocials.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@ import React from 'react';
22
import { BsLinkedin } from 'react-icons/bs';
33
import { FaGithub } from 'react-icons/fa';
44
import { SiLeetcode } from 'react-icons/si';
5+
import './header.css';
56

67
const HeaderSocials = () => {
78
return (
89
<div className="header__socials">
9-
<a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
10-
<a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub /></a>
11-
<a href="https://leetcode.com/nirmalyax/" target="_blank" rel="noreferrer" ><SiLeetcode /></a>
10+
<a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin className="social-icon" /></a>
11+
<a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub className="social-icon" /></a>
12+
<a href="https://leetcode.com/nirmalyax/" target="_blank" rel="noreferrer" ><SiLeetcode className="social-icon" /></a>
1213
</div>
1314
)
1415
}
1516

16-
export default HeaderSocials;
17+
export default HeaderSocials;

‎src/components/header/header.css‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,85 @@ header {
6767
.scroll__down {
6868
display: none;
6969
}
70-
}
70+
}
71+
72+
/* Existing CSS styles
73+
.header__container {
74+
padding: 20px;
75+
text-align: center;
76+
}
77+
78+
.header__title {
79+
margin-top: 20px;
80+
}
81+
82+
.scroll__down {
83+
margin-top: 20px;
84+
margin-left: 30px;
85+
}
86+
*/
87+
88+
.social-icon {
89+
font-size: 20px;
90+
91+
}
92+
93+
@media (min-width: 768px) {
94+
.social-icon {
95+
font-size: 38px;
96+
}
97+
}
98+
99+
@media (min-width: 1200px) {
100+
.social-icon {
101+
font-size: 26px;
102+
}
103+
}
104+
105+
.scroll__down {
106+
font-size: 15px;
107+
margin-left: 60px;
108+
}
109+
110+
@media (min-width: 768px) {
111+
.scroll__down {
112+
font-size: 22px;
113+
margin-left: 30px;
114+
}
115+
}
116+
117+
@media (min-width: 1200px) {
118+
.scroll__down {
119+
font-size: 20px;
120+
margin-right: -70px;
121+
122+
}
123+
}
124+
125+
.header__text {
126+
font-size: 14px;
127+
}
128+
129+
.header__title {
130+
font-size: 40px;
131+
}
132+
133+
@media (min-width: 768px) {
134+
.header__text {
135+
font-size: 18px;
136+
}
137+
138+
.header__title {
139+
font-size: 32px;
140+
}
141+
}
142+
143+
@media (min-width: 1200px) {
144+
.header__text {
145+
font-size: 20px;
146+
}
147+
148+
.header__title {
149+
font-size: 60px;
150+
}
151+
}

0 commit comments

Comments
 (0)