Post
Ask Question
Ram ram

Ram ram

  • 1.7k
  • 89
  • 5.1k

model 5 design need content click and hover design want

Mar 5 2020 3:32 AM
hi in this bootstrap in this bellow design demo 1 r 2 that content is possible to click are hover its working but demo5 web design content is not option for click r hover I want display hover and clicking demo5 design
  1. <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">  
  2. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>  
  3. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  4. <!------ Include the above in your HEAD tag ---------->  
  5.   
  6. <!DOCTYPE html>  
  7. <html lang="en">  
  8.     <head>  
  9.         <title>Accordion</title>  
  10.         <meta charset="utf-8">  
  11.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  12.         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">  
  13.     <style >  
  14.         a{text-decoration:none}  
  15. h4{text-align:center;margin:30px 0;color:#444}  
  16. .main-timeline{position:relative}  
  17. .main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:#242922;position:absolute;top:0;left:0;right:0}  
  18. .main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative}  
  19. .main-timeline .timeline:before{content:"";width:20px;height:20px;border-radius:50%;border:4px solid #fff;background:#ec496e;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}  
  20. .main-timeline .timeline-icon{display:inline-block;width:130px;height:130px;border-radius:50%;border:3px solid #ec496e;padding:13px;text-align:center;position:absolute;top:50%;left:30%;transform:translateY(-50%)}  
  21. .main-timeline .timeline-icon i{display:block;border-radius:50%;background:#ec496e;font-size:64px;color:#fff;line-height:100px;z-index:1;position:relative}  
  22. .main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before{content:"";width:100px;height:4px;background:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)}  
  23. .main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;top:89px;right:-30px}  
  24. .main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative}  
  25. .main-timeline .timeline-content:before{content:"";width:70%;height:100%;border:3px solid #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px}  
  26. .main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0}  
  27. .main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px}  
  28. .main-timeline .description{display:inline-block;font-size:16px;color:#404040;line-height:20px;letter-spacing:1px;margin:0}  
  29. .main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%}  
  30. .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px}  
  31. .main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px}  
  32. .main-timeline .timeline:nth-child(even) .timeline-content{float:left}  
  33. .main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)}  
  34. .main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0}  
  35. .main-timeline .timeline:nth-child(2n) .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-icon i,.main-timeline .timeline:nth-child(2n) .timeline-icon:before,.main-timeline .timeline:nth-child(2n):before{background:#f9850f}  
  36. .main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f}  
  37. .main-timeline .timeline:nth-child(2n) .title{color:#f9850f}  
  38. .main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f}  
  39. .main-timeline .timeline:nth-child(3n) .timeline-content:after,.main-timeline .timeline:nth-child(3n) .timeline-icon i,.main-timeline .timeline:nth-child(3n) .timeline-icon:before,.main-timeline .timeline:nth-child(3n):before{background:#8fb800}  
  40. .main-timeline .timeline:nth-child(3n) .timeline-icon{border-color:#8fb800}  
  41. .main-timeline .timeline:nth-child(3n) .title{color:#8fb800}  
  42. .main-timeline .timeline:nth-child(3n) .timeline-content:before{border-left-color:#8fb800;border-bottom-color:#8fb800}  
  43. .main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#2fcea5}  
  44. .main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#2fcea5}  
  45. .main-timeline .timeline:nth-child(4n) .title{color:#2fcea5}  
  46. .main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#2fcea5;border-bottom-color:#2fcea5}  
  47. @media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px}  
  48. .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px}  
  49. .main-timeline .timeline-content{margin-top:75px}  
  50. }  
  51. @media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px}  
  52. .main-timeline .timeline-icon{left:25%}  
  53. .main-timeline .timeline:nth-child(even) .timeline-icon{right:25%}  
  54. .main-timeline .timeline-content{margin-top:115px}  
  55. }  
  56. @media only screen and (max-width:767px){.main-timeline{padding-top:50px}  
  57. .main-timeline:before{left:80px;right:0;margin:0}  
  58. .main-timeline .timeline{margin-bottom:70px}  
  59. .main-timeline .timeline:before{top:0;left:83px;right:0;margin:0}  
  60. .main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0}  
  61. .main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto}  
  62. .main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px}  
  63. .main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px}  
  64. .main-timeline .timeline-icon i{font-size:30px;line-height:45px}  
  65. .main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px}  
  66. .main-timeline .timeline:nth-child(even) .timeline-content{float:right}  
  67. .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px}  
  68. .main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)}  
  69. .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px}  
  70. }  
  71. @media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px}  
  72. .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px}  
  73. .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px}  
  74. }  
  75.   
  76. /******************* Timeline Demo - 2 *****************/  
  77. .main-timeline2{padding-top:50px;overflow:hidden;position:relative}  
  78. .main-timeline2:before{content:"";width:7px;height:100%;background:#084772;margin:0 auto;position:absolute;top:80px;left:0;right:0}  
  79. .main-timeline2 .timeline{width:50%;float:left;padding:20px 60px;border-top:7px solid #084772;border-right:7px solid #084772;border-radius:0 30px 0 0;position:relative;right:-3.5px}  
  80. .main-timeline2 .icon{display:block;width:50px;height:50px;line-height:50px;border-radius:50%;background:#e84c47;border:1px solid #fff;text-align:center;font-size:25px;color:#fff;box-shadow:0 0 0 2px #e84c47;position:absolute;top:-30px;left:0}  
  81. .main-timeline2 .timeline-content{display:block;padding:30px 10px 10px;border-radius:20px;background:#e84c47;color:#fff;position:relative}  
  82. .main-timeline2 .timeline-content:hover{text-decoration:none;color:#fff}  
  83. .main-timeline2 .timeline-content:after,.main-timeline2 .timeline-content:before{content:"";display:block;width:10px;height:50px;border-radius:10px;background:#e84c47;border:1px solid #fff;position:absolute;top:-35px;left:50px}  
  84. .main-timeline2 .timeline-content:after{left:auto;right:50px}  
  85. .main-timeline2 .title{font-size:24px;margin:0}  
  86. .main-timeline2 .description{font-size:15px;letter-spacing:1px;margin:0 0 5px}  
  87. .main-timeline2 .timeline:nth-child(2n){border-right:none;border-left:7px solid #084772;border-radius:30px 0 0;right:auto;left:-3.5px}  
  88. .main-timeline2 .timeline:nth-child(2n) .icon{left:auto;right:0;box-shadow:0 0 0 2px #4bd9bf}  
  89. .main-timeline2 .timeline:nth-child(2){margin-top:130px}  
  90. .main-timeline2 .timeline:nth-child(odd){margin:-130px 0 30px}  
  91. .main-timeline2 .timeline:nth-child(even){margin-bottom:80px}  
  92. .main-timeline2 .timeline:first-child,.main-timeline2 .timeline:last-child:nth-child(even){margin:0 0 30px}  
  93. .main-timeline2 .timeline:nth-child(2n) .icon,.main-timeline2 .timeline:nth-child(2n) .timeline-content,.main-timeline2 .timeline:nth-child(2n) .timeline-content:after,.main-timeline2 .timeline:nth-child(2n) .timeline-content:before{background:#4bd9bf}  
  94. .main-timeline2 .timeline:nth-child(3n) .icon,.main-timeline2 .timeline:nth-child(3n) .timeline-content,.main-timeline2 .timeline:nth-child(3n) .timeline-content:after,.main-timeline2 .timeline:nth-child(3n) .timeline-content:before{background:#ff9e09}  
  95. .main-timeline2 .timeline:nth-child(3n) .icon{box-shadow:0 0 0 2px #ff9e09}  
  96. .main-timeline2 .timeline:nth-child(4n) .icon,.main-timeline2 .timeline:nth-child(4n) .timeline-content,.main-timeline2 .timeline:nth-child(4n) .timeline-content:after,.main-timeline2 .timeline:nth-child(4n) .timeline-content:before{background:#3ebae7}  
  97. .main-timeline2 .timeline:nth-child(4n) .icon{box-shadow:0 0 0 2px #3ebae7}  
  98. @media only screen and (max-width:767px){.main-timeline2:before{left:0;right:auto}  
  99. .main-timeline2 .timeline,.main-timeline2 .timeline:nth-child(even),.main-timeline2 .timeline:nth-child(odd){width:100%;float:none;padding:20px 30px;margin:0 0 30px;border-right:none;border-left:7px solid #084772;border-radius:30px 0 0;right:auto;left:0}  
  100. .main-timeline2 .icon{left:auto;right:0}  
  101. }  
  102. @media only screen and (max-width:480px){.main-timeline2 .title{font-size:18px}  
  103. }  
  104.   
  105. /******************* Timeline Demo - 3 *****************/  
  106. .main-timeline3{overflow:hidden;position:relative}  
  107. .main-timeline3:before{content:"";width:10px;height:100%;border:3px solid #959595;position:absolute;top:40px;left:50%;transform:translateX(-50%)}  
  108. .main-timeline3 .timeline{width:50%;padding:10px 60px 10px 100px;float:right;position:relative}  
  109. .main-timeline3 .timeline:before{content:"";width:40px;height:40px;border-radius:50%;background:#c47c48;border:5px solid #fff;box-shadow:0 0 1px 5px #c47c48;position:absolute;top:42px;left:-20px}  
  110. .main-timeline3 .timeline-content{display:block;background:#e9e9e7;padding:70px 30px 20px;box-shadow:0 0 10px rgba(0,0,0,.2) inset;position:relative}  
  111. .main-timeline3 .timeline-content:hover{text-decoration:none}  
  112. .main-timeline3 .year{display:block;width:80%;height:50px;background:#c47c48;padding:0 0 0 50px;font-size:30px;font-weight:800;color:#fff;line-height:50px;box-shadow:0 0 20px rgba(0,0,0,.4) inset;border-radius:10px 10px 10px 0;position:absolute;top:20px;left:-20px}  
  113. .main-timeline3 .year:before{content:"";border-top:40px solid #c47c48;border-left:20px solid transparent;border-bottom:20px solid transparent;position:absolute;bottom:-60px;left:0}  
  114. .main-timeline3 .title{font-size:18px;font-weight:600;text-transform:uppercase;color:#4a4a4a}  
  115. .main-timeline3 .description{font-size:14px;color:#6f6f6f;margin:0 0 5px}  
  116. .main-timeline3 .timeline:nth-child(2n){padding:10px 100px 10px 60px;text-align:right}  
  117. .main-timeline3 .timeline:nth-child(2n):before{left:auto;right:-20px;background:#bf3fc8;box-shadow:0 0 1px 5px #bf3fc8}  
  118. .main-timeline3 .timeline:nth-child(2n) .year{padding-right:50px;border-radius:10px 10px 0;left:auto;right:-20px;background:#bf3fc8}  
  119. .main-timeline3 .timeline:nth-child(2n) .year:before{border-left:none;border-right:20px solid transparent;left:auto;right:0;border-top-color:#bf3fc8}  
  120. .main-timeline3 .timeline:nth-child(2){margin-top:140px}  
  121. .main-timeline3 .timeline:nth-child(odd){margin:-140px 0 0}  
  122. .main-timeline3 .timeline:nth-child(even){margin-bottom:60px}  
  123. .main-timeline3 .timeline:first-child,.main-timeline3 .timeline:last-child:nth-child(even){margin:0}  
  124. .main-timeline3 .timeline:nth-child(3n):before{background:#ce3c41;box-shadow:0 0 1px 5px #ce3c41}  
  125. .main-timeline3 .timeline:nth-child(3n) .year{background:#ce3c41}  
  126. .main-timeline3 .timeline:nth-child(3n) .year:before{border-top-color:#ce3c41}  
  127. .main-timeline3 .timeline:nth-child(4n):before{background:#8cc43d;box-shadow:0 0 1px 5px #8cc43d}  
  128. .main-timeline3 .timeline:nth-child(4n) .year{background:#8cc43d}  
  129. .main-timeline3 .timeline:nth-child(4n) .year:before{border-top-color:#8cc43d}  
  130. @media only screen and (max-width:990px){.main-timeline3:before{top:8%}  
  131. .main-timeline3 .timeline{padding:10px 10px 10px 100px}  
  132. .main-timeline3 .timeline:nth-child(2n){padding:10px 100px 10px 10px}  
  133. }  
  134. @media only screen and (max-width:767px){.main-timeline3:before{width:8px;top:0;left:12px;transform:translateX(0)}  
  135. .main-timeline3 .timeline,.main-timeline3 .timeline:nth-child(even),.main-timeline3 .timeline:nth-child(odd){width:100%;float:none;text-align:left;padding:0 0 0 60px;margin:0 0 30px}  
  136. .main-timeline3 .timeline:before,.main-timeline3 .timeline:nth-child(2n):before{width:20px;height:20px;border:3px solid #fff;top:38px;left:6px}  
  137. .main-timeline3 .timeline:nth-child(2n) .year{right:auto;left:-20px;border-radius:10px 10px 10px 0}  
  138. .main-timeline3 .timeline:nth-child(2n) .year:before{border-left:20px solid transparent;border-bottom:20px solid transparent;border-right:none;right:auto;left:0}  
  139. }  
  140.   
  141. /******************* Timeline Demo - 4 *****************/  
  142. .main-timeline4{overflow:hidden;position:relative}  
  143. .main-timeline4:before{content:"";width:5px;height:70%;background:#333;position:absolute;top:70px;left:50%;transform:translateX(-50%)}  
  144. .main-timeline4 .timeline-content:before,.main-timeline4 .timeline:before{top:50%;transform:translateY(-50%);content:""}  
  145. .main-timeline4 .timeline{width:50%;padding-left:100px;float:right;position:relative}  
  146. .main-timeline4 .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #333;position:absolute;left:-10px}  
  147. .main-timeline4 .timeline-content{display:block;padding-left:150px;position:relative}  
  148. .main-timeline4 .timeline-content:before{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px}  
  149. .main-timeline4 .year{display:inline-block;width:120px;height:120px;line-height:100px;border-radius:50%;border:10px solid #f54957;font-size:30px;color:#f54957;text-align:center;box-shadow:inset 0 0 10px rgba(0,0,0,.4);position:absolute;top:0;left:0}  
  150. .main-timeline4 .year:before{content:"";border-left:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-13px;right:0;transform:rotate(45deg)}  
  151. .main-timeline4 .inner-content{padding:20px 0}  
  152. .main-timeline4 .title{font-size:24px;font-weight:600;color:#f54957;text-transform:uppercase;margin:0 0 5px}  
  153. .main-timeline4 .description{font-size:14px;color:#6f6f6f;margin:0 0 5px}  
  154. .main-timeline4 .timeline:nth-child(2n){padding:0 100px 0 0}  
  155. .main-timeline4 .timeline:nth-child(2n) .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .timeline:nth-child(2n):before{left:auto;right:-10px}  
  156. .main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 150px 0 0}  
  157. .main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-92px}  
  158. .main-timeline4 .timeline:nth-child(2n) .year{right:0}  
  159. .main-timeline4 .timeline:nth-child(2n) .year:before{right:auto;left:0;border-left:none;border-right:20px solid #f54957;transform:rotate(-45deg)}  
  160. .main-timeline4 .timeline:nth-child(2){margin-top:110px}  
  161. .main-timeline4 .timeline:nth-child(odd){margin:-110px 0 0}  
  162. .main-timeline4 .timeline:nth-child(even){margin-bottom:80px}  
  163. .main-timeline4 .timeline:first-child,.main-timeline4 .timeline:last-child:nth-child(even){margin:0}  
  164. .main-timeline4 .timeline:nth-child(2n) .year{border-color:#1ebad0;color:#1ebad0}  
  165. .main-timeline4 .timeline:nth-child(2) .year:before{border-right-color:#1ebad0}  
  166. .main-timeline4 .timeline:nth-child(2n) .title{color:#1ebad0}  
  167. .main-timeline4 .timeline:nth-child(3n) .year{border-color:#7cba01;color:#7cba01}  
  168. .main-timeline4 .timeline:nth-child(3) .year:before{border-left-color:#7cba01}  
  169. .main-timeline4 .timeline:nth-child(3n) .title{color:#7cba01}  
  170. .main-timeline4 .timeline:nth-child(4n) .year{border-color:#f8781f;color:#f8781f}  
  171. .main-timeline4 .timeline:nth-child(4) .year:before{border-right-color:#f8781f}  
  172. .main-timeline4 .timeline:nth-child(4n) .title{color:#f8781f}  
  173. @media only screen and (max-width:1200px){.main-timeline4 .year{top:50%;transform:translateY(-50%)}  
  174. }  
  175. @media only screen and (max-width:990px){.main-timeline4 .timeline{padding-left:75px}  
  176. .main-timeline4 .timeline:nth-child(2n){padding:0 75px 0 0}  
  177. .main-timeline4 .timeline-content{padding-left:130px}  
  178. .main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 130px 0 0}  
  179. .main-timeline4 .timeline-content:before{width:68px;left:-68px}  
  180. .main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-68px}  
  181. }  
  182. @media only screen and (max-width:767px){.main-timeline4{overflow:visible}  
  183. .main-timeline4:before{height:100%;top:0;left:0;transform:translateX(0)}  
  184. .main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-9px;transform:translateX(0)}  
  185. .main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px}  
  186. .main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0}  
  187. .main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none}  
  188. .main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)}  
  189. .main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}  
  190. .main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0}  
  191. .main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01}  
  192. .main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f}  
  193. .main-timeline4 .inner-content{padding:10px}  
  194. }  
  195.   
  196. /******************* Timeline Demo - 5 *****************/  
  197. .main-timeline5{overflow:hidden;position:relative}  
  198. .main-timeline5 .timeline{position:relative;margin-top:-79px}  
  199. .main-timeline5 .timeline:first-child{margin-top:0}  
  200. .main-timeline5 .timeline-icon,.main-timeline5 .year{margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}  
  201. .main-timeline5 .timeline:after,.main-timeline5 .timeline:before{content:"";display:block;width:100%;clear:both}  
  202. .main-timeline5 .timeline:before{content:"";width:100%;height:100%;box-shadow:-8px 0 5px -5px rgba(0,0,0,.5) inset;position:absolute;top:0;right:0;z-index:2}  
  203. .main-timeline5 .timeline-icon{width:210px;height:210px;border-radius:50%;border:25px solid transparent;border-top-color:#f44556;border-right-color:#f44556;z-index:1;transform:rotate(45deg)}  
  204. .main-timeline5 .year{display:block;width:110px;height:110px;line-height:110px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.4);font-size:30px;font-weight:700;color:#f44556;text-align:center;transform:rotate(-45deg)}  
  205. .main-timeline5 .timeline-content{width:35%;float:right;background:#f44556;padding:30px 20px;margin:50px 0;z-index:1;position:relative}  
  206. .main-timeline5 .timeline-content:before{content:"";width:20%;height:15px;background:#f44556;position:absolute;top:50%;left:-20%;z-index:-1;transform:translateY(-50%)}  
  207. .main-timeline5 .title{font-size:20px;font-weight:700;color:#fff;margin:0 0 10px}  
  208. .main-timeline5 .description{font-size:16px;color:#fff;line-height:24px;margin:0}  
  209. .main-timeline5 .timeline:nth-child(2n):before{box-shadow:8px 0 5px -5px rgba(0,0,0,.5) inset}  
  210. .main-timeline5 .timeline:nth-child(2n) .timeline-icon{transform:rotate(-135deg);border-top-color:#e97e2e;border-right-color:#e97e2e}  
  211. .main-timeline5 .timeline:nth-child(2n) .year{transform:rotate(135deg);color:#e97e2e}  
  212. .main-timeline5 .timeline:nth-child(2n) .timeline-content{float:left}  
  213. .main-timeline5 .timeline:nth-child(2n) .timeline-content:before{left:auto;right:-20%}  
  214. .main-timeline5 .timeline:nth-child(2n) .timeline-content,.main-timeline5 .timeline:nth-child(2n) .timeline-content:before{background:#e97e2e}  
  215. .main-timeline5 .timeline:nth-child(3n) .timeline-icon{border-top-color:#13afae;border-right-color:#13afae}  
  216. .main-timeline5 .timeline:nth-child(3n) .year{color:#13afae}  
  217. .main-timeline5 .timeline:nth-child(3n) .timeline-content,.main-timeline5 .timeline:nth-child(3n) .timeline-content:before{background:#13afae}  
  218. .main-timeline5 .timeline:nth-child(4n) .timeline-icon{border-top-color:#105572;border-right-color:#105572}  
  219. .main-timeline5 .timeline:nth-child(4n) .year{color:#105572}  
  220. .main-timeline5 .timeline:nth-child(4n) .timeline-content,.main-timeline5 .timeline:nth-child(4n) .timeline-content:before{background:#105572}  
  221. @media only screen and (max-width:1199px){.main-timeline5 .timeline{margin-top:-103px}  
  222. .main-timeline5 .timeline-content:before{left:-18%}  
  223. .main-timeline5 .timeline:nth-child(2n) .timeline-content:before{right:-18%}  
  224. }  
  225. @media only screen and (max-width:990px){.main-timeline5 .timeline{margin-top:-127px}  
  226. .main-timeline5 .timeline-content:before{left:-2%}  
  227. .main-timeline5 .timeline:nth-child(2n) .timeline-content:before{right:-2%}  
  228. }  
  229. @media only screen and (max-width:767px){.main-timeline5 .timeline{margin-top:0;overflow:hidden}  
  230. .main-timeline5 .timeline:before,.main-timeline5 .timeline:nth-child(2n):before{box-shadow:none}  
  231. .main-timeline5 .timeline-icon,.main-timeline5 .timeline:nth-child(2n) .timeline-icon{margin-top:-30px;margin-bottom:20px;position:relative;transform:rotate(135deg)}  
  232. .main-timeline5 .timeline:nth-child(2n) .year,.main-timeline5 .year{transform:rotate(-135deg)}  
  233. .main-timeline5 .timeline-content,.main-timeline5 .timeline:nth-child(2n) .timeline-content{width:100%;float:none;border-radius:0 0 20px 20px;text-align:center;padding:25px 20px;margin:0 auto}  
  234. .main-timeline5 .timeline-content:before,.main-timeline5 .timeline:nth-child(2n) .timeline-content:before{width:15px;height:25px;position:absolute;top:-22px;left:50%;z-index:-1;transform:translate(-50%,0)}  
  235. }  
  236.   
  237. /******************* Timeline Demo - 6 *****************/  
  238. .demo{background:#f2f2f2}  
  239. .main-timeline6{overflow:hidden;position:relative}  
  240. .main-timeline6 .timeline{width:50%;float:right;position:relative;z-index:1}  
  241. .main-timeline6 .timeline:after,.main-timeline6 .timeline:before{position:absolute;top:50%;content:"";display:block;clear:both}  
  242. .main-timeline6 .timeline:before{width:40%;height:6px;background:#9f005d;left:0;z-index:-1;transform:translateY(-50%)}  
  243. .main-timeline6 .timeline:after{width:6px;height:70%;background:#9f005d;left:-3px}  
  244. .main-timeline6 .timeline-content{width:65%;float:right;padding:0 0 30px 30px;margin-right:15px;background:#fff;border-radius:10px;box-shadow:3px 3px 5px 6px #ccc}  
  245. .main-timeline6 .timeline-content:after,.main-timeline6 .timeline-content:before{content:"";width:26px;height:26px;border-radius:50%;background:#9f005d;position:absolute;top:50%;left:-13px;z-index:1;transform:translateY(-50%)}  
  246. .main-timeline6 .timeline-content:after{left:30%;transform:translate(-50%,-50%)}  
  247. .main-timeline6 .year{display:block;font-size:28px;font-weight:700;color:#9f005d;text-align:center;padding-left:50px}  
  248. .main-timeline6 .content-inner{padding:35px 15px 35px 110px;margin-right:-15px;background:#9f005d;border-radius:150px 0 0 150px;position:relative}  
  249. .main-timeline6 .content-inner:after,.main-timeline6 .content-inner:before{content:"";border-left:15px solid #640026;border-top:10px solid transparent;position:absolute;top:-10px;right:0}  
  250. .main-timeline6 .content-inner:after{border-top:none;border-bottom:10px solid transparent;top:auto;bottom:-10px}  
  251. .main-timeline6 .icon{width:110px;height:100%;text-align:center;position:absolute;top:0;left:0}  
  252. .main-timeline6 .icon i{font-size:60px;font-weight:700;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}  
  253. .main-timeline6 .title{font-size:22px;font-weight:700;color:#fff;margin:0 0 5px}  
  254. .main-timeline6 .description{font-size:14px;color:#fff;margin:0}  
  255. .main-timeline6 .timeline:nth-child(2n) .icon,.main-timeline6 .timeline:nth-child(2n):after,.main-timeline6 .timeline:nth-child(2n):before{left:auto;right:0}  
  256. .main-timeline6 .timeline:nth-child(2n):after{right:-3px}  
  257. .main-timeline6 .timeline:nth-child(2n) .timeline-content{float:left;padding:0 30px 30px 0;margin:0 0 0 15px}  
  258. .main-timeline6 .timeline:nth-child(2n) .timeline-content:after,.main-timeline6 .timeline:nth-child(2n) .timeline-content:before{left:auto;right:-13px}  
  259. .main-timeline6 .timeline:nth-child(2n) .timeline-content:after{right:30%;margin-right:-25px}  
  260. .main-timeline6 .timeline:nth-child(2n) .year{padding:0 50px 0 0;color:#05b1ff}  
  261. .main-timeline6 .timeline:nth-child(2n) .content-inner{padding:35px 110px 35px 15px;margin:0 0 0 -15px;border-radius:0 150px 150px 0}  
  262. .main-timeline6 .timeline:nth-child(2n) .content-inner:after,.main-timeline6 .timeline:nth-child(2n) .content-inner:before{border:none;border-right:15px solid #027dcd;border-top:10px solid transparent;right:auto;left:0}  
  263. .main-timeline6 .timeline:nth-child(2n) .content-inner:after{border-top:none;border-bottom:10px solid transparent}  
  264. .main-timeline6 .timeline:nth-child(2){margin-top:200px}  
  265. .main-timeline6 .timeline:nth-child(odd){margin:-190px 0 0}  
  266. .main-timeline6 .timeline:nth-child(even){margin-bottom:70px}  
  267. .main-timeline6 .timeline:first-child,.main-timeline6 .timeline:last-child:nth-child(even){margin:0}  
  268. .main-timeline6 .timeline:nth-child(2n) .content-inner,.main-timeline6 .timeline:nth-child(2n) .timeline-content:after,.main-timeline6 .timeline:nth-child(2n) .timeline-content:before,.main-timeline6 .timeline:nth-child(2n):after,.main-timeline6 .timeline:nth-child(2n):before{background:#05b1ff}  
  269. .main-timeline6 .timeline:nth-child(3n) .content-inner,.main-timeline6 .timeline:nth-child(3n) .timeline-content:after,.main-timeline6 .timeline:nth-child(3n) .timeline-content:before,.main-timeline6 .timeline:nth-child(3n):after,.main-timeline6 .timeline:nth-child(3n):before{background:#00a3a9}  
  270. .main-timeline6 .timeline:nth-child(3n) .content-inner:after,.main-timeline6 .timeline:nth-child(3n) .content-inner:before{border-left-color:#006662}  
  271. .main-timeline6 .timeline:nth-child(3n) .year{color:#00a3a9}  
  272. .main-timeline6 .timeline:nth-child(4n) .content-inner,.main-timeline6 .timeline:nth-child(4n) .timeline-content:after,.main-timeline6 .timeline:nth-child(4n) .timeline-content:before,.main-timeline6 .timeline:nth-child(4n):after,.main-timeline6 .timeline:nth-child(4n):before{background:#f92534}  
  273. .main-timeline6 .timeline:nth-child(4n) .content-inner:after,.main-timeline6 .timeline:nth-child(4n) .content-inner:before{border-right-color:#92070e}  
  274. .main-timeline6 .timeline:nth-child(4n) .year{color:#f92534}  
  275. @media only screen and (max-width:990px) and (min-width:768px){.main-timeline6 .timeline:after{height:80%}  
  276. }  
  277. @media only screen and (max-width:767px){.main-timeline6 .timeline:last-child,.main-timeline6 .timeline:nth-child(even),.main-timeline6 .timeline:nth-child(odd){margin:0}  
  278. .main-timeline6 .timeline{width:95%;margin:15px 15px 15px 0!important}  
  279. .main-timeline6 .timeline .timeline-content:after,.main-timeline6 .timeline .timeline-content:before,.main-timeline6 .timeline:after,.main-timeline6 .timeline:before{display:none}  
  280. .main-timeline6 .timeline-content,.main-timeline6 .timeline:nth-child(2n) .timeline-content{width:100%;float:none;padding:0 0 30px 30px;margin:0}  
  281. .main-timeline6 .content-inner,.main-timeline6 .timeline:nth-child(2n) .content-inner{padding:35px 15px 35px 110px;margin:0 -15px 0 0;border-radius:150px 0 0 150px}  
  282. .main-timeline6 .timeline:nth-child(2n) .content-inner:after,.main-timeline6 .timeline:nth-child(2n) .content-inner:before{border:none;border-left:15px solid #027dcd;border-top:10px solid transparent;right:0;left:auto}  
  283. .main-timeline6 .timeline:nth-child(2n) .content-inner:after{border-top:none;border-bottom:10px solid transparent}  
  284. .main-timeline6 .timeline:nth-child(2n) .icon{top:0;left:0}  
  285. .main-timeline6 .timeline:nth-child(4n) .content-inner:after,.main-timeline6 .timeline:nth-child(4n) .content-inner:before{border-left-color:#92070e}  
  286. }  
  287.   
  288. /******************* Timeline Demo - 7 *****************/  
  289. .main-timeline7{overflow:hidden;position:relative}  
  290. .main-timeline7 .timeline{width:50%;float:left;z-index:1;position:relative}  
  291. .main-timeline7 .timeline:after,.main-timeline7 .timeline:before{content:"";display:block;clear:both}  
  292. .main-timeline7 .timeline:before{content:"";width:40px;height:90%;background:#727cb6;position:absolute;top:10%;right:-20px}  
  293. .main-timeline7 .timeline:last-child:before{height:0}  
  294. .main-timeline7 .timeline-icon{width:80px;height:80px;border-radius:50%;background:#727cb6;overflow:hidden;text-align:center;position:absolute;top:0;right:-40px;z-index:3}  
  295. .main-timeline7 .timeline-icon:before{content:"";width:60px;height:60px;border-radius:50%;background:#fff;border:2px solid #727cb6;box-shadow:0 0 0 4px #a5afe4;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}  
  296. .main-timeline7 .timeline-icon i{font-size:35px;color:#303a3b;line-height:80px;z-index:1;position:relative}  
  297. .main-timeline7 .year{display:block;padding:0 60px 0 30px;font-size:30px;color:#303a3b;text-align:right;border-bottom:2px solid #303a3b;z-index:2;position:relative}  
  298. .main-timeline7 .year:before{content:"";display:block;width:30px;height:30px;border-radius:50%;background:#727cb6;border:5px solid #fff;box-shadow:0 0 0 4px #727cb6;margin:auto;position:absolute;bottom:-15px;left:4px}  
  299. .main-timeline7 .year:after{content:"";border-left:10px solid #303a3b;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-11px;left:50px}  
  300. .main-timeline7 .timeline-content{padding:18px 60px 18px 40px;text-align:right;position:relative;z-index:1}  
  301. .main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before{content:"";width:80px;height:150px;border-radius:50%;background:#fff;position:absolute;top:-7%;right:15px;z-index:-1}  
  302. .main-timeline7 .timeline-content:after{left:auto;right:-95px}  
  303. .main-timeline7 .timeline:last-child .timeline-content:after,.main-timeline7 .timeline:last-child .timeline-content:before{width:0;height:0}  
  304. .main-timeline7 .title{font-size:22px;font-weight:700;color:#727cb6;margin-top:0}  
  305. .main-timeline7 .description{font-size:15px;color:#7f8386;line-height:25px}  
  306. .main-timeline7 .timeline:nth-child(2){margin-top:140px}  
  307. .main-timeline7 .timeline:nth-child(even){margin-bottom:80px}  
  308. .main-timeline7 .timeline:nth-child(odd){margin:-140px 0 0}  
  309. .main-timeline7 .timeline:first-child,.main-timeline7 .timeline:last-child:nth-child(even){margin:0!important}  
  310. .main-timeline7 .timeline:nth-child(2n) .timeline-icon,.main-timeline7 .timeline:nth-child(2n):before{right:auto;left:-20px;background:#e77e21}  
  311. .main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:-40px}  
  312. .main-timeline7 .timeline:nth-child(2n) .year{padding:0 30px 0 60px;text-align:left}  
  313. .main-timeline7 .timeline:nth-child(2n) .year:before{left:auto;right:3px}  
  314. .main-timeline7 .timeline:nth-child(2n) .year:after{border-left:none;border-right:10px solid #303a3b;right:50px}  
  315. .main-timeline7 .timeline:nth-child(2n) .timeline-content{padding:18px 40px 18px 60px;text-align:left}  
  316. .main-timeline7 .timeline:nth-child(2n) .timeline-content:before{left:-95px}  
  317. .main-timeline7 .timeline:nth-child(2n) .timeline-content:after{left:15px}  
  318. .main-timeline7 .timeline:nth-child(2n) .timeline-icon:before{border-color:#e77e21;box-shadow:0 0 0 4px #f1a563}  
  319. .main-timeline7 .timeline:nth-child(2n) .year:before{background:#e77e21;box-shadow:0 0 0 4px #e77e21}  
  320. .main-timeline7 .timeline:nth-child(2n) .title{color:#e77e21}  
  321. .main-timeline7 .timeline:nth-child(3n) .timeline-icon,.main-timeline7 .timeline:nth-child(3n):before{background:#008b8b}  
  322. .main-timeline7 .timeline:nth-child(3n) .timeline-icon:before{border-color:#008b8b;box-shadow:0 0 0 4px #50b5b4}  
  323. .main-timeline7 .timeline:nth-child(3n) .year:before{background:#008b8b;box-shadow:0 0 0 4px #008b8b}  
  324. .main-timeline7 .timeline:nth-child(3n) .title{color:#008b8b}  
  325. .main-timeline7 .timeline:nth-child(4n) .timeline-icon,.main-timeline7 .timeline:nth-child(4n):before{background:#ed687c}  
  326. .main-timeline7 .timeline:nth-child(4n) .timeline-icon:before{border-color:#ed687c;box-shadow:0 0 0 4px #f798a8}  
  327. .main-timeline7 .timeline:nth-child(4n) .year:before{background:#ed687c;box-shadow:0 0 0 4px #ed687c}  
  328. .main-timeline7 .timeline:nth-child(4n) .title{color:#ed687c}  
  329. @media only screen and (max-width:990px){.main-timeline7 .timeline{width:100%}  
  330. .main-timeline7 .timeline:nth-child(even),.main-timeline7 .timeline:nth-child(odd){margin:0}  
  331. .main-timeline7 .timeline:before,.main-timeline7 .timeline:nth-child(2n):before{width:30px;height:100%;left:25px}  
  332. .main-timeline7 .timeline-icon,.main-timeline7 .timeline:nth-child(2n) .timeline-icon{left:0}  
  333. .main-timeline7 .timeline:nth-child(2n) .year,.main-timeline7 .year{text-align:left;padding:0 30px 0 100px}  
  334. .main-timeline7 .timeline:nth-child(2n) .year:before,.main-timeline7 .year:before{left:auto;right:4px}  
  335. .main-timeline7 .year:after{left:auto;right:50px;border-right:10px solid #303a3b;border-left:none}  
  336. .main-timeline7 .timeline-content .description{color:#666}  
  337. .main-timeline7 .timeline-content,.main-timeline7 .timeline:nth-child(2n) .timeline-content{text-align:left;padding:18px 40px 18px 100px}  
  338. .main-timeline7 .timeline-content:after,.main-timeline7 .timeline-content:before{width:0;height:0}  
  339. }  
  340.   
  341. /******************* Timeline Demo - 8 *****************/  
  342. .main-timeline8{overflow:hidden;position:relative}  
  343. .main-timeline8:after,.main-timeline8:before{content:"";display:block;width:100%;clear:both}  
  344. .main-timeline8:before{content:"";width:3px;height:100%;background:#d6d5d5;position:absolute;top:30px;left:50%}  
  345. .main-timeline8 .timeline{width:50%;float:left;padding-right:30px;position:relative}  
  346. .main-timeline8 .timeline-icon{width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid #fe6847;position:absolute;top:5.5%;right:-17.5px}  
  347. .main-timeline8 .year{display:block;padding:10px;margin:0;font-size:30px;color:#fff;border-radius:0 50px 50px 0;background:#fe6847;text-align:center;position:relative}  
  348. .main-timeline8 .year:before{content:"";border-top:35px solid #f59c8b;border-left:35px solid transparent;position:absolute;bottom:-35px;left:0}  
  349. .main-timeline8 .timeline-content{padding:30px 20px;margin:0 45px 0 35px;background:#f2f2f2}  
  350. .main-timeline8 .title{font-size:19px;font-weight:700;color:#504f54;margin:0 0 10px}  
  351. .main-timeline8 .description{font-size:14px;color:#7d7b7b;margin:0}  
  352. .main-timeline8 .timeline:nth-child(2n){padding:0 0 0 30px}  
  353. .main-timeline8 .timeline:nth-child(2n) .timeline-icon{right:auto;left:-14.5px}  
  354. .main-timeline8 .timeline:nth-child(2n) .year{border-radius:50px 0 0 50px;background:#7eda99}  
  355. .main-timeline8 .timeline:nth-child(2n) .year:before{border-left:none;border-right:35px solid transparent;left:auto;right:0}  
  356. .main-timeline8 .timeline:nth-child(2n) .timeline-content{text-align:right;margin:0 35px 0 45px}  
  357. .main-timeline8 .timeline:nth-child(2){margin-top:170px}  
  358. .main-timeline8 .timeline:nth-child(odd){margin:-175px 0 0}  
  359. .main-timeline8 .timeline:nth-child(even){margin-bottom:80px}  
  360. .main-timeline8 .timeline:first-child,.main-timeline8 .timeline:last-child:nth-child(even){margin:0}  
  361. .main-timeline8 .timeline:nth-child(2n) .timeline-icon{border-color:#7eda99}  
  362. .main-timeline8 .timeline:nth-child(2n) .year:before{border-top-color:#92efad}  
  363. .main-timeline8 .timeline:nth-child(3n) .timeline-icon{border-color:#8a5ec1}  
  364. .main-timeline8 .timeline:nth-child(3n) .year{background:#8a5ec1}  
  365. .main-timeline8 .timeline:nth-child(3n) .year:before{border-top-color:#a381cf}  
  366. .main-timeline8 .timeline:nth-child(4n) .timeline-icon{border-color:#f98d9c}  
  367. .main-timeline8 .timeline:nth-child(4n) .year{background:#f98d9c}  
  368. .main-timeline8 .timeline:nth-child(4n) .year:before{border-top-color:#f2aab3}  
  369. @media only screen and (max-width:767px){.main-timeline8{overflow:visible}  
  370. .main-timeline8:before{top:0;left:0}  
  371. .main-timeline8 .timeline:nth-child(2),.main-timeline8 .timeline:nth-child(even),.main-timeline8 .timeline:nth-child(odd){margin:0}  
  372. .main-timeline8 .timeline{width:100%;float:none;padding:0 0 0 30px;margin-bottom:20px!important}  
  373. .main-timeline8 .timeline:last-child{margin:0!important}  
  374. .main-timeline8 .timeline-icon{right:auto;left:-14.5px}  
  375. .main-timeline8 .year{border-radius:50px 0 0 50px}  
  376. .main-timeline8 .year:before{border-left:none;border-right:35px solid transparent;left:auto;right:0}  
  377. .main-timeline8 .timeline-content{margin:0 35px 0 45px}  
  378. }  
  379.   
  380. /******************* Timeline Demo - 9 *****************/  
  381. .main-timeline9{position:relative}  
  382. .main-timeline9:after,.main-timeline9:before{content:"";display:block;width:100%;clear:both}  
  383. .main-timeline9:before{content:"";width:3px;height:100%;background:#302124;position:absolute;top:0;left:50%}  
  384. .main-timeline9 .timeline{width:50%;float:left;position:relative;z-index:1}  
  385. .main-timeline9 .timeline:after,.main-timeline9 .timeline:before{content:"";display:block;width:100%;clear:both}  
  386. .main-timeline9 .timeline:first-child:before,.main-timeline9 .timeline:last-child:before{content:"";width:25px;height:25px;border-radius:50%;background:#fff;border:4px solid #cca872;position:absolute;top:0;right:-14px;z-index:1}  
  387. .main-timeline9 .timeline:last-child:before{top:auto;bottom:0}  
  388. .main-timeline9 .timeline:last-child:nth-child(even):before{right:auto;left:-12px;bottom:-2px}  
  389. .main-timeline9 .timeline-content{text-align:center;margin-top:8px;position:relative;transition:all .3s ease 0s}  
  390. .main-timeline9 .timeline-content:before{content:"";width:100%;height:5px;background:#cca872;position:absolute;top:88px;left:0;z-index:-1}  
  391. .main-timeline9 .circle{width:180px;height:180px;border-radius:50%;background:#fff;border:8px solid #cca872;float:left;margin-right:25px;position:relative}  
  392. .main-timeline9 .circle span:after,.main-timeline9 .circle span:before,.main-timeline9 .circle:before{content:"";margin:auto;position:absolute;right:-33px;bottom:0;z-index:-1}  
  393. .main-timeline9 .circle:before{width:26px;height:30px;background:#cca872;top:0;box-shadow:inset 7px 0 9px -7px #444}  
  394. .main-timeline9 .circle span{display:block;width:100%;height:100%;border-radius:50%;line-height:160px;border:3px solid #adabab;font-size:80px;color:#454344}  
  395. .main-timeline9 .circle span:after,.main-timeline9 .circle span:before{width:28px;height:50px;background:#fff;border-radius:0 0 0 21px;top:-54px}  
  396. .main-timeline9 .circle span:after{border-radius:21px 0 0;top:0;bottom:-56px}  
  397. .main-timeline9 .content{display:table;padding-right:40px;position:relative}  
  398. .main-timeline9 .year{display:block;padding:10px;margin:10px 0 50px;background:#cca872;border-radius:7px;font-size:25px;color:#fff}  
  399. .main-timeline9 .title{font-size:25px;font-weight:700;color:#cca872;margin-top:0}  
  400. .main-timeline9 .icon span:after,.main-timeline9 .icon span:before,.main-timeline9 .icon:before{content:"";height:25px;margin:auto;position:absolute;bottom:0;z-index:-1;left:-15px}  
  401. .main-timeline9 .description{font-size:14px;color:#a6a6a6;text-align:justify}  
  402. .main-timeline9 .icon{width:25px;height:25px;border-radius:50%;background:#fff;border:4px solid #cca872;position:absolute;top:78px;right:-14px}  
  403. .main-timeline9 .icon:before{width:15px;background:#cca872;top:-1px}  
  404. .main-timeline9 .icon span:after,.main-timeline9 .icon span:before{width:21px;background:#fff;border-radius:0 0 21px;top:-30px}  
  405. .main-timeline9 .icon span:after{border-radius:0 21px 0 0;top:0;left:-15px;bottom:-30px}  
  406. .main-timeline9 .timeline:nth-child(2n) .circle,.main-timeline9 .timeline:nth-child(2n) .timeline-content{float:right}  
  407. .main-timeline9 .timeline:nth-child(2n) .circle{margin:0 0 0 25px}  
  408. .main-timeline9 .timeline:nth-child(2n) .circle:before{right:auto;left:-33px;box-shadow:-7px 0 9px -7px #444 inset}  
  409. .main-timeline9 .timeline:nth-child(2n) .circle span:after,.main-timeline9 .timeline:nth-child(2n) .circle span:before{right:auto;left:-33px;border-radius:0 0 21px}  
  410. .main-timeline9 .timeline:nth-child(2n) .circle span:after{border-radius:0 21px 0 0}  
  411. .main-timeline9 .timeline:nth-child(2n) .content{padding:0 0 0 40px;margin-left:2px}  
  412. .main-timeline9 .timeline:nth-child(2n) .icon{right:auto;left:-14px}  
  413. .main-timeline9 .timeline:nth-child(2n) .icon span:after,.main-timeline9 .timeline:nth-child(2n) .icon span:before,.main-timeline9 .timeline:nth-child(2n) .icon:before{left:auto;right:-15px}  
  414. .main-timeline9 .timeline:nth-child(2n) .icon span:before{border-radius:0 0 0 21px}  
  415. .main-timeline9 .timeline:nth-child(2n) .icon span:after{border-radius:21px 0 0}  
  416. .main-timeline9 .timeline:nth-child(2){margin-top:180px}  
  417. .main-timeline9 .timeline:nth-child(odd){margin:-175px 0 0}  
  418. .main-timeline9 .timeline:nth-child(even){margin-bottom:80px}  
  419. .main-timeline9 .timeline:first-child,.main-timeline9 .timeline:last-child:nth-child(even){margin:0}  
  420. @media only screen and (max-width:990px){.main-timeline9:before{left:100%}  
  421. .main-timeline9 .timeline{width:100%;float:none;margin-bottom:20px!important}  
  422. .main-timeline9 .timeline:first-child:before,.main-timeline9 .timeline:last-child:before{left:auto!important;right:-13px!important}  
  423. .main-timeline9 .timeline:nth-child(2n) .circle{float:left;margin:0 25px 0 0}  
  424. .main-timeline9 .timeline:nth-child(2n) .circle:before{right:-33px;left:auto;box-shadow:7px 0 9px -7px #444 inset}  
  425. .main-timeline9 .timeline:nth-child(2n) .circle span:after,.main-timeline9 .timeline:nth-child(2n) .circle span:before{right:-33px;left:auto;border-radius:0 0 0 21px}  
  426. .main-timeline9 .timeline:nth-child(2n) .circle span:after{border-radius:21px 0 0}  
  427. .main-timeline9 .timeline:nth-child(2n) .content{padding:0 40px 0 0;margin-left:0}  
  428. .main-timeline9 .timeline:nth-child(2n) .icon{right:-14px;left:auto}  
  429. .main-timeline9 .timeline:nth-child(2n) .icon span:after,.main-timeline9 .timeline:nth-child(2n) .icon span:before,.main-timeline9 .timeline:nth-child(2n) .icon:before{left:-15px;right:auto}  
  430. .main-timeline9 .timeline:nth-child(2n) .icon span:before{border-radius:0 0 21px}  
  431. .main-timeline9 .timeline:nth-child(2n) .icon span:after{border-radius:0 21px 0 0}  
  432. .main-timeline9 .timeline:nth-child(2),.main-timeline9 .timeline:nth-child(even),.main-timeline9 .timeline:nth-child(odd){margin:0}  
  433. }  
  434. @media only screen and (max-width:480px){.main-timeline9:before{left:0}  
  435. .main-timeline9 .timeline:first-child:before,.main-timeline9 .timeline:last-child:before{left:-12px!important;right:auto!important}  
  436. .main-timeline9 .circle,.main-timeline9 .timeline:nth-child(2n) .circle{width:130px;height:130px;float:none;margin:0 auto}  
  437. .main-timeline9 .timeline-content:before{width:99.5%;top:68px;left:.5%}  
  438. .main-timeline9 .circle span{line-height:115px;font-size:60px}  
  439. .main-timeline9 .circle span:after,.main-timeline9 .circle span:before,.main-timeline9 .circle:before,.main-timeline9 .icon{display:none}  
  440. .main-timeline9 .content,.main-timeline9 .timeline:nth-child(2n) .content{padding:0 10px}  
  441. .main-timeline9 .year{margin-bottom:15px}  
  442. .main-timeline9 .description{text-align:center}  
  443. }  
  444.   
  445. /******************* Timeline Demo - 10 *****************/  
  446. .main-timeline10:after,.main-timeline10:before{content:"";display:block;width:100%;clear:both}  
  447. .main-timeline10 .timeline{padding:0;display:-webkit-inline-box}  
  448. .main-timeline10 .col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:24%}  
  449. .main-timeline10 .timeline-inner{text-align:center;margin:20px 20px 35px 35px;position:relative}  
  450. .main-timeline10 .timeline-inner:after{content:"";width:120%;height:3px;background:#555;position:absolute;bottom:0;left:10%}  
  451. .main-timeline10 .timeline:last-child .timeline-inner:after{width:0}  
  452. .main-timeline10 .year{background:#58b25e;padding:5px 0;border-radius:30px 0;font-size:26px;font-weight:700;color:#fff;z-index:1;position:relative}  
  453. .main-timeline10 .year:after,.main-timeline10 .year:before{position:absolute;top:-19px;content:""}  
  454. .main-timeline10 .year:before{right:0;border:10px solid transparent;border-bottom:10px solid #58b25e;border-right:10px solid #58b25e}  
  455. .main-timeline10 .year:after{width:25px;height:19px;border-radius:0 0 20px;background:#fff;right:1px}  
  456. .main-timeline10 .timeline-content{padding:10px 10px 30px;border-left:3px solid #58b25e;position:relative}  
  457. .main-timeline10 .timeline-content:before{content:"";position:absolute;top:0;left:-1px;border:10px solid transparent;border-top:10px solid #58b25e;border-left:10px solid #58b25e}  
  458. .main-timeline10 .timeline-content:after{content:"";width:25px;height:19px;border-radius:20px 0 0;background:#fff;position:absolute;top:0;left:0}  
  459. .main-timeline10 .post{font-size:26px;color:#333}  
  460. .main-timeline10 .description{font-size:14px;color:#333}  
  461. .main-timeline10 .timeline-icon{width:70px;height:70px;line-height:65px;border-radius:50%;border:5px solid #58b25e;background:#fff;font-size:30px;color:#555;z-index:1;position:absolute;bottom:-35px;left:-35px}  
  462. .main-timeline10 .timeline:nth-child(2n) .year{background:#9f84c4}  
  463. .main-timeline10 .timeline:nth-child(2n) .year:before{border-bottom-color:#9f84c4;border-right-color:#9f84c4}  
  464. .main-timeline10 .timeline:nth-child(2n) .timeline-content{border-left-color:#9f84c4}  
  465. .main-timeline10 .timeline:nth-child(2n) .timeline-content:before{border-top-color:#9f84c4;border-left-color:#9f84c4}  
  466. .main-timeline10 .timeline:nth-child(2n) .timeline-icon{border-color:#9f84c4}  
  467. .main-timeline10 .timeline:nth-child(3n) .year{background:#f35958}  
  468. .main-timeline10 .timeline:nth-child(3n) .year:before{border-bottom-color:#f35958;border-right-color:#f35958}  
  469. .main-timeline10 .timeline:nth-child(3n) .timeline-content{border-left-color:#f35958}  
  470. .main-timeline10 .timeline:nth-child(3n) .timeline-content:before{border-top-color:#f35958;border-left-color:#f35958}  
  471. .main-timeline10 .timeline:nth-child(3n) .timeline-icon{border-color:#f35958}  
  472. .main-timeline10 .timeline:nth-child(4n) .year{background:#e67e49}  
  473. .main-timeline10 .timeline:nth-child(4n) .year:before{border-bottom-color:#e67e49;border-right-color:#e67e49}  
  474. .main-timeline10 .timeline:nth-child(4n) .timeline-content{border-left-color:#e67e49}  
  475. .main-timeline10 .timeline:nth-child(4n) .timeline-content:before{border-top-color:#e67e49;border-left-color:#e67e49}  
  476. .main-timeline10 .timeline:nth-child(4n) .timeline-icon{border-color:#e67e49}  
  477. @media only screen and (max-width:990px){.main-timeline10 .timeline-inner:after{width:110%}  
  478. .main-timeline10 .timeline:nth-child(2n) .timeline-inner:after{width:0}  
  479. }  
  480. @media only screen and (max-width:767px){.main-timeline10 .timeline{margin-bottom:50px}  
  481. .main-timeline10 .timeline-inner:after,.main-timeline10 .timeline:nth-child(2n) .timeline-inner:after{width:100%;height:3px;left:0}  
  482. }  
  483.   
  484. /******************* Timeline Demo - 11 *****************/  
  485. .main-timeline11{overflow:hidden;position:relative}  
  486. .main-timeline11:before{content:"";width:7px;height:100%;background:#909090;position:absolute;top:0;left:50%;transform:translateX(-50%)}  
  487. .main-timeline11 .timeline{width:50%;padding-left:50px;float:right;position:relative}  
  488. .main-timeline11 .timeline:after,.main-timeline11 .timeline:before{position:absolute;content:"";top:50%;transform:translateY(-50%)}  
  489. .main-timeline11 .timeline:before{width:30px;height:30px;border-radius:50%;background:#909090;border:7px solid #fff;left:-15px}  
  490. .main-timeline11 .timeline:after{display:block;border-right:30px solid #ee4423;border-top:20px solid transparent;border-bottom:20px solid transparent;left:24px}  
  491. .main-timeline11 .timeline-content{display:block;padding:25px;border-radius:100px;background:#ee4423;position:relative}  
  492. .main-timeline11 .timeline-content:after,.main-timeline11 .timeline-content:before{content:"";display:block;width:100%;clear:both}  
  493. .main-timeline11 .timeline-content:hover{text-decoration:none}  
  494. .main-timeline11 .inner-content{width:70%;float:right;padding:15px 20px 15px 15px;background:#fff;border-radius:0 100px 100px 0;color:#ee4423}  
  495. .main-timeline11 .year{display:inline-block;font-size:50px;font-weight:600;color:#fff;position:absolute;top:50%;left:7%;transform:translateY(-50%)}  
  496. .main-timeline11 .title{font-size:24px;font-weight:600;text-transform:uppercase;margin:0 0 5px}  
  497. .main-timeline11 .description{font-size:14px;margin:0 0 5px}  
  498. .main-timeline11 .timeline:nth-child(2n){padding:0 50px 0 0}  
  499. .main-timeline11 .timeline:nth-child(2n) .year,.main-timeline11 .timeline:nth-child(2n):before{left:auto;right:-15px}  
  500. .main-timeline11 .timeline:nth-child(2n) .year{right:7%}  
  501. .main-timeline11 .timeline:nth-child(2n):after{border-right:none;border-left:30px solid #ee4423;left:auto;right:24px;border-left-color:#f68829}  
  502. .main-timeline11 .timeline:nth-child(2n) .inner-content{float:none;border-radius:100px 0 0 100px;text-align:right}  
  503. .main-timeline11 .timeline:nth-child(2){margin-top:130px}  
  504. .main-timeline11 .timeline:nth-child(odd){margin:-130px 0 0}  
  505. .main-timeline11 .timeline:nth-child(even){margin-bottom:80px}  
  506. .main-timeline11 .timeline:first-child,.main-timeline11 .timeline:last-child:nth-child(even){margin:0}  
  507. .main-timeline11 .timeline:nth-child(2n) .timeline-content{background:#f68829}  
  508. .main-timeline11 .timeline:nth-child(2n),.main-timeline11 .timeline:nth-child(2n) .inner-content{color:#f68829}  
  509. .main-timeline11 .timeline:nth-child(3n) .timeline-content{background:#2991d0}  
  510. .main-timeline11 .timeline:nth-child(3n),.main-timeline11 .timeline:nth-child(3n) .inner-content{color:#2991d0}  
  511. .main-timeline11 .timeline:nth-child(3n):after{border-right-color:#2991d0}  
  512. .main-timeline11 .timeline:nth-child(4n) .timeline-content{background:#9361aa}  
  513. .main-timeline11 .timeline:nth-child(4n),.main-timeline11 .timeline:nth-child(4n) .inner-content{color:#9361aa}  
  514. .main-timeline11 .timeline:nth-child(4n):after{border-left-color:#9361aa}  
  515. .main-timeline11 .timeline:nth-child(5n) .timeline-content{background:#a7be26}  
  516. .main-timeline11 .timeline:nth-child(5n),.main-timeline11 .timeline:nth-child(5n) .inner-content{color:#a7be26}  
  517. .main-timeline11 .timeline:nth-child(5n):after{border-right-color:#a7be26}  
  518. @media only screen and (max-width:1200px){.main-timeline11 .inner-content{width:80%}  
  519. .main-timeline11 .year{font-size:45px;left:10px;transform:translateY(-50%) rotate(-90deg)}  
  520. .main-timeline11 .timeline:nth-child(2n) .year{right:10px}  
  521. }  
  522. @media only screen and (max-width:990px){.main-timeline11 .year{font-size:40px;left:0}  
  523. .main-timeline11 .timeline:nth-child(2n) .year{right:0}  
  524. }  
  525. @media only screen and (max-width:767px){.main-timeline11 .timeline:before,.main-timeline11:before{left:10px;transform:translateX(0)}  
  526. .main-timeline11 .timeline:nth-child(2n):after{border-left:none;border-right:30px solid #ee4423;right:auto;left:24px;border-right-color:#f68829}  
  527. .main-timeline11 .timeline,.main-timeline11 .timeline:nth-child(even),.main-timeline11 .timeline:nth-child(odd){width:100%;float:none;margin:0 0 30px}  
  528. .main-timeline11 .timeline:last-child{margin-bottom:0}  
  529. .main-timeline11 .timeline:nth-child(2n){padding:0 0 0 50px}  
  530. .main-timeline11 .timeline:before,.main-timeline11 .timeline:nth-child(2n):before{left:-2px}  
  531. .main-timeline11 .inner-content{width:85%}  
  532. .main-timeline11 .timeline:nth-child(2n) .inner-content{float:right;border-radius:0 100px 100px 0;text-align:left}  
  533. .main-timeline11 .timeline:nth-child(2n) .year{right:auto;left:0}  
  534. .main-timeline11 .timeline:nth-child(3n):after{border-left-color:#2991d0}  
  535. .main-timeline11 .timeline:nth-child(4n):after{border-right-color:#9361aa}  
  536. .main-timeline11 .timeline:nth-child(5n):after{border-left-color:#a7be26}  
  537. }  
  538. @media only screen and (max-width:479px){.main-timeline11 .timeline-content{padding:15px}  
  539. .main-timeline11 .inner-content{width:80%}  
  540. .main-timeline11 .year{font-size:30px}  
  541. }  
  542.   
  543. /******************* Timeline Demo - 12 *****************/  
  544. .main-timeline12 .timeline{padding:0 2px;position:relative;display:inline-block}  
  545. .main-timeline12 .col-md-2{-ms-flex:0 0 15.666667%;flex:0 0 15.666667%;max-width:15.666667%}  
  546. .main-timeline12 .timeline-icon{display:block;text-align:center;padding:20px 0 55px;z-index:1;position:relative}  
  547. .main-timeline12 .timeline:nth-child(2n) .timeline-icon{padding:55px 0 20px}  
  548. .main-timeline12 .timeline-icon:before{content:"";width:1px;height:75%;background:#39ae99;margin:0 auto;position:absolute;bottom:0;left:0;right:0;z-index:-1;transition:all .3s ease 0s}  
  549. .main-timeline12 .timeline:nth-child(2n) .timeline-icon:before{bottom:auto;top:0}  
  550. .main-timeline12 .timeline:hover .timeline-icon:before{background:#555}  
  551. .main-timeline12 .timeline-icon i{width:45px;height:45px;line-height:45px;border-radius:50%;background:#39ae99;font-size:14px;color:#fff;transition:all .3s ease 0s}  
  552. .main-timeline12 .timeline:hover .timeline-icon i{background:#555;animation:icon-load 2.5s ease 0s infinite}  
  553. .main-timeline12 .border{height:15px;background:#39ae99;margin-bottom:0;transition:all .3s ease 0s}  
  554. .main-timeline12 .timeline:hover .border{background:#555}  
  555. .main-timeline12 .timeline:first-child .border{border-radius:4px 0 0 4px}  
  556. .main-timeline12 .timeline:last-child .border{border-radius:0 4px 4px 0}  
  557. .main-timeline12 .timeline:nth-child(2n) .border{margin:18px 0 0}  
  558. .main-timeline12 .timeline-content{padding:15px;border:1px solid #ddd;background:#f9f9f9;border-radius:3px;transition:all .3s ease 0s}  
  559. .main-timeline12 .timeline:hover .timeline-content{background:#555}  
  560. .main-timeline12 .title{font-size:18px;font-weight:700;color:#39ae99;text-transform:uppercase;margin:0 0 10px;transition:all .3s ease 0s}  
  561. .main-timeline12 .timeline:hover .title{color:#fff}  
  562. .main-timeline12 .timeline-content .description{font-size:14px;color:#888;margin:0;transition:all .3s ease 0s}  
  563. .main-timeline12 .timeline:hover .description{color:#fff}  
  564. @keyframes icon-load{0%{transform:rotate(-12deg)}  
  565. 8%{transform:rotate(12deg)}  
  566. 10%,28%,30%,48%,50%,68%{transform:rotate(24deg)}  
  567. 18%,20%,38%,40%,58%,60%{transform:rotate(-24deg)}  
  568. 100%,75%{transform:rotate(0)}  
  569. }  
  570. @media only screen and (max-width:990px){.main-timeline12 .timeline{margin-bottom:20px}  
  571. }  
  572. @media only screen and (max-width:767px){.main-timeline12 .timeline-icon{padding-top:0}  
  573. .main-timeline12 .timeline:nth-child(2n) .timeline-icon{padding-bottom:0}  
  574. .main-timeline12 .border{margin-bottom:10px}  
  575. .main-timeline12 .timeline:nth-child(2n) .border{margin:10px 0 0}  
  576. .main-timeline12 .timeline-content{text-align:center}  
  577. }  
  578.     </style>    
  579.     </head>  
  580.     <body>  
  581.         <div class="container">  
  582.             <h4>Timeline Style : Demo-1</h4>  
  583.             <div class="row">  
  584.                 <div class="col-md-12">  
  585.                     <div class="main-timeline">  
  586.                         <a href="#" class="timeline">  
  587.                             <div class="timeline-icon"><i class="fa fa-globe"></i></div>  
  588.                             <div class="timeline-content">  
  589.                                 <h3 class="title">Web Designer</h3>  
  590.                                 <p class="description">  
  591.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.  
  592.                                 </p>  
  593.                             </div>  
  594.                         </a>  
  595.                         <a href="#" class="timeline">  
  596.                             <div class="timeline-icon"><i class="fa fa-rocket"></i></div>  
  597.                             <div class="timeline-content">  
  598.                                 <h3 class="title">Web Developer</h3>  
  599.                                 <p class="description">  
  600.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.  
  601.                                 </p>  
  602.                             </div>  
  603.                         </a>  
  604.                         <a href="#" class="timeline">  
  605.                             <div class="timeline-icon"><i class="fa fa-briefcase"></i></div>  
  606.                             <div class="timeline-content">  
  607.                                 <h3 class="title">Web Designer</h3>  
  608.                                 <p class="description">  
  609.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.  
  610.                                 </p>  
  611.                             </div>  
  612.                         </a>  
  613.                         <a href="#" class="timeline">  
  614.                             <div class="timeline-icon"><i class="fa fa-mobile"></i></div>  
  615.                             <div class="timeline-content">  
  616.                                 <h3 class="title">Web Developer</h3>  
  617.                                 <p class="description">  
  618.                                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.  
  619.                                 </p>  
  620.                             </div>  
  621.                         </a>  
  622.                     </div>  
  623.                 </div>  
  624.             </div>  
  625.         </div>  
  626.         <hr>  
  627.          
  628.         <div class="container">  
  629.             <h4>Timeline Style : Demo-2</h4>  
  630.             <div class="row">  
  631.                 <div class="col-md-12">  
  632.                     <div class="main-timeline2">  
  633.                         <div class="timeline">  
  634.                             <span class="icon fa fa-globe"></span>  
  635.                             <a href="#" class="timeline-content">  
  636.                                 <h3 class="title">Web Designer</h3>  
  637.                                 <p class="description">  
  638.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.  
  639.                                 </p>  
  640.                             </a>  
  641.                         </div>  
  642.                         <div class="timeline">  
  643.                             <span class="icon fa fa-rocket"></span>  
  644.                             <a href="#" class="timeline-content">  
  645.                                 <h3 class="title">Web Developer</h3>  
  646.                                 <p class="description">  
  647.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.  
  648.                                 </p>  
  649.                             </a>  
  650.                         </div>  
  651.                         <div class="timeline">  
  652.                             <span class="icon fa fa-briefcase"></span>  
  653.                             <a href="#" class="timeline-content">  
  654.                                 <h3 class="title">Web Designer</h3>  
  655.                                 <p class="description">  
  656.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.  
  657.                                 </p>  
  658.                             </a>  
  659.                         </div>  
  660.                         <div class="timeline">  
  661.                             <span class="icon fa fa-mobile"></span>  
  662.                             <a href="#" class="timeline-content">  
  663.                                 <h3 class="title">Web Developer</h3>  
  664.                                 <p class="description">  
  665.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada tellus lorem, et condimentum neque commodo quis.  
  666.                                 </p>  
  667.                             </a>  
  668.                         </div>  
  669.                     </div>  
  670.                 </div>  
  671.             </div>  
  672.         </div>  
  673.         <hr>  
  674.          
  675.          
  676.         <div class="container">  
  677.             <h4>Timeline Style : Demo-5</h4>  
  678.             <div class="row">  
  679.                 <div class="col-md-12">  
  680.                     <div class="main-timeline5">  
  681.                         <div class="timeline">  
  682.                             <div class="timeline-icon"><span class="year">2018</span></div>  
  683.                             <div class="timeline-content">  
  684.                                 <h3 class="title">Web Desginer</h3>  
  685.                                 <p class="description">  
  686.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices, luctus nunc ut, commodo enim. Vivamus sem erat.  
  687.                                 </p>  
  688.                             </div>  
  689.                         </div>  
  690.                         <div class="timeline">  
  691.                             <div class="timeline-icon"><span class="year">2017</span></div>  
  692.                             <div class="timeline-content">  
  693.                                 <h3 class="title">Web Developer</h3>  
  694.                                 <p class="description">  
  695.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices, luctus nunc ut, commodo enim. Vivamus sem erat.  
  696.                                 </p>  
  697.                             </div>  
  698.                         </div>  
  699.                         <div class="timeline">  
  700.                             <div class="timeline-icon"><span class="year">2016</span></div>  
  701.                             <div class="timeline-content">  
  702.                                 <h3 class="title">Web Desginer</h3>  
  703.                                 <p class="description">  
  704.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices, luctus nunc ut, commodo enim. Vivamus sem erat.  
  705.                                 </p>  
  706.                             </div>  
  707.                         </div>  
  708.                         <div class="timeline">  
  709.                             <div class="timeline-icon"><span class="year">2015</span></div>  
  710.                             <div class="timeline-content">  
  711.                                 <h3 class="title">Web Developer</h3>  
  712.                                 <p class="description">  
  713.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia mi ultrices, luctus nunc ut, commodo enim. Vivamus sem erat.  
  714.                                 </p>  
  715.                             </div>  
  716.                         </div>  
  717.                     </div>  
  718.                 </div>  
  719.             </div>  
  720.         </div>  
  721.         <hr>  
  722.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  723.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  724.     </body>  
  725. </html> 

Answers (1)