ajatelg done, add to index

1 files changed, 173 insertions, 0 deletions

diff --git a/rannak/mangud/uliopilane/ajatelg/styles.css b/rannak/mangud/uliopilane/ajatelg/styles.css
index e69de29..5966c9b 100644
--- a/rannak/mangud/uliopilane/ajatelg/styles.css
+++ b/rannak/mangud/uliopilane/ajatelg/styles.css
@@ -0,0 +1,173 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
+html {
+  font-family: "Montserrat";
+}
+
+* {
+    margin: 0 !important;
+    padding: 0 !important;
+	box-sizing: border-box !important;
+}
+
+body{
+    background-color: #111 !important;
+}
+
+.pealkiri {
+    width: 100vw !important;
+}
+
+/* Green Btn */
+.moveOn{
+    display: inline-block;
+    border: none;
+    padding: 6px 12px;
+    margin-botton: 0;
+    font-size: 1rem;
+    font-weight: normal;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #4BB543;
+    color: white;
+}
+
+button:disabled{
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Left side Part */
+
+
+
+.list .list-item {
+    background-color: #1e1f22 !important;
+	color: white;
+    font-weight: bold;
+	height: 3rem;
+	border-radius: 8px !important;
+    cursor: pointer;
+    margin: 5px !important;
+}
+
+.list-item p {
+    font-size: .9rem;
+}
+
+.startBasket {
+	height: 100% !important;
+	min-height: 4rem;
+}
+
+
+/* Timeline css part*/
+
+.timelineContainer {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 0;
+}
+
+.timeline {
+  width: 80%;
+  height: auto;
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.timeline ul {
+  list-style: none;
+}
+
+.timeline ul li {
+  padding: 20px;
+  background-color: #1e1f22;
+  color: white;
+  margin-bottom: 20px;
+}
+
+.timeline ul li:last-child {
+  margin-bottom: 0;
+}
+
+.timeline-content .list {
+    background-color: #1e1f22 !important;
+	min-height: 4rem;
+	border-radius: 8px !important;
+    margin: 10px !important;
+    text-align: center !important;
+    vertical-align: middle;
+}
+
+.timeline-content .date {
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 10px;
+  letter-spacing: 2px;
+  color: #CFF8F8;
+}
+
+/* Responsivness */
+@media only screen and (min-width: 768px) {
+
+   /* Vertical line */
+  .timeline:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: gray;
+  }
+  .timeline ul li {
+    width: 50%;
+    position: relative;
+    margin-bottom: 50px;
+  }
+  .timeline ul li:nth-child(odd) {
+    float: left;
+    clear: right;
+    transform: translateX(-30px);
+    border-radius: 20px 0px 20px 20px;
+  }
+  .timeline ul li:nth-child(even) {
+    float: right;
+    clear: left;
+    transform: translateX(30px);
+    border-radius: 0px 20px 20px 20px;
+  }
+
+  /*Balls*/
+  .timeline ul li::before {
+    content: "";
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background-color: gray;
+    top: 0px;
+  }
+  .timeline ul li:nth-child(odd)::before {
+    transform: translate(50%, -50%);
+    right: -30px;
+  }
+  .timeline ul li:nth-child(even)::before {
+    transform: translate(-50%, -50%);
+    left: -30px;
+  }
+  .timeline-content .date {
+    position: absolute;
+    top: -30px;
+  }
+  .timeline ul li:hover::before {
+    background-color: aqua;
+  }
+
+}