<!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"
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
style
=
"margin:2em;"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h2
>Primer CSS Timeline</
h2
>
<
div
class
=
"TimelineItem"
>
<
div
class
=
"TimelineItem-badge color-bg-attention-emphasis color-fg-on-emphasis"
>
<
svg
width
=
"25"
height
=
"25"
viewBox
=
"0 0 22 22"
fill
=
"currentColor"
class
=
"octicon"
>
<
path
fill-rule
=
"evenodd"
clip-rule
=
"evenodd"
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13
0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0
100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1
0 012 0zM5.32 9.636a.75.75
0 011.038.175l.007.009a1.82 1.82 0
00.35.31c.264.178.683.37 1.285.37.602
0 1.02-.192 1.285-.371a1.82 1.82 0
00.35-.31l.007-.008a.75.75
0 011.222.87l-.614-.431c.614.43.614.431.613.
431v.001l-.001.002-.002.003-.005.007-.014.019a1.989
1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766
0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323
0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.
005-.006-.012-.003v-.002h-.001l.613-.432-.
614.43a.75.75 0 01.183-1.044z">
</
path
>
</
svg
>
</
div
>
<
div
class
=
"TimelineItem-body"
>
This is the sample text for the timeline
</
div
>
</
div
>
<
div
class
=
"TimelineItem"
>
<
div
class="TimelineItem-badge color-bg-success-emphasis
color-fg-on-emphasis">
<
svg
width
=
"16"
height
=
"16"
viewBox
=
"0 0 16 16"
fill
=
"currentColor"
class
=
"octicon"
>
<
path
fill-rule
=
"evenodd"
clip-rule
=
"evenodd"
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8
0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1
0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012
0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82
0 00.35.31c.264.178.683.37 1.285.37.602
0 1.02-.192 1.285-.371a1.82 1.82
0 00.35-.31l.007-.008a.75.75 0
011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.
001.002-.002.003-.005.007-.014.019a1.989 1.989
0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766
0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323
0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.
02-.005-.006-.002-.003v-.002h-.001l.613-.432-
.614.43a.75.75 0 01.183-1.044z">
</
path
>
</
svg
>
</
div
>
<
div
class
=
"TimelineItem-body"
>
This is the sample text for the timeline.
</
div
>
</
div
>
<
div
class
=
"TimelineItem"
>
<
div
class="TimelineItem-badge color-bg-sponsors-emphasis
color-fg-on-emphasis">
<
svg
width
=
"16"
height
=
"16"
viewBox
=
"0 0 16 16"
fill
=
"currentColor"
class
=
"octicon"
>
<
path
fill-rule
=
"evenodd"
clip-rule
=
"evenodd"
d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996
0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068
5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914
7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5
3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5
3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5
3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736
6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389
10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736
15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3
10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11
2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261
10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074
15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703
14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5
11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642
12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75
13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12
3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421
13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z">
</
path
>
</
svg
>
</
div
>
<
div
class
=
"TimelineItem-body"
>
This is the sample text for the timeline.
</
div
>
</
div
>
<
div
class
=
"TimelineItem"
>
<
div
class="TimelineItem-badge color-bg-accent-emphasis
color-fg-on-emphasis">
<
svg
width
=
"16"
height
=
"16"
viewBox
=
"0 0 16 16"
fill
=
"currentColor"
class
=
"octicon"
>
<
path
fill-rule
=
"evenodd"
clip-rule
=
"evenodd"
d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401
4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875
4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885
3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323
3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875
2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985
2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079
4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102
6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875
1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804
4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137
1.65737C2.30074 2.01695 2.07276 2.48822 2.0147
2.99416C1.95664 3.5001 2.07193 4.01077 2.34173
4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931
10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163
12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291
2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25
15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695
14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602
12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5
10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641
8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049
9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075
10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713
9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897
14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114
13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532
6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066
7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75
9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891
13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902
12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079
7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603
8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033
13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033
12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967
12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397
3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z">
</
path
>
</
svg
>
</
div
>
<
div
class
=
"TimelineItem-body"
>
This is the sample text for the timeline.
</
div
>
</
div
>
</
body
>
</
html
>