Skip to content

Commit d391ba4

Browse files
ZihSilvaZihSilva
committed
aboutUs
2 parents ca13b5b + 13ce48e commit d391ba4

File tree

73 files changed

+308
-280
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+308
-280
lines changed

‎package-lock.json

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

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"react": "^18.2.0",
2121
"react-css-modules": "^4.7.11",
2222
"react-dom": "^18.2.0",
23-
"react-icons": "^4.4.0",
23+
"react-icons": "^4.7.1",
2424
"react-router-dom": "^6.3.0",
2525
"react-scripts": "^5.0.1",
2626
"styled-components": "^5.3.5",

‎public/img/favicon-32x32.png

1.19 KB

‎public/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,23 @@
1515
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1616
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
1717
<link rel="preconnect" href="https://fonts.googleapis.com">
18+
1819
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1920
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700|Playfair+Display:400i" rel="stylesheet">
2021
<link rel="preconnect" href="https://fonts.googleapis.com">
2122
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet">
2223
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap" rel="stylesheet">
2324
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
2425
<title>TSW - Travel Safety for Women</title>
26+
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap" rel="stylesheet">
27+
<link href="https://fonts.googleapis.com/css?family=Merriweather:300|Work+Sans:700,800" rel="stylesheet">
28+
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap" rel="stylesheet">
29+
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
30+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
31+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
32+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
33+
<link rel="manifest" href="/site.webmanifest">
34+
<title>React App</title>
2535
</head>
2636

2737
<body>

‎src/components/Cards/CardItem.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function CardItem(props) {
66

77
return (
88
<>
9-
<li className='cards-item'>
9+
<div className='cards-item'>
1010
<Link className='cards-item-link' to={props.path}>
1111
<figure className='cards-item-pic-wrap' data-category={props.label}>
1212
<img
@@ -19,7 +19,7 @@ function CardItem(props) {
1919
<h5 className='cards-item-text'>{props.text}</h5>
2020
</div>
2121
</Link>
22-
</li>
22+
</div>
2323
</>
2424
);
2525
}

‎src/components/Cards/Cards.css

+110-119
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,118 @@
11
.cards {
2-
padding: 10px;
3-
background: #fff;
4-
}
5-
6-
.card-title {
7-
text-align: center;
8-
color: #5cbdb9;
9-
font-size:20px;
10-
font-weight: bold;
11-
padding:20px 20px 20px 20px;
12-
}
13-
14-
.cards-container {
15-
display: flex;
16-
flex-flow: column;
17-
align-items: center;
18-
margin: 0 auto;
19-
}
20-
21-
.cards-wrapper {
22-
position: relative;
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: 16px;
67+
font-weight: 700;
68+
color: #fff;
69+
background-color: #2d712799;
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+
}
2391

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%;
24105
}
25-
106+
}
107+
108+
@media only screen and (min-width: 1024px) {
26109
.cards-items {
27-
margin-bottom: 24px;
28-
}
29-
30-
.cards-item {
31110
display: flex;
32-
flex: 1;
33-
margin: 0 1rem;
34-
border-radius: 10px;
35111
}
36-
112+
}
37113

38-
.cards-item-pic-wrap {
39-
position: relative;
40-
width: 100%;
41-
padding-top: 67%;
42-
overflow: hidden;
43-
}
44-
45-
.fade-img {
46-
animation-name: fade-img;
47-
animation-duration: 2s;
48-
}
49-
50-
.cards-item-pic-wrap::after {
51-
content: attr(data-category);
52-
position: absolute;
53-
bottom: 0;
54-
margin-left: 10px;
55-
margin-bottom: 8px;
56-
padding: 6px 8px;
57-
max-width: calc((100%) - 60px);
58-
font-size: 16px;
59-
font-weight: 700;
60-
color: #fff;
61-
background-color: #b484a8;
62-
box-sizing: border-box;
63-
border-radius: 10px;
64-
}
65-
66-
.cards-item-img {
67-
position: absolute;
68-
top: 0;
69-
right: 0;
70-
bottom: 0;
71-
left: 0;
72-
display: block;
73-
width: 100%;
74-
max-width: 100%;
75-
height: 100%;
76-
max-height: 100%;
77-
object-fit: cover;
78-
transition: all 0.2s linear;
79-
}
80-
81-
.cards-item-img:hover {
82-
transform: scale(1.1);
83-
}
84-
85-
.cards-item-info {
86-
padding: 10px 20px;
87-
}
88-
89-
.cards-item-text {
90-
color: #252e48;
91-
font-size: 18px;
92-
line-height: 24px;
93-
}
94-
.form-head {
95-
font-size: 20px;
96-
}
97-
98-
@media only screen and (min-width: 1280px) {
99-
.content-blog-container {
100-
width: 84%;
101-
}
102-
}
103-
104-
@media only screen and (min-width: 768px) {
105-
.cards-items {
106-
display: flex;
107-
}
108-
109-
.card-title {
110-
111-
font-size:2rem;
112-
padding: 20px 50px 0px 50px;
113-
114-
}
114+
@media only screen and (max-width: 1024px) {
115+
.cards-item {
116+
margin-bottom: 2rem;
115117
}
116-
117-
@media only screen and (min-width: 320px) {
118-
.cards-item {
119-
margin-bottom: 1rem;
120-
}
121-
122-
.cards-item-text {
123-
color: #252e48;
124-
font-size: 1rem;
125-
line-height: 24px;
126-
}
127-
}
118+
}

‎src/images/Carol.jpg

-329 KB
Binary file not shown.

‎src/images/Countries/austria-carrie-borden-aDD4TENs_Rw-unsplash.jpg

-3.73 MB
Binary file not shown.

‎src/images/Countries/austria-lucie-hosova-FuQEnC3WBQM-unsplash.jpg

-2.55 MB
Binary file not shown.

‎src/images/Countries/austria-patrick-robert-doyle-e4et737H4ow-unsplash.jpg

-5.03 MB
Binary file not shown.

‎src/images/Countries/belgium-azamat-esmurziyev-MkXLVhxl9Lg-unsplash.jpg

-2.62 MB
Binary file not shown.

‎src/images/Countries/belgium-elijah-g-_BBlUZhRzjg-unsplash.jpg

-1.94 MB
Binary file not shown.

‎src/images/Countries/belgium-najib-samatar-SXcA2DfasvM-unsplash.jpg

-3.35 MB
Binary file not shown.

‎src/images/Countries/canada-narciso-arellano-egayxg_FHk8-unsplash.jpg

-2.87 MB
Binary file not shown.

‎src/images/Countries/canada-sekwang-chia-I9THIkqy9t0-unsplash.jpg

-5.41 MB
Binary file not shown.

‎src/images/Countries/canada-sondoce-wasfy-RvyF80HRAC8-unsplash.jpg

-2.98 MB
Binary file not shown.

‎src/images/Countries/iceland-alexandr-voronsky-P7XMoT68-gc-unsplash.jpg

-2.42 MB
Binary file not shown.

‎src/images/Countries/iceland-andy-wang-cRiUOdL0pkI-unsplash.jpg

-1.42 MB
Binary file not shown.

‎src/images/Countries/iceland-ulrich-knoll-ZEnouS7Xtv8-unsplash.jpg

-1.31 MB
Binary file not shown.

‎src/images/Countries/ireland-henrique-craveiro-ezJhm4xrHAM-unsplash.jpg

-2.25 MB
Binary file not shown.

‎src/images/Countries/ireland-k-mitch-hodge-FEQ1gzfBA60-unsplash.jpg

-1.8 MB
Binary file not shown.

‎src/images/Countries/ireland-matheus-camara-da-silva-NL2ORrGh8KM-unsplash.jpg

-3.45 MB
Binary file not shown.

‎src/images/Countries/netherlands-alireza-parpaei-tsb-7LcPPok-unsplash.jpg

-3.43 MB
Binary file not shown.

‎src/images/Countries/netherlands-clarisa-ravasotti-iuM8EaJUmZQ-unsplash.jpg

-4.28 MB
Binary file not shown.

‎src/images/Countries/netherlands-mike-van-den-bos-fbQv3cx--bM-unsplash.jpg

-2.19 MB
Binary file not shown.

‎src/images/Countries/norway-einar-storsul-OHWSxlLKzQc-unsplash.jpg

-5.17 MB
Binary file not shown.

‎src/images/Countries/norway-millie-olsen-mNRPJW7ylrI-unsplash.jpg

-3.45 MB
Binary file not shown.

‎src/images/Countries/norway-sebastian-herrmann--sJQV8veQYQ-unsplash.jpg

-2.39 MB
Binary file not shown.

‎src/images/Countries/nz-kishan-modi-K_g6TuBuKzk-unsplash.jpg

-8.32 MB
Binary file not shown.

‎src/images/Countries/nz-linde-lanjouw-0QL6fdUEFSQ-unsplash.jpg

-1.03 MB
Binary file not shown.

‎src/images/Countries/nz-nikhil-prasad-NUEou7Bncjc-unsplash.jpg

-3.54 MB
Binary file not shown.

‎src/images/Countries/portugal-artem-zhukov-NvirgXMLaaY-unsplash(1).jpg

-6.04 MB
Binary file not shown.

‎src/images/Countries/portugal-igor-ferreira-5UpEOzKsQgk-unsplash.jpg

-1.77 MB
Binary file not shown.

‎src/images/Countries/portugal-mark-lawson-7tS_YOTFTtA-unsplash.jpg

-2.7 MB
Binary file not shown.

‎src/images/Countries/sk-ho-phuoc-duy-VhqCymo3fmc-unsplash.jpg

-3.36 MB
Binary file not shown.

‎src/images/Countries/sk-thomas-roger-lux-xRAEPmP9M8s-unsplash.jpg

-5.12 MB
Binary file not shown.

‎src/images/Countries/sk-zequn-gui-xVFS3meofYM-unsplash.jpg

-5.03 MB
Binary file not shown.

‎src/images/Countries/spain-david-russeler-E0xK8SrIzYA-unsplash.jpg

-6.62 MB
Binary file not shown.

‎src/images/Countries/spain-piotr-musiol-CCp3dc4H0lg-unsplash.jpg

-1.95 MB
Binary file not shown.

‎src/images/Countries/spain-william-carletti-bXOv1gh4eL8-unsplash.jpg

-2.39 MB
Binary file not shown.

‎src/images/Countries/sweden-anna-hunko-akVefdJ2q_o-unsplash.jpg

-4.9 MB
Binary file not shown.

‎src/images/Countries/sweden-catalina-johnson-inbePXjTh-A-unsplash.jpg

-2.44 MB
Binary file not shown.

‎src/images/Countries/sweden-philip-myrtorp-Il5JigytybE-unsplash.jpg

-3.82 MB
Binary file not shown.

‎src/images/Countries/switzerland-keith-kiselstone-kbCS-jfAfOM-unsplash.jpg

-2.56 MB
Binary file not shown.

‎src/images/Countries/switzerland-patrick-robert-doyle-QmM7e2vrZnU-unsplash.jpg

-3.56 MB
Binary file not shown.

‎src/images/Countries/switzerland-tim-trad-BYPMtjYMEyk-unsplash.jpg

-4.42 MB
Binary file not shown.

‎src/images/Countries/tokio-jezael-melgoza-jtP8ce6O6Zw-unsplash.jpg

-3.87 MB
Binary file not shown.

‎src/images/Countries/tokio-kristin-wilson-wJvUBkLU0pA-unsplash.jpg

-4.02 MB
Binary file not shown.

‎src/images/Countries/tokio-max-bender-FuxYvi-hcWQ-unsplash.jpg

-1.38 MB
Binary file not shown.

‎src/images/Countries/uruguay-anderson-ROoqgQ3aF3k-unsplash.jpg

-1.56 MB
Binary file not shown.

‎src/images/Countries/uruguay-jared-schwitzke-Y_J9VezlMPc-unsplash.jpg

-889 KB
Binary file not shown.

‎src/images/Countries/uruguay-pedro-slinger-ehFgttlFJNA-unsplash.jpg

-4.67 MB
Binary file not shown.

‎src/images/Lari.jpg

-286 KB
Binary file not shown.

‎src/images/Zih.jpg

-475 KB
Binary file not shown.

‎src/images/amsterdan.jpg

-3.28 MB
Binary file not shown.

‎src/images/canada.jpg

-2.19 MB
Binary file not shown.

‎src/images/chile.jpg

-2.56 MB
Binary file not shown.

‎src/images/iceland1.jpg

-322 KB
Binary file not shown.

‎src/images/ireland.jpg

-2.78 MB
Binary file not shown.

‎src/images/ireland2.jpg

-824 KB
Binary file not shown.

‎src/images/irelandlandscape.jpg

-1.6 MB
Binary file not shown.

‎src/images/newzeland.jpg

-2.74 MB
Binary file not shown.

‎src/images/southk.jpg

-2.01 MB
Binary file not shown.

‎src/images/southkorea.jpg

-1.7 MB
Binary file not shown.

‎src/images/sweden1.jpg

-4.42 MB
Binary file not shown.

‎src/images/swiss.jpg

-3.88 MB
Binary file not shown.

‎src/images/switzerland.jpg

-3.52 MB
Binary file not shown.

‎src/pages/AboutUs/About.js

+23-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
1-
import { style } from '@mui/system';
2-
import { Link } from 'react-router-dom';
3-
4-
5-
function AboutUs(props) {
1+
import React from "react";
2+
import "./AboutUs.css";
3+
import { FaLinkedin } from "react-icons/fa";
4+
import { FaGithub } from "react-icons/fa";
5+
import { FaGoogle } from "react-icons/fa";
66

7+
function CardItem(props) {
78
return (
89
<>
9-
<li className={style.Cards}>
10-
<Link className='cards-item-link' to={props.path}>
11-
<figure className='cards-item-pic-wrap' data-category={props.label}>
12-
<img
13-
className='cards-item-img'
14-
alt='Travel'
15-
src={props.src}
16-
/>
17-
</figure>
18-
<div className='cards-item-info'>
19-
<h5 className='cards-tem-text'>{props.text}</h5>
20-
</div>
21-
</Link>
10+
<li className="cards-item-main">
11+
<div className="cards-item-link" to={props.path}>
12+
<figure className="cards-item-pic-wraps" data-category={props.label}>
13+
<img className="cards-img" alt="Travel" src={props.src} />
14+
<div className="social-media">
15+
<FaLinkedin size={32} color="blue" />
16+
<FaGithub size={32} color="black" />
17+
</div>
18+
</figure>
19+
<div className="card-item-description">
20+
<div className="cards-item-info">
21+
<h5 className="cards-item-text">{props.text}</h5>
22+
</div>
23+
</div>
24+
25+
</div>
2226
</li>
2327
</>
2428
);
2529
}
2630

27-
export default AboutUs;
31+
export default CardItem;

0 commit comments

Comments
 (0)