curriculum-vitae/frontend/src/lib/css/experience.css

105 lines
No EOL
2 KiB
CSS

.experience-container {
display: flex;
flex-direction: column;
transition: all .3s ease 0s;
}
.experience-main {
display: flex;
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
height: 22rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
z-index: 1;
transition: all .3s ease 0s;
}
.experience-img-container{
display: flex;
margin: 1.5rem;
justify-content: center;
align-items: center;
}
.experience-img {
max-height: 15rem;
min-width: 20rem;
max-width: 25rem;
}
.experience-text-container {
margin: 1.5rem;
width: 25rem;
}
.experience-title {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 600;
font-size: 2rem;
}
.experience-subtitle-container {
display: flex;
flex-direction: row;
align-items: center;
}
.experience-aftericon {
margin-left: 0.5rem;
}
.experience-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.5rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
text-align:justify;
text-justify: auto;
}
.experience-unactive {
scale: 0.9;
margin-left: 2.25rem !important;
margin-right: 2.25rem !important;
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
}
.experience-time {
margin-top: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.experience-bubble {
z-index: 2;
width: 5rem;
height: 5rem;
background-color: var(--color-special);
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
border-radius: 50%;
transition: all .3s ease 0s;
display: flex;
justify-content: center;
align-items: center;
}
.experience-date {
color: var(--color-special);
font-weight: 700;
}
.experience-string {
z-index: -1;
position: absolute;
height: 3rem;
background-color: var(--color-special);
opacity: 0.5;
transition: all .3s ease 0s;
}