Timeline: Difference between revisions

Revision as of 12:17, 7 May 2023

<style>

{

 box-sizing: border-box;

}

/* Set a background color */ body {

 background-color: #474e5d;
 font-family: Helvetica, sans-serif;

}

/* The actual timeline (the vertical ruler) */ .timeline {

 position: relative;
 max-width: 1200px;
 margin: 0 auto;

}

/* The actual timeline (the vertical ruler) */ .timeline::after {

 content: ;
 position: absolute;
 width: 6px;
 background-color: white;
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -3px;

}

/* Container around content */ .container {

 padding: 10px 40px;
 position: relative;
 background-color: inherit;
 width: 50%;

}

/* The circles on the timeline */ .container::after {

 content: ;
 position: absolute;
 width: 25px;
 height: 25px;
 right: -17px;
 background-color: white;
 border: 4px solid #FF9F55;
 top: 15px;
 border-radius: 50%;
 z-index: 1;

}

/* Place the container to the left */ .left {

 left: 0;

}

/* Place the container to the right */ .right {

 left: 50%;

}

/* Add arrows to the left container (pointing right) */ .left::before {

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 right: 30px;
 border: medium solid white;
 border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent white;

}

/* Add arrows to the right container (pointing left) */ .right::before {

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 left: 30px;
 border: medium solid white;
 border-width: 10px 10px 10px 0;
 border-color: transparent white transparent transparent;

}

/* Fix the circle for containers on the right side */ .right::after {

 left: -16px;

}

/* The actual content */ .content {

 padding: 20px 30px;
 background-color: white;
 position: relative;
 border-radius: 6px;

}

/* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timelime to the left */

 .timeline::after {
   left: 31px;
 }

/* Full-width containers */

 .container {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
 }

/* Make sure that all arrows are pointing leftwards */

 .container::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
 }

/* Make sure all circles are at the same spot */

 .left::after, .right::after {
   left: 15px;
 }

/* Make all right containers behave like the left ones */

 .right {
   left: 0%;
 }

} </style>

2017

Lorem ipsum..

2016

Lorem ipsum..

@@ Line 1: / Line 1: @@
-<timeline>
+<style>
-ImageSize  = width:700 height:1400
+* {
-PlotArea   = width: 578 height:1250 left:70 bottom:55
+   box-sizing: border-box;
-DateFormat = dd/mm/yyyy
+}
-Period     = from:01/07/2021 till:30/12/2023
-TimeAxis   = orientation:vertical
-ScaleMajor = unit:month increment:1 start:01/07/2021
-PlotData=
+/* Set a background color */
-   mark:(line,black)
+body {
-   at:01/07/2021 text:"MrLeRien opens a small homeserver with the help of Midou ."
+  background-color: #474e5d;
-   at:01/10/2021 text:"Mutahar.rocks obtained a powerful server"
+  font-family: Helvetica, sans-serif;
-   at:01/12/2021 text:"Odyssey joins Mutahar.rocks "
+}
-   at:01/02/2022 text:"Mutahar.rocks started hosting gameservers."
-   at:01/04/2022 text:"Mutahar.rocks' main server was forced to shut down."
+/* The actual timeline (the vertical ruler) */
-   at:01/05/2022 text:"Devnol comes in and joins Mutahar.rocks with his server, Helios."
+.timeline {
-   at:01/07/2022 text:"Months later, 3 new members, we're better than ever."
+  position: relative;
-</timeline>
+  max-width: 1200px;
+   margin: 0 auto;
+}
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+   content: '';
+  position: absolute;
+  width: 6px;
+  background-color: white;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -3px;
+}
+/* Container around content */
+.container {
+  padding: 10px 40px;
+  position: relative;
+  background-color: inherit;
+  width: 50%;
+}
+/* The circles on the timeline */
+.container::after {
+  content: '';
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  right: -17px;
+  background-color: white;
+  border: 4px solid #FF9F55;
+  top: 15px;
+  border-radius: 50%;
+   z-index: 1;
+}
+/* Place the container to the left */
+.left {
+  left: 0;
+}
+/* Place the container to the right */
+.right {
+   left: 50%;
+}
+/* Add arrows to the left container (pointing right) */
+.left::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+   width: 0;
+  z-index: 1;
+  right: 30px;
+  border: medium solid white;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent white;
+}
+/* Add arrows to the right container (pointing left) */
+.right::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  left: 30px;
+  border: medium solid white;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent white transparent transparent;
+}
+/* Fix the circle for containers on the right side */
+.right::after {
+  left: -16px;
+}
+/* The actual content */
+.content {
+  padding: 20px 30px;
+  background-color: white;
+  position: relative;
+   border-radius: 6px;
+}
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+  .timeline::after {
+    left: 31px;
+  }
+/* Full-width containers */
+   .container {
+    width: 100%;
+    padding-left: 70px;
+    padding-right: 25px;
+  }
+/* Make sure that all arrows are pointing leftwards */
+  .container::before {
+    left: 60px;
+    border: medium solid white;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent white transparent transparent;
+  }
+/* Make sure all circles are at the same spot */
+  .left::after, .right::after {
+    left: 15px;
+   }
+/* Make all right containers behave like the left ones */
+  .right {
+    left: 0%;
+  }
+}
+</style>
+ <div class="timeline">
+  <div class="container left">
+    <div class="content">
+      <h2>2017</h2>
+      <p>Lorem ipsum..</p>
+    </div>
+  </div>
+  <div class="container right">
+    <div class="content">
+      <h2>2016</h2>
+      <p>Lorem ipsum..</p>
+    </div>
+  </div>
+</div>