timeline
MyApp
Asmat Qatea
1.0
Desktop
False
640
480
False
False
False
False
WebApp
False
C:\Users\asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png
.timeline .item h4{
margin:0px;
}
.timeline .item p{
margin-top:5px;
color:gray;
}
.timeline .item span{
margin-top:5px;
color:#CFCFCF;
}
/*.................css code for timeline.........................*/
.timeline .item:nth-child(odd){
padding-right:calc( 50% + 10px);
background:white;
width:100%;
}
.timeline .item:nth-child(even){
padding-left:calc(50% + 25px);
background:white;
width:100%;
}
.timeline .item::before{
content:"";
position:absolute;
width:12px;
height:12px;
background:red;
border-radius:50%;
left:calc( 50% - 6px);
z-index:10;
}
.timeline .item::after{
content: '';
position: absolute;
width: 2px;
background-color: red;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.timeline .item:last-child::after{
content: '';
position: absolute;
width: 4px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}
/*................................................*/
.flexLeft{display:flex;align-items:center;justify-content:flex-start;}
en
standalone
Offline page
#000000
/
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
162px
12px
350px
439px
timeline
35px
157px
auto
top
item
<h4>Computer Science</h4>
<p>Mumbai-University</p>
<span class="flexLeft">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" id="id102" aria-describedby="tippy-103">
<path fill="currentColor" d="M7 18H5V16H7V18M7 14H5V12H7V14M11 18H9V16H11V18M11 14H9V12H11V14M15 18H13V16H15V18M15 14H13V12H15V14M19 18H17V16H19V18M19 14H17V12H19V14M16 8C15.45 8 15 7.55 15 7V4C15 3.45 15.45 3 16 3C16.55 3 17 3.45 17 4V7C17 7.55 16.55 8 16 8M8 8C7.45 8 7 7.55 7 7V4C7 3.45 7.45 3 8 3C8.55 3 9 3.45 9 4V7C9 7.55 8.55 8 8 8M19.89 5H18.5V7C18.5 8.38 17.38 9.5 16 9.5S13.5 8.38 13.5 7V5.25C13.5 5.11 13.39 5 13.25 5H10.75C10.61 5 10.5 5.11 10.5 5.25V7C10.5 8.38 9.38 9.5 8 9.5S5.5 8.38 5.5 7V5H4.11C3 4.97 2.03 5.87 2 7V19C2.03 20.13 3 21.03 4.11 21H19.89C21 21.03 21.97 20.13 22 19V7C21.97 5.87 21 4.97 19.89 5M20 19H4V11H20V19Z"></path>
</svg>
2009-2014
</span>
8px
8px
auto
top
item
<h4>Web Design</h4>
<p>India - Institute</p>
<span class="flexLeft">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" id="id102" aria-describedby="tippy-103">
<path fill="currentColor" d="M7 18H5V16H7V18M7 14H5V12H7V14M11 18H9V16H11V18M11 14H9V12H11V14M15 18H13V16H15V18M15 14H13V12H15V14M19 18H17V16H19V18M19 14H17V12H19V14M16 8C15.45 8 15 7.55 15 7V4C15 3.45 15.45 3 16 3C16.55 3 17 3.45 17 4V7C17 7.55 16.55 8 16 8M8 8C7.45 8 7 7.55 7 7V4C7 3.45 7.45 3 8 3C8.55 3 9 3.45 9 4V7C9 7.55 8.55 8 8 8M19.89 5H18.5V7C18.5 8.38 17.38 9.5 16 9.5S13.5 8.38 13.5 7V5.25C13.5 5.11 13.39 5 13.25 5H10.75C10.61 5 10.5 5.11 10.5 5.25V7C10.5 8.38 9.38 9.5 8 9.5S5.5 8.38 5.5 7V5H4.11C3 4.97 2.03 5.87 2 7V19C2.03 20.13 3 21.03 4.11 21H19.89C21 21.03 21.97 20.13 22 19V7C21.97 5.87 21 4.97 19.89 5M20 19H4V11H20V19Z"></path>
</svg>
2014-2017
</span>
8px
87px
auto
top
item
<h4>Web Development</h4>
<p>Online - tutorial</p>
<p>W3school</p>
<p>MDN</p>
<span class="flexLeft">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" id="id102" aria-describedby="tippy-103">
<path fill="currentColor" d="M7 18H5V16H7V18M7 14H5V12H7V14M11 18H9V16H11V18M11 14H9V12H11V14M15 18H13V16H15V18M15 14H13V12H15V14M19 18H17V16H19V18M19 14H17V12H19V14M16 8C15.45 8 15 7.55 15 7V4C15 3.45 15.45 3 16 3C16.55 3 17 3.45 17 4V7C17 7.55 16.55 8 16 8M8 8C7.45 8 7 7.55 7 7V4C7 3.45 7.45 3 8 3C8.55 3 9 3.45 9 4V7C9 7.55 8.55 8 8 8M19.89 5H18.5V7C18.5 8.38 17.38 9.5 16 9.5S13.5 8.38 13.5 7V5.25C13.5 5.11 13.39 5 13.25 5H10.75C10.61 5 10.5 5.11 10.5 5.25V7C10.5 8.38 9.38 9.5 8 9.5S5.5 8.38 5.5 7V5H4.11C3 4.97 2.03 5.87 2 7V19C2.03 20.13 3 21.03 4.11 21H19.89C21 21.03 21.97 20.13 22 19V7C21.97 5.87 21 4.97 19.89 5M20 19H4V11H20V19Z"></path>
</svg>
2017-2019
</span>
8px
166px
auto
top
item
<h4>Master in Ui/Ux</h4>
<p>Amazon</p>
<span class="flexLeft">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" id="id102" aria-describedby="tippy-103">
<path fill="currentColor" d="M7 18H5V16H7V18M7 14H5V12H7V14M11 18H9V16H11V18M11 14H9V12H11V14M15 18H13V16H15V18M15 14H13V12H15V14M19 18H17V16H19V18M19 14H17V12H19V14M16 8C15.45 8 15 7.55 15 7V4C15 3.45 15.45 3 16 3C16.55 3 17 3.45 17 4V7C17 7.55 16.55 8 16 8M8 8C7.45 8 7 7.55 7 7V4C7 3.45 7.45 3 8 3C8.55 3 9 3.45 9 4V7C9 7.55 8.55 8 8 8M19.89 5H18.5V7C18.5 8.38 17.38 9.5 16 9.5S13.5 8.38 13.5 7V5.25C13.5 5.11 13.39 5 13.25 5H10.75C10.61 5 10.5 5.11 10.5 5.25V7C10.5 8.38 9.38 9.5 8 9.5S5.5 8.38 5.5 7V5H4.11C3 4.97 2.03 5.87 2 7V19C2.03 20.13 3 21.03 4.11 21H19.89C21 21.03 21.97 20.13 22 19V7C21.97 5.87 21 4.97 19.89 5M20 19H4V11H20V19Z"></path>
</svg>
2019-2021
</span>
6px
452px
190px
25px
flexLeft
Developed by Asmat Qatea
0px
0px
640px
480px
False
custom