Timeline, description

Developer
Alan Mok | Aki Isamu
Size
3,693 Kb
Views
32,384
  1. Timeline, description Previews
  2. Timeline, description HTML Codes
  3. Timeline, description CSS Codes

How do I make an timeline, description?

What is a timeline, description? How do you make a timeline, description? This script and codes were developed by Alan Mok | Aki Isamu on 28 July 2022, Thursday.

Timeline, description Previews
IQ Test

Timeline, description - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>timeline, description</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="historyTimeline"> <img class="arrow" src=""/> <ul class="timePoints"> <li> <div class="timePointName">60s</div> <div class="timePointInfo"> <div class="title">起源·TAKI 183</div> <div class="info">TAKI，一位帶上油性筆到處寫下自己名字和街號(183)的信差青年。這些在別人眼中的神秘標記被注意到了。這些標記在不斷的模仿、演變下，成為現在的塗鴉⋯⋯</div> <i></i> </div> </li> <li class="small s0"> <div class="timePointName">70s</div> </li> <li class="small s1"> <div class="timePointName">80s</div> </li> <li class="small s2"> <div class="timePointName">90s</div> </li> </ul>
</div>
</body>
</html>

Timeline, description - Script Codes CSS Codes

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
html { font-size: 21px;
}
body { margin: 0; background: #444444 url(http://mok20123blog.bugs3.com/graffiti.scrolling/img/background-colle.jpg) repeat center center; font-family: "AdobeFanHeitiStd-Bold","微軟正黑體";
}
.historyTimeline ul.timePoints { text-wrap: none; white-space: nowrap; text-align: center; position: absolute; list-style: none; padding: 0 50px; bottom: 10%; margin: 0;
}
.historyTimeline ul.timePoints li { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background: #FFFFFF; display: inline-block; white-space: normal; position: relative; margin: 0 50px; height: 100px; width: 100px;
}
.historyTimeline ul.timePoints li .timePointName { font-family: "Oswald", "AdobeFanHeitiStd-Bold","微軟正黑體"; font-size: 42px; line-height: 100px; color: #00A0E9; text-align: center;
}
.historyTimeline ul.timePoints li.small .timePointInfo { display: none;
}
.historyTimeline ul.timePoints li.small.s0 { vertical-align: middle; height: 76px; width: 76px;
}
.historyTimeline ul.timePoints li.small.s0 .timePointName { line-height: 76px; font-size: 31.92px;
}
.historyTimeline ul.timePoints li.small.s1 { vertical-align: middle; height: 64px; width: 64px;
}
.historyTimeline ul.timePoints li.small.s1 .timePointName { line-height: 64px; font-size: 26.88px;
}
.historyTimeline ul.timePoints li.small.s2 { vertical-align: middle; height: 50px; width: 50px;
}
.historyTimeline ul.timePoints li.small.s2 .timePointName { line-height: 50px; font-size: 21px;
}
.historyTimeline ul.timePoints li.small.s3 { vertical-align: middle; height: 36px; width: 36px;
}
.historyTimeline ul.timePoints li.small.s3 .timePointName { line-height: 36px; font-size: 15.12px;
}
.historyTimeline ul.timePoints li.small.s4 { vertical-align: middle; height: 24px; width: 24px;
}
.historyTimeline ul.timePoints li.small.s4 .timePointName { line-height: 24px; font-size: 10.08px;
}
.historyTimeline ul.timePoints li .timePointInfo { left: 50%; width: 12em; bottom: 100%; text-align: left; position: absolute; margin: 0 -6em 50px; background: transparent; font-family: "AdobeFanHeitiStd-Bold","微軟正黑體";
}
.historyTimeline ul.timePoints li .timePointInfo .title { height: 1.429em; padding: 10px 20px; font-size: 1.143em; font-weight: bolder; line-height: 1.429em; background: rgba(255, 255, 255, 0.5); -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0; color: #FFFFFF;
}
.historyTimeline ul.timePoints li .timePointInfo > i { opacity: 0.75; border-color: #FFFFFF transparent; border-width: 16px 16px 0 16px; border-style: solid; position: absolute; margin-left: -16px; display: block; bottom: -16px; left: 50%;
}
.historyTimeline ul.timePoints li .timePointInfo .info { font-size: 0.75em; padding: 10px 20px; color: #444444; background: #FFFFFF; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0; border-radius: 0 0 5px 5px;
}
Timeline, description - Script Codes
Timeline, description - Script Codes
Home Page Home
Developer Alan Mok | Aki Isamu
Username mok20123
Uploaded July 28, 2022
Rating 3
Size 3,693 Kb
Views 32,384
Do you need developer help for Timeline, description?

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!

Alan Mok | Aki Isamu (mok20123) Script Codes
Name
Search interface
ContextMenu.js
ImageGallery.js, a map img gallery adapter
Div Gallery
Logo Animation
Swipe as the home screen.
Mok20123 Logo Animation
ParseURLParams js
No Game No Life Logo Animation
Useless - HK Cyberport location
Create amazing captions 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!