<link href="https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ruluko&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div class="header">
<!--Content before waves-->
<div class="inner-header flex column">
<h1>Welcome Aboard</h1>
<h2><span class="cop-name">the Jira & Confluence Community of Practice</span></h2>
<div id="actions">
<div class="action">
<div class="action-title">Request</div>
<div class="subactions">
<a href="https://confluence.vanguard.com/pages/viewpage.action?pageId=39667454" class="subaction">Service Center</a>
<a href="https://confluence.vanguard.com/pages/viewpage.action?pageId=424323129" class="subaction">Request and Vote for Outcomes & Add-Ons</a>
</div>
</div>
<a href="/wiki/plugins/servlet/ac/biz.artemissoftware.confluence.html.HtmlMacro-d/html-macro-config">Visit W3Schools</a>
<div class="action">
<div class="action-title">Learn</div>
<div class="subactions">
<a href="https://confluence.vanguard.com/display/JCCP/Atlassian+Cloud" class="subaction">Atlassian Cloud</a>
<a class="subaction training-center" href="https://confluence.vanguard.com/x/hhepAQ">Training Center</a>
<a class="subaction field-of-use" href="https://confluence.vanguard.com/x/qWKYL">Future Roadmap</a>
<a class="subaction field-of-use" href="https://confluence.vanguard.com/x/t7OaAQ">Field of Use</a>
</div>
</div>
<div class="action">
<div class="action-title">Chat</div>
<div class="subactions">
<a class="subaction chat-with-us" href="https://teams.microsoft.com/l/team/19%3afda472702f1a43b29f1b37d5ca2435b7%40thread.tacv2/conversations?groupId=fef09597-0892-4e11-8800-4ec3b88352b5&tenantId=d3a74ac8-efe4-4fe8-b707-b1bf8c6a25bd">Chat with us on Teams</a>
</div>
</div>
</div>
</div>
<div>
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use>
</g>
</svg>
</div>
</div>
<style>
.page-metadata, #title-text { display: none; }
.header {
position: relative;
margin-top: 60px !important;
background: linear-gradient(60deg, #37649c 0%, #17687e 100%);
}
.header h1 {
color: #fff;
font-weight: 100;
font-size: 5.6em;
line-height: 40px;
margin: 0px;
font-family: "Ruluko";
}
.header h2 {
color: #eee;
font-weight: 100;
font-size: 2em;
margin: 0px;
}
.header h2 .cop-name {
font-family: 'Satisfy', cursive;
font-size: 1.1em;
color: #e2cb89;
}
.header p {
letter-spacing: 1px;
font-size: 16px;
color: #333333;
margin: 0px;
color: #eee;
}
.header #actions {
display: flex;
width: 90%;
justify-content: space-evenly;
}
.header #actions .action {
width: inherit;
margin: 50px 20px 0px 20px;
}
.header #actions .action .subactions a.subaction,
.header #actions .action div.action-title {
display: block;
background-color: rgba(0,0,0,0.13);
text-align: center;
transition: background-color 0.3s;
font-family: 'Arima Madurai', 'Calibri Light', sans-serif;
text-decoration: none;
border-radius: 2px;
font-weight: 500;
color: #fff;
}
.header #actions .action > div.action-title {
font-size: 1.5em;
padding: 27px 20px;
}
.header #actions .action .subactions { visibility: hidden; }
.header #actions .action .subactions a.subaction {
padding: 12px 0px;
margin: 6px 0px;
background-color: rgba(0,0,0,0.13);
color: #fff !important;
font-size: 1.2em;
}
.header #actions .action:hover > div.action-title {
background-color: rgba(0,0,0,0.4);
text-decoration: none;
cursor: initial;
transition: background-color 0.3s;
}
.header #actions .action:hover .subactions {
visibility: visible;
}
.header #actions .action .subactions a.subaction:hover {
background-color: rgba(0,0,0,0.4);
cursor: pointer;
transition: background-color 0.3s;
}
.inner-header {
height: 55vh;
width: 100%;
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.flex.column {
flex-direction: column;
}
.waves {
position: relative;
width: 100%;
height: 20vh;
margin-bottom: -7px;
}
.content {
position: relative;
height: 20vh;
text-align: center;
background-color: white;
}
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0px, 0px);
}
100% {
transform: translate3d(85px, 0px, 0px);
}
}
</style>
<script>
setTimeout(function(){$("#comments-section").remove();},500);
var isTeams = navigator.userAgent.toLowerCase().indexOf("teams/") > -1;
if(isTeams) {
$(".chat-with-us").replaceWith("<a class='subaction' href='#'>Go to the Posts tab to chat with us</a>");
}
</script> | 
