Timeline with css
How do I make an timeline with css?
What is a timeline with css? How do you make a timeline with css? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.
Timeline with css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>timeline with css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
ul { position: relative; overflow: hidden; list-style: none; width: 800px; margin: 30px auto; padding: 0;
}
ul:after { content:""; z-index: 1; position: absolute; left: 50%; top:0; width: 4px; margin-left: -2px; min-height: 100%; background-color: #eee;
}
li { z-index: 2; position: relative; width: 380px; padding: 20px; float: left; margin-bottom: 30px; background-color: #eee;
}
li.left { float: left; clear: left;
}
li.right { float: right; clear: right;
}
li.highlight { float: none; clear: both; width: auto; border: 5px solid #fff;
}
/* arrow */
li:before { content:""; z-index: 1; position: absolute; top: 14px; right: -6px; left: -6px; width: 12px; height: 12px; background-color: #eee; transform: rotate(45deg);
}
li.left:before { left: auto;
}
li.right + li.left:before,
li.left + li.right:before { top: 36px;
}
li.highlight:before { left: 50%; margin-left: -6px; right: auto; top: -6px;
}
/* dot */
li:after { content:""; z-index: 1; position: absolute; top: 14px; right: -27px; left: -27px; width: 8px; height: 8px; border: 3px solid #fff; border-radius: 100%; background-color: #ccc; transition: .2s;
}
li:hover:after { background-color: #999; top: 12px; right: -29px; left: -29px; width: 12px; height: 12px;
}
li.left:after { left: auto;
}
li.right + li.left:after,
li.left + li.right:after { top: 36px;
}
li.right + li.left:hover:after,
li.left + li.right:hover:after { top: 34px;
}
li.right:after { right: auto;
}
li.highlight:after { left: 50%; margin-left: -7px; right: auto; top: -24px;
}
li.highlight:hover:after { margin-left: -9px; top: -26px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li class="right"> <img src="http://lorempixel.com/340/100/nature/1" /> Maecenas faucibus mollis rnare sem lacinia quam venenatis vestibulum. </li> <li class="left"> <img src="http://lorempixel.com/340/100/nature/2" /> Maecenas faucibus mollis interdum. Etiam porta sem malesuada ma llis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </li> <li class="right"> Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque orngna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </li> <li class="left"> <img src="http://lorempixel.com/340/100/nature/3" /> Maecenas fauci e ornare sem lacinia quam venenatis vestibulum. </li> <li class="right"> Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consec . Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </li> <li class="highlight"> <img src="http://lorempixel.com/760/300/nature/4" /> </li> <li class="right"> <img src="http://lorempixel.com/340/100/nature/4" /> Maecenas faucibus mollis interdum. Etiam porta sem malesuada magn e ornare sem lacinia quam venenatis vestibulum. </li> <li class="left"> Maecenas faucibus mollis interdum. Etiam porta sem malesuada ma llis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </li>
</ul>
</body>
</html>
Timeline with css - Script Codes CSS Codes
* { box-sizing: border-box;
}
ul { position: relative; overflow: hidden; list-style: none; width: 800px; margin: 30px auto; padding: 0;
}
ul:after { content:""; z-index: 1; position: absolute; left: 50%; top:0; width: 4px; margin-left: -2px; min-height: 100%; background-color: #eee;
}
li { z-index: 2; position: relative; width: 380px; padding: 20px; float: left; margin-bottom: 30px; background-color: #eee;
}
li.left { float: left; clear: left;
}
li.right { float: right; clear: right;
}
li.highlight { float: none; clear: both; width: auto; border: 5px solid #fff;
}
/* arrow */
li:before { content:""; z-index: 1; position: absolute; top: 14px; right: -6px; left: -6px; width: 12px; height: 12px; background-color: #eee; transform: rotate(45deg);
}
li.left:before { left: auto;
}
li.right + li.left:before,
li.left + li.right:before { top: 36px;
}
li.highlight:before { left: 50%; margin-left: -6px; right: auto; top: -6px;
}
/* dot */
li:after { content:""; z-index: 1; position: absolute; top: 14px; right: -27px; left: -27px; width: 8px; height: 8px; border: 3px solid #fff; border-radius: 100%; background-color: #ccc; transition: .2s;
}
li:hover:after { background-color: #999; top: 12px; right: -29px; left: -29px; width: 12px; height: 12px;
}
li.left:after { left: auto;
}
li.right + li.left:after,
li.left + li.right:after { top: 36px;
}
li.right + li.left:hover:after,
li.left + li.right:hover:after { top: 34px;
}
li.right:after { right: auto;
}
li.highlight:after { left: 50%; margin-left: -7px; right: auto; top: -24px;
}
li.highlight:hover:after { margin-left: -9px; top: -26px;
}
Developer | Adem Ilter |
Username | ademilter |
Uploaded | June 11, 2022 |
Rating | 4 |
Size | 2,817 Kb |
Views | 66,792 |
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!
Name | Size |
CSShrome | 7,087 Kb |
Test-tube | 2,718 Kb |
Fluid width step-navigation | 1,918 Kb |
Loading svg | 2,319 Kb |
Border box arrow | 2,700 Kb |
Circle loading | 2,932 Kb |
Chrome logo effect | 1,965 Kb |
Responsive table | 2,426 Kb |
Interacthings logo animation | 2,841 Kb |
Fake loading | 1,952 Kb |
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!
Name | Username | Size |
Mario | Takaneichinose | 3,902 Kb |
Resize image | Happyhj | 1,892 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Animated skewed panes | NyX | 4,462 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!