Timeline Dummy

Developer
Hornebom
Size
3,320 Kb
Views
34,408
  1. Timeline Dummy Previews
  2. Timeline Dummy HTML Codes
  3. Timeline Dummy CSS Codes

How do I make an timeline dummy?

What is a timeline dummy? How do you make a timeline dummy? This script and codes were developed by Hornebom on 12 August 2022, Friday.

Timeline Dummy Previews
IQ Test

Timeline Dummy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline Dummy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fullwidth"> <div class="timeline group"> <div class="item"> <h2>January</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>February</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> <div class="item"> <h2>March</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>April</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> </div> <div class="item"> <h2>May</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>June</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p> </div> <div class="item"> <h2>July</h2> <p> Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>August</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>September</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div class="item"> <h2>October</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> <div class="item"> <h2>November</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p> </div> <div class="item"> <h2>Dezember</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p> </div> </div>
</div>
</body>
</html>

Timeline Dummy - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
body { font-family: 'Lato', sans-serif; line-height: 160%; font-size: 100%; color: #4d4d4d;
}
.group:after { content: ""; display: table; clear: both;
}
.fullwidth { width: 100%; padding-top: 4rem; background-color: #e6e6e6;
}
.timeline { width: 100%; max-width: 60rem; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-bottom: 4rem; padding-left: 2rem; background-image: -webkit-linear-gradient(#999999, #999999); background-image: linear-gradient(#999999, #999999); background-size: 2px 100%; background-position: 50% 1rem; background-repeat: no-repeat;
}
@media (max-width: 40rem) { .timeline { background-position: 2rem 0; }
}
.timeline .item { position: relative; display: block; width: 50%; float: left; clear: both; margin-top: -1rem;
}
@media (max-width: 40rem) { .timeline .item { width: 100%; float: none; margin-top: 0; margin-bottom: 3rem; }
}
.timeline .item:before { content: ''; position: absolute; top: 0.3rem; width: 1rem; height: 1rem; border: 2px solid #999999; border-radius: 50%; background-color: #e6e6e6;
}
.timeline .item:hover:before { background-color: #999999;
}
.timeline .item:first-child { margin-top: 0;
}
.timeline .item:nth-child(odd) { float: right; padding-left: 2rem;
}
.timeline .item:nth-child(odd):before { left: -0.5rem;
}
.timeline .item:nth-child(even) { padding-right: 2rem;
}
@media (max-width: 40rem) { .timeline .item:nth-child(even) { padding-right: 0; padding-left: 2rem; }
}
.timeline .item:nth-child(even):before { right: -0.5rem;
}
@media (max-width: 40rem) { .timeline .item:nth-child(even):before { left: -0.5rem; }
}
.timeline .item h2 { display: block; margin-bottom: 1rem;
}
.timeline .item:nth-child(even) h2 { text-align: right;
}
@media (max-width: 40rem) { .timeline .item:nth-child(even) h2 { text-align: left; }
}
Timeline Dummy - Script Codes
Timeline Dummy - Script Codes
Home Page Home
Developer Hornebom
Username Hornebom
Uploaded August 12, 2022
Rating 4.5
Size 3,320 Kb
Views 34,408
Do you need developer help for Timeline Dummy?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hornebom (Hornebom) Script Codes
Name
CSS Slime Attack
Perspective Scrolling in CSS
MovieScript
Radio click through
Curved Cut
Pew
Trippy
Custom Properties based Parallax
CodePen MeetUp Germany
Z-index playground
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!