Simple Responsive Timeline



Bố cục dòng thời gian dọc đáp ứng đơn giản trong HTML và CSS.

1. HTML

							

Simple Responsive Vertical Timeline Layout

1985

Born

2003

Graduated High School

2004

Started at Fox Valley Technical College (FVTC) in an Electrical Engineering program

2006

Changed at FVTC to Web Design & Development program

2007

Web Design Internship

started internship at company 1.

2008

IT Internship

Started internship at company 2

Got Married

Application Engineer

Started web design/dev job at company 2.

2012

First Child

Spouse and I welcomed our first daughter.

2015

Second Child

Spouse and I welcomed our second daughter.

2016

Lead Application Engineer

Promotion to mid-level role.

2018

Aerial/Circus Arts

Started taking classes to learn aerial silks, hoop, and hammock.

2019

2. CSS

							/* SCSS nhe anh em */

$color: skyblue;
$lineColor: hotpink;
$fontColor: #bbb;
$bgColor1: #222;
$bgColor2: #444;
$yearBgColor: #333;

$breakpoint: 700px;

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to bottom, $bgColor1, $bgColor2);
  color: $fontColor;
  padding: 1rem;
  font-family: 'Playfair Display', serif;
}

h1 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
}

.timeline {
  position: relative;
  padding: 1rem;
  margin: 0 auto;
  max-width: 1300px;
  
  &:before {
    content: '';
    position: absolute;
    height: 100%;
    border: 1px solid $lineColor;
    right: 40px;
    top: 0;
  }
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  
  @media screen and (min-width: $breakpoint) {
    padding: 2rem;
    &:before {
      left: calc(50% - 1px);
      right: auto;
    }
  }
}

.timeline__item {
  
  padding: 1rem;
  border: 2px solid $lineColor;
  border-image: linear-gradient(to right, $color 0%, $lineColor 100%);
  border-image-slice: 1;
  position: relative;
  margin: 1rem 3rem 1rem 1rem;
  clear: both;
  
  &:after,
  &:before {
    content: '';
    position: absolute;
  }
  
  &:before {
    right: -10px;
    top: calc(50% - 5px);
    border-style: solid;
    border-color: $lineColor $lineColor transparent transparent;
    border-width: 10px;
    transform: rotate(45deg);
  }
  
  @media screen and (min-width: $breakpoint) {
    width: 44%;
    margin: 1rem;
    
    &:nth-of-type(2n) {
      float: right;
      margin: 1rem;
      border-image: linear-gradient(to right, $lineColor 0%, $color 100%);
      border-image-slice: 1;

      &:before {
        right: auto;
        left: -10px;
      border-color:transparent transparent $lineColor $lineColor;
      }
    }
  }
}

.timeline__item--year {
    text-align: center;
  max-width: 150px;
  margin: 0 48px 0 auto;
  font-size: 1.8rem;
  background-color: $yearBgColor;
  line-height: 1;
  border-image: none;
  padding: .5rem 1rem 1rem;
  
  &:before {
    display: none;
  }
  
  @media screen and (min-width: $breakpoint) {
    text-align: center;
      margin: 0 auto;
    
    &:nth-of-type(2n) {
      float: none;
      margin: 0 auto;
      border-image: none;
  
      &:before {
        display: none;
      }
    }
  }
}

.timeline__title {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5em;
}

.timeline__blurb {
  line-height: 1.5;
  font-size: 1rem;
  margin: .5rem 0 0;
}						

3. JAVASCRIPT

													

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.