Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>time line</title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
Box-sizing:border-box;
}
body{
Background: #fff;
font-family: "Helvetica Neue", Sans-serif;
margin:50px;
}
#timeline {
margin-left:30%;
border-left:10px solid #bce1fa;
}
#timeline li{
position:relative;
List-style:none;
Display:block;
width:100%;
Clear:both;
}
#timeline li::before{
Content: ";
Display:block;
width:30px;
height:30px;
border:5px solid #bce1fa;
border-radius:50%;
Background: #3498DB;
Position:absolute;
Left: -25px;
top:0;
/*box-sizing:border-box;*/
}
#timeline Li time{
Position:absolute;
Left:-30%;
top:8px;
width:25%;
font-size:21px;
Color: #AAA;
Text-align:right;
}
. timeline-content{
position:relative;
margin:0 0 20px 5%;
Background: #57b4f6;
Color: #fff;
border-radius:4px;
padding:30px;
}
. timeline-content h1{
font-size:32px;
margin-bottom:20px;
}
. timeline-content::after{
Content: ";
width:0;
height:0;
border-width:10px;
Border-style:solid;
Border-color:transparent #57b4f6 Transparent transparent;
Position:absolute;
Left: -20px;
top:12px;
}
</style>
<body>
<ul id= "Timeline" >
<li>
<time datetime= "2015-09-18" >2015-9-18</time>
<div class= "Timeline-content" >
<p>ut Ut magna Ligula. Praesent vitae vestibulum magna. In lobortis metus non consequat vehicula. Fusce massa magna, pretium ut augue non, Vehicula egestas Leo. UT lacinia viverra nunc, UT lobortis orci imperdiet ID. Fusce dolor nulla, tempus vel dolor vel, accumsan facilisis sem. Curabitur congue odio a sem imperdiet finibus.</p>
</div>
</li>
<li>
<time datetime= "2015-09-14" >2015-9-14</time>
<div class= "Timeline-content" >
<p>pellentesque sagittis et sapien sit amet bibendum. Vestibulum eu purus quis ipsum sollicitudin ornare. Ut diam Justo, Lacinia id ante non, hendrerit pharetra felis. Donec dignissim in libero EU imperdiet. Nunc magna Felis, ultrices eu Nunc AC, aliquam imperdiet odio. Integer blandit velit vestibulum ex laoreet Placerat. </p>
</div>
</li>
<li>
<time datetime= "2015-09-13" >2015-9-13</time>
<div class= "Timeline-content" >
<p>aenean ID nisl vestibulum ex venenatis gravida vel ac neque. Nulla at Lacinia eros. In Placerat semper orci, id facilisis risus interdum nec. Fusce velit dui, aliquam egestas aliquet vulputate, imperdiet sed ante. Proin pretium arcu ac augue varius consequat.</p>
</div>
</li>
<li>
<time datetime= "2015-09-12" >2015-9-12</time>
<div class= "Timeline-content" >
<p>duis vehicula semper velit quis semper. Integer placerat tincidunt ipsum. Nulla Facilisi. Aenean ut sapien varius, tincidunt justo nec, dictum orci. Donec fringilla nibh et felis eleifend porttitor. Etiam in Molestie DUI. Praesent nec neque ID lectus egestas luctus nec eget tellus.</p>
</div>
</li>
<li>
<time datetime= "2015-09-10" >2015-9-10</time>
<div class= "Timeline-content" >
<p>sed turpis diam, lobortis eget neque Sed, mollis egestas massa. Nunc dictum velit a nisl volutpat ullamcorper. Suspendisse vel posuere lacus. Nullam blandit erat ut fermentum facilisis. Nulla porttitor eget magna et Finibus. Nullam nec Leo Tempus, gravida dolor ID, Dapibus magna. Aliquam erat volutpat.</p>
</div>
</li>
</ul>
</body>
"Web Front end 25 Group" group number 618237474
Html+css: Timeline Layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
