diff options
Diffstat (limited to 'rannak/mangud/uliopilane/ajatelg/styles.css')
-rw-r--r-- | rannak/mangud/uliopilane/ajatelg/styles.css | 173 |
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; + } + +} |