<div class="page timeline-5-2" data-uia-timeline-skin="5" data-uia-timeline-adapter-skin-5="uia-card">
<div class="uia-timeline">
<div class="uia-timeline__container">
<div class="uia-timeline__line"></div>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-6-heading-1">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-6-heading-1" class="page__job-name uia-heading ra-heading">[NDA] UI/UX designer</h3>
</div>
<div class="uia-card__body">
<p>This is my current place of work. I am UX designer: working on information architecture, userflows, wireframes and create simple UI drafts. The result is interactive prototypes to illustrate different scenarios.</p>
</div>
</div>
</div>
</section>
<section class="uia-timeline__group" aria-labelledby="timeline-demo-6-heading-2">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-6-heading-2" class="page__job-name uia-heading ra-heading">Rognarocket Game UI Designer</h3>
</div>
<div class="uia-card__body">
<p>I worked on features from start to finish: user flow, screens design, icons and interface elements, different screen states, documentation, assets and helping programmers and QA.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="page" data-uia-timeline-skin="5" data-uia-timeline-adapter-skin-5="uia-card">
<div class="uia-timeline">
<div class="uia-timeline__container">
<div class="uia-timeline__line"></div>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-5-heading-1">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-5-heading-1" class="page__job-name uia-heading ra-heading">Frontend developer at web-studio TOP1</h3>
</div>
<div class="uia-card__body">
<p>This is my current place of work. I am UX designer: working on information architecture, userflows, wireframes and create simple UI drafts. The result is interactive prototypes to illustrate different scenarios.</p>
</div>
</div>
</div>
</section>
<section class="uia-timeline__group" aria-labelledby="timeline-demo-5-heading-2">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-5-heading-2" class="page__job-name uia-heading ra-heading">Frontend developer at web-studio Web E Studio</h3>
</div>
<div class="uia-card__body">
<p>This is my current place of work. I am UX designer: working on information architecture, userflows, wireframes and create simple UI drafts. The result is interactive prototypes to illustrate different scenarios.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="page" data-uia-timeline-skin="4" data-uia-timeline-adapter-skin-4="uia-card-skin-#1">
<div class="uia-timeline">
<div class="uia-timeline__container">
<div class="uia-timeline__line"></div>
<div class="uia-timeline__annual-sections">
<span class="uia-timeline__year" aria-hidden="true">2008</span>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-4-heading-1">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-4-heading-1" class="ra-heading ha-screen-reader">Philadelphia Museum School of Industrial Art</h3>
<span class="uia-card__time">
<time datetime="2008-02-02">
<span class="uia-card__day">2</span>
<span>Feb<span class="ha-screen-reader">ruary 2008</span></span>
</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Attends the Philadelphia Museum School of Industrial Art. Studies design with Alexey Brodovitch, art director at Harper's Bazaar, and works as his assistant.</p>
</div>
</div>
</div>
</div>
</section>
<section class="uia-timeline__group" aria-labelledby="timeline-demo-4-heading-2">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-4-heading-2" class="ra-heading">The part of my life in University of Pennsylvania</h3>
<span class="uia-card__time">
<time datetime="2008-09-02">
<span class="uia-card__day">2</span>
<span>Sept<span class="ha-screen-reader">ember 2008</span></span></time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Started from University of Pennsylvania. This is an important stage of my career. Here I worked in the local magazine. The experience greatly affected me</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="uia-timeline__annual-sections">
<span class="uia-timeline__year" aria-hidden="true">2014</span>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-4-heading-3">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-4-heading-3" class="ra-heading ha-screen-reader">My travel to Europe</h3>
<span class="uia-card__time">
<time datetime="2014-07-14">
<span class="uia-card__day">14</span>
<span>Jul<span class="ha-screen-reader">e 2014</span></span>
</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Travels to France, Italy, Spain, and Peru. After completing fashion editorial in Lima, prolongs stay to make portraits of local people in a daylight studio.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="page" data-uia-timeline-skin="3" data-uia-timeline-adapter-skin-3="uia-card-skin-#1">
<div class="uia-timeline">
<div class="uia-timeline__container">
<div class="uia-timeline__line"></div>
<div class="uia-timeline__annual-sections">
<span class="uia-timeline__year" aria-hidden="true">2008</span>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-1-heading-1">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-1-heading-1" class="ra-heading ha-screen-reader">Philadelphia Museum School of Industrial Art</h3>
<span class="uia-card__time">
<time datetime="2008-02-02">
<span class="uia-card__day">2</span>
<span>Feb<span class="ha-screen-reader">ruary 2008</span></span>
</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Attends the Philadelphia Museum School of Industrial Art. Studies design with Alexey Brodovitch, art director at Harper's Bazaar, and works as his assistant.</p>
</div>
</div>
</div>
</div>
</section>
<section class="uia-timeline__group" aria-labelledby="timeline-demo-1-heading-2">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-1-heading-2" class="ra-heading">The part of my life in University of Pennsylvania</h3>
<span class="uia-card__time">
<time datetime="2008-09-02">
<span class="uia-card__day">2</span>
<span>Sept<span class="ha-screen-reader">ember 2008</span></span></time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Started from University of Pennsylvania. This is an important stage of my career. Here I worked in the local magazine. The experience greatly affected me</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="uia-timeline__annual-sections">
<span class="uia-timeline__year" aria-hidden="true">2014</span>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="timeline-demo-1-heading-3">
<div class="uia-timeline__point uia-card" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="timeline-demo-1-heading-3" class="ra-heading ha-screen-reader">My travel to Europe</h3>
<span class="uia-card__time">
<time datetime="2014-07-14">
<span class="uia-card__day">14</span>
<span>Jul<span class="ha-screen-reader">e 2014</span></span>
</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>Travels to France, Italy, Spain, and Peru. After completing fashion editorial in Lima, prolongs stay to make portraits of local people in a daylight studio.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div class="uia-timeline" data-uia-timeline-skin="2" data-uia-timeline-adapter-skin-2="ui-card-skin-#1" data-uia-card-skin="1" data-uia-card-mod="1">
<div class="uia-timeline__container">
<div class="uia-timeline__line"></div>
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="experience-step-1-heading">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="experience-step-1-heading" class="ra-heading">Frontend developer at web-studio TOP1</h3>
<span class="uia-card__time">
<span class="ha-screen-reader">from</span>
<time datetime="2012-02">February 2013</time>
<span class="uia-card__time-divider" aria-hidden="true"></span>
<span class="ha-screen-reader">to</span>
<time datetime="2013-07">July 2014</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>
The web studio TOP1 was my first company, where I was developing
sites using CMS Joomla. Those days were very funny.
I had to maintain browsers which worked in different ways.
Maybe it's not necessary to say IE 6 was my favorite browser.
Also I made buttons with rounded corners via 4 pictures! That was fun.
</p>
<p>
As a young developer I thought that I was good at it. But my code
sucked. For example, I didn't know about W3C standards or best
practices of development.
Maybe that happened because I didn't have experienced mentors and
no one could point out my mistakes.
</p>
<p>
But one day I felt it was time
for a change. I quit the company with the thought to find a mentor who
can train me.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="uia-timeline__group" aria-labelledby="experience-step-2-heading">
<div class="uia-timeline__dot"></div>
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-card__intro">
<h3 id="experience-step-2-heading" class="ra-heading">Frontend developer at web-studio Web E Studio</h3>
<span class="uia-card__time">
<span class="ha-screen-reader">from</span>
<time datetime="2013-09">September 2013</time>
<span class="uia-card__time-divider" aria-hidden="true"></span>
<span class="ha-screen-reader">to</span>
<time datetime="2014-02">February 2014</time>
</span>
</div>
<div class="uia-card__body">
<div class="uia-card__description">
<p>
My fears were confirmed when I was going through job interview. I realized I was a really green developer. But one day I met a great frontend developer Mikhail and he invited me to join his team as a junior developer.
</p>
<p>
I immediately plunged into another world in the first days. It was very difficult for me because I started to work among people who were more experienced than me. Mikhail was demanding, but a fair lead. He helped me but I couldn't prove myself because I felt self-doubt.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="page">
<div class="uia-timeline" data-uia-timeline-skin="1">
<div class="uia-timeline__container">
<div class="uia-timeline__groups">
<section class="uia-timeline__group" aria-labelledby="uia-timeline-step-desc-1">
<div class="uia-timeline__point uia-card">
<div class="uia-card__container">
<div class="uia-timeline__point-intro uia-card__intro">
<span class="uia-timeline__step" aria-hidden="true">01</span>
<h3 id="uia-timeline-step-desc-1" class="uia-timeline__point-heading ra-heading">
<span class="ha-screen-reader">The first job.</span>
Frontend developer at web-studio TOP1
</h3>
<span class="uia-timeline__point-date uia-card__time">
<span class="ha-screen-reader">from</span>
<time datetime="2012-02">February 2012</time>
<span class="uia-card__time-divider" aria-hidden="true"></span>
<span class="ha-screen-reader">to</span>
<time datetime="2013-07">Jule 2013</time>
</span>
</div>
<div class="uia-card__body uia-timeline__point-description">
<div class="uia-card__description">
<p>
The web studio TOP1 was my first company, where I was developing
sites using CMS Joomla. Those days were very funny.
I had to maintain browsers which worked in different ways.
Maybe it's not necessary to say IE 6 was my favorite browser.
Also I made buttons with rounded corners via 4 pictures! That was fun.
</p>
<p>
As a young developer I thought that I was good at it. But my code
sucked. For example, I didn't know about W3C standards or best
practices of development.
Maybe that happened because I didn't have experienced mentors and
no one could point out my mistakes.
</p>
<p>
But one day I felt it was time
for a change. I quit the company with the thought to find a mentor who
can train me.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
/*
=====
UIA-TIMELINE
=====
*/
.uia-timeline__container {
display: var(--uia-timeline-display, grid);
}
.uia-timeline__groups {
display: var(--uia-timeline-groups-display, grid);
gap: var(--uia-timeline-groups-gap, 1rem);
}
/*
SKIN 1
*/
[data-uia-timeline-skin="1"] .uia-timeline__step {
line-height: 1;
font-size: var(--uia-timeline-step-font-size, 2rem);
font-weight: var(--uia-timeline-step-font-weight, 700);
color: var(--uia-timeline-step-color);
}
[data-uia-timeline-skin="1"] .uia-timeline__point-intro {
display: grid;
grid-template-columns: min-content 1fr;
align-items: center;
gap: var(--uia-timeline-point-intro-gap, .5rem);
}
[data-uia-timeline-skin="1"] .uia-timeline__point-date {
grid-row: 1;
grid-column: 2;
}
[data-uia-timeline-skin="1"] .uia-timeline__point-heading {
grid-column: span 2;
}
[data-uia-timeline-skin="1"] .uia-timeline__point-description {
margin-block-start: var(--uia-timeline-group-gap, 1rem);
inline-size: min(100%, var(--uia-timeline-content-max-limit));
}
/*
SKIN 2
*/
[data-uia-timeline-skin="2"] {
--_uia-timeline-line-color_default: #222;
--_uia-timeline-minimal-gap: var(--uia-timeline-minimal-gap, .5rem);
--_uia-timeline-space: calc(var(--_uia-timeline-arrow-size) + var(--_uia-timeline-dot-size) + var(--_uia-timeline-dot-size) / 2 + var(--_uia-timeline-minimal-gap));
--_uia-timeline-dot-size: var(--uia-timeline-dot-size, 1rem);
--_uia-timeline-arrow-size: var(--uia-timeline-arrow-size, .25rem);
--_uia-timeline-arrow-position: var(--uia-timeline-arrow-position, 1rem);
}
[data-uia-timeline-skin="2"] .uia-timeline__container {
position: relative;
padding-inline-start: calc(var(--_uia-timeline-space));
}
[data-uia-timeline-skin="2"] .uia-timeline__line {
inline-size: var(--uia-timeline-line-thickness, 3px);
block-size: 100%;
background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(var(--_uia-timeline-dot-size) / 2);
transform: translate(-50%);
}
[data-uia-timeline-skin="2"] .uia-timeline__group {
position: relative;
}
[data-uia-timeline-skin="2"] .uia-timeline__dot {
box-sizing: border-box;
inline-size: var(--_uia-timeline-dot-size);
block-size: var(--_uia-timeline-dot-size);
border-radius: 50%;
border:
var(--uia-timeline-dot-border-thickness, 1px)
solid
var(--uia-timeline-dot-border-color, var(--_uia-timeline-line-color_default));
background-color: var(--uia-timeline-dot-color, var(--_uia-timeline-line-color_default));
position: absolute;
/* - 4px is used for set the default gap from the top border */
inset-block-start: calc(var(--uia-timeline-dot-position, var(--_uia-timeline-arrow-position)) + 4px);
inset-inline-start: calc(-1 * var(--_uia-timeline-space));
}
[data-uia-timeline-skin="2"] .uia-timeline__point {
position: relative;
background-color: var(--uia-timeline-point-background-color, #fff);
}
[data-uia-timeline-skin="2"] .uia-timeline__point::before {
content: "";
inline-size: 0;
block-size: 0;
border: var(--_uia-timeline-arrow-size) solid var(--uia-timeline-arrow-color, var(--_uia-timeline-line-color_default));
border-block-start-color: transparent;
border-inline-end-color: transparent;
position: absolute;
/* - 6px is used for set the default gap from the top border */
inset-block-start: calc(var(--_uia-timeline-arrow-position) + 6px);
inset-inline-start: calc(-1 * var(--_uia-timeline-arrow-size) + 1px);
transform: rotate(45deg);
}
[data-uia-timeline-adapter-skin-2="ui-card-skin-#1"] {
--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
--uia-card-border-thickness: var(--uia-timeline-point-border-thickness, 3px);
--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));
--uia-card-background-color: var(--uia-timeline-point-background-color);
}
/*
SKIN 3
*/
[data-uia-timeline-skin="3"] {
--_uia-timeline-line-color_default: #222;
--_uia-timeline-space: var(--uia-timeline-space, 1rem);
--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 2px);
--_uia-timeline-point-line-position: var(--uia-timeline-point-line-position, 1rem);
}
[data-uia-timeline-skin="3"] .uia-timeline__container {
position: relative;
gap: var(--uia-timeline-annual-sections-gap, 2.5rem);
}
[data-uia-timeline-skin="3"] .uia-timeline__line {
inline-size: var(--_uia-timeline-line-thickness);
block-size: 100%;
background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
[data-uia-timeline-skin="3"] .uia-timeline__annual-sections {
display: grid;
gap: 2rem;
}
[data-uia-timeline-skin="3"] .uia-timeline__groups {
padding-inline-start: var(--_uia-timeline-space);
}
[data-uia-timeline-skin="3"] .uia-timeline__group {
position: relative;
isolation: isolate;
}
[data-uia-timeline-skin="3"] .uia-timeline__point {
background-color: var(--uia-timeline-point-background-color, #fff);
}
[data-uia-timeline-skin="3"] .uia-timeline__point::before {
content: "";
inline-size: 100%;
block-size: var(--_uia-timeline-line-thickness);
background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: var(--_uia-timeline-point-line-position);
inset-inline-start: calc(-1 * var(--_uia-timeline-space));
z-index: -1;
}
[data-uia-timeline-skin="3"] .uia-timeline__year {
inline-size: fit-content;
padding: var(--uia-timeline-year-padding, .25rem .75rem);
background-color: var(--uia-timeline-year-background-color, var(--_uia-timeline-line-color_default));
color: var(--uia-timeline-year-color, #f0f0f0);
}
[data-uia-timeline-adapter-skin-3="uia-card-skin-#1"] {
--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
--uia-card-border-thickness: var(--uia-timeline-point-border-thickness, 3px);
--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));
--uia-card-background-color: var(--uia-timeline-point-background-color);
}
/*
SKIN 4
*/
[data-uia-timeline-skin="4"] {
--_uia-timeline-line-color_default: #222;
--_uia-timeline-space: var(--uia-timeline-space, .5rem);
--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 2px);
--_uia-timeline-annual-sections-safe-gap: var(--uia-timeline-annual-sections-safe-gap, 1.5rem);
--_uia-timeline-point-line-position: var(--uia-timeline-point-line-position, 1rem);
--_uia-timeline-year-size: var(--uia-timeline-year-size, 3.5rem);
}
[data-uia-timeline-skin="4"] .uia-timeline__container {
position: relative;
gap: var(--uia-timeline-annual-sections-gap, 2.5rem);
}
[data-uia-timeline-skin="4"] .uia-timeline__line {
inline-size: var(--_uia-timeline-line-thickness);
block-size: 100%;
background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(var(--_uia-timeline-year-size) / 2);
transform: translate(-50%);
z-index: -1;
}
[data-uia-timeline-skin="4"] .uia-timeline__annual-sections {
display: flex;
align-items: flex-start;
isolation: isolate;
}
[data-uia-timeline-skin="4"] .uia-timeline__groups {
padding-inline-start: var(--_uia-timeline-space);
padding-block-start: calc(var(--_uia-timeline-year-size) + var(--_uia-timeline-annual-sections-safe-gap));
}
[data-uia-timeline-skin="4"] .uia-timeline__group {
position: relative;
isolation: isolate;
}
[data-uia-timeline-skin="4"] .uia-timeline__point {
background-color: var(--uia-timeline-point-background-color, #fff);
}
[data-uia-timeline-skin="4"] .uia-timeline__point::before {
content: "";
inline-size: 100%;
block-size: var(--_uia-timeline-line-thickness);
background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: var(--_uia-timeline-point-line-position);
inset-inline-start: calc(-1 * (var(--_uia-timeline-space) + var(--_uia-timeline-year-size) / 2));
z-index: -1;
}
[data-uia-timeline-skin="4"] .uia-timeline__year {
box-sizing: border-box;
flex: none;
inline-size: var(--_uia-timeline-year-size);
block-size: var(--_uia-timeline-year-size);
border:
var(--uia-timeline-year-line-thickness, var(--_uia-timeline-line-thickness))
var(--uia-timeline-year-line-style, solid)
var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
border-radius: 50%;
display: grid;
place-items: center;
background-color: var(--uia-timeline-year-background-color, #f0f0f0);
font-size: var(--uia-timeline-year-font-size, .75rem);
color: var(--uia-timeline-year-color, #222);
}
[data-uia-timeline-adapter-skin-4="uia-card-skin-#1"] {
--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
--uia-card-border-thickness: var(--uia-timeline-point-border-thickness, 3px);
--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));
--uia-card-background-color: var(--uia-timeline-point-background-color);
}
/*
SKIN 5
*/
[data-uia-timeline-skin="5"] {
--_uia-timeline-line-color_default: #222;
--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 3px);
--_uia-timeline-line-calculation: calc(var(--_uia-timeline-dot-size) / 2 - calc(var(--_uia-timeline-line-thickness) / 2));
--_uia-timeline-line-position: var(--uia-timeline-line-position, 0px);
--_uia-timeline-minimal-gap: var(--uia-timeline-minimal-gap, .5rem);
--_uia-timeline-space: calc(var(--_uia-timeline-dot-size) + var(--_uia-timeline-dot-size) / 2 + var(--_uia-timeline-minimal-gap));
--_uia-timeline-dot-size: var(--uia-timeline-dot-size, 1rem);
}
[data-uia-timeline-skin="5"] .uia-timeline__container {
position: relative;
padding-inline-start: var(--_uia-timeline-space);
}
[data-uia-timeline-skin="5"] .uia-timeline__line {
border-inline-start: var(--_uia-timeline-line-thickness) solid var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
block-size: calc(100% - var(--_uia-timeline-line-position));
position: absolute;
inset-block-start: var(--_uia-timeline-line-position);
inset-inline-start: var(--uia-timeline-line-main-position, var(--_uia-timeline-line-calculation));
}
[data-uia-timeline-skin="5"] .uia-timeline__group {
position: relative;
isolation: isolate;
}
[data-uia-timeline-skin="5"] .uia-timeline__dot {
box-sizing: border-box;
font-size: var(--_uia-timeline-dot-size);
border-radius: 50%;
box-shadow: 0 0 0
var(--uia-timeline-dot-border-thickness, 1px)
var(--uia-timeline-dot-border-color, var(--_uia-timeline-line-color_default));
border: .5em solid var(--uia-timeline-dot-color, var(--_uia-timeline-line-color_default));
position: absolute;
inset-block-start: var(--uia-timeline-dot-position, -1px);
inset-inline-start: var(--uia-timeline-dot-main-position, calc(-1 * var(--_uia-timeline-space)));
}
[data-uia-timeline-skin="5"] .uia-timeline__group:last-child::after {
content: "";
inline-size: calc(var(--_uia-timeline-line-thickness) + var(--uia-timeline-line-mask-thickness, 4px));
block-size: calc(100% - var(--_uia-timeline-line-position) - var(--_uia-timeline-dot-size) / 2);
background-color: var(--uia-timeline-line-mask-color);
position: absolute;
inset-block-end: 0;
inset-inline-start: var(--_uia-timeline-line-mask-main-position, calc((var(--_uia-timeline-space) - var(--_uia-timeline-dot-size) / 2) * -1));
transform: translate(-50%);
z-index: -1;
}
[data-uia-timeline-skin="5"] {
container-type: inline-size;
container-name: timeline-skin-5;
}
@container timeline-skin-5 (min-width: 600px) {
[data-uia-timeline-skin="5"] .uia-timeline__container {
--uia-timeline-line-main-position: calc(50% - (var(--uia-timeline-line-thickness) / 2));
--uia-timeline-dot-main-position: 50%;
--_uia-timeline-space: 0;
}
[data-uia-timeline-skin="5"] .uia-timeline__point {
max-inline-size: 45%;
}
[data-uia-timeline-skin="5"] .uia-timeline__group:nth-child(even) .uia-timeline__point {
margin-inline-start: auto;
}
[data-uia-timeline-skin="5"] .uia-timeline__group:nth-child(odd) .uia-timeline__point {
text-align: end;
}
[data-uia-timeline-skin="5"] .uia-timeline__dot {
transform: translateX(-50%);
}
[data-uia-timeline-skin="5"] .uia-timeline__group:last-child::after {
--_uia-timeline-line-mask-main-position: var(--uia-timeline-line-main-position);
}
}
[data-uia-timeline-adapter-skin-5="uia-card"] {
--uia-card-content-gap: var(--uia-timeline-content-gap, .5rem);
}
/*
=====
RESET
=====
*/
:where(.ra-heading) {
margin-block: var(--ra-heading-margin-block-start, 0) var(--ra-heading-margin-block-end, 0);
}
/*
=====
HELPERS
=====
*/
.ha-screen-reader {
width: var(--ha-screen-reader-width, 1px);
height: var(--ha-screen-reader-height, 1px);
padding: var(--ha-screen-reader-padding, 0);
border: var(--ha-screen-reader-border, none);
position: var(--ha-screen-reader-position, absolute);
clip-path: var(--ha-screen-reader-clip-path, rect(1px, 1px, 1px, 1px));
overflow: var(--ha-screen-reader-overflow, hidden);
}
/*
=====
UIA-CARD
=====
*/
.uia-card__container {
display: var(--uia-card-display, grid);
gap: var(--uia-card-content-gap);
}
.uia-card__time-divider::before {
content: "—";
margin-inline: var(--uia-card-time-divider-margin-inline, .15rem);
}
[data-uia-card-skin="1"] .uia-card__container {
padding: var(--uia-card-padding, 1rem 1.75rem);
background-color: var(--uia-card-background-color);
border-radius: var(--uia-card-border-radius, 2px);
}
[data-uia-card-skin="1"] .uia-card__intro {
display: grid;
gap: var(--uia-card-intro-gap, 1rem);
}
[data-uia-card-skin="1"] .uia-card__time {
grid-row: 1 / 1;
inline-size: fit-content;
padding: var(--uia-card-time-padding, .25rem 1.25rem .25rem);
background-color: var(--uia-card-time-background-color, #f0f0f0);
font-weight: var(--uia-card-time-font-weight, 700);
font-size: var(--uia-card-time-font-size, .75rem);
text-transform: var(--uia-card-time-text-transform, uppercase);
color: var(--uia-card-time-color, currentColor);
}
[data-uia-card-skin="1"][data-uia-card-mod="1"] .uia-card__container {
border-inline-start: var(--uia-card-border-thickness, 2px) var(--uia-card-border-style, solid) var(--uia-card-border-color, currentColor);
box-shadow: var(--uia-card-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}
/*
=====
TYPOGRAPHY
=====
*/
body {
font-family: var(--ds-typography-main-font-family, system-ui);
font-size: var(--ds-typography-main-font-size, 1rem);
color: var(--ds-typography-main-color, #222);
line-height: var(--ds-typography-main-line-height, 1.75);
}
p:not([class]) {
margin-block: var(--ds-typography-paragraph-margin-block-start, var(--_ds-typography-main-margin)) 0;
}
/*
=====
DEMO
=====
*/
:root {
--uia-timeline-line-color: #4557bb;
--uia-timeline-dot-color: #4557bb;
--uia-timeline-arrow-color: #4557bb;
--uia-timeline-line-thickness: 3px;
--uia-timeline-point-border-color: #4557bb;
--uia-timeline-group-padding: 1.5rem 1.5rem 1.25rem;
--ds-typography-main-line-height: 1.5;
}
.timeline-5-2 {
--uia-timeline-line-mask-color: #f0f0f0
}
[data-uia-timeline-skin="3"] {
--uia-timeline-year-background-color: #4557bb;
}
body {
background-color: #f0f0f0;
margin: 0;
display: flex;
flex-direction: column;
}
.page {
box-sizing: border-box;
inline-size: min(100%, 90ch);
padding: 5rem 2rem 3rem;
margin-inline: auto;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.