119 lines
2.1 KiB
SCSS
119 lines
2.1 KiB
SCSS
.experiences-section {
|
|
padding-bottom: 1rem;
|
|
|
|
h1 > span {
|
|
margin-top: -55px; /* Size of fixed header */
|
|
padding-bottom: 55px;
|
|
display: block;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 1rem;
|
|
& > li {
|
|
margin-left: 0;
|
|
color: #3c4858;
|
|
}
|
|
}
|
|
|
|
.designation {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.circle {
|
|
padding: 13px 20px;
|
|
border-radius: 50%;
|
|
background-color: #248aaa;
|
|
color: #f9fafc;
|
|
max-height: 50px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.timeline {
|
|
margin-top: 1.5rem !important;
|
|
|
|
.vertical-line {
|
|
align-self: stretch;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-left: 3px solid #248aaa;
|
|
z-index: 1;
|
|
height: 100%;
|
|
left: 50%;
|
|
}
|
|
&:nth-child(even)::after {
|
|
left: calc(50% - 3px) !important;
|
|
}
|
|
}
|
|
.horizontal-line {
|
|
div {
|
|
padding: 0;
|
|
height: 40px;
|
|
}
|
|
hr {
|
|
border-top: 3px solid #248aaa;
|
|
margin: 0;
|
|
top: 17px;
|
|
position: relative;
|
|
}
|
|
.timeline-side-div {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.corner {
|
|
border: 3px solid #248aaa;
|
|
width: 100%;
|
|
position: relative;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
.row {
|
|
&:nth-child(2n) {
|
|
div {
|
|
&:nth-child(1) .corner {
|
|
left: 50%;
|
|
top: -50%;
|
|
}
|
|
&:nth-child(3) .corner {
|
|
left: -50%;
|
|
top: calc(50% - 3px);
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(4n) {
|
|
div {
|
|
&:nth-child(1) .corner {
|
|
left: 50%;
|
|
top: calc(50% - 3px);
|
|
}
|
|
&:nth-child(3) .corner {
|
|
left: -50%;
|
|
top: -50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media('<=medium') {
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@include media('<=small') {
|
|
.container {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
.timeline {
|
|
.vertical-line {
|
|
visibility: hidden;
|
|
}
|
|
.horizontal-line {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|