Skip to content

Commit 3f38e70

Browse files
Maran1947Maran1947
authored
Merge pull request #25 from zeeshan010101/master
Responsive cards
2 parents 942a750 + 4ad0119 commit 3f38e70

File tree

5 files changed

+121
-58
lines changed

5 files changed

+121
-58
lines changed

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
import './App.css';
23
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
34
import Counter from './project/counter/counter';
@@ -8,7 +9,6 @@ import Search from './project/search/Search'
89
import Slider from './project/responsive_slider/Slider';
910
import CurrencyConverter from './project/currency_converter/CurrencyConverter';
1011

11-
1212
function App() {
1313
return (
1414
<Router>

‎src/project/card/card.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.card_shadow {
2+
width: 14rem;
3+
box-shadow: 0px 10px 5px #aaaaaa;
4+
border-radius: 1rem !important;
5+
}
6+
7+
@media (max-width: 1024px) {
8+
.card_shadow {
9+
margin-bottom: 2rem;
10+
width: 14rem;
11+
height: auto;
12+
box-shadow: 0px 10px 5px #aaaaaa;
13+
}
14+
}

‎src/project/card/card.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import "./card.css";
3+
4+
function card(props) {
5+
return (
6+
<div className="col">
7+
<div class="card card_shadow">
8+
<div class="card-body">
9+
<h5 class="card-title">{props.title}</h5>
10+
<p class="card-text">{props.description}</p>
11+
<a href={props.buttonLink} class="btn btn-primary">
12+
{props.buttonTitle}
13+
</a>
14+
</div>
15+
</div>
16+
</div>
17+
);
18+
}
19+
20+
export default card;

‎src/project/home/Home.css‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,27 @@
11
.projects_box {
2-
width: 80%;
3-
margin: 0px auto;
4-
display: flex;
5-
flex-wrap: wrap;
6-
justify-content: center;
2+
width: 80%;
3+
margin: 0px auto;
4+
display: flex;
5+
flex-wrap: wrap;
76
}
87

98
.projects_box .project h2 {
10-
text-align: center;
11-
font-size: 24px;
9+
text-align: center;
10+
font-size: 24px;
1211
}
1312

1413
.projects_box .project {
15-
width: 250px;
16-
height: 250px;
17-
display: flex;
18-
margin: 24px;
19-
flex-direction: column;
20-
align-items: center;
21-
justify-content: center;
22-
box-shadow: 1px 1px 5px rgba(0, 60, 255, 0.808);
14+
width: 250px;
15+
height: 250px;
16+
display: flex;
17+
margin: 24px;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
box-shadow: 1px 1px 5px rgba(0, 60, 255, 0.808);
2322
}
2423

2524
.projects_box .project:hover {
26-
transition: all 0.3s;
27-
box-shadow: 1px 1px 8px rgba(0, 60, 255, 1);
25+
transition: all 0.3s;
26+
box-shadow: 1px 1px 8px rgba(0, 60, 255, 1);
2827
}
29-
30-
31-

‎src/project/home/Home.js‎

Lines changed: 70 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,76 @@
1-
import React from 'react'
2-
import { Link } from 'react-router-dom';
3-
import './Home.css';
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import Card from "../card/Card";
4+
import "./Home.css";
45

56
function Home() {
6-
return (
7-
<div className="home_container">
8-
<div className="title">
9-
<h1>Learn React.js</h1>
10-
</div>
11-
<div className="projects_box">
12-
{/* Add your project card below*/}
13-
<div className="project">
14-
<h2>Counter</h2>
15-
<Link to="/counter">Let's go there</Link>
16-
</div>
17-
<div className="project">
18-
<h2>Meme Generator</h2>
19-
<Link to="/meme_generator">Let's go there</Link>
20-
</div>
21-
<div className="project">
22-
<h2>Quote Generator</h2>
23-
<Link to="/quote_generator">Let's go there</Link>
24-
</div>
25-
<div className="project">
26-
<h2>Search Functionality</h2>
27-
<Link to="/search">Let's go there</Link>
28-
</div>
29-
<div className="project">
30-
<h2>Responsive slider</h2>
31-
<Link to="/slider">Let's go there</Link>
32-
</div>
33-
<div className="project">
34-
<h2>Currency Converter</h2>
35-
<Link to="/currency_converter">Let's go there</Link>
36-
</div>
7+
return (
8+
<div className="home_container">
9+
<div className="title">
10+
<h1>Learn React.js</h1>
11+
</div>
12+
<div className="container">
13+
<div className="row gx-3 pt-4 pb-4 text-decoration-none">
14+
<Card
15+
title="Counter"
16+
description="In that Module you can add and subtract from a state and see it."
17+
buttonTitle="Let's go there"
18+
buttonLink="/counter"
19+
/>
20+
<Card
21+
title="Meme Generator"
22+
description="Mems section here.."
23+
buttonTitle="Let's go there"
24+
buttonLink="/meme_generator"
25+
/>
26+
<Card
27+
title="Meme Generator"
28+
description="Mems section here.."
29+
buttonTitle="Let's go there"
30+
buttonLink="/meme_generator"
31+
/>
3732

38-
</div>
33+
<Card
34+
title="Meme Generator"
35+
description="Mems section here.."
36+
buttonTitle="Let's go there"
37+
buttonLink="/meme_generator"
38+
/>
39+
40+
<Card
41+
title="Meme Generator"
42+
description="Mems section here.."
43+
buttonTitle="Let's go there"
44+
buttonLink="/meme_generator"
45+
/>
46+
</div>
47+
</div>
48+
<div className="projects_box">
49+
{/* Add your project card below*/}
50+
51+
<div className="project">
52+
<h2>Counter</h2>
53+
<Link to="/counter">Let's go there</Link>
54+
</div>
55+
<div className="project">
56+
<h2>Meme Generator</h2>
57+
<Link to="/meme_generator">Let's go there</Link>
58+
</div>
59+
<div className="project">
60+
<h2>Quote Generator</h2>
61+
<Link to="/quote_generator">Let's go there</Link>
62+
</div>
63+
<div className="project">
64+
<h2>Search Functionality</h2>
65+
<Link to="/search">Let's go there</Link>
66+
</div>
67+
<div className="project">
68+
<h2>Responsive slider</h2>
69+
<Link to="/slider">Let's go there</Link>
3970
</div>
40-
)
71+
</div>
72+
</div>
73+
);
4174
}
4275

43-
export default Home
76+
export default Home;

0 commit comments

Comments
 (0)