Responsive felxbox timeline

Developer
Nour Abusoud
Size
2,590 Kb
Views
14,168
  1. Responsive felxbox timeline Previews
  2. Responsive felxbox timeline HTML Codes
  3. Responsive felxbox timeline CSS Codes

How do I make an responsive felxbox timeline?

Enhanced the below forked pen, I used flex so there's no need to change the css if we have extra/less number of steps, and changed the code a bit.. What is a responsive felxbox timeline? How do you make a responsive felxbox timeline? This script and codes were developed by Nour Abusoud on 10 November 2022, Thursday.

Responsive felxbox timeline Previews
IQ Test

Responsive felxbox timeline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive felxbox timeline </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>My coding journey .. so far</h1>
<div class="steps-timeline"> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2013 <br> Computer engineering </span> <p class="step-description"> Studied computer engineering. </p> </div> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2013 <br> HTML/CSS/JS/jQuery </span> <p class="step-description"> In my internship, I worked at a copany as a frontend developer, self taught myself using "w3schools" </p> </div> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2013-2014 <br> PHP,MySql </span> <p class="step-description"> At the end of my internship program, I started learning php and mysql </p> </div> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2014 <br> Sass,Git </span> <p class="step-description"> After a year working as frontend/backend developer I started working in a new company & started working with Sass, git, it was the first time I work with a linux system </p> </div> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2015 <br> More PHP / MySql / Sass </span> <p class="step-description"> Worked as frontend mainly but helped building projects with both frontend/backend. </p> </div> <div class="step"> <div class="step-milestone"/></div> <span class="step-title"> 2016 <br> Zend framework </span> <p class="step-description"> Lhad to build a dashboard with zend, so I larned it and built the dashboard. </p> </div>
</div><!-- steps-timeline -->
</body>
</html>

Responsive felxbox timeline - Script Codes CSS Codes

body{ color: #666; font-family: Arial, sans-serif;
}
h1{ text-align: center;
}
/* Steps timeline*/
.steps-timeline { font-size: 14px; line-height: 16px;
}
.step-title,
.step-description { margin: 0; display: block; text-align: center;
}
.step-title{ font-size: 16px; line-height: 22px; font-weight: bold; margin-bottom: 10px;
}
.ste-description { overflow: hidden; line-height:20px;
}
.steps-timeline .step { outline: 1px dashed rgba(0, 128, 0, 0); margin-bottom: 20px;
}
.step-milestone{ display: block; width: 30px; height: 30px; background-color: #fff; border: 8px solid red; border-radius: 50%; margin: 15px auto; box-sizing: border-box;
}
@media screen and (max-width: 678px) { .steps-timeline { border-left: 2px solid #3498DB; margin-left: 25px; } .steps-timeline .step { margin-left: -25px; display: block; overflow: auto; } .step-milestone { float: left; margin-left: 10px; } .step-title,.step-description { text-align: left; margin-left: 60px; }
}
@media screen and (min-width: 678px) { .steps-timeline { border-top: 2px solid #3498DB; margin-top: 50px; margin-left: 10%; margin-right: 10%; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; justify-content: space-between; } .steps-timeline .step { margin-top: -30px; -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; }
}
Responsive felxbox timeline - Script Codes
Responsive felxbox timeline - Script Codes
Home Page Home
Developer Nour Abusoud
Username nourabusoud
Uploaded November 10, 2022
Rating 3
Size 2,590 Kb
Views 14,168
Do you need developer help for Responsive felxbox timeline?

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!

Nour Abusoud (nourabusoud) Script Codes
Name
CSS Bar Chart
CSS Only Dragonfly
CSS Only semi-circle pie chart
The Jealous Buttons
CSS Heart Loaders
Mistletoe
Simple CSS Snowflake
Macaroons
CSS only dynamic 2 slices pie charts
CSS Cupcake
Create amazing SEO content 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!