Spaces:
Running
Running
File size: 7,545 Bytes
a8624fc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | class CustomTimeline extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 4px;
background: linear-gradient(to bottom, #4f46e5, #ec4899);
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
border-radius: 4px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
.timeline-item::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: -12px;
background: linear-gradient(135deg, #4f46e5, #ec4899);
border: 3px solid #0f172a;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid rgba(255, 255, 255, 0.1);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.1);
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid rgba(255, 255, 255, 0.1);
border-width: 10px 10px 10px 0;
border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
}
.right::after {
left: -12px;
}
.timeline-content {
padding: 20px 30px;
background: rgba(30, 41, 59, 0.7);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.timeline-date {
color: #ec4899;
font-weight: 600;
margin-bottom: 8px;
}
.timeline-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
color: white;
}
.timeline-desc {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
@media screen and (max-width: 768px) {
.timeline::after {
left: 31px;
}
.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-item::before {
left: 60px;
border: medium solid rgba(255, 255, 255, 0.1);
border-width: 10px 10px 10px 0;
border-color: transparent rgba(255, 255, 255, 0.1) transparent transparent;
}
.left::after, .right::after {
left: 19px;
}
.right {
left: 0%;
}
}
</style>
<div class="timeline">
<div class="timeline-item left animate-on-scroll">
<div class="timeline-content">
<div class="timeline-date">2015</div>
<h3 class="timeline-title">Foundation</h3>
<p class="timeline-desc">SuperNova was founded by a group of passionate developers with a vision to push the boundaries of technology and create innovative solutions.</p>
</div>
</div>
<div class="timeline-item right animate-on-scroll">
<div class="timeline-content">
<div class="timeline-date">2017</div>
<h3 class="timeline-title">First Major Project</h3>
<p class="timeline-desc">Developed a groundbreaking AI solution for a Fortune 500 company, establishing our reputation in the industry.</p>
</div>
</div>
<div class="timeline-item left animate-on-scroll">
<div class="timeline-content">
<div class="timeline-date">2019</div>
<h3 class="timeline-title">Global Expansion</h3>
<p class="timeline-desc">Opened offices in three new countries and grew our team to over 50 world-class developers and engineers.</p>
</div>
</div>
<div class="timeline-item right animate-on-scroll">
<div class="timeline-content">
<div class="timeline-date">2021</div>
<h3 class="timeline-title">Education Initiative</h3>
<p class="timeline-desc">Launched our coding education platform to train the next generation of developers with cutting-edge courses.</p>
</div>
</div>
<div class="timeline-item left animate-on-scroll">
<div class="timeline-content">
<div class="timeline-date">2023</div>
<h3 class="timeline-title">Quantum Computing Division</h3>
<p class="timeline-desc">Established a new research division focused on quantum computing and its applications in software development.</p>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-timeline', CustomTimeline); |