Пишем код HTML:
Пишем стиль:
Смотрим наш результат:
HTML:
<div id="wrapper">
<div id="container">
<h1>Timeline</h1>
<ol class="timeline">
<li>
<h2>1997</h2>
<ol>
<li>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Nam non purus vel orci molestie consequat.</p>
</li>
<li>
<h3>Etiam et velit in arcu consectetur aliquet et eu metus</h3>
<p>Sed vitae diam rhoncus, imperdiet nunc quis, lacinia nulla.</p>
</li>
<li>
<h3>Phasellus non orci convallis, aliquet nisl a, suscipit purus</h3>
<p>Nam mollis orci sed sem lobortis, dictum fermentum sapien elementum.</p>
</li>
</ol>
</li>
<li>
<h2>1998</h2>
<ol>
<li>
<h3>Aliquam non dolor finibus nisi lacinia lacinia vel sed purus</h3>
<p>Integer facilisis neque vitae urna varius, at semper ligula luctus.</p>
</li>
<li>
<h3>Sed rhoncus turpis nec orci vulputate accumsan</h3>
<p>Sed sed diam hendrerit, porta est ac, finibus sem.</p>
</li>
<li>
<h3>Proin tristique nibh sit amet tellus convallis, at convallis libero blandit</h3>
<p>Duis quis elit vel elit interdum viverra.</p>
</li>
<li>
<h3>Nullam a velit iaculis massa faucibus volutpat</h3>
<p>Praesent et sapien rhoncus, lacinia neque maximus, facilisis ante.</p>
</li>
</ol>
</li>
<li>
<h2>1999</h2>
<ol>
<li>
<h3>Fusce pulvinar nisi pulvinar magna efficitur, nec vulputate magna rhoncus</h3>
<p>Ut facilisis dui tempor, blandit tellus eget, molestie nisl.</p>
</li>
<li>
<h3>Nunc ut ipsum luctus, semper arcu vitae, auctor odio</h3>
<p>Morbi consectetur purus et massa molestie, non lacinia dolor gravida.</p>
</li>
<li>
<h3>Curabitur vestibulum enim ut tempus condimentum</h3>
<p>Morbi vel ipsum pretium, lobortis massa a, mollis lectus.</p>
</li>
</ol>
</li>
<li>
<h2>2000</h2>
<ol>
<li>
<h3>Maecenas vitae ipsum non mi ullamcorper tristique</h3>
<p>Maecenas in lectus vel est eleifend condimentum eu eget lectus.</p>
</li>
<li>
<h3>Vestibulum mollis ipsum ac mi posuere pharetra</h3>
<p>Proin auctor erat sed ullamcorper ornare.</p>
</li>
</ol>
</li>
<li>
<h2>2001-2003</h2>
<ol>
<li>
<h3>Nam a eros aliquet, mattis nisi vitae, commodo nunc</h3>
<p>Donec ut leo posuere, fringilla arcu eu, tempor metus.</p>
</li>
<li>
<h3>Vestibulum eget arcu id eros aliquet imperdiet</h3>
<p>Pellentesque eget lectus consequat, sodales mi quis, aliquet sem.</p>
</li>
<li>
<h3>Nullam a leo cursus, dapibus erat et, rhoncus diam</h3>
<p>Sed quis nunc id mauris tristique sollicitudin.</p>
</li>
<li>
<h3>Donec dictum orci vitae scelerisque semper</h3>
<p>Donec at lorem sit amet risus interdum semper in consequat leo.</p>
</li>
<li>
<h3>Fusce vel nisl feugiat turpis luctus consectetur in in enim</h3>
<p>Aenean ut libero sodales, laoreet magna sit amet, consequat nunc.</p>
</li>
</ol>
</li>
<li>
<h2>2004</h2>
<ol>
<li>
<h3>Ut cursus metus eu imperdiet aliquam</h3>
<p>Sed et tellus in massa venenatis auctor.</p>
</li>
<li>
<h3>Aenean sit amet turpis at odio accumsan lacinia</h3>
<p>Nulla id tellus facilisis, egestas orci non, bibendum neque.</p>
</li>
<li>
<h3>Quisque tincidunt est quis ullamcorper commodo</h3>
<p>Nulla in augue eget felis maximus blandit.</p>
</li>
<li>
<h3>Maecenas tincidunt arcu nec eleifend vestibulum</h3>
<p>Cras ac libero ac sapien porta lobortis.</p>
</li>
<li>
<h3>Suspendisse iaculis velit quis rhoncus pretium</h3>
<p>Nunc a ligula ut nisl aliquet convallis semper ut nulla.</p>
</li>
<li>
<h3>Aliquam sit amet dolor tincidunt, varius mauris et, porta nunc</h3>
<p>Sed vitae odio ut orci suscipit placerat.</p>
</li>
<li>
<h3>Duis facilisis diam a nulla porttitor viverra</h3>
<p>Sed ornare sapien at elit consectetur, sed mollis quam consectetur.</p>
</li>
</ol>
</li>
<li>
<h2>2005-2009</h2>
<ol>
<li>
<h3>Nullam eu ipsum quis eros commodo tempor</h3>
<p>Vestibulum pellentesque tortor iaculis suscipit tristique.</p>
</li>
<li>
<h3>Proin in nisi sit amet enim condimentum tempor in vitae elit</h3>
<p>Etiam et orci a diam pellentesque aliquet.</p>
</li>
<li>
<h3>Etiam vitae urna commodo, porttitor purus ac, condimentum sapien</h3>
<p>Maecenas ultrices nibh vel urna molestie, vitae porttitor tortor ultrices.</p>
</li>
<li>
<h3>Maecenas ac massa eget arcu suscipit semper</h3>
<p>Suspendisse ut mauris et quam posuere cursus nec nec turpis.</p>
</li>
<li>
<h3>Quisque sodales justo lacinia nulla scelerisque, ac interdum ex varius</h3>
<p>Praesent eleifend urna a lectus faucibus, vel dignissim neque imperdiet.</p>
</li>
<li>
<h3>Morbi vel turpis pharetra, faucibus ligula ut, iaculis ex</h3>
<p>Sed maximus felis at diam eleifend dignissim.</p>
</li>
<li>
<h3>Nulla tempor odio non dignissim consequat</h3>
<p>Nullam iaculis dui id hendrerit molestie.</p>
</li>
<li>
<h3>Aliquam tempor lacus auctor lacus pharetra, id feugiat purus laoreet</h3>
<p>Aenean luctus velit quis dapibus fringilla.</p>
</li>
<li>
<h3>Vivamus mollis sem eget fringilla blandit</h3>
<p>Duis sit amet turpis dapibus, volutpat libero id, interdum tellus.</p>
</li>
</ol>
</li>
<li>
<h2>2010-2018</h2>
<ol>
<li>
<h3>Phasellus congue justo a tellus efficitur tristique</h3>
<p>Ut ac felis a mauris semper pellentesque sagittis quis nunc.</p>
</li>
<li>
<h3>Maecenas non sem vel nulla semper vestibulum</h3>
<p>In non ante sit amet purus scelerisque rutrum a non erat.</p>
</li>
<li>
<h3>Integer luctus quam eget ipsum porta, vitae bibendum nisl cursus</h3>
<p>Nam efficitur arcu vitae varius elementum.</p>
</li>
<li>
<h3>Cras malesuada ipsum eget laoreet ultricies</h3>
<p>Vivamus suscipit ligula id egestas finibus.</p>
</li>
<li>
<h3>Vivamus quis quam a lacus volutpat suscipit id et nibh</h3>
<p>Fusce eget lectus dignissim turpis ornare finibus a id lorem.</p>
</li>
<li>
<h3>In sit amet purus elementum lacus eleifend maximus</h3>
<p>Integer viverra odio id bibendum finibus.</p>
</li>
<li>
<h3>Nulla pellentesque quam at tempor aliquet</h3>
<p>Donec et eros eu ex tincidunt commodo.</p>
</li>
<li>
<h3>Praesent ac sapien tempus, consequat massa ac, lobortis diam</h3>
<p>Morbi ornare felis nec magna bibendum tempus.</p>
</li>
<li>
<h3>Duis congue tortor quis arcu tincidunt, et fringilla orci finibus</h3>
<p>Morbi suscipit dolor a pretium rhoncus.</p>
</li>
<li>
<h3>Sed venenatis ipsum in semper imperdiet</h3>
<p>Donec commodo ipsum non nulla blandit sollicitudin.</p>
</li>
<li>
<h3>In dictum sapien sed magna molestie pharetra</h3>
<p>Phasellus sollicitudin arcu ac bibendum volutpat.</p>
</li>
<li>
<h3>Fusce molestie purus nec turpis congue volutpat</h3>
<p>Curabitur lobortis dolor in est elementum, ut fermentum nisi consectetur.</p>
</li>
<li>
<h3>Vestibulum ullamcorper lorem et lorem porttitor cursus</h3>
<p>Donec et erat porta, iaculis massa id, ullamcorper sem.</p>
</li>
</ol>
</li>
<li>
<h2>Today</h2>
</li>
</ol>
</div>
</div>
SCSS:
/*** VARIABLES ***/
$black: #1d1f20;
$blue: #83e4e2;
$green: #a2ed56;
$orange: #fca858;
$red: #fd6470;
$yellow: #fddc32;
$white: #fafafa;
/*** EXTEND ***/
%zero-edge {
margin: 0;
padding: 0;
}
/*** MIXINS ***/
@mixin desktop {
@media only screen and ( min-width: 40em ) {
@content;
}
}
/*** STYLE ***/
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
@extend %zero-edge;
}
body {
background-color: $black;
color: $white;
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}
#wrapper {
margin: 0 auto;
max-width: 64em;
}
#container {
float: left;
padding: 1em;
width: 100%;
}
h1,
h2 {
text-align: center;
}
@each $list in 'ol.timeline' 'ol.timeline ol'{
#{$list} {
list-style: none;
@extend %zero-edge;
}
}
ol.timeline > li {
padding-left: 2px;
position: relative;
&:before {
background-color: $green;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 2px;
@include desktop() {
left: 50%;
transform: translateX(-50%);
}
}
> h2 {
background-color: $green;
color: $black;
margin: 0;
position: -webkit-sticky;
position: sticky;
text-transform: uppercase;
top: 0;
@include desktop() {
border-radius: 0.25em;
margin: 0 auto;
margin-bottom: 1em;
max-width: 200px;
}
}
> ol {
display: flex;
flex-wrap: wrap;
> li {
border-top: 2px solid $green;
flex: 0 0 100%;
padding: 0 0 0.5em 1em;
@include desktop() {
flex-basis: 50%;
&:nth-child(odd) {
padding-left: 0;
padding-right: 1em;
}
&:nth-child(even) {
margin-top: 2em;
padding-right: 0;
}
}
> h3:first-child {
color: $green;
margin-bottom: -0.75em;
}
}
}
&:nth-child(6n + 2) {
&:before,
> h2 {
background-color: $blue;
}
> ol {
> li {
border-color: $blue;
h3 {
color: $blue;
}
}
}
}
&:nth-child(6n + 3) {
&:before,
> h2 {
background-color: $red;
}
> ol {
> li {
border-color: $red;
h3 {
color: $red;
}
}
}
}
&:nth-child(6n + 4) {
&:before,
> h2 {
background-color: $orange;
}
> ol {
> li {
border-color: $orange;
h3 {
color: $orange;
}
}
}
}
&:nth-child(6n + 5) {
&:before,
> h2 {
background-color: $yellow;
}
> ol {
> li {
border-color: $yellow;
h3 {
color: $yellow;
}
}
}
}
&:nth-child(6n + 6) {
&:before,
> h2 {
background-color: $white;
}
> ol {
> li {
border-color: $white;
h3 {
color: $white;
}
}
}
}
}
![[OzzModz] Website Verification](/data/resource_icons/3/3759.jpg?1678691930){kind=icon}
