DEV Community: Opeyemi Ogunsanya

Django Bug Bugging You? Let Me Squash It!

Opeyemi Ogunsanya — Sun, 17 Sep 2023 16:38:57 +0000

🌟 Introducing Opeyemi O.(Workforce001)'s Django Bug-Fixing Fiverr Gig! 🌟

🚀 Attention Developers and Django Enthusiasts! Are you struggling with pesky bugs in your Django projects? Say goodbye to those sleepless nights because help has arrived! 🛠️

💡 Services Offered:
✅ Expert Django Bug Fixing
✅ Quick Turnaround Time
✅ Precise Code Diagnosis
✅ Seamless Integration
✅ Affordable Rates

👨‍💻 With 3 years+ of experience in Django development, I've mastered the art of bug hunting. No bug is too elusive for me to catch and fix!

📈 Benefits of Working with Me:
✨ Rapid Issue Resolution
✨ Clear Communication
✨ Hassle-Free Debugging
✨ Improved Website Performance
✨ Peace of Mind

Ready to get your Django project back on track? Let's collaborate and make your code squeaky clean. Your success is my priority!

👉 Visit my Fiverr gig to learn more and get started: https://www.fiverr.com/workforce001/fix-django-bugs-quickly-and-efficiently

Got a bug emergency? Don't fret! Message me on Fiverr Workforce001, and I'll be your bug-slaying superhero. Let's make your Django project shine! 🚀

Digital Clock Design (Segment Display Design)

Opeyemi Ogunsanya — Sat, 13 May 2023 23:14:48 +0000

Hi there long time of me writing an article here.

Few months ago while designing my personal website i actually thought of a design element and surfed through the internet if i could find one that matches it but did not. Well after thinking through it finally designed it and used it on my Personal Website (OPEYEMI OGUNSANYA).

Let's get started in building our digital clock.
First let's create our html elements.
In the design of a seven segment display for each digits there are seven bars forming a digit to be displayed and to display a digit from 0 - 9 we either turn on one or all bars for a digit to be displayed.

<style>
.clock {
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hours {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.digit_1,
.digit_2 {
  width: 40%;
  height: 100%;
  position: relative;
}
.digit_1 div {
  position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
  height: 10%;
  width: 60%;
  border-radius: 5px;
  background: #000000;
}
.bar_1 {
  left: 30%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
  top: 20%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
  top: 70%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
  top: 90%;
  left: 30%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
  top: 70%;
  left: -10%;
  transform: rotate(90deg);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
  top: 20%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  left: -10%;
  transform: rotate(90deg);
}
.bar_7 {
  top: 45%;
  left: 30%;
  clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
</style>
<div class="container">
<div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
  </div>
</div>

This shows a digit been displayed very well and a full design of a digit can be represented using this design. To have the full time display use code below:

HTML

<div class="container">
  <div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="minutes">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="seconds">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="day"></div>
  </div>
</div>

CSS

.container {
    display: flex;  
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.clock {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.hours,
.minutes,
.seconds {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.colon {
    width: 3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.digit_1,
.digit_2 {
    width: 40%;
    height: 100%;
    position: relative;
}
.digit_1 div,
.digit_2 div {
    position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
    height: 10%;
    width: 60%;
    border-radius: 5px;
    background: #000000;
}
.dot_1,
.dot_2 {
    height: 10%;
    width: 40%;
    border-radius: 5px;
    position: relative;
    background: #000000;
}
.dot_1{
    top: -20%;
    left: 20%;
}
.dot_2{
    top: 20%;
    right: 20%;
}
.bar_1 {
    left: 30%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
    top: 20%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
    top: 70%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
    top: 90%;
    left: 30%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
    top: 70%;
    left: -10%;
    transform: rotate(90deg);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
    top: 20%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    left: -10%;
    transform: rotate(90deg);
}
.bar_7 {
    top: 45%;
    left: 30%;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}

This is a representation of a digit in the seven segment display
We can see that we have defined each segments well detailed by setting each bars for each number to be displayed in each sections of a digital clock, sections such as

Hours
Minutes
Seconds

So for full design implementation we need to add an handler for full implementation by adding the following JavaScript.

Note: Add one of the latest version of jquery.

JavaScript

function time() {
  var day = new Date();
  var hh = day.getHours();
  if (hh > 12) {
    hh = hh - 12;
    $(".day").text("PM");
  } else {
    $(".day").text("AM");
  }
  var hour = hh.toString(10);
  if (hour.length < 2) {
    hour = "0" + hour;
  }
  if (hh > 12) {
    console.log(hh);
    hh = hh - 12;
  }
  for (var i = 0; i < hour.length; i++) {
    var digit_index = i + 1;
    getNumber(hour[i], ".hours ", ".digit_" + digit_index);
  }
  var mm = day.getMinutes();
  var minutes = mm.toString(10);
  if (minutes.length < 2) {
    minutes = "0" + minutes;
  }
  for (var i = 0; i < minutes.length; i++) {
    var digit_index = i + 1;
    getNumber(minutes[i], ".minutes ", ".digit_" + digit_index);
  }
  var ss = day.getSeconds();
  var seconds = ss.toString(10);
  if (seconds.length < 2) {
    seconds = "0" + seconds;
  }
  for (var i = 0; i < seconds.length; i++) {
    var digit_index = i + 1;
    getNumber(seconds[i], ".seconds ", ".digit_" + digit_index);
  }
}
setInterval(() => {
  time();
});
  function getNumber(number, position, digit) {
  if (number == "0") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "1") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "2") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "none");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "3") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "4") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "5") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "6") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "7") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "8") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "9") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  }
}

Finally our digital clock display has been created.
For Support kindly add me to your next project as a full stack web developer or recommending me to someone. My profile links are as follows:

Thanks for reading!!!

CSS Particle Animation

Opeyemi Ogunsanya — Tue, 19 Jan 2021 01:26:56 +0000

Animation is a plays an important artistic role in websites. Animating a website make it more fanciful and intresting to use. 97.5% of websites uses animation in

one form or the other using many programming llanguages. CSS Particle Animation as its name suggest, are small circular dots used an the background scope of a

website. Using this CSS Particle Animation on your website can bring out light on the background scope.

Writing the code for the CSS Particle Animation

HTML5


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Particle Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="glow">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="glow">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="glow">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="glow">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
    <div class="glow">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
    </div>
</body>
</html>

CSS

*
{
    margin: 0;
    padding: 0;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    background: #111;
    overflow: hidden;
}
.glow
{
    min-width: 750px;
    height: 750px;
    margin: -200px;
    transform-origin: right;
    animation: glow_movement 5s linear infinite;
}
@keyframes glow_movement
{
    0%
    {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}
.glow:nth-child(even)
{
    transform-origin: left;
}
.glow span
{
    position: absolute;
    top: calc(80px * var(--i));
    left: calc(80px * var(--i));
    right: calc(80px * var(--i));
    bottom: calc(80px * var(--i));
}
.glow span::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    width: 12px;
    height: 12px;
    background: #ac0;
    border-radius: 50%;
}
.glow span:nth-child(3n + 1)::before
{
    background: rgb(0, 255, 242);
    box-shadow: 0 0 15px rgb(0, 255, 242),
                0 0 25px rgb(0, 255, 242),
                0 0 35px rgb(0, 255, 242),
                0 0 45px rgb(0, 255, 242),
                0 0 55px rgb(0, 255, 242),
                0 0 0 4px rgb(0, 255, 242);
}
.glow span:nth-child(3n + 2)::before
{
    background: rgb(0, 255, 145);
    box-shadow: 0 0 10px rgb(0, 255, 145),
                0 0 20px rgb(0, 255, 145),
                0 0 30px rgb(0, 255, 145),
                0 0 40px rgb(0, 255, 145),
                0 0 0 4px rgb(0, 255, 145);
}
.glow span:nth-child(3n + 3)::before
{
    background: rgb(255, 0, 212);
    box-shadow: 0 0 10px rgb(255, 0, 212),
                0 0 20px rgb(255, 0, 212),
                0 0 30px rgb(255, 0, 212),
                0 0 40px rgb(255, 0, 212),
                0 0 0 4px rgb(255, 0, 212);
}
.glow span:nth-child(3n + 1)
{
    animation: animate 10s alternate infinite;
}
.glow span:nth-child(3n + 2)
{
    animation: animate_reverse 3s alternate infinite;
}
.glow span:nth-child(3n + 3)
{
    animation: animate 8s alternate infinite;
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
@keyframes animate_reverse
{
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}

Thank you for reading.

Creating A Profile Card Design

Opeyemi Ogunsanya — Fri, 15 Jan 2021 13:43:41 +0000

Thank you all for your responses to my previous post on Creating CSS Timeline. moving forward in your daily activities either as a developer, an engineer, a

designer, an analyst and soon. Using the internet to display your work and achivements needs a Profile Card that displays (at least a brief description) about

you on your portfolio page. Also if you are running a website that people seek for jobs there they would also need a Profile Card each to present their work

and achievements.

So lets write a few codes for a Profile Card Design

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Contact Card Design with Glassmorphism</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <span class="pro">PRO</span>
        <img class="img" src="https://randomuser.me/api/portraits/men/40.jpg">
        <h3>Patric Smart</h3>
        <h6>Carlifonia</h6>
        <p>Front-end developer and <br> back-end developer</p>
        <div class="buttons">
            <button>Message</button>
            <button>Following</button>
        </div>
        <div class="skills">
            <h6>Skills</h6>
            <ul>
                <li>CSS</li>
                <li>HTML</li>
                <li>Python</li>
                <li>UI / UX</li>
                <li>Wordpress</li>
                <li>JavaScript</li>
                <li>Php</li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    background: #28223F;
    font-family: Montserrat, sans-serif;
}
.card
{
    position: relative;
    width: 350px;
    border-radius: 10px;
    padding-top: 30px;
    max-width: 100%;
    color: #B3B8CD;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 2px -10px rgba(0, 0, 0, 0.75);
}
.card .pro
{
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    color: #231E39;
    padding: 3px 7px;
    background: rgba(0, 0, 0, 0.15);
}
.card .img
{
    padding: 7px;
    border-radius: 50%;
    border: 1px solid #28223F;
}
button
{
    font-weight: 500;
    border-radius: 3px;
    border: 1px solid #0396cb;
    padding: 10px 25px;
    color: #028996;
    background: transparent;
    font-family: Monterrat, sans-serif;
}
button:hover
{
    cursor: pointer;
    color: #231E39;
    background: #0396cb;
}
h3
{
    margin: 10px 0;
}
h6
{
    margin: 5px 0;
    text-transform: uppercase;
}
p
{
    font-size: 14px;
    line-height: 21px;
}
.skills
{
    padding: 15px;
    margin-top: 30px;
    text-align: left;
    font-size: 20px;
    border-radius: 10px;
    backdrop-filter: blur(1.5px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.skills ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}
.skills ul li
{
    padding: 7px;
    font-size: 12px;
    display: inline-block;
    margin: 0 7px 7px 0;
    border: 1px solid #2D2747;
}

Thank you for reading .

Creating CSS Timeline

Opeyemi Ogunsanya — Tue, 12 Jan 2021 08:41:23 +0000

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.