<div style="margin-top: -40px;">
<header style="margin-top: -40px;">
<div class="sjc-omnibar">
<nav class="navbar">
<a class="navbar-brand" href="https://stjude.cloud">
<span class="logo"></span>
</a>
<a class="sjc-title" href="https://stjude.cloud">St. Jude Cloud</a>
<span class="portal-title">
App
</span>
<ul class="nav global-icons">
<li class="nav-item user-dropdown dropdown">
<a class="nav-link dropdown-toggle profile-dropdown-toggle" href="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Info">
<span class="user-icon"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown-menu" aria-labelledby="profile-dropdown-toggle">
<ul class="list-unstyled">
<li>
<a class="dropdown-item" href="">
Sign In
</a>
</li>
<li>
<a class="dropdown-item" href="">
Create Account
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle mega-dropdown-toggle" href="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="St. Jude Cloud Mega Menu">
<div class="nav-menu-icon"></div>
</a>
<div class="dropdown-menu mega-dropdown-menu" aria-labelledby="mega-dropdown-toggle" id="dropdown-main">
<div class="container mega-menu-container">
<div class="row">
<div class="col-md-3 order-md-2 mega-dropdown-col">
<div class="mega-menu-title">
Research Domains
</div>
<ul class="list-unstyled">
<li>
<a href="https://stjude.cloud/research-domains/pediatric-cancer">Pediatric Cancer</a>
</li>
<li>
<a href="https://stjude.cloud/research-domains/cancer-survivorship">Cancer Survivorship</a>
</li>
<li>
<a href="https://stjude.cloud/research-domains/non-cancerous-diseases">Non-cancerous Diseases</a>
</li>
</ul>
</div>
<div class="col-md-3 order-md-3 mega-dropdown-col">
<div class="mega-menu-title">
Apps
</div>
<ul class="list-unstyled">
<li>
<a href="https://platform.stjude.cloud" class="app-title">
<img class="app-title__icon" src="../../assets/images/icon-genomics-platform.png" alt="Genomics Platform Icon" />
<span>
Genomics Platform
<div class="genomics-platform-subtext">Data & Tools</div>
</span>
</a>
</li>
<li>
<a href="https://models.stjude.cloud" class="app-title">
<img class="app-title__icon" src="../../assets/images/icon-model-systems.png" alt="Model Systems Icon" />
<span>
Model Systems
</span>
</a>
</li>
<li>
<a href="https://pecan.stjude.cloud/" class="app-title">
<img class="app-title__icon" src="../../assets/images/icon-pecan.png" alt="PeCan Icon" />
<span>
PeCan
</span>
</a>
</li>
<li>
<a href="https://viz.stjude.cloud" class="app-title">
<img class="app-title__icon" src="../../assets/images/icon-viz.png" alt="Visualization Community Icon" />
<span>
Visualization Community
</span>
</a>
</li>
<li>
<a href="https://stjude.cloud/apps" class="text-primary">
View All Apps
</a>
</li>
</ul>
</div>
<div class="col-md-3 order-md-1 mega-dropdown-col d-flex">
<div class="featured-study">
<a href="https://stjude.cloud/studies/clinical-genomics">
<img class="featured-study__image" src="../../assets/images/featured-study.jpg" alt="Featured Study Image" />
</a>
<div>
<div class="featured-study__title">Featured Study</div>
<ul class="list-unstyled">
<li>
<a href="https://stjude.cloud/studies/clinical-genomics">
Real-time Clinical Genomics
</a>
</li>
<li>
<a href="https://stjude.cloud/studies" class="text-primary">
View All Studies
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 order-md-4 mega-dropdown-col">
<div class="mega-menu-title">
Support
</div>
<ul class="list-unstyled">
<li>
<a href="https://university.stjude.cloud/docs/" target="_blank" rel="noopener noreferrer">Help Guides</a>
</li>
<li>
<a href="https://university.stjude.cloud/docs/faq/" target="_blank" rel="noopener noreferrer">FAQs</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
<nav class="navbar navbar-expand-md sjc-subnav">
<div class="sub-menu-text">
Sub Menu
</div>
<a class="navbar-toggler collapsed" role="button" data-toggle="collapse" data-target="#sj-subnav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="nav-menu-icon bg-secondary"></div>
</a>
<div class="collapse navbar-collapse" id="sj-subnav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 3</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="content-main">
<div class="container-fluid jumbotron py-4 mb-4 py-5 bg-secondary rounded-0">
<div class="container">
<h2 class="text-white">Layout Example</h2>
</div>
</div>
<div class="container py-5">
<h3>Ready to start building apps within St. Jude Cloud?</h3>
<p>The guidelines below outline the brand standards for building St. Jude Cloud applications, including global
elements (such as header and footer), colors, fonts, etc.</p>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-6 col-lg-3 col-md-4 offset-xl-0 offset-lg-5 offset-md-4 offset-3 logo-container">
<a class="navbar-brand" href="https://stjude.cloud">
<span class="logo"></span>
</a>
<a class="sjc-title" href="https://stjude.cloud">St. Jude Cloud</a>
</div>
<div class="col-md-3 col-6 offset-xl-0 offset-md-2 footer-about">
<h6>About</h6>
<ul>
<li>
<a href="https://stjude.cloud" title="St. Jude Cloud Home">Home</a>
</li>
<li>
<a href="https://talent.stjude.org/data-sciences/jobs" title="Careers">Careers</a>
</li>
<li>
<a href="https://stjude.cloud/privacy-policy" title="Privacy Policy">Privacy Policy</a>
</li>
<li>
<a href="https://stjude.cloud/terms-of-use" title="Terms of Use">Terms of Use</a>
</li>
</ul>
</div>
<div class="col-md-3 col-6 offset-xl-0 offset-md-2 footer-apps">
<h6>Apps</h6>
<ul>
<li>
<a href="https://platform.stjude.cloud" title="Genomics Platform">Genomics Platform</a>
</li>
<li>
<a href="https://models.stjude.cloud" title="Model Systems">Model Systems</a>
</li>
<li>
<a href="https://pecan.stjude.cloud" title="Pediatric Cancer Portal (PeCan)">Pediatric Cancer Portal (PeCan)</a>
</li>
<li>
<a href="https://viz.stjude.cloud" title="Visualization Community">Visualization Community</a>
</li>
</ul>
</div>
<div class="col-xl-3 col-lg-6 col-8 offset-xl-0 offset-lg-3 offset-2 footer-social">
<h6>Follow Us</h6>
<div class="d-flex justify-content-between">
<a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/stjuderesearch" class="fab fa-facebook social-icon" title="Facebook"></a>
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/StJudeResearch" class="fab fa-twitter social-icon" title="Twitter"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/stjuderesearch/" class="fab fa-instagram social-icon" title="Instagram"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/st-jude-childrens-research-hospital/" class="fab fa-linkedin social-icon" title="LinkedIn"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/user/MyStJude" class="fab fa-youtube social-icon" title="Youtube"></a>
</div>
</div>
</div>
</div>
<div class="sub-footer container-fluid">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-12 order-last">
<ul>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.stjude.org/legal/u-s-privacy-policy-statement.html" title="U.S. Privacy Policy Statement">Privacy</a>
<span>•</span>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.stjude.org/legal.html" title="Disclaimer / Registrations / Copyright Statement">Disclaimer / Registrations / Copyright</a>
<span>•</span>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.stjude.org/legal/linking-policy.html" title="Linking Policy">Linking</a>
<span>•</span>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.stjude.org/legal/notice-of-privacy-practices.html" title="Notice of Privacy Practices (HIPAA)">Privacy (HIPAA)</a>
<span>•</span>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.stjude.org/legal/notice-of-non-discrimination.html" title="Notice of Non-Discrimination">Non-Discrimination</a>
</li>
</ul>
</div>
<div class="col-xl-6 col-md-12 col-8 offset-md-0 offset-2">
<p>
© Copyright <script type="text/javascript">
document.write(new Date().getFullYear());
</script> <a href="https://www.stjude.org" title="St. Jude Children's Research Hospital" target="_blank">St. Jude Children's Research Hospital</a>, a not-for-profit, section 501(c)(3).</p>
</div>
</div>
</div>
</div>
</footer>
</div>
No notes defined.