Skip to content

Commit 15c9289

Browse files
sashitaghimiresashitaghimire
committed
card and footer added
1 parent 0cf62ce commit 15c9289

37 files changed

+1888
-340
lines changed

‎package-lock.json

+891
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.0",
7+
"@material-ui/icons": "^4.9.1",
68
"@testing-library/jest-dom": "^5.11.5",
79
"@testing-library/react": "^11.1.1",
810
"@testing-library/user-event": "^12.2.0",
11+
"mdbreact": "^4.27.0",
912
"react": "^17.0.1",
1013
"react-dom": "^17.0.1",
1114
"react-router-dom": "^5.2.0",

‎public/images/img-2.jpg

-2.98 MB
Loading

‎public/images/img-3.jpg

-1.14 MB
Loading

‎public/images/img-4.jpg

-2.95 MB
Loading

‎public/images/img-5.jpg

-1020 KB
Loading

‎public/images/img-9.jpg

-383 KB
Loading

‎src/App.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
.home,
99
.services,
10-
.portfolio,
10+
.products,
1111
.sign-up {
1212
display: flex;
1313
height: 90vh;
@@ -17,16 +17,16 @@
1717
}
1818

1919
.services {
20-
/* background-image: url('/images/img-2.jpg'); */
20+
background-image: url('./components/pages/images/img-home.jpg');
2121
background-position: center;
2222
background-size: cover;
2323
background-repeat: no-repeat;
2424
color: #fff;
2525
font-size: 100px;
2626
}
2727

28-
.portfolio {
29-
/* background-image: url('/images/img-1.jpg'); */
28+
.products {
29+
background-image: url('./components/pages/images/img-1.jpg');
3030
background-position: center;
3131
background-size: fill;
3232
background-repeat: no-repeat;
@@ -35,10 +35,10 @@
3535
}
3636

3737
.sign-up {
38-
/* background-image: url('/images/img-8.jpg'); */
38+
background-image: url('./components/pages/images/img-9.jpg');
3939
background-position: center;
4040
background-size: cover;
4141
background-repeat: no-repeat;
4242
color: #fff;
4343
font-size: 100px;
44-
}
44+
}

‎src/App.js

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
import Navbar from'./components/Navbar';
2-
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
1+
import React from 'react';
2+
import Navbar from './components/Navbar';
3+
import './App.css';
34
import Home from './components/pages/Home';
5+
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
6+
import Services from './components/pages/Services';
7+
import Products from './components/pages/Products';
8+
import SignUp from './components/pages/SignUp';
9+
import Footer from './components/Footer';
10+
411
function App() {
512
return (
613
<>
714
<Router>
8-
<Navbar/>
9-
<Switch/>
10-
<Route path="/" exact component={Home}/>
15+
<Navbar />
16+
<Switch>
17+
<Route path='/' exact component={Home} />
18+
<Route path='/services' component={Services} />
19+
<Route path='/products' component={Products} />
20+
<Route path='/sign-up' component={SignUp} />
21+
</Switch>
22+
<Footer />
1123
</Router>
1224
</>
1325
);

‎src/components/Button.css

+33-30
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
1-
:root{
2-
--primary:#fff;
3-
1+
:root {
2+
--primary: #fff;
43
}
54

6-
.btn{
7-
padding: 8px 20px;
8-
border-radius: 2px;
9-
outline: none;
10-
border: none;
11-
cursor: pointer;
5+
.btn {
6+
padding: 8px 20px;
7+
border-radius: 2px;
8+
outline: none;
9+
border: none;
10+
cursor: pointer;
1211
}
1312

14-
.btn--primary{
15-
background-color: var(--primary);
16-
color:#242424;
17-
border: 1px solid var(--primary);
13+
.btn--primary {
14+
background-color: var(--primary);
15+
color: #242424;
16+
border: 1px solid var(--primary);
17+
}
1818

19+
.btn--outline {
20+
background-color: transparent;
21+
color: #fff;
22+
padding: 8px 20px;
23+
border: 1px solid var(--primary);
24+
transition: all 0.3s ease-out;
1925
}
2026

21-
.btn--outline{
22-
background-color: transparent;
23-
color:#fff;
24-
padding: 8px 20px;
25-
border:1px solid var(--primary);
26-
transition: all 0.3 ease-out;
27+
.btn--medium {
28+
padding: 8px 20px;
29+
font-size: 18px;
2730
}
28-
.btn--medium{
29-
padding:12px 26px;
30-
font-size: 20px;
31+
32+
.btn--large {
33+
padding: 12px 26px;
34+
font-size: 20px;
3135
}
3236

33-
.btn--medium:hover, .btn--large:hover{
34-
background-color: transparent;
35-
color: #fff;
36-
padding:8px 20px;
37-
border: 1px solid var(--primary);
38-
transition: all 0.3 ease-in-out;
39-
40-
}
37+
.btn--large:hover,
38+
.btn--medium:hover {
39+
transition: all 0.3s ease-out;
40+
background: #fff;
41+
color: #242424;
42+
transition: 250ms;
43+
}

‎src/components/Button.js

+38-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
1-
import React from 'react'
1+
// import React from 'react';
2+
// import './Button.css';
3+
// import { Link } from 'react-router-dom';
4+
5+
// export function Button() {
6+
// return (
7+
// <Link to='sign-up'>
8+
// <button className='btn'>Sign Up</button>
9+
// </Link>
10+
// );
11+
// }
12+
13+
import React from 'react';
214
import './Button.css';
3-
import {Link} from "react-router-dom";
15+
import { Link } from 'react-router-dom';
416

5-
const STYLES = ['btn--primary', 'btn--outline'];
17+
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
618

719
const SIZES = ['btn--medium', 'btn--large'];
820

9-
1021
export const Button = ({
11-
children,
12-
type,
13-
onClick,
14-
buttonStyle,
15-
buttonSize
16-
})=>{
17-
const checkButtonStyle= STYLES.includes(buttonStyle) ? buttonStyle :STYLES[0];
18-
19-
const checkButtonSize = SIZES.includes(buttonSize)? buttonSize:SIZES[0];
20-
21-
return (
22-
<Link to="/sign-up" className="btn-mobile">
23-
<button className={`btn ${checkButtonStyle}${checkButtonSize}`} onClick={onClick} type={type}>
24-
{children}
25-
26-
</button>
27-
</Link>
28-
)
22+
children,
23+
type,
24+
onClick,
25+
buttonStyle,
26+
buttonSize
27+
}) => {
28+
const checkButtonStyle = STYLES.includes(buttonStyle)
29+
? buttonStyle
30+
: STYLES[0];
31+
32+
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
33+
34+
return (
35+
<Link to='/sign-up' className='btn-mobile'>
36+
<button
37+
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
38+
onClick={onClick}
39+
type={type}
40+
>
41+
{children}
42+
</button>
43+
</Link>
44+
);
2945
};
30-
31-

‎src/components/CardItem.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
function CardItem(props) {
5+
return (
6+
<>
7+
<li className='cards__item'>
8+
<Link className='cards__item__link' to={props.path}>
9+
<figure className='cards__item__pic-wrap' data-category={props.label}>
10+
<img
11+
className='cards__item__img'
12+
alt='Travel Image'
13+
src={props.src}
14+
/>
15+
</figure>
16+
<div className='cards__item__info'>
17+
<h5 className='cards__item__text'>{props.text}</h5>
18+
</div>
19+
</Link>
20+
</li>
21+
</>
22+
);
23+
}
24+
25+
export default CardItem;

‎src/components/Cards.css

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
.cards {
2+
padding: 4rem;
3+
background: #fff;
4+
}
5+
6+
h1 {
7+
text-align: center;
8+
}
9+
10+
.cards__container {
11+
display: flex;
12+
flex-flow: column;
13+
align-items: center;
14+
max-width: 1120px;
15+
width: 90%;
16+
margin: 0 auto;
17+
}
18+
19+
.cards__wrapper {
20+
position: relative;
21+
margin: 50px 0 45px;
22+
}
23+
24+
.cards__items {
25+
margin-bottom: 24px;
26+
}
27+
28+
.cards__item {
29+
display: flex;
30+
flex: 1;
31+
margin: 0 1rem;
32+
border-radius: 10px;
33+
}
34+
35+
.cards__item__link {
36+
display: flex;
37+
flex-flow: column;
38+
width: 100%;
39+
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
40+
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
41+
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
42+
border-radius: 10px;
43+
overflow: hidden;
44+
text-decoration: none;
45+
}
46+
47+
.cards__item__pic-wrap {
48+
position: relative;
49+
width: 100%;
50+
padding-top: 67%;
51+
overflow: hidden;
52+
}
53+
54+
.fade-img {
55+
animation-name: fade-img;
56+
animation-duration: 2s;
57+
}
58+
59+
.cards__item__pic-wrap::after {
60+
content: attr(data-category);
61+
position: absolute;
62+
bottom: 0;
63+
margin-left: 10px;
64+
padding: 6px 8px;
65+
max-width: calc((100%) - 60px);
66+
font-size: 12px;
67+
font-weight: 700;
68+
color: #fff;
69+
background-color: #1f98f4;
70+
box-sizing: border-box;
71+
}
72+
73+
.cards__item__img {
74+
position: absolute;
75+
top: 0;
76+
right: 0;
77+
bottom: 0;
78+
left: 0;
79+
display: block;
80+
width: 100%;
81+
max-width: 100%;
82+
height: 100%;
83+
max-height: 100%;
84+
object-fit: cover;
85+
transition: all 0.2s linear;
86+
}
87+
88+
.cards__item__img:hover {
89+
transform: scale(1.1);
90+
}
91+
92+
.cards__item__info {
93+
padding: 20px 30px 30px;
94+
}
95+
96+
.cards__item__text {
97+
color: #252e48;
98+
font-size: 18px;
99+
line-height: 24px;
100+
}
101+
102+
@media only screen and (min-width: 1200px) {
103+
.content__blog__container {
104+
width: 84%;
105+
}
106+
}
107+
108+
@media only screen and (min-width: 1024px) {
109+
.cards__items {
110+
display: flex;
111+
}
112+
}
113+
114+
@media only screen and (max-width: 1024px) {
115+
.cards__item {
116+
margin-bottom: 2rem;
117+
}
118+
}

0 commit comments

Comments
 (0)