Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Responsive Timeline" project using HTML & CSS.
Preview
In the above video, you’ve seen the preview of the "Responsive Timeline" project and I hope you are now able to create this type of project. If not, I have provided all the HTML & CSS code below.
Responsive Timeline [Source Code]
To get the following HTML & CSS code for the Responsive Timeline project. You need to create two files one is an HTML file, and the second one is a CSS file. After completing these two files, you can copy-paste the codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code and a .css extension for CSS code.
You can also download all source code files from the given download button.
HTML
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Responsive Timeline</title>
<link href="style.css" rel="stylesheet"></link>
<!-- Font Awesome CDN Link -->
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" referrerpolicy="no-referrer" rel="stylesheet"></link>
</head>
<body>
<!-- Job -->
<section id="job">
<div class="container">
<div class="job-wrapper">
<h1 class="section-name">
<i class="fa-solid fa-suitcase"></i>
Job
</h1>
<div class="job-container">
<div class="job-box">
<div class="box">
<h3 class="job">WebDeveloper Intern</h3>
<h4 class="company">Oasis Infobyte</h4>
<p class="year">05 Feb 2023 - 05 Mar 2023</p>
<p class="skills">Skills: HTML, CSS, JS & ReactJS</p>
<div class="arrow"></div>
</div>
<i class="fa-solid fa-suitcase"></i>
</div>
<div class="job-box">
<div class="box">
<h3 class="job">Video Making/Editing</h3>
<h4 class="company">Con10TLabs Pvt Lmt</h4>
<p class="year">18 Jan 2023 - 30 Apr 2023</p>
<p class="skills">Skills: Adobe PhotoShop & Premiere Pro</p>
<div class="arrow"></div>
</div>
<i class="fa-solid fa-suitcase"></i>
</div>
<div class="job-box">
<div class="box">
<h3 class="job">Java developer Intern</h3>
<h4 class="company">Cognizant</h4>
<p class="year">06 May 2023 - 05 Jun 2023</p>
<p class="skills">Skills: Java with Spring Boot</p>
<div class="arrow"></div>
</div>
<i class="fa-solid fa-suitcase"></i>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
.container {
max-width: 130rem;
margin: 0 auto;
padding: 0 3rem;
}
.job-wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.job-wrapper h1 {
font-size: 3.5rem;
}
.job-wrapper h1 i {
margin-right: 0.5rem;
}
.job-wrapper .job-container {
min-width: 80rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.job-wrapper .job-container .job-box {
width: 40rem;
position: relative;
padding: 2rem 5rem;
}
.job-wrapper .job-container .job-box::after {
content: "";
position: absolute;
right: -0.2rem;
top: 0;
width: 0.4rem;
height: 100%;
background-color: black;
z-index: -6;
}
.job-wrapper .job-container .job-box:nth-child(even)::after {
left: -0.2rem;
}
.job-wrapper .job-container .job-box:nth-child(odd) {
align-self: flex-start;
}
.job-wrapper .job-container .job-box:nth-child(even) {
align-self: flex-end;
margin-left: -2rem;
}
.job-wrapper .job-container .job-box i {
position: absolute;
top: 15%;
right: -6.5%;
font-size: 2rem;
background-color: white;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: 0.5rem solid black;
text-align: center;
line-height: 4rem;
}
.job-wrapper .job-container .job-box:nth-child(even) i {
left: -6.5%;
}
.job-wrapper .job-container .job-box .box {
border: 0.4rem solid black;
padding: 0 1rem;
border-radius: 1rem;
position: relative;
}
.job-wrapper .job-container .job-box .box .arrow {
position: absolute;
content: "";
width: 3rem;
height: 1.8rem;
background-color: black;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 15%;
right: -9%;
transform: rotate(90deg);
}
.job-wrapper .job-container .job-box:nth-child(even) .box .arrow {
left: -9%;
transform: rotate(270deg);
}
@media only screen and (max-width: 900px) {
html {
font-size: 56%;
}
}
@media only screen and (max-width: 700px) {
html {
font-size: 50%;
}
.job-wrapper .job-container {
padding-right: 5rem;
}
.job-wrapper .job-container .job-box:nth-child(odd) {
align-self: center;
}
.job-wrapper .job-container .job-box:nth-child(even) {
align-self: center;
margin-left: 0;
}
.job-wrapper .job-container .job-box:nth-child(even)::after {
left: 99.5%;
}
.job-wrapper .job-container .job-box:nth-child(even) .box .arrow {
left: 99%;
transform: rotate(90deg);
}
.job-wrapper .job-container .job-box:nth-child(even) i {
left: 93.5%;
}
}
Generating Download Link...