Skip to content

Commit eab5f5d

Browse files
Vyomrana02ashutosh1919
Vyomrana02
and
ashutosh1919
authored
re: Added experience card section (#296)
* Update ExperienceCard.js * Update ExperienceCard.css * Update ExperienceAccordion.js * Update src/components/experienceCard/ExperienceCard.js * Update ExperienceCard.js * Update src/components/experienceCard/ExperienceCard.js --------- Co-authored-by: Ashutosh Hathidara <[email protected]>
1 parent 682feff commit eab5f5d

File tree

3 files changed

+278
-99
lines changed

3 files changed

+278
-99
lines changed

‎src/components/experienceCard/ExperienceCard.css‎

Lines changed: 224 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,129 @@
1-
.experience-card {
1+
.experience-main {
22
width: 100%;
3+
}
4+
5+
.basic-experience {
6+
margin-left: 5%;
7+
margin-right: 5%;
8+
}
9+
10+
.experience-heading-div {
11+
display: flex;
12+
}
13+
14+
.experience-heading-div > * {
15+
flex: 1;
16+
}
17+
18+
.experience-heading-img-div {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.experience-heading-text-div {
25+
text-align: center;
26+
}
27+
28+
.experience-heading-img-div > * {
29+
max-width: 100%;
30+
height: auto;
31+
}
32+
33+
.experience-heading-text {
34+
font-size: 56px;
35+
font-weight: 400;
36+
font-family: "Google Sans Medium";
37+
line-height: 1.1;
38+
text-align: center;
39+
margin-top: 80px;
40+
}
41+
42+
.experience-heading-sub-text {
43+
font-size: 30px;
44+
font-family: "Google Sans Regular";
45+
text-align: center;
46+
margin-bottom: 10px;
47+
}
48+
49+
.experience-header-detail-text {
50+
font-size: 20px;
51+
line-height: 30px;
52+
margin-top: 0px;
53+
margin-left: 20px;
54+
margin-right: 20px;
55+
font-family: "Google Sans Medium";
56+
}
57+
58+
@media (max-width: 1380px) {
59+
.experience-heading-text {
60+
font-size: 50px;
61+
margin-top: 80px;
62+
}
63+
.experience-heading-sub-text {
64+
font-size: 25px;
65+
}
66+
}
67+
68+
@media (max-width: 768px) {
69+
.experience-heading-text {
70+
font-size: 30px;
71+
margin-top: 20px;
72+
}
73+
74+
.experience-heading-sub-text {
75+
font-size: 20px;
76+
}
77+
78+
.experience-heading-div {
79+
flex-direction: column;
80+
}
81+
82+
.experience-header-detail-text {
83+
font-size: 16px;
84+
margin-right: 0px;
85+
line-height: normal;
86+
text-align: center;
87+
}
88+
}
89+
90+
.experience-card {
91+
min-width: 350px;
92+
/* height: 170px; */
393
margin-bottom: 20px;
4-
border-radius: 10px;
94+
border-radius:10px;
595
display: flex;
6-
flex-direction: row;
96+
flex-direction:column;
97+
padding: 10px;
98+
margin-left: 10px;
99+
-webkit-box-shadow: 4px 3px 20px -2px grey;
100+
-moz-box-shadow: 4px 3px 20px -2px grey;
101+
box-shadow: 4px 3px 20px -2px grey;
102+
}
103+
104+
.arrow-left {
105+
width: 0;
106+
height: 0;
107+
margin-top: 40px;
108+
margin-left: 10px;
109+
margin-right: -10px;
110+
border-top: 10px solid transparent;
111+
border-bottom: 10px solid transparent;
112+
z-index: 100;
7113
}
8114

9115
.experience-card-logo-div {
10116
margin: 10px;
117+
margin-top: -10px;
118+
}
119+
120+
.experience-card-stepper {
121+
display: flex;
122+
flex-direction:row;
123+
position: relative;
124+
align-items: center;
125+
flex-direction: column;
126+
margin-top: -40px
11127
}
12128

13129
.experience-card-body-div {
@@ -21,6 +137,10 @@
21137

22138
.experience-card-logo {
23139
width: 70px;
140+
-webkit-box-shadow: 4px 3px 20px -2px grey;
141+
-moz-box-shadow: 4px 3px 20px -2px grey;
142+
box-shadow: 4px 3px 20px -2px grey;
143+
border-radius: 50px;
24144
}
25145

26146
.experience-card-title {
@@ -75,6 +195,7 @@
75195
font-family: "Google Sans Regular";
76196
}
77197

198+
78199
.experience-card-company > a {
79200
position: relative;
80201
color: #000;
@@ -83,80 +204,141 @@
83204

84205
.experience-card-company > a:hover {
85206
color: #000;
86-
}
207+
}
87208

88209
.experience-card-company > a:hover:before {
89-
visibility: visible;
90-
-webkit-transform: scaleX(1);
91-
transform: scaleX(1);
210+
visibility: visible;
211+
-webkit-transform: scaleX(1);
212+
transform: scaleX(1);
92213
}
93214

94215
.experience-card-company > a:before {
95-
content: "";
216+
content: "";
217+
position: absolute;
218+
width: 100%;
219+
height: 1px;
220+
bottom: 0;
221+
left: 0;
222+
background-color: #000;
223+
visibility: hidden;
224+
-webkit-transform: scaleX(0);
225+
transform: scaleX(0);
226+
-webkit-transition: all 0.3s ease-in-out 0s;
227+
transition: all 0.3s ease-in-out 0s;
228+
}
229+
230+
.experience-list-item {
231+
display: flex;
232+
align-items: center;
233+
flex-direction: row;
234+
}
235+
236+
/* .dot:before{
237+
content:' ';
96238
position: absolute;
97-
width: 100%;
98-
height: 1px;
99-
bottom: 0;
100-
left: 0;
101-
background-color: #000;
102-
visibility: hidden;
103-
-webkit-transform: scaleX(0);
104-
transform: scaleX(0);
105-
-webkit-transition: all 0.3s ease-in-out 0s;
106-
transition: all 0.3s ease-in-out 0s;
239+
z-index:2;
240+
left:0;
241+
top:0;
242+
width:20px;
243+
height:20px;
244+
background-color: #ff4200;
245+
border-radius: 50%;
246+
}
247+
248+
.dot:after {
249+
content:' ';
250+
position: absolute;
251+
z-index:1;
252+
width:20px;
253+
height:20px;
254+
background-color: #ff4200;
255+
border-radius: 50%;
256+
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
257+
-webkit-animation-name:'ripple';
258+
-webkit-animation-duration: 1s;
259+
-webkit-animation-timing-function: ease;
260+
-webkit-animation-delay: 0s;
261+
-webkit-animation-iteration-count: infinite;
262+
-webkit-animation-direction: normal;
263+
} */
264+
265+
@keyframes ripple {
266+
0% {
267+
left:5px;
268+
top:5px;
269+
opcity:75;
270+
width:0;
271+
height:0;
272+
}
273+
100% {
274+
left:-20px;
275+
top:-20px;
276+
opacity: 0;
277+
width:50px;
278+
height:50px;
279+
}
107280
}
108281

109282
@media (max-width: 768px) {
110-
.experience-card {
111-
margin-bottom: 10px;
112-
flex-direction: column;
113-
text-align: center;
283+
.experience-card{
284+
/* margin-bottom:10px; */
285+
flex-direction:column;
286+
text-align: center;
114287
}
115288

116-
.experience-card-logo {
117-
width: 100px;
289+
.arrow-left {
290+
display: none;
118291
}
119292

120-
.experience-card-body-div {
293+
.experience-card-stepper {
294+
display: none;
295+
}
296+
297+
.experience-list-item {
298+
flex-direction: column;
299+
}
300+
301+
.experience-card-logo {
302+
width: 100px;
121303
}
122304

123305
.experience-card-heading-left {
124-
float: center;
125-
margin-left: auto;
126-
margin-right: auto;
306+
float: center;
307+
margin-left: auto;
308+
margin-right: auto;
127309
}
128310

129311
.experience-card-heading-right {
130-
float: center;
131-
margin-left: auto;
132-
margin-right: auto;
312+
float: center;
313+
margin-left: auto;
314+
margin-right: auto;
133315
}
134316

135317
.experience-card-title {
136-
text-align: center;
318+
/* text-align: center; */
137319
}
138320

139321
.experience-card-company {
140-
text-align: center;
322+
/* text-align: center; */
141323
}
142324

143325
.experience-card-duration {
144-
margin-top: 2px;
145-
text-align: center;
326+
/* margin-top: 2px; */
327+
/* text-align: center; */
146328
}
147329

148-
.experience-card-location {
149-
/* text-align: left; */
150-
text-align: center;
330+
.experience-card-location{
331+
/* text-align: left; */
332+
/* text-align: center; */
151333
}
152334

153335
.experience-card-header-div {
154-
flex-direction: column;
336+
flex-direction: column;
155337
}
156338

157339
.experience-card-description {
158-
margin-left: 14px;
159-
margin-right: 14px;
160-
text-align: justify;
340+
margin-left: 14px;
341+
margin-right: 14px;
342+
text-align: justify;
161343
}
162344
}

0 commit comments

Comments
 (0)