style.css

 * {
     font-family: 'Roboto Slab';
     margin: 0 auto;
 }

 a {
     text-decoration: none;
 }

 section.header {
     text-align: center;
     height: calc(100vh - 3.7em);
     width: 100%;
 }

 section.header > .container {
     padding-top: 40vh;
     padding-bottom: 10vh;
 }

 #readMoreBtn {
     bottom: 5vh;
     position: fixed;
     padding-left: calc(50% - 25px);
 }

 section.content {
     padding-left: 5vw;
     padding-right: 5vw;
     min-height: calc(100vh - 3.7em - 10vh);
 }

 section.footers {
     text-align: center;
     padding-top: 2em;
     font-size: 0.7em;
     padding-bottom: 1em;
     color: rgb(136, 136, 136);
 }

 section.content h1 {
     text-align: center;
     color: #7d7d7d;
     border-width: 0 2px 0 2px;
     border-color: #7d7d7d;
     border-style: solid;
     width: 10em;
     margin-bottom: 2em;
 }

 section.content .des {
     text-align: center;
     color: #7d7d7d;
     margin-bottom: 2em;
     display: block;
     font-size: 0.8em;
 }

 section.content .des span {
     vertical-align: super;
     padding: 0 5px;
     font-size: 10px;
     font-weight: bold;
 }

 .point {
     min-width: 20px;
     height: 20px;
     background-color: #ffffff;
     border-radius: 100%;
     z-index: 2;
     border: 3px #7d7d7d solid;
     position: relative;
     margin-top: 10px;
 }

 .timeline {
     position: relative;
     margin: 0 auto;
     width: 90vw;
 }

 .timeline ul {
     padding: 0;
 }

 .timeline ul li {
     margin-bottom: 50px;
     list-style-type: none;
     display: flex;
     flex-direction: row;
 }

 .timeline ul li .content {
     width: 45vw;
 }

 .timeline ul li:nth-child(odd) .content {
     padding-left: 0;
 }

 .timeline ul li:nth-child(odd) .date {
     padding-right: 0;
 }

 .timeline ul li:nth-child(even) .content {
     padding-right: 0;
 }

 .timeline ul li:nth-child(even) .date {
     padding-left: 0;
 }

 .timeline ul li .date {
     width: 45vw;
     font-weight: normal;
 }

 .timeline ul li .date h4 {
     color: whitesmoke;
     font-size: 0.8em;
 }

 .timeline ul li .content h3 {
     padding: 10px 20px;
     background-color: #7d7d7d;
     margin-bottom: 0;
     text-align: center;
     color: white;
 }

 .timeline ul li .content h3 a {
     color: whitesmoke;
 }

 .timeline ul li .content h3 a span {
     vertical-align: super;
     padding-left: 5px;
     font-size: 0.5em;
 }

 .timeline ul li .content p {
     padding: 10px 10px;
     background-color: #ffffff;
     margin-top: 0;
     text-align: left;
     border-style: solid;
     border-color: #7d7d7d;
 }

 .timeline ul li .content p span.todo {
     margin-right: 5px;
     border-width: 2px;
     border-radius: 100%;
     border-color: #7d7d7d;
     border-style: dotted;
     width: calc(1em - 4px);
     display: inline-block;
     height: calc(1em - 4px);
     vertical-align: sub;
 }

 .timeline ul li .content p span.update {
     border-radius: 100%;
     width: 1em;
     display: inline-block;
     height: 1em;
     vertical-align: sub;
     margin-right: 5px;
     background-color: #7d7d7d;
 }

 .timeline ul li .content p span.attention {
     display: inline-block;
     border-left: 0.5em solid transparent;
     border-right: 0.5em solid transparent;
     border-bottom: 1em solid #7d7d7d;
     margin-right: 5px;
 }

 .timeline ul li:nth-child(even) {
     flex-direction: row-reverse;
 }

 .timeline ul li:nth-child(odd) .content p {
     margin-right: -12px;
     border-width: 0 0 2px 2px;
 }

 .timeline ul li:nth-child(even) .content p {
     margin-left: -12px;
     border-width: 0 2px 2px 0;
 }

 .timeline ul li:nth-child(odd) .content h3 {
     margin-right: -135px;
     border-top-left-radius: 10px;
     border-bottom-right-radius: 45px;
     border-top-right-radius: 45px;
     padding-right: 145px;
 }

 .timeline ul li:nth-child(even) .content h3 {
     margin-left: -135px;
     border-top-right-radius: 10px;
     border-bottom-left-radius: 45px;
     border-top-left-radius: 45px;
     padding-left: 145px;
 }

 .timeline ul li:nth-child(odd) .date h4 {
     float: left;
     padding: 14px 20px 0 13px;
 }

 .timeline ul li:nth-child(even) .date h4 {
     float: right;
     padding: 14px 13px 0 20px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     height: 100%;
     width: 2px;
     left: calc(45vw - 1px);
     background-color: #7d7d7d;
 }