Time Line
How do I make an time line?
What is a time line? How do you make a time line? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.
Time Line - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Time Line</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ body, html
{ margin: 0; padding: 0; background-color: #fff; font-family: Tahoma; font-weight: lighter; font-size: 16px; background-color: #fff; width: 100%; height: 100%; cursor: default; font-family: 'Gotham SSm A', 'Gotham SSm B', "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
} body:before { content: ''; width: 0; height: 0; border: 50px solid transparent; border-right-color: #FF1F00; border-bottom-color: #FF1F00; position: fixed; right: 0px; bottom: 0px; }
.myName
{ text-decoration: none; position: fixed; right: 10px; bottom: 0px; color: #fff; font-weight: lighter; font-size: 10px; line-height: 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
*
{
}
body
{ width: 833px; min-width:833px; margin: 0 auto;
}
/**/
.container
{ background-color: #f8f8f8; background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat; max-width: 800px; margin: 0 auto; min-height: 300px; padding: 20px;
}
/**/
h1
{ margin: 0; color: #fff; position: relative; background-color: #FF1F00; display: inline-block; padding: 5px 50px 5px 5px;
} h1:before { background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat; position: absolute; content: ''; width: 100%; height: 100%; top: 0px; left: 0px; } h1:after { content: ''; position: absolute; border: 24px solid transparent; border-right-color: #fff; right: 0px; top: 0px; }
/**/
.life
{ width: 100%; max-width: 800px; padding: 0; margin: 0 auto; line-height: 50px;
}
/*first row CSS*/
table > tbody > tr:nth-child(1)
{ position: relative; display: table;
} table > tbody > tr:nth-child(1):before { content: ''; width: 0; height: 0; border: 6px solid transparent; border-left-color: #2aa; position: absolute; right: -6px; margin-top: -6px; top: 50%; z-index: 1; }
table > tbody > tr > td
{ width: 190px; border: none; border-spacing: 0; border-collapse: collapse; padding: 0; margin: 0; display: inline-block; height: 50px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
table > tbody > tr:nth-child(1) > td:nth-child(1)
{ font-weight: bold; font-size: 1.1rem; background-color: #f0f0f0; position: relative; z-index: 1; color: #333; text-align: center; border: 1px solid #2aa;
} table > tbody > tr:nth-child(1) > td:nth-child(1):before { content: 'First Year'; width: 100%; position: absolute; top: 10px; background-color: #f0f0f0; height: 100%; left: 5px; border: 1px solid #2aa; color: #FF1F00; font-size: 16px; font-weight: lighter; }
table > tbody > tr:nth-child(1) > td:not(:nth-child(1))
{ position: relative;
} table > tbody > tr:nth-child(1) > td:not(:nth-child(1)):before { content: ''; width: 100%; position: absolute; background-color: #2aa; height: 1px; margin-top: -1px; top: 50%; }
table > tbody > tr:nth-child(1) > td:hover:not(:nth-child(1)):after
{ content: ''; width: 10px; position: absolute; background-color: #2aa; height: 10px; border-radius: 50%; top: 50%; margin-top: -5px; left: 50%; margin-left: -5px; -webkit-animation: pulsate 2s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0;
}
/**/
@-webkit-keyframes pulsate
{ 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(3, 3); opacity: 0.0; }
}
/**/
table > tbody > tr:nth-child(1) > td > span
{ display: block; width: 100%; height: 100%; position: relative;
} table > tbody > tr:nth-child(1) > td > span:after { content: ''; width: 10px; position: absolute; background-color: #FF1F00; height: 10px; border-radius: 50%; top: 50%; margin-top: -5px; left: 50%; margin-left: -5px; }
table > tbody > tr:nth-child(1) > td > a
{ position: absolute; top: -5px; margin-left: -40%; left: 50%; font-size: 10px; display: inline-block; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; cursor: pointer;
}
tr:nth-child(1) > td > a > span
{ position: absolute; top: 80%; content: ''; width: 90%; left: 5%; height: 20px; background-color: #2aa; border-radius: 5px; display: none; opacity: 0; line-height: 20px; color: #fff; text-align: center; border: 2px solid #fff;
}
tr:nth-child(1) td:hover > a > span
{ display: block; opacity: 1;
}
.hoverEffect, .hoverEffect:hover
{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
/**/
.flipping
{ animation: flipper 3s ease-in 4s infinite; -ms-animation: flipper 3s ease-in 4s infinite; -webkit-animation: flipper 3s ease-in 4s infinite; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; display: inline-block;
}
@-webkit-keyframes flipper
{ 0% { -webkit-transform: perspective(300px) rotateY(0deg); } 15%, 100% { -webkit-transform: perspective(300px) rotateY(360deg); } ;
}
@-ms-keyframes flipper
{ 0% { -moz-transform: perspective(300px) rotateY(0deg); } 15%, 100% { -moz-transform: perspective(300px) rotateY(360deg); } ;
}
@keyframes flipper
{ 0% { transform: perspective(300px) rotateY(0deg); } 15%, 100% { transform: perspective(300px) rotateY(360deg); } ;
}
/**/
.containerData
{ background-color: #fff; width: 525px; margin-left: 7px; padding: 20px; border: 1px solid #2aa; margin-top: 10px; position: relative; color: #FF1F00; text-align: left; min-height: 300px; font-size: 14px;
} .containerData:after { content: ''; width: 10px; height: 10px; background-color: #fff; position: absolute; border: 1px solid #2aa; right: -12px; bottom: -12px; } .containerData > div { font-size: 12px; letter-spacing: -1px; border-bottom: 1px solid #2aa; width: 100%; text-align: center; margin: 0 auto; display: none; } .containerData > textarea { outline: 0px; width: 96%; padding: 2%; line-height: 20px; font-size: 14px; font-weight: lighter; color: #FF1F00; resize: none; height: 100px; background-color: rgba(240, 240, 240, 0.12); border: 1px solid rgba(240, 240, 240, 0.55); overflow: hidden; } .containerData > textarea:focus { background-color: #fff; }
input[type="button"]
{ float: right; background-color: #FF1F00; color: #fff; border: 1px solid #f0f0f0; line-height: 20px; padding: 0px 10px 0px 10px; margin-right: -2px; letter-spacing: -1px; outline: none;
} input[type="button"]:hover { letter-spacing: 2px; padding: 0px 5px 0px 5px; cursor: pointer; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <a href="https://twitter.com/MariamMassadeh" class="myName">Mar!am</a> <h1 class="hoverEffect"> Projects I did <span class="flipping">!</span></h1> <div class="container"> <table class="life"> <tbody> <tr> <td> </td> <td> <span></span><a onclick='$(".containerData div").html($(this).find("span").html()).fadeIn();'> 01-01-2013<span class="hoverEffect">SFD</span></a> </td> <td> <span></span><a onclick='$(".containerData div").html($(this).find("span").html()).fadeIn();'> 01-04-2013<span class="hoverEffect">SSSD</span></a> </td> <td> <span></span><a onclick='$(".containerData div").html($(this).find("span").html()).fadeIn();'> 01-06-2013<span class="hoverEffect">Falcon</span></a> </td> </tr> <tr> <td> </td> <td colspan="3" class="containerData"> You Can Discover The Projects & Share Your Idea Via Clicking The Timeline <br /> <div> </div> Type Your Idea: <br /> <textarea class="hoverEffect" rows="5" cols="5"></textarea> <br /> <input type="button" class="hoverEffect" value="Share Idea" /> </td> </tr> </tbody> </table> <br /> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Time Line - Script Codes CSS Codes
body, html
{ margin: 0; padding: 0; background-color: #fff; font-family: Tahoma; font-weight: lighter; font-size: 16px; background-color: #fff; width: 100%; height: 100%; cursor: default; font-family: 'Gotham SSm A', 'Gotham SSm B', "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
} body:before { content: ''; width: 0; height: 0; border: 50px solid transparent; border-right-color: #FF1F00; border-bottom-color: #FF1F00; position: fixed; right: 0px; bottom: 0px; }
.myName
{ text-decoration: none; position: fixed; right: 10px; bottom: 0px; color: #fff; font-weight: lighter; font-size: 10px; line-height: 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
*
{
}
body
{ width: 833px; min-width:833px; margin: 0 auto;
}
/**/
.container
{ background-color: #f8f8f8; background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat; max-width: 800px; margin: 0 auto; min-height: 300px; padding: 20px;
}
/**/
h1
{ margin: 0; color: #fff; position: relative; background-color: #FF1F00; display: inline-block; padding: 5px 50px 5px 5px;
} h1:before { background-image: url("http://www.4shared.com/download/lGOXtMUM/noise.png"); background-repeat: repeat; position: absolute; content: ''; width: 100%; height: 100%; top: 0px; left: 0px; } h1:after { content: ''; position: absolute; border: 24px solid transparent; border-right-color: #fff; right: 0px; top: 0px; }
/**/
.life
{ width: 100%; max-width: 800px; padding: 0; margin: 0 auto; line-height: 50px;
}
/*first row CSS*/
table > tbody > tr:nth-child(1)
{ position: relative; display: table;
} table > tbody > tr:nth-child(1):before { content: ''; width: 0; height: 0; border: 6px solid transparent; border-left-color: #2aa; position: absolute; right: -6px; margin-top: -6px; top: 50%; z-index: 1; }
table > tbody > tr > td
{ width: 190px; border: none; border-spacing: 0; border-collapse: collapse; padding: 0; margin: 0; display: inline-block; height: 50px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
table > tbody > tr:nth-child(1) > td:nth-child(1)
{ font-weight: bold; font-size: 1.1rem; background-color: #f0f0f0; position: relative; z-index: 1; color: #333; text-align: center; border: 1px solid #2aa;
} table > tbody > tr:nth-child(1) > td:nth-child(1):before { content: 'First Year'; width: 100%; position: absolute; top: 10px; background-color: #f0f0f0; height: 100%; left: 5px; border: 1px solid #2aa; color: #FF1F00; font-size: 16px; font-weight: lighter; }
table > tbody > tr:nth-child(1) > td:not(:nth-child(1))
{ position: relative;
} table > tbody > tr:nth-child(1) > td:not(:nth-child(1)):before { content: ''; width: 100%; position: absolute; background-color: #2aa; height: 1px; margin-top: -1px; top: 50%; }
table > tbody > tr:nth-child(1) > td:hover:not(:nth-child(1)):after
{ content: ''; width: 10px; position: absolute; background-color: #2aa; height: 10px; border-radius: 50%; top: 50%; margin-top: -5px; left: 50%; margin-left: -5px; -webkit-animation: pulsate 2s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0;
}
/**/
@-webkit-keyframes pulsate
{ 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(3, 3); opacity: 0.0; }
}
/**/
table > tbody > tr:nth-child(1) > td > span
{ display: block; width: 100%; height: 100%; position: relative;
} table > tbody > tr:nth-child(1) > td > span:after { content: ''; width: 10px; position: absolute; background-color: #FF1F00; height: 10px; border-radius: 50%; top: 50%; margin-top: -5px; left: 50%; margin-left: -5px; }
table > tbody > tr:nth-child(1) > td > a
{ position: absolute; top: -5px; margin-left: -40%; left: 50%; font-size: 10px; display: inline-block; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; cursor: pointer;
}
tr:nth-child(1) > td > a > span
{ position: absolute; top: 80%; content: ''; width: 90%; left: 5%; height: 20px; background-color: #2aa; border-radius: 5px; display: none; opacity: 0; line-height: 20px; color: #fff; text-align: center; border: 2px solid #fff;
}
tr:nth-child(1) td:hover > a > span
{ display: block; opacity: 1;
}
.hoverEffect, .hoverEffect:hover
{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;
}
/**/
.flipping
{ animation: flipper 3s ease-in 4s infinite; -ms-animation: flipper 3s ease-in 4s infinite; -webkit-animation: flipper 3s ease-in 4s infinite; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; display: inline-block;
}
@-webkit-keyframes flipper
{ 0% { -webkit-transform: perspective(300px) rotateY(0deg); } 15%, 100% { -webkit-transform: perspective(300px) rotateY(360deg); } ;
}
@-ms-keyframes flipper
{ 0% { -moz-transform: perspective(300px) rotateY(0deg); } 15%, 100% { -moz-transform: perspective(300px) rotateY(360deg); } ;
}
@keyframes flipper
{ 0% { transform: perspective(300px) rotateY(0deg); } 15%, 100% { transform: perspective(300px) rotateY(360deg); } ;
}
/**/
.containerData
{ background-color: #fff; width: 525px; margin-left: 7px; padding: 20px; border: 1px solid #2aa; margin-top: 10px; position: relative; color: #FF1F00; text-align: left; min-height: 300px; font-size: 14px;
} .containerData:after { content: ''; width: 10px; height: 10px; background-color: #fff; position: absolute; border: 1px solid #2aa; right: -12px; bottom: -12px; } .containerData > div { font-size: 12px; letter-spacing: -1px; border-bottom: 1px solid #2aa; width: 100%; text-align: center; margin: 0 auto; display: none; } .containerData > textarea { outline: 0px; width: 96%; padding: 2%; line-height: 20px; font-size: 14px; font-weight: lighter; color: #FF1F00; resize: none; height: 100px; background-color: rgba(240, 240, 240, 0.12); border: 1px solid rgba(240, 240, 240, 0.55); overflow: hidden; } .containerData > textarea:focus { background-color: #fff; }
input[type="button"]
{ float: right; background-color: #FF1F00; color: #fff; border: 1px solid #f0f0f0; line-height: 20px; padding: 0px 10px 0px 10px; margin-right: -2px; letter-spacing: -1px; outline: none;
} input[type="button"]:hover { letter-spacing: 2px; padding: 0px 5px 0px 5px; cursor: pointer; }
Time Line - Script Codes JS Codes
$("a").mouseenter(function () { $("a > span").css("background-color", "#FF1F00").css("color", "#fff"); }); $("a").mouseleave(function () { $("a > span").css("background-color", "#2aa"); });
Developer | Mariam Massadeh |
Username | MariamMassadeh |
Uploaded | September 22, 2022 |
Rating | 3 |
Size | 5,697 Kb |
Views | 28,336 |
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 |
CSS3 Animation | 4,351 Kb |
Qoute | 2,776 Kb |
Simple blog container, tool tip, simple animation on hover | 2,834 Kb |
Receipt with result | 2,774 Kb |
Menu with a featured tooltip that has an animation from Jumping Animation pen | 2,560 Kb |
Animated Progress Bar | 2,271 Kb |
Responsive Menu with sub menu- CSS3 animation, simple jquery | 3,663 Kb |
Html5-canvas-snow-effect | 2,609 Kb |
Notepad pen | 2,300 Kb |
Simple Chat Conversation | 4,210 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 |
See Through | Larrygeams | 77,410 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
FCC Portfolio | Cmwebby | 4,304 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!