Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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; }
.header-nav { margin-left: auto; margin-right: 0; }

@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>

...