Added timeline arrows

This commit is contained in:
James Dinh 2022-06-07 02:12:07 -07:00
parent e3a523d063
commit 7b9bf5e0fd
2 changed files with 30 additions and 0 deletions

View File

@ -514,6 +514,7 @@ section {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-top: 200px; margin-top: 200px;
padding-left: 50px;
} }
.input-flex-container { .input-flex-container {
@ -532,6 +533,26 @@ section {
float: left; float: left;
} }
#timeline-right-arrow {
width: fit-content;
height: fit-content;
position: relative;
top: 232px;
left: 48px;
}
#timeline-left-arrow {
width: fit-content;
height: fit-content;
position: relative;
top: 198px;
left: 600px;
}
@media (max-width: 740px) {
#timeline-left-arrow {
left: calc(80vw);
}
}
.timeline-input { .timeline-input {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -747,6 +768,13 @@ section {
text-align: left; text-align: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
#timeline-right-arrow {
display: none;
}
#timeline-left-arrow {
display: none;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.input-flex-container { .input-flex-container {

View File

@ -101,6 +101,8 @@
<div id="timeline"> <div id="timeline">
<h2 id="timeline-heading">Timeline</h2> <h2 id="timeline-heading">Timeline</h2>
<span class="caption">Click on each dot for more info</span> <span class="caption">Click on each dot for more info</span>
<div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
<div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
<div class="flex-parent"> <div class="flex-parent">
<div class="input-flex-container"> <div class="input-flex-container">
<input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked> <input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>