sections

html and css hoizontal simple timeline section in foundation

Posted in sections
11407
3:33 am, March 29, 2022
 

html and css hoizontal simple timeline section in foundation

a horizontal simple timeline section example done in foundation grid with some custom styles.

This also uses the Lato Font quick install! So Quick!..  :P

Also works on responsive and mobile devices as it uses the grid and large-auto, so you can also add and remove items and it will resize. 

Here is a responsive demo, you can see how it stacks.

HTML

<section class="home-path-section">
	<div class='grid-container'>
		<div class="grid-x grid-padding-x">
			<div class="large-12 cell">
				<div class="home-path-title">My Timeline Title</div>
				<div class="home-path-text">A Nice Description of my Horizontal Timeline</div>
			</div>
		</div>

		<div class="grid-x">
			<div class="large-auto cell">
				<div class="home-path-box">
					<div class="home-path-line">
						<div class="home-path-dot">
						</div>
					</div>
					<div class="home-path-year">
						2022
					</div>
					<div class="home-path-box-text">
						I created this awesome timeline!
					</div>
				</div>
			</div>

			<div class="large-auto cell">
				<div class="home-path-box">
					<div class="home-path-line">
						<div class="home-path-dot">
						</div>
					</div>
					<div class="home-path-year">
						2021
					</div>
					<div class="home-path-box-text">
						Something else awesome happened,
					</div>
				</div>
			</div>

			<div class="large-auto cell">
				<div class="home-path-box">
					<div class="home-path-line">
						<div class="home-path-dot">
						</div>
					</div>
					<div class="home-path-year">
						2020
					</div>
					<div class="home-path-box-text">
						I was a few years younger then.
					</div>
				</div>
			</div>

			<div class="large-auto cell">
				<div class="home-path-box">
					<div class="home-path-line">
						<div class="home-path-dot">
						</div>
					</div>
					<div class="home-path-year">
						2019
					</div>
					<div class="home-path-box-text">
						I wish i had done more with my time
					</div>
				</div>
			</div>

			<div class="large-auto cell">
				<div class="home-path-box">
					<div class="home-path-line">
						<div class="home-path-dot">
						</div>
					</div>
					<div class="home-path-year">
						2018
					</div>
					<div class="home-path-box-text">
						Ah back in my day i added some text here
					</div>
				</div>
			</div>

		</div>
	</div>
</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
  .lato {
  font-family: 'Lato', sans-serif;
  }
  .home-path-section {
    padding:30px 0 50px 0;
  }
  .home-path-title {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    text-align: left;
    color: #262626;
    margin-bottom:10px;
  }
  .home-path-text {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 156%;
    color: #393939;
    margin-bottom:20px;
  }
  .home-path-box {
    text-align:center;
  }
  .home-path-line {
    margin:10px 0 20px 0;
    border-bottom:2px solid #373030;
    position:relative;
  }
  .home-path-dot {
    height:10px;
    width:10px;
    display:inline-block;
    margin:0 auto;
    border-radius: 10px;
    background:#373030;
    position:relative;
    top:12px;
  }
  .home-path-year {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 137.5%;
    text-align: center;
    color: #E32636;
    margin-bottom:10px;
  }
  .home-path-box-text {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-size: 16px;
    line-height: 137.5%;
    text-align: center;
    color: #373030;
  }

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.4/css/foundation.min.css" />
My Timeline Title
A Nice Description of my Horizontal Timeline
2022
I created this awesome timeline!
2021
Something else awesome happened,
2020
I was a few years younger then.
2019
I wish i had done more with my time
2018
Ah back in my day i added some text here
Posted in sections
11407
3:33 am, March 29, 2022

View Statistics
This Week
254
This Month
1065
This Year
3662

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in sections
slick slider section quick add subscribe to newsletter section example four box section template in foundation with classes find and replace (4 box) four box responsive section with all classes find and replace boxsection title foundation grid (4 box) two box responsive section with all classes find and replace boxsection title foundation grid (2 box) basic section item with foundation wrap and grid - single item in section html and css hoizontal simple timeline section in foundation responsive three box section with tabular data or table data stackable bio or biography list with portrait image title and text easy section wrap in foundation - 3 boxes responsive easy section wrap in foundation
Related Search Terms
sections http 24
sections timeline 70
sections kruxorcom 24
sections https 85
sections responsive 73
sections Mobile 84
sections foundation grid 78
sections Awesome 73
sections mobile 65
sections Responsive 75
sections weight 91
sections time 71
sections thing 70
sections text 83
sections stack 76
sections something 116
sections solid 71
sections order 76
sections nice 89
sections import 144
sections gif 82
sections display 60
sections border 81
sections block 72
sections api 104
sections added 67
sections Stack 90
sections Google 73
sections Display 72
sections Block 51
sections large 93
sections Install 87
sections install 76
sections create 81
sections awesome 68
sections google 79
sections view 87
sections simple 79
sections home 73
sections center 85
sections custom 77
sections height 65
sections Play 53
sections back 74
sections style 69
sections adding 76
sections Center 80
sections Height 76
sections play 65
sections Custom 70
sections color 85
sections sections 101
sections fonts 108
sections foundation 102
sections kruxor 65
sections KruXoRcom 48
sections grid 81
sections the 77
sections this 86
sections font 73
sections Order 77
sections code 75
sections ajax 78
sections normal 83
sections sim 69
sections Sheet 70
sections Added 74
sections with 81
sections grid-x 75
sections work 91
sections sans 65
sections more 81
sections some 69
sections else 87
sections Lato font 62
sections css 135
sections href 77
sections lato 83
sections margin 83
sections html 102
sections sheet 74
sections CSS 78
sections item 90
sections SANS 65
sections section 85
sections lato font 81
sections here 77
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown
Random CSS Property

inline-size

The inline-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.
inline-size css reference