Created
July 29, 2022 14:44
-
-
Save Noerdsteil/9a7f38faf43ac1e278d43fbdaec7829a to your computer and use it in GitHub Desktop.
Responsive Timeline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section> | |
| <div class="container py-5"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="main-timeline"> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"> | |
| <img src="https://picsum.photos/164" class="img"> | |
| </span></div> | |
| <div class="content"> | |
| <span class="year">No.1</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Tristique senectus et netus et malesuada fames. Sit amet consectetur adipiscing elit pellentesque. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img" /></span></div> | |
| <div class="content"> | |
| <span class="year">No.2</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Tristique senectus et netus et malesuada fames. Sit amet consectetur adipiscing elit pellentesque. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Erat nam at lectus urna duis convallis. Eget aliquet nibh praesent tristique magna. Interdum posuere lorem ipsum dolor sit amet. Elementum tempus egestas sed sed risus pretium quam. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.3</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Ornare aenean euismod elementum nisi quis eleifend. Libero id faucibus nisl tincidunt eget nullam non. Suspendisse interdum consectetur libero id faucibus. Adipiscing enim eu turpis egestas pretium. Dignissim convallis aenean et tortor. Dui accumsan sit amet nulla. Duis convallis convallis tellus id interdum. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.4</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Sed blandit libero volutpat sed cras. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a. Ipsum nunc aliquet bibendum enim facilisis. Magna ac placerat vestibulum lectus mauris ultrices eros. Proin sagittis nisl rhoncus mattis rhoncus. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Et ultrices neque ornare aenean euismod elementum nisi. Ultricies mi quis hendrerit dolor magna eget est lorem. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.5</span> | |
| <h3 class="title 4">Heading</h3> | |
| <p class="description"> | |
| Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Tellus mauris a diam maecenas sed enim ut. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Sed sed risus pretium quam vulputate dignissim suspendisse in est. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.6</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Eu feugiat pretium nibh ipsum consequat. Et molestie ac feugiat sed lectus vestibulum mattis. Sit amet consectetur adipiscing elit duis tristique. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.7</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Egestas fringilla phasellus faucibus scelerisque eleifend donec. Vitae justo eget magna fermentum iaculis. Euismod lacinia at quis risus sed vulputate. Congue nisi vitae suscipit tellus mauris a diam. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.8</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Eget nunc scelerisque viverra mauris in aliquam. Nibh tortor id aliquet lectus. | |
| </p> | |
| <p class="description"> | |
| Semper quis lectus nulla at volutpat diam. Scelerisque purus semper eget duis at tellus at urna condimentum. Nisl suscipit adipiscing bibendum est. | |
| </p> | |
| <p class="description"> | |
| Nisi vitae suscipit tellus mauris. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.9</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Sit amet consectetur adipiscing elit ut. Dolor morbi non arcu risus quis varius quam quisque. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. </p> | |
| <p class="description"> | |
| Elementum sagittis vitae et leo. Risus pretium quam vulputate dignissim suspendisse in est ante in. | |
| </p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-content"> | |
| <div class="circle"><span class="homebox"><img src="https://picsum.photos/164" class="img"></span></div> | |
| <div class="content"> | |
| <span class="year">No.10</span> | |
| <h3 class="title h4">Heading</h3> | |
| <p class="description"> | |
| Tellus in hac habitasse platea. Commodo nulla facilisi nullam vehicula ipsum a. Quis commodo odio aenean sed adipiscing. Ipsum consequat nisl vel pretium lectus. Dolor morbi non arcu risus quis varius. Mi bibendum neque egestas congue quisque egestas diam in.</p> | |
| <p class="description"> | |
| Id eu nisl nunc mi ipsum faucibus vitae aliquet. Placerat orci nulla pellentesque dignissim enim.</p> | |
| <div class="icon"><span></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .main-timeline{ position: relative; } | |
| .main-timeline:before, | |
| .main-timeline:after{ | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| clear: both; | |
| } | |
| .main-timeline:before{ | |
| content: ""; | |
| width: 3px; | |
| height: 100%; | |
| background: #bababa; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| } | |
| .main-timeline .timeline{ | |
| width: 50%; | |
| float: left; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .main-timeline .timeline:before, | |
| .main-timeline .timeline:after{ | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| clear: both; | |
| } | |
| .main-timeline .timeline:first-child:before, | |
| .main-timeline .timeline:last-child:before{ | |
| content: ""; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| background: #fff; | |
| border: 4px solid rgba(211,207,205,1); | |
| position: absolute; | |
| top: 0; | |
| right: -14px; | |
| z-index: 1; | |
| } | |
| .main-timeline .timeline:last-child:before{ | |
| top: auto; | |
| bottom: 0; | |
| } | |
| .main-timeline .timeline:last-child:nth-child(even):before{ | |
| right: auto; | |
| left: -12px; | |
| bottom: -2px; | |
| } | |
| .main-timeline .timeline-content{ | |
| text-align: center; | |
| margin-top: 8px; | |
| position: relative; | |
| transition: all 0.3s ease 0s; | |
| } | |
| .main-timeline .timeline-content:before{ | |
| content: ""; | |
| width: 100%; | |
| height: 5px; | |
| background: rgba(211,207,205,1); | |
| position: absolute; | |
| top: 88px; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| .main-timeline .circle{ | |
| width: 180px; | |
| height: 180px; | |
| border-radius: 50%; | |
| background: #fff; | |
| border: 8px solid rgba(211,207,205,1); | |
| float: left; | |
| margin-right: 25px; | |
| position: relative; | |
| } | |
| .main-timeline .circle:before{ | |
| content: ""; | |
| width: 26px; | |
| height: 30px; | |
| background: rgba(211,207,205,1); | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| right: -33px; | |
| bottom: 0; | |
| z-index: -1; | |
| box-shadow: inset 7px 0 9px -7px #444; | |
| } | |
| .main-timeline .circle span{ | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| line-height: 268px; | |
| font-size: 80px; | |
| color: #454344; | |
| } | |
| .main-timeline .circle span:before, | |
| .main-timeline .circle span:after{ | |
| content: ""; | |
| width: 28px; | |
| height: 50px; | |
| background: #fff; | |
| border-radius: 0 0 0 21px; | |
| margin: auto; | |
| position: absolute; | |
| top: -54px; | |
| right: -33px; | |
| bottom: 0; | |
| z-index: -1; | |
| } | |
| .main-timeline .circle span:after{ | |
| border-radius: 21px 0 0 0; | |
| top: 0; | |
| bottom: -56px; | |
| } | |
| .main-timeline .circle .img{ | |
| vertical-align: initial; | |
| border-radius: 50%; | |
| } | |
| .main-timeline .content{ | |
| display: table; | |
| padding-right: 40px; | |
| position: relative; | |
| } | |
| .main-timeline .year{ | |
| display: block; | |
| padding: 10px; | |
| margin: 10px 0 50px 0; | |
| background: rgba(211,207,205,1); | |
| border-radius: 7px; | |
| font-size: 25px; | |
| color: #fff; | |
| } | |
| .main-timeline .title{ | |
| font-size: 25px; | |
| font-weight: bold; | |
| color: rgba(211,207,205,1); | |
| margin-top: 0; | |
| } | |
| .main-timeline .description{ | |
| font-size: 14px; | |
| color: #333; | |
| text-align: justify; | |
| } | |
| .main-timeline .icon{ | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| background: #fff; | |
| border: 4px solid rgba(211,207,205,1); | |
| position: absolute; | |
| top: 78px; | |
| right: -14px; | |
| } | |
| .main-timeline .icon:before{ | |
| content: ""; | |
| width: 15px; | |
| height: 25px; | |
| background: rgba(211,207,205,1); | |
| margin: auto; | |
| position: absolute; | |
| top: -1px; | |
| left: -15px; | |
| bottom: 0; | |
| z-index: -1; | |
| } | |
| .main-timeline .icon span:before, | |
| .main-timeline .icon span:after{ | |
| content: ""; | |
| width: 21px; | |
| height: 25px; | |
| background: #fff; | |
| border-radius: 0 0 21px 0; | |
| margin: auto; | |
| position: absolute; | |
| top: -30px; | |
| left: -15px; | |
| bottom: 0; | |
| z-index: -1; | |
| } | |
| .main-timeline .icon span:after{ | |
| border-radius: 0 21px 0 0; | |
| top: 0; | |
| left: -15px; | |
| bottom: -30px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .timeline-content, | |
| .main-timeline .timeline:nth-child(2n) .circle{ | |
| float: right; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle{ | |
| margin: 0 0 0 25px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle:before{ | |
| right: auto; | |
| left: -33px; | |
| box-shadow: -7px 0 9px -7px #444 inset; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle span:before, | |
| .main-timeline .timeline:nth-child(2n) .circle span:after{ | |
| right: auto; | |
| left: -33px; | |
| border-radius: 0 0 21px 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle span:after{ | |
| border-radius: 0 21px 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .content{ | |
| padding: 0 0 0 40px; | |
| margin-left: 2px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon{ | |
| right: auto; | |
| left: -14px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon:before, | |
| .main-timeline .timeline:nth-child(2n) .icon span:before, | |
| .main-timeline .timeline:nth-child(2n) .icon span:after{ | |
| left: auto; | |
| right: -15px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon span:before{ | |
| border-radius: 0 0 0 21px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon span:after{ | |
| border-radius: 21px 0 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(2){ | |
| margin-top: 180px; | |
| } | |
| .main-timeline .timeline:nth-child(odd){ | |
| margin: -175px 0 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(even){ | |
| margin-bottom: 180px; | |
| } | |
| .main-timeline .timeline:first-child, | |
| .main-timeline .timeline:last-child:nth-child(even){ | |
| margin: 0; | |
| } | |
| @media only screen and (max-width: 990px){ | |
| .main-timeline:before{ left: 100%; } | |
| .main-timeline .timeline{ | |
| width: 100%; | |
| float: none; | |
| margin-bottom: 20px !important; | |
| } | |
| .main-timeline .timeline:first-child:before, | |
| .main-timeline .timeline:last-child:before{ | |
| left: auto !important; | |
| right: -13px !important; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle{ | |
| float: left; | |
| margin: 0 25px 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle:before{ | |
| right: -33px; | |
| left: auto; | |
| box-shadow: 7px 0 9px -7px #444 inset; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle span:before, | |
| .main-timeline .timeline:nth-child(2n) .circle span:after{ | |
| right: -33px; | |
| left: auto; | |
| border-radius: 0 0 0 21px; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .circle span:after{ | |
| border-radius: 21px 0 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .content{ | |
| padding: 0 40px 0 0; | |
| margin-left: 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon{ | |
| right: -14px; | |
| left: auto; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon:before, | |
| .main-timeline .timeline:nth-child(2n) .icon span:before, | |
| .main-timeline .timeline:nth-child(2n) .icon span:after{ | |
| left: -15px; | |
| right: auto; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon span:before{ | |
| border-radius: 0 0 21px 0; | |
| } | |
| .main-timeline .timeline:nth-child(2n) .icon span:after{ | |
| border-radius: 0 21px 0 0; | |
| } | |
| .main-timeline .timeline:nth-child(2), | |
| .main-timeline .timeline:nth-child(odd), | |
| .main-timeline .timeline:nth-child(even){ | |
| margin: 0; | |
| } | |
| } | |
| @media only screen and (max-width: 480px){ | |
| .main-timeline:before{ left: 0; } | |
| .main-timeline .timeline:first-child:before, | |
| .main-timeline .timeline:last-child:before{ | |
| left: -12px !important; | |
| right: auto !important; | |
| } | |
| .main-timeline .circle, | |
| .main-timeline .timeline:nth-child(2n) .circle{ | |
| width: 130px; | |
| height: 130px; | |
| float: none; | |
| margin: 0 auto; | |
| } | |
| .main-timeline .timeline-content:before{ | |
| width: 99.5%; | |
| top: 68px; | |
| left: 0.5%; | |
| } | |
| .main-timeline .circle span{ | |
| line-height: 115px; | |
| font-size: 60px; | |
| } | |
| .main-timeline .circle:before, | |
| .main-timeline .circle span:before, | |
| .main-timeline .circle span:after, | |
| .main-timeline .icon{ | |
| display: none; | |
| } | |
| .main-timeline .content, | |
| .main-timeline .timeline:nth-child(2n) .content{ | |
| padding: 0 10px; | |
| } | |
| .main-timeline .year{ | |
| margin-bottom: 15px; | |
| } | |
| .main-timeline .description{ | |
| text-align: center; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment