<nav class="navbar navbar-expand fixed-top" data-fixed="fixed-effect" data-scroll="scroll-effect">
<div class="container-xl">
<a class="navbar-brand"><img src="https://static.hongcdn.com/images/logo.png" class="img-fluid" /></a>
<div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav navbar-nav-scroll">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">System</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Theme</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Trends</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<img src="https://static.hongcdn.com/images/banner-02.jpg" class="img-fluid" />
<div>
<h2>Provide an agile, fast, and flexible foundation for your content.</h2>
<p>ZMCMS provides your team with the infrastructure needed to build a strong, attractive, and consistent customer experience across all channels. With a powerful NoCode toolkit and industry-leading content management capabilities, top brands trust ZMCMS to drive results.</p>
<h2>Provide an agile, fast, and flexible foundation for your content.</h2>
<p>ZMCMS provides your team with the infrastructure needed to build a strong, attractive, and consistent customer experience across all channels. With a powerful NoCode toolkit and industry-leading content management capabilities, top brands trust ZMCMS to drive results.</p>
<h2>Provide an agile, fast, and flexible foundation for your content.</h2>
<p>ZMCMS provides your team with the infrastructure needed to build a strong, attractive, and consistent customer experience across all channels. With a powerful NoCode toolkit and industry-leading content management capabilities, top brands trust ZMCMS to drive results.</p>
<h2>Provide an agile, fast, and flexible foundation for your content.</h2>
<p>ZMCMS provides your team with the infrastructure needed to build a strong, attractive, and consistent customer experience across all channels. With a powerful NoCode toolkit and industry-leading content management capabilities, top brands trust ZMCMS to drive results.</p>
</div>
.cms_copyright {
display: none;
}
.navbar {
transition-property: transform, background;
transition-duration: 0.6s;
transition-timing-function: ease;
}
.navbar-brand img {
padding: 10px 0;
max-width: 200px;
transition: max-width ease 0.3s;
}
.navbar .nav-link {
color: #fff;
transition: color ease 0.3s;
}
.fixed-effect {
background: #f2f2f2;
}
.fixed-effect .navbar-brand img {
max-width: 150px;
}
.fixed-effect.navbar .nav-link {
color: #000;
}
.scroll-effect {
transform: translateY(calc(-100% - 0px));
}
