|
|
| (20 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <div style=" display: flex; flex-direction: column; gap: 0; margin: 1em 0 ; position: relative;"><div style="display: flex; align-items: flex-start; gap: 16px; position: relative; padding-bottom: 24px;"><div style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0;"><div style="width: 12px; height: 12px; border -radius: 50%; background-color: var(--ooui-border-color-subtle, #a2a9b1); border: 2px solid var(--ooui-border-color-subtle, #a2a9b1) ; margin-top: 4px;"></div><div style="width: 2px; flex-grow: 1; background-color: var(--ooui-border-color-subtle, #a2a9b1); margin-top: 4px;"></div></div><div style="padding: 12px 18px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-radius: 6px; background-color: rgba(127, 127, 127, 0.04); flex- grow: 1;">< div style="font- weight: bold; font- size: 0.8em; opacity: 0.7; text- transform: uppercase;">{{{date1|Year / Date 1}}}</div><div style=" font-weight: bold; font- size: 1.05em; margin: 2px 0; ">{{{title1|First Event Title}}}</div><div style="font-size: 0.9em; opacity: 0.85; ">{{{desc1|Description of the first milestone or historical event goes here.}}}</div></div></div><div style="display: flex; align-items: flex- start; gap: 16px; position: relative; padding-bottom: 24px;"><div style="display: flex ; flex-direction: column; align-items: center; flex-shrink: 0;"><div style=" width: 12px; height: 12px; border- radius: 50%; background-color: var( --ooui-border-color-subtle, #a2a9b1); border: 2px solid var( --ooui-border-color-subtle, #a2a9b1) ; margin-top: 4px;"></div><div style="width: 2px; flex-grow: 1; background-color: var( --ooui-border-color-subtle, #a2a9b1); margin- top: 4px;"></div> </div><div style="padding: 12px 18px; border: 1px dashed var(--ooui-border-color-subtle, #a2a9b1); border-radius: 6px; background-color: rgba(127, 127, 127, 0.04); flex-grow: 1;"><div style=" font-weight: bold; font-size: 0. 8em; opacity: 0.7; text-transform: uppercase; ">{{{date2|Year / Date 2}}}</div><div style="font-weight: bold; font- size: 1. 05em; margin: 2px 0 ;">{{{title2|Second Event Title}}}</div><div style="font-size: 0 .9em; opacity: 0. 85;">{{{ desc2| Description of the second milestone or historical event goes here.}}}</div></div></div><div style=" display: flex; align- items: flex-start; gap: 16px; position: relative;"><div style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0; "><div style="width: 12px; height: 12px; border- radius: 50%; background- color: var(--ooui-border-color-subtle, #a2a9b1); border: 2px solid var(- -ooui-border-color-subtle, #a2a9b1); margin-top: 4px; "></div></div><div style="padding: 12px 18px; border: 1px dashed var( --ooui-border-color-subtle, #a2a9b1) ; border-radius: 6px; background -color: rgba( 127, 127, 127, 0. 04); flex-grow: 1; "><div style="font- weight: bold; font-size: 0.8em; opacity: 0 .7; text-transform: uppercase;">{{{ date3| Year / Date 3}}}</div> <div style="font-weight: bold; font-size: 1.05em; margin: 2px 0;">{{{title3|Third Event Title}}}</div>< div style="font- size: 0.9em; opacity: 0.85;">{{{desc3|Description of the final milestone or historical event goes here.}}}</div></div></div></div> | | <div style="margin: 1.5em 0; border: 1px solid var(--ooui-border-color-subtle, #a2a9b1); background-color: rgba(127, 127, 127, 0.04); font-family: inherit; overflow: hidden;"> |
| | <!-- HEADER BANNER --> |
| | <div style="background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%); padding: 24px 32px; color: #ffffff; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.15);"> |
| | <div style="display: flex; align-items: center; gap: 18px;"> |
| | <div style="flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));">{{{main_image|[[File:Information icon dark green.svg|48px|link=]]}}}</div> |
| | <div style="width: 4px; height: 32px; background-color: rgba(255, 255, 255, 0.4); flex-shrink: 0;"></div> |
| | <div> |
| | <div style="font-size: 1.4em; font-weight: bold; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.4);">{{{main_title|Starting a page}}}</div> |
| | </div> |
| | </div> |
| | <div style="font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.2); color: #d8f3dc; flex-shrink: 0;">{{{status_badge|Help & Docs}}}</div> |
| | </div> |
| | <!-- ADD YOUR CONTENT HERE --> |
| | </div> |
