This is my very first posting and i will love everyone to comment about it in the comment section.
Starting a week with a scheduled plan as an adge says "If you fail to plan you plan to fail". When you plan you are bound to suceed. Creating a CSS Timeline in
your website or your portfolio page as also breakdown of your achievements.
Writing the code for the CSS Timeline
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Timeline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="intro">
<div class="container">
<h1>CSS Timeline</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>01:00</time>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.
</div>
</li>
<li>
<div>
<time>03:00</time>
Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.
Aenean dignissim pellentesque felis.
</div>
</li>
<li>
<div>
<time>03:30</time>
Morbi in sem quis dui placerat ornare.
Pellentesque odio nisi, euismod in, pharetra a,
ultricies in, diam. Sed arcu. Cras consequat.
</div>
</li>
<li>
<div>
<time>04:00</time>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.
</div>
</li>
<li>
<div>
<time>05:00</time>
Praesent dapibus, neque id cursus faucibus,
tortor neque egestas auguae,
eu vulputate magna eros eu erat. Aliquam erat volutpat.
Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus.
</div>
</li>
<li>
<div>
<time>05:40</time>
Phasellus ultrices nulla quis nibh. Quisque a lectus.
Donec consectetuer ligula vulputate sem tristique cursus.
Nam nulla quam, gravida non, commodo a, sodales sit amet,
nisi.
</div>
</li>
<li>
<div>
<time>06:20</time>
Phasellus ultrices nulla quis nibh. Quisque a lectus.
Donec consectetuer ligula vulputate sem tristique cursus.
Nam nulla quam, gravida non, commodo a, sodales sit amet,
nisi.
</div>
</li>
<li>
<div>
<time>07:00</time>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis. Suspendisse urna nibh,
viverra non, semper suscipit, posuere a, pede.
</div>
</li>
<li>
<div>
<time>08:00</time>
Praesent dapibus, neque id cursus faucibus,
tortor neque egestas auguae,
eu vulputate magna eros eu erat. Aliquam erat volutpat.
Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus.
</div>
</li>
<li>
<div>
<time>09:00</time>
Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.
Aenean dignissim pellentesque felis.
</div>
</li>
<li>
<div>
<time>09:40</time>
Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.
Aenean dignissim pellentesque felis.
</div>
</li>
<li>
<div>
<time>10:00</time>
Morbi in sem quis dui placerat ornare.
Pellentesque odio nisi, euismod in, pharetra a,
ultricies in, diam. Sed arcu. Cras consequat.
</div>
</li>
</ul>
</section>
<script src="index.js"></script>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
background: #000;
color: #fff;
overflow-x: hidden;
padding-bottom: 50px;
}
.intro
{
background: #051336;
padding: 100px 0;
}
.container
{
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
h1
{
font-size: 2.5rem;
}
.timeline ul
{
background: #1c1c29;
padding: 50px 0;
}
.timeline ul li
{
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.timeline ul li::after
{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div
{
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(0.5px);
box-shadow: 0 15px 15px 0 #17171f;
}
.timeline ul li div::before
{
content: '';
position: absolute;
top: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div
{
left: 45px;
}
.timeline ul li:nth-child(odd) div::before
{
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent rgba(255, 255, 255, 0.05) transparent transparent;
box-shadow: 0 15px 15px 0 #17171f;
}
.timeline ul li:nth-child(even) div
{
left: -439px;
}
.timeline ul li:nth-child(even) div::before
{
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.05);
}
time
{
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
.timeline ul li.in-view::after
{
background: rgba(255, 255, 255, 0.05);
}
.timeline ul li div
{
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div
{
transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div
{
transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div
{
transform: none;
visibility: visible;
opacity: 1;
}
@media screen and (max-width: 900px)
{
.timeline ul li div
{
width: 250px;
}
.timeline ul li:nth-child(even) div
{
left: -289px;
}
}
@media screen and (max-width: 600px)
{
.timeline ul li
{
margin-left: 20px;
}
.timeline ul li div
{
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(even) div
{
left: 45px;
}
.timeline ul li:nth-child(even) div::before
{
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;
}
}
Thank you for reading.
Top comments (0)