Fixed timeline arrows
This commit is contained in:
parent
7b9bf5e0fd
commit
489785ed60
@ -514,7 +514,6 @@ section {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-top: 200px;
|
margin-top: 200px;
|
||||||
padding-left: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-flex-container {
|
.input-flex-container {
|
||||||
@ -526,30 +525,26 @@ section {
|
|||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
margin-left: 30px;
|
||||||
|
|
||||||
#timeline-left-arrow {
|
|
||||||
position: absolute;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#timeline-right-arrow {
|
#timeline-right-arrow {
|
||||||
width: fit-content;
|
width: 0px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 232px;
|
right: 24px;
|
||||||
left: 48px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
#timeline-left-arrow {
|
#timeline-left-arrow {
|
||||||
width: fit-content;
|
width: 0px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 198px;
|
right: 58px;
|
||||||
left: 600px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
@media (max-width: 740px) {
|
@media (max-width: 740px) {
|
||||||
#timeline-left-arrow {
|
#timeline-right-arrow {
|
||||||
left: calc(80vw);
|
right: calc(3vw);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -597,6 +592,7 @@ section {
|
|||||||
content: "<";
|
content: "<";
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
position: relative;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
.timeline-input::after {
|
.timeline-input::after {
|
||||||
|
@ -101,10 +101,9 @@
|
|||||||
<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">
|
||||||
|
<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="M15 18l-6-6 6-6"/></svg></div>
|
||||||
<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>
|
||||||
<div onclick="checkt('t1')" class="dot-info" data-description="1">
|
<div onclick="checkt('t1')" class="dot-info" data-description="1">
|
||||||
<span class="year">8/12 4:00pm</span>
|
<span class="year">8/12 4:00pm</span>
|
||||||
@ -130,6 +129,7 @@
|
|||||||
<span class="year">8/14 3:30pm</span>
|
<span class="year">8/14 3:30pm</span>
|
||||||
<span class="label">Awards Ceremony</span>
|
<span class="label">Awards Ceremony</span>
|
||||||
</div>
|
</div>
|
||||||
|
<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="M9 18l6-6-6-6"/></svg></div>
|
||||||
<div id="timeline-descriptions-wrapper">
|
<div id="timeline-descriptions-wrapper">
|
||||||
<div data-description="1">
|
<div data-description="1">
|
||||||
<h3>Opening Ceremony</h3>
|
<h3>Opening Ceremony</h3>
|
||||||
|
Loading…
Reference in New Issue
Block a user