<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Timeline</title>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
/* Basic styles for the timeline container */
.timeline {
width: 80%;
margin: 0 auto;
padding: 50px 0;
position: relative;
}
/* Line running along the timeline */
.timeline::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background-color: #ddd;
transform: translateY(-50%);
z-index: -1; /* Ensure the line stays behind the cards */
}
/* Container for each timeline card */
.card-container {
display: flex;
justify-content: space-around;
}
/* Individual timeline card */
.card {
width: 200px;
background-color: rgb(207, 224, 130);
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
}
/* Apply clip-path for a diagonal background shape (adjust values as needed) */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1e1d1d; /* Example background color */
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); /* Adjust these percentages for shape variation */
z-index: -1; /* Ensure the shape stays behind the card content */
}
/* Icon styles - replace with your preferred icon library or images */
.card i {
font-size: 40px;
color: #333;
margin-bottom: 10px;
}
.card h3 {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="timeline">
<div class="card-container">
<div class="card">
<i class="fas fa-code"></i>
<h3>CodezillaYe1</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!.</p>
</div>
<div class="card">
<i class="fas fa-pencil-ruler"></i>
<h3>CodezillaYe2</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!.</p>
</div>
<div class="card">
<i class="fas fa-lightbulb"></i>
<h3>CodezillaYe3</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!.</p>
</div>
<div class="card">
<i class="fas fa-check-circle"></i>
<h3>CodezillaYe4</h3>
<p>Unlock the power of coding with CodeZillaYE! Your ultimate resource for mastering frontend and backend development. Dive into detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS, JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with our educational articles and enhance your skills with practical guides. Perfect for beginners and seasoned developers alike. Join CodeZillaYE today and elevate your coding journey!.</p>
</div>
</div>
</div>
</body>
</html>