...
HTML |
---|
<style>
#aie-banner { display: flex; }
#aie-banner .auto-cursor-target { display: flex; flex-direction: column; width: 550px; }
.wiki-content #aie-banner .confluence-embedded-file-wrapper .confluence-embedded-image[height], .wiki-content #aie-banner .confluence-embedded-file-wrapper .confluence-embedded-image[width] { max-width: 95%; height: auto; }
.header-nav-wrap { flex-direction: column; width: calc(100% - 590px); display: flex; justify-content: center; }
.header-nav-wrap ul { list-style: none; padding: 0 5px; }
.header-nav-wrap li { display: inline-block;line-height: 41px; }
.header-nav-wrap .header-nav .nav-button {
background-color: #00afd7;
padding: 6px 12px 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
font-weight: 500;
font-size: 18px;
margin-left: auto;
margin-right: 0;
}
.header-nav-wrap .nav-button:hover { background-color: #84bd00; }
.header-nav-wrap .nav-button.active { background-color: #84bd00; }
@media (max-width:992px) {
#aie-banner { display: block; }
#aie-banner .auto-cursor-target { width: unset; }
.header-nav-wrap { width: 95%; padding: 20px; }
}
</style>
<div style="background-color: #1A202C;" id="aie-banner-wrap" class="conf-macro output-block" data-hasbody="true" data-macro-name="div">
<div id="aie-banner">
<p class="auto-cursor-target">
<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">
<a href="https://it.aie.edu/wiki/display/PORTFOLIO/AIE+Institute+-+2024+Courses"><img class="confluence-embedded-image" height="150" src="/wiki/download/attachments/169247128/AIEI_Banner.png?api=v2"></a>
</span>
</p>
<div class="header-nav-wrap">
<div class="header-nav">
<ul>
<li><a href="https://it.aie.edu/wiki/display/PORTFOLIO/AIE+Institute+-+2024+Courses" class="nav-button active">Home</a></li>
<li><a href="https://it.aie.edu/wiki/display/PORTFOLIO/Contact+IT+Service+Desk+-+AIEI" class="nav-button">IT Support</a></li>
</ul>
</div>
</div>
</div>
</div> |
...