<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Zigzag timeline</h2>
<ul class="timeline">
<li>
<div class="timeline-image">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Wen mint ?</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Presale: 13th Feb 2022 at 2PM UTC
Raffle: 14th Feb 2022 at 6PM UTC
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">How can I mint ?</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Presale: 13th Feb 2022 at 2PM UTC
Raffle: 14th Feb 2022 at 6PM UTC
</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">How much ?</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Presale: 13th Feb 2022 at 2PM UTC
Raffle: 14th Feb 2022 at 6PM UTC
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="subheading">Do i own the IP ?</h4>
</div>
<div class="timeline-body">
<p class="text-muted">
Presale: 13th Feb 2022 at 2PM UTC
Raffle: 14th Feb 2022 at 6PM UTC
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
ul.timeline:before {
content: '';
width: 68%;
height: 10px;
border: 1px solid #413d3a;
position: absolute;
top: 45%;
background: black;
left: 17.5%;
transform: rotate(90deg);
}
.timeline {
position: relative;
padding: 50px 0 50px 0;
margin-top: 22px;
list-style: none;
/* set your own background image */
background: url( );
background-repeat: no-repeat;
width: 100%;
background-position: 54% 13%;
background-size: auto;
}
.timeline>li:nth-child(even) {
position: relative;
margin-bottom: 50px;
height: 180px;
right:0px;
}
.timeline>li:nth-child(odd) {
position: relative;
margin-bottom: 50px;
height: 180px;
left:0px;
}
.timeline>li:before,
.timeline>li:after {
content: " ";
display: table;
}
.timeline>li:after {
clear: both;
min-height: 170px;
}
.timeline > li .timeline-panel {
position: relative;
float: right;
width: 41%;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline>li .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline>li .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li:nth-child(1) .timeline-image {
z-index: 100;
position: absolute;
left: 50%;
border-radius: 100%;
background: linear-gradient(180deg, #F56060 0%, #6C0B0E 100%);
box-shadow: 0 0 5px #ffffff;
width: 30px;
height: 30px;
margin-left: 0px;
}
.timeline>li:nth-child(2) .timeline-image {
z-index: 100;
position: absolute;
left: 50%;
border-radius: 100%;
background: linear-gradient(180deg, #9EACFF 0%, #001087 100%);
box-shadow: 0 0 5px #ffffff;
width: 30px;
height: 30px;
margin-left: 0px;
}
.timeline>li:nth-child(3) .timeline-image {
z-index: 100;
position: absolute;
left: 50%;
border-radius: 100%;
background: linear-gradient(180deg, #24DB78 0%, #2A8827 100%);
box-shadow: 0 0 5px #ffffff;
width: 30px;
height: 30px;
margin-left: 0px;
}
.timeline>li:nth-child(4) .timeline-image {
z-index: 100;
position: absolute;
left: 50%;
border-radius: 100%;
background: linear-gradient(180deg, #1E9E9F 0%, #1E8381 100%);
box-shadow: 0 0 5px #ffffff;
width: 30px;
height: 30px;
margin-left: 0px;
}
.timeline>li .timeline-image h4 {
margin-top: 12px;
font-size: 10px;
line-height: 14px;
}
.timeline>li.timeline-inverted>.timeline-panel {
float: left;
padding: 0 30px 20px 20px;
text-align: left;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline>li.timeline-inverted>.timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li:last-child {
margin-bottom: 0;
}
.timeline .timeline-heading h4 {
margin-top:22px;
margin-bottom: 4px;
padding:0;
color: #b3b3b3;
}
.timeline .timeline-heading h4.subheading {
margin:0;
padding:0;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 25px;
line-height: 38px;
color: white;
text-align: center;
text-transform: capitalize;
}
.timeline .timeline-body>p,
.timeline .timeline-body>ul {
margin: 0;
color:#ffffff !important;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
text-transform: capitalize;
}
/*Style for even div.line*/
.timeline>li:nth-child(odd) .line:before {
content: "";
position: absolute;
top: 60px;
bottom: 0;
left: 690px;
width: 4px;
height:340px;
background-color: #3b5998;
-ms-transform: rotate(-44deg); /* IE 9 */
-webkit-transform: rotate(-44deg); /* Safari */
transform: rotate(-44deg);
box-shadow: 0 0 5px #4582ec;
}
/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before {
content: "";
position: absolute;
top: 60px;
bottom: 0;
left: 450px;
width: 4px;
height:340px;
background-color: #3b5998;
-ms-transform: rotate(44deg); /* IE 9 */
-webkit-transform: rotate(44deg); /* Safari */
transform: rotate(44deg);
box-shadow: 0 0 5px #4582ec;
}
ul.timeline li:nth-child(1) .timeline-panel {
box-shadow: 150px -10px 150px 0px #d84e4f;
background: linear-gradient(180deg, #F56060 0%, #6C0B0E 100%);
text-align: center;
margin-right: 12%;
width: 320px;
padding: 22px 28px;
border-radius: 20px;
margin-top: -4%;
border: 2px solid rgb(255, 255, 255);
border-top: 0;
}
ul.timeline li:nth-child(2) .timeline-panel {
box-shadow: -150px -10px 150px 0px #001087;
background: linear-gradient(180deg, #9EACFF 0%, #001087 100%);
text-align: center;
margin-left: 15%;
width: 320px;
padding: 22px 28px;
border-radius: 20px;
margin-top: -4%;
border: 2px solid rgb(255, 255, 255);
border-top: 0;
}
ul.timeline li:nth-child(3) .timeline-panel {
box-shadow: 150px -10px 150px 0px #2A8827;
background: linear-gradient(180deg, #24DB78 0%, #2A8827 100%);
text-align: center;
margin-right: 12%;
width: 320px;
padding: 22px 28px;
border-radius: 20px;
margin-top: -4%;
border: 2px solid rgb(255, 255, 255);
border-top: 0;
}
ul.timeline li:nth-child(4) .timeline-panel {
box-shadow: -150px -10px 150px 0px #1E8381;
background: linear-gradient(180deg, #1E9E9F 0%, #1E8381 100%);
text-align: center;
margin-left: 15%;
width: 320px;
padding: 22px 28px;
border-radius: 20px;
margin-top: -4%;
border: 2px solid rgb(255, 255, 255);
border-top: 0;
}
ul.timeline li .timeline-panel .timeline-body {
width: 33ch;
margin: auto;
}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0px;
}
.timeline>li:nth-child(odd) .timeline-image {
left: 690px;
margin-left: 0px;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 76%;
padding: 0 0 20px 0px;
text-align: left;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: right;
}
.timeline > li .line {
display: none;
}
}
/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0px;
}
.timeline>li:nth-child(odd) .timeline-image {
left: 520px;
margin-left: 0px;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: left;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 70%;
padding: 0 0 20px 0px;
text-align: right;
}
.timeline > li .line {
display: none;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 767px) {
.timeline > li:nth-child(even) {
margin-bottom: 0px;
min-height: 0px;
right: 0px;
}
.timeline > li:nth-child(odd) {
margin-bottom: 0px;
min-height: 0px;
left: 0px;
}
.timeline>li .timeline-image {
position: static;
width: 150px;
height: 150px;
margin-bottom:0px;
}
.timeline>li:nth-child(even) .timeline-image {
left: 0;
margin-left: 0;
}
.timeline>li:nth-child(odd) .timeline-image {
float:right;
left: 0px;
margin-left:0;
}
.timeline > li:nth-child(even) .timeline-panel {
width: 100%;
padding: 0 0 20px 14px;
}
.timeline > li:nth-child(odd) .timeline-panel {
width: 100%;
padding: 0 14px 20px 0px;
}
.timeline > li .line {
display: none;
}
}
