<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Blaze UI - Timeline Colors</
title
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
body {
font-family: sans-serif;
}
.wrapper{
display: flex;
justify-content: center;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"u-centered"
>
<
h3
style
=
"color:green;"
>GeeksforGeeks</
h3
>
<
p
><
b
>Timeline Colors - Blaze UI</
b
></
p
>
</
div
>
<
div
class
=
"wrapper u-window-box-super"
>
<
ul
class
=
"o-timeline"
>
<
li
class
=
"c-timeline-item"
>
<
div
class
=
"c-timeline-item__body"
>Learn Basic Syntax
<
p
class
=
"c-paragraph u-small"
>
Syntax are the rules to write a programming language.
</
p
>
</
div
>
</
li
>
<
li
class
=
"c-timeline-item c-timeline-item--warning"
>
<
div
class
=
"c-timeline-item__body"
>Learn Loops
<
p
class
=
"c-paragraph u-small"
>
Learn about while, do-while, for-loops etc.
</
p
>
</
div
>
</
li
>
<
li
class
=
"c-timeline-item c-timeline-item--brand"
>
<
div
class
=
"c-timeline-item__body"
>
Learn Data Structures
<
p
class
=
"c-paragraph u-small"
>
Learn Linked List, Tree, Graph etc.
</
p
>
</
div
>
</
li
>
<
li
class
=
"c-timeline-item c-timeline-item--info"
>
<
div
class
=
"c-timeline-item__body"
>
Learn Basic Algorithms
</
div
>
</
li
>
<
li
class
=
"c-timeline-item c-timeline-item--error"
>
<
div
class
=
"c-timeline-item__body"
>Build Projects
<
p
class
=
"c-paragraph u-small"
>
Projects are very important.
They help you to brush up on your skills
</
p
>
</
div
>
</
li
>
<
li
class="c-timeline-item c-timeline-item--success
c-timeline-item--last">
<
div
class
=
"c-timeline-item__body"
>
Start looking for a job
<
p
class
=
"c-paragraph u-small"
>
Good luck for your bright future.
</
p
>
</
div
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>