99 lines
1.7 KiB
CSS
99 lines
1.7 KiB
CSS
.experience-card {
|
||
position: relative;
|
||
width: 90%;
|
||
margin-bottom: 3rem;
|
||
padding: 1.5em;
|
||
display: flex;
|
||
gap: 6rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.experience-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
background-color: #D95F46;
|
||
border: 3px solid rgba(176, 176, 176, 0.2);
|
||
}
|
||
|
||
|
||
.experience-card-left {
|
||
width: 25%;
|
||
text-align: end;
|
||
}
|
||
|
||
.experience-card-right {
|
||
width: 25%;
|
||
}
|
||
|
||
.experience-company {
|
||
color: var(--important-color);
|
||
font-size: 1.5rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.experience-role {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: var(--title-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.experience-location,
|
||
.experience-duration {
|
||
font-size: 0.95rem;
|
||
color: var(--text-color);
|
||
margin: 0.25rem 0 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.experience-tasks {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.experience-tasks li {
|
||
position: relative;
|
||
padding-left: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--text-color);
|
||
text-align: left;
|
||
}
|
||
|
||
.experience-tasks li::before {
|
||
content: '›';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: var(--important-color);
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 768px) {
|
||
.experience-card{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
.experience-card::before {
|
||
left: 20px;
|
||
top: 31px;
|
||
}
|
||
.experience-card-left, .experience-card-right{
|
||
width: fit-content;
|
||
margin-left: 20px;
|
||
}
|
||
.experience-card-left{
|
||
text-align: left;
|
||
}
|
||
} |