Henlopen Conference: Difference between revisions
MWilliams264 (talk | contribs) No edit summary Tag: Reverted |
MWilliams264 (talk | contribs) No edit summary Tag: Reverted |
||
| Line 24: | Line 24: | ||
[[Henlopen Team Champions]] | [[Henlopen Team Champions]] | ||
< | <!DOCTYPE html> | ||
< | <html lang="en"> | ||
< | <head> | ||
< | <meta charset="UTF-8"> | ||
< | <title>Timeline</title> | ||
<style> | |||
body { | |||
font-family: Arial, sans-serif; | |||
} | |||
.timeline { | |||
position: relative; | |||
max-width: 800px; | |||
margin: 20px auto; | |||
padding: 10px 0; | |||
} | |||
< | .timeline::after { | ||
< | content: ''; | ||
< | position: absolute; | ||
< | width: 4px; | ||
< | background: #333; | ||
</ | top: 0; | ||
bottom: 0; | |||
left: 50%; | |||
margin-left: -2px; | |||
} | |||
.container { | |||
padding: 10px 40px; | |||
position: relative; | |||
width: 50%; | |||
} | |||
.left { | |||
left: 0; | |||
} | |||
.right { | |||
left: 50%; | |||
} | |||
.container::after { | |||
content: ''; | |||
position: absolute; | |||
width: 15px; | |||
height: 15px; | |||
right: -8px; | |||
background: white; | |||
border: 3px solid #333; | |||
top: 15px; | |||
border-radius: 50%; | |||
z-index: 1; | |||
} | |||
.right::after { | |||
left: -8px; | |||
} | |||
.content { | |||
padding: 15px; | |||
background: #f4f4f4; | |||
border-radius: 6px; | |||
} | |||
.date { | |||
font-weight: bold; | |||
color: #222; | |||
margin-bottom: 5px; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h2 style="text-align:center;">Membership Timeline</h2> | |||
<div class="timeline"> | |||
<!-- Entry 1 --> | |||
<div class="container left"> | |||
<div class="content"> | |||
<div class="date">Origin: 2005<br>Left: 2012</div> | |||
<h3>School A</h3> | |||
<p>Joined as a founding member. Competed in all divisions.</p> | |||
</div> | |||
</div> | |||
<!-- Entry 2 --> | |||
<div class="container right"> | |||
<div class="content"> | |||
<div class="date">Origin: 2010<br>Left: Present</div> | |||
<h3>School B</h3> | |||
<p>Still an active member organization.</p> | |||
</div> | |||
</div> | |||
<!-- Entry 3 --> | |||
<div class="container left"> | |||
<div class="content"> | |||
<div class="date">Origin: 2015<br>Left: 2019</div> | |||
<h3>School C</h3> | |||
<p>Short-term member during conference expansion.</p> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
</html> | |||
[[Conferences | Return to Conferences Page]] | [[Conferences | Return to Conferences Page]] | ||