Skip to content

Commit 623c716

Browse files
princiyaprinciya
authored
Merge pull request #47 from favour-chibueze/master
made css changes and added details to the resources page
2 parents 830efb9 + 495a944 commit 623c716

File tree

12 files changed

+225
-156
lines changed

12 files changed

+225
-156
lines changed

‎src/components/ContactUs/Contact.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
border-bottom: 3px solid rgb(0, 122, 124);
1919
}
2020

21-
2221
.sendMessageButton {
2322
color: rgb(0, 122, 124);
2423
font-size: 20px;
@@ -37,12 +36,11 @@
3736
background: rgb(0, 122, 124);
3837
color: #fff;
3938
}
40-
.formSuccessMessage{
39+
.formSuccessMessage {
4140
text-align: center;
4241
padding: 8px 0px;
4342
}
4443

45-
4644
@media (max-width: 875px) {
4745
/*Mobile View */
4846
.form {

‎src/components/Disclaimer/Disclaimer.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import './Disclaimer.css';
55
export default function Disclaimer(props) {
66

77
return (
8-
<>
8+
<div>
99
<div className="disclaimerContainer">
10-
<p>The source for the data used in this project is <a className="disclaimerLink" target="_blank" href="https://itsfoss.com/best-open-source-internships/" rel="noreferrer">"It's Foss"</a>, an award-winning web-portal that focuses on Open Source.</p>
10+
<p>The source for the data used in this project is <a className="disclaimerLink" target="_blank" href="https://itsfoss.com/best-open-source-internships/" rel="noreferrer">"It's Foss"</a>, an award-winning web-portal that focuses on Open Source and <a className="disclaimerLink" target="_blank" href="https://www.geeksforgeeks.org/" rel="noreferrer">"GeeksforGeeks"</a>.</p>
1111
</div>
1212

13-
</>
13+
</div>
1414
);
1515
}

‎src/components/Footer/Footer.css

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,59 @@
1-
.footer{
2-
position: relative;
3-
height: 305px;
4-
background: #131212;
5-
}
6-
.footer-items{
7-
display: flex;
8-
flex-wrap: wrap;
9-
justify-content: space-evenly;
10-
padding-top: 20px;
11-
1+
.footer {
2+
position: relative;
3+
height: 305px;
4+
background: #131212;
125
}
13-
.frontEnd-logo{
14-
width: 15vw;
15-
height: 25vh;
16-
6+
.footer-items {
7+
display: flex;
8+
flex-wrap: wrap;
9+
justify-content: space-evenly;
10+
padding-top: 20px;
1711
}
18-
.icons > a{
19-
color: #A3A9A4;
20-
padding: 20px;
21-
12+
.frontEnd-logo {
13+
width: 15vw;
14+
height: 25vh;
2215
}
23-
.icons > a >i{
24-
font-size: 2em;
25-
16+
.icons > a {
17+
color: #a3a9a4;
18+
padding: 20px;
2619
}
27-
.icons{
28-
display: flex;
29-
20+
.icons > a > i {
21+
font-size: 2em;
3022
}
31-
32-
.info > p{
33-
color: #A3A9A4;
34-
font-size: 18px;
35-
}
36-
.info > a{
37-
color:#71b6f6;
23+
.icons {
24+
display: flex;
3825
}
3926

40-
.copyright > p{
41-
color: #A3A9A4;
42-
padding-top: 50px;
43-
text-align: center;
27+
.info > p {
28+
color: #a3a9a4;
29+
font-size: 18px;
4430
}
45-
.copyright > p >a{
46-
color:#71b6f6;
31+
.info > a {
32+
color: #71b6f6;
4733
}
4834

49-
@media (max-width: 875px){
50-
.frontEnd-logo{
51-
width: 29vw;
52-
height: 15vh;
53-
padding:10px;
35+
.copyright > p {
36+
color: #a3a9a4;
37+
padding-top: 50px;
38+
text-align: center;
5439
}
55-
.footer-items{
56-
flex-direction: column-reverse;
57-
align-content: space-around;
58-
40+
.copyright > p > a {
41+
color: #71b6f6;
5942
}
6043

61-
.copyright > p{
62-
font-size: 10px;
63-
padding-top: 0px;
44+
@media (max-width: 875px) {
45+
.frontEnd-logo {
46+
width: 29vw;
47+
height: 15vh;
48+
padding: 10px;
49+
}
50+
.footer-items {
51+
flex-direction: column-reverse;
52+
align-content: space-around;
53+
}
54+
55+
.copyright > p {
56+
font-size: 10px;
57+
padding-top: 0px;
58+
}
6459
}
65-
}

‎src/components/Resources/Resources.css

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1+
.container {
2+
padding: 30px 80px 80px;
3+
}
4+
15
.grid {
26
display: grid;
3-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4-
grid-gap: 182px;
5-
align-items: justify;
6-
padding: 30px 80px 30px 80px;
7+
grid-template-columns: repeat(3, 1fr);
8+
grid-template-rows: repeat(4, 1fr);
9+
grid-column-gap: 72px;
10+
grid-row-gap: 53px;
11+
align-items: center;
712
}
813
.grid > article {
9-
border: 1px solid #ccc;
10-
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
11-
width: 110%;
14+
box-shadow: 2px 2px 6px 0px rgb(0 0 0 / 30%);
15+
width: 100%;
16+
padding: 16px 40px;
17+
height: 300px;
18+
border: none;
1219
display: flex;
1320
flex-direction: column;
1421
justify-content: space-between;
1522
}
1623

17-
.text {
18-
padding: 13px 41px 20px;
24+
article h1 {
1925
text-align: center;
20-
margin-top: 20px;
26+
margin-top: 12px;
27+
font-size: 22px;
28+
margin-bottom: 0;
29+
color: rgb(0, 122, 124);
30+
}
31+
32+
.text {
33+
text-align: justify;
2134
}
2235

2336
.resourceLink {
@@ -33,3 +46,17 @@
3346
.resourceLink:hover {
3447
background-color: rgba(0, 122, 124, 0.8);
3548
}
49+
50+
@media (max-width: 875px) {
51+
/*Mobile View */
52+
53+
.grid {
54+
display: block;
55+
}
56+
57+
.grid > article {
58+
margin-top: 37px;
59+
height: 350px;
60+
}
61+
}
62+

‎src/components/Resources/Resources.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,20 @@ import Disclaimer from "../Disclaimer/Disclaimer";
99
export default function Resources() {
1010

1111
return (
12-
<>
12+
<div className="container">
1313
<Toggle />
1414
<div className="grid">
1515
{
1616
ResourcesList.map(resource =>
1717
<article key={resource.id}>
18-
<div className="text">{resource.name}
19-
</div>
18+
<h1>{resource.name}</h1>
19+
<p className="text">{resource.body}
20+
</p>
2021
<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
22+
2123
</article>)}
2224
</div>
2325
<Disclaimer />
24-
</>
26+
</div>
2527
);
2628
}

‎src/components/Resources/TableView.css

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
1-
.table {
2-
text-align: center;
3-
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
4-
border-collapse: collapse;
5-
border: 0px solid #ddd;
6-
width: 100%;
7-
padding: 40px 0px 0px 500px;
8-
}
9-
10-
.table td, .table th {
11-
border: 1px solid #ddd;
12-
padding: 40px;
13-
padding-right: 78px;
14-
}
15-
16-
.table tr:nth-child(even){background-color: #f2f2f2;}
17-
18-
.table tr:hover {background-color: #ddd;}
19-
20-
.table th {
21-
padding-top: 12px;
22-
padding-bottom: 12px;
23-
text-align: center;
24-
background-color: #4CAF50;
25-
color: white;
26-
}
27-
1+
table {
2+
text-align: center;
3+
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
4+
border-collapse: collapse;
5+
margin: auto;
6+
margin-bottom: 45px;
7+
}
8+
9+
table td,
10+
table th {
11+
border: 1px solid #ddd;
12+
padding: 40px;
13+
padding-right: 78px;
14+
}
15+
16+
table tr:nth-child(even) {
17+
background-color: #f2f2f2;
18+
}
19+
20+
table tr:hover {
21+
background-color: #ddd;
22+
}
23+
24+
table th {
25+
padding-top: 12px;
26+
padding-bottom: 12px;
27+
text-align: center;
28+
background-color: rgb(0, 122, 124);
29+
color: white;
30+
}

‎src/components/Resources/TableView.js

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,26 @@ import './TableView.css';
55
import Toggle from "../Toggle";
66

77
export default function TableView() {
8-
98
return (
10-
<>
9+
<div className="container">
1110
<Toggle />
12-
<div className="table">
13-
<th>ID</th>
14-
<th>Name</th>
15-
<th>URL</th>
16-
{
17-
ResourcesList.map(resource =>
18-
19-
<tr key={resource.id}>
20-
<td>{resource.id}</td>
21-
<td>{resource.name}</td>
22-
<td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>
23-
</tr>
24-
25-
)
26-
}
27-
28-
</div>
29-
</>
11+
<table>
12+
<th>ID</th>
13+
<th>Name</th>
14+
<th>URL</th>
15+
{
16+
ResourcesList.map(resource =>
17+
18+
<tr key={resource.id}>
19+
<td>{resource.id}</td>
20+
<td>{resource.name}</td>
21+
<td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>
22+
</tr>
23+
24+
)
25+
}
26+
</table>
27+
28+
</div>
3029
);
3130
}

‎src/components/SingleResource/SingleResource.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,22 @@
5050
color: rgba(0, 122, 124, 0.5);
5151
}
5252

53+
.singleResourceBtn {
54+
padding: 8px;
55+
margin: 14px 40px;
56+
width: 13%;
57+
border: 1px solid rgb(0, 122, 124);
58+
cursor: pointer;
59+
transition: all 0.3s;
60+
background-color: transparent;
61+
text-align: center;
62+
}
63+
64+
.singleResourceBtn:hover {
65+
background: rgb(0, 122, 124);
66+
color: #fff;
67+
}
68+
5369
@media (max-width: 875px) {
5470
.fullCard {
5571
width: auto;

0 commit comments

Comments
 (0)