Skip to content

Commit 151d86f

Browse files
author
GLEADS0\tringuyen
committed
add footer
1 parent b173318 commit 151d86f

File tree

13 files changed

+336
-389
lines changed

13 files changed

+336
-389
lines changed

‎src/component/Tempalate/Iphone/index.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
import React from 'react'
1+
import React from "react";
22
import { Routes, Route, Outlet } from "react-router-dom";
33

44
import { useParams } from "react-router-dom";
55
export default function Iphone() {
6-
let params = useParams();
7-
console.log(params.iphone)
8-
return (
9-
<div>
10-
11-
{/* <Route path="iphone" element={<div>ddffdfd</div>}>
6+
let params = useParams();
7+
return (
8+
<div>
9+
{/* <Route path="iphone" element={<div>ddffdfd</div>}>
1210
<Route path=":12" element={<div>9</div>} />
1311
<Route path="sent" element={<div>10dff dfdfdff</div>} />
1412
</Route> */}
15-
iphone {params.iphone}
16-
</div>
17-
)
13+
iphone {params.iphone}
14+
</div>
15+
);
1816
}

‎src/component/molecules/CardHeader/index.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.cardHeader {
2-
padding: 8px 24px;
2+
padding: 8px;
3+
width: 120px;
34
height: 40px;
45
border-radius: 10px;
5-
margin-right: 24px;
6+
margin-left: 18px;
67
border: 0;
78
color: #2c2c2c;
89
text-align: center;

‎src/component/molecules/CardProduct/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
overflow: hidden;
33
background-color: rgb(255, 255, 255);
44
position: relative;
5+
margin: 0 15px;
56
max-width: 300px;
67
height: 380px;
78
box-shadow: 0 4px 2px rgba(95, 93, 93, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

‎src/component/organisms/Banner/index.js‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,17 @@ const Banner = () => {
1616
<div className="container">
1717
<div className="banner">
1818
<div className="row">
19-
<div className="col-xl-9 col-12">
19+
<div className="col-xl-9 col-12" style={{ borderRadius: "24px" }}>
2020
<Slider {...settings} className="banner_slider ">
21-
<div className="SliderImg">
22-
<img
23-
alt="banner"
24-
src="https://cdn.tgdd.vn/2021/12/banner/tet-samsung-830-300-830x300.png"
25-
/>
26-
</div>
27-
<div className="SliderImg">
28-
<img
29-
alt="banner"
30-
src="https://cdn.tgdd.vn/2022/01/banner/830-300-830x300-4.png"
31-
/>
32-
</div>
21+
<img
22+
alt="banner"
23+
src="https://cdn.tgdd.vn/2021/12/banner/tet-samsung-830-300-830x300.png"
24+
/>
25+
26+
<img
27+
alt="banner"
28+
src="https://cdn.tgdd.vn/2022/01/banner/830-300-830x300-4.png"
29+
/>
3330
</Slider>
3431
</div>
3532
<div className="col-xl-3 d-xl-block d-none">

‎src/component/organisms/Banner/index.scss‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,15 @@
55
}
66
.banner_slider {
77
height: 100%;
8-
border-radius: 8px;
8+
.slick-slide {
9+
border-radius: 24px;
10+
}
11+
img {
12+
width: 100%;
13+
height: 100%;
14+
border-radius: 24px;
15+
object-fit: cover;
16+
}
917
@media (max-width: 768px) {
1018
margin-bottom: 24px;
1119
}
@@ -26,16 +34,6 @@
2634
color: #fff;
2735
right: 20px;
2836
}
29-
.SliderImg {
30-
position: relative;
31-
height: auto;
32-
33-
img {
34-
width: 100%;
35-
height: 100%;
36-
object-fit: cover;
37-
}
38-
}
3937
}
4038

4139
.banner_left {
@@ -58,5 +56,5 @@
5856
.ImgBanner {
5957
width: 100%;
6058
height: 100%;
61-
border-radius: 10px;
59+
border-radius: 16px;
6260
}

‎src/component/organisms/Footer/index.js‎

Lines changed: 32 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,37 @@
1-
import React from 'react'
2-
import './index.scss'
1+
import React from "react";
2+
import "./index.scss";
3+
import { FaFacebookF, FaInstagram, FaYoutube } from "react-icons/fa";
34
const Footer = () => {
45
return (
5-
6-
<footer className=" text-center text-white" style={{ backgroundColor: '#535050' }}>
7-
{/* Grid container */}
8-
<div className="container p-4">
9-
{/* Section: Social media */}
10-
<section className="mb-4">
11-
{/* Facebook */}
12-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#3b5998' }} href="#!" role="button"><i className="fab fa-facebook-f" /></a>
13-
{/* Twitter */}
14-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#55acee' }} href="#!" role="button"><i className="fab fa-twitter" /></a>
15-
{/* Google */}
16-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#dd4b39' }} href="#!" role="button"><i className="fab fa-google" /></a>
17-
{/* Instagram */}
18-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#ac2bac' }} href="#!" role="button"><i className="fab fa-instagram" /></a>
19-
{/* Linkedin */}
20-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#0082ca' }} href="#!" role="button"><i className="fab fa-linkedin-in" /></a>
21-
{/* Github */}
22-
<a className="btn btn-primary btn-floating m-1" style={{ backgroundColor: '#333333' }} href="#!" role="button"><i className="fab fa-github" /></a>
23-
</section>
24-
{/* Section: Social media */}
25-
{/* Section: Text */}
26-
<section className="mb-4">
27-
<p>
28-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
29-
distinctio earum repellat quaerat voluptatibus placeat nam,
30-
commodi optio pariatur est quia magnam eum harum corrupti dicta,
31-
aliquam sequi voluptate quas.
32-
</p>
33-
</section>
34-
{/* Section: Text */}
35-
{/* Section: Links */}
36-
<section className>
37-
{/*Grid row*/}
38-
<div className="row">
39-
{/*Grid column*/}
40-
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
41-
<h5 className="text-uppercase">Links</h5>
42-
<ul className="list-unstyled mb-0">
43-
<li>
44-
<a href="#!" className="text-white">Link 1</a>
45-
</li>
46-
<li>
47-
<a href="#!" className="text-white">Link 2</a>
48-
</li>
49-
<li>
50-
<a href="#!" className="text-white">Link 3</a>
51-
</li>
52-
<li>
53-
<a href="#!" className="text-white">Link 4</a>
54-
</li>
55-
</ul>
56-
</div>
57-
{/*Grid column*/}
58-
{/*Grid column*/}
59-
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
60-
<h5 className="text-uppercase">Links</h5>
61-
<ul className="list-unstyled mb-0">
62-
<li>
63-
<a href="#!" className="text-white">Link 1</a>
64-
</li>
65-
<li>
66-
<a href="#!" className="text-white">Link 2</a>
67-
</li>
68-
<li>
69-
<a href="#!" className="text-white">Link 3</a>
70-
</li>
71-
<li>
72-
<a href="#!" className="text-white">Link 4</a>
73-
</li>
74-
</ul>
75-
</div>
76-
{/*Grid column*/}
77-
{/*Grid column*/}
78-
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
79-
<h5 className="text-uppercase">Links</h5>
80-
<ul className="list-unstyled mb-0">
81-
<li>
82-
<a href="#!" className="text-white">Link 1</a>
83-
</li>
84-
<li>
85-
<a href="#!" className="text-white">Link 2</a>
86-
</li>
87-
<li>
88-
<a href="#!" className="text-white">Link 3</a>
89-
</li>
90-
<li>
91-
<a href="#!" className="text-white">Link 4</a>
92-
</li>
93-
</ul>
94-
</div>
95-
{/*Grid column*/}
96-
{/*Grid column*/}
97-
<div className="col-lg-3 col-md-6 mb-4 mb-md-0">
98-
<h5 className="text-uppercase">Links</h5>
99-
<ul className="list-unstyled mb-0">
100-
<li>
101-
<a href="#!" className="text-white">Link 1</a>
102-
</li>
103-
<li>
104-
<a href="#!" className="text-white">Link 2</a>
105-
</li>
106-
<li>
107-
<a href="#!" className="text-white">Link 3</a>
108-
</li>
109-
<li>
110-
<a href="#!" className="text-white">Link 4</a>
111-
</li>
112-
</ul>
113-
</div>
114-
{/*Grid column*/}
115-
</div>
116-
{/*Grid row*/}
117-
</section>
118-
{/* Section: Links */}
6+
<footer className="container-md ">
7+
<div className="footer">
8+
<h4>TrisApple.com</h4>
9+
<div className="footer_iconsGroup">
10+
<a className="footer_icons footer_icons-fb" href="facebook.com">
11+
<FaFacebookF />
12+
</a>
13+
<a
14+
className="footer_icons footer_icons-instagram "
15+
href="facebook.com"
16+
>
17+
<FaInstagram />
18+
</a>
19+
<a className="footer_icons footer_icons-youtube" href="facebook.com">
20+
<FaYoutube />
21+
</a>
22+
</div>
23+
<ul>
24+
<li>Trang chủ</li>
25+
<li>Sản phẩm</li>
26+
<li>Bảo hành</li>
27+
<li>Liên hệ</li>
28+
</ul>
29+
<p>
30+
Copyright ©2022 All rights reserved | This template is made with by
31+
TrisApple.com
32+
</p>
11933
</div>
120-
{/* Grid container */}
121-
{/* Copyright */}
122-
<div className="text-center p-3" style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
123-
© 2020 Copyright:
124-
<a className="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
125-
</div>
126-
{/* Copyright */}
12734
</footer>
12835
);
129-
}
130-
export default Footer;
36+
};
37+
export default Footer;

0 commit comments

Comments
 (0)