summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/ajatelg/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/ajatelg/styles.css')
-rw-r--r--rannak/mangud/uliopilane/ajatelg/styles.css173
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;
+ }
+
+}