<style>@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { background: url("http://hcweb.do.am/image/gradient_background-wallpaper-1920x1080.jpg"); background-attachment: fixed ;
background-repeat: no-repeat;
background-position: top;
text-decoration: none;
margin-top: 0px;
margin-bottom: 0px;
}
.timeline-container li {-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
html {
font-family: "Montserrat";
}
#header {
/* top: 0px;
position: fixed;color_#fff;
background-color: rgba(0,0,0, 0.6);
width:100%;
z-index: 4;
text-align: center;
display: block;
margin-left:2%;
margin-right:2%;
*/
position: fixed;color:#fff;
top: 0;
height: 80px;
text-align:center;
background-color:rgba(0,0,0, 0.6);
right:10%;
left:10%;
z-index: 4;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background-color: rgba(0,0,0, 0.6);
}
.timeline {top: 10%;
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background-color: rgba(183, 177, 180, 0.7);
color: white;
border-radius: 10px;
margin-bottom: 20px;
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: gray;
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-30px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: gray;
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -30px;
}
.timeline-content .date {
position: absolute;
top: -30px;
}
.timeline ul li:hover::before {
background-color: aqua;
}
}
</style>
<html><body>
<div id="header"><h1>Ez egy fix fejléc</h1></div>
<div class="timeline" >
<ul>
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li>
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content" >
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li >
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content" >
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li>
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li>
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li>
<li data--100p-bottom="transform: skew(40deg) "
data--80p-bottom="transform: skew(0deg)">
<div class="timeline-content">
<h3 class="date">20th may, 2010</h3>
<h1>Div Címe</h1>
<p>Ezt a divet fogjuk elforgatni balra.</p>
</div>
</li>
</ul>
</div>
<script src="https://ihatetomatoes.net/demos/rotate-3d-with-skrollr/js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script></body></html>
Példa: Katt Ide
|