<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Include the above in your HEAD tag -->
<!-- Hero section -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cCommunity_FullWidthImgBanner">
<div class="imgbanner" style="margin-left: -15px; margin-right: -15px; ">
<section class="inner-banner center" style="background-image: url('https://c.cs19.visual.force.com/resource/1520269627000/CommunityNewBanner')">
<div class="wrapper" data-aura-rendered-by="42:2;a"><h1 style="color:#fff; font-family: futura std medium, sans-serif;">The SSC is riding into the sunset on June 22, 2018.</h1>
<h5 style="color:#fff;font-weight: normal;font-size: 20px !important;padding-right: 10%;padding-left: 10%;margin-top: 20px;margin-bottom: 20px;">The ChannelAdvisor Community is officially replacing the SSC and we've got some awesome enhancements coming soon. Please update your bookmarks accordingly.</h5>
<center>
<a target="_blank" href="https://community.channeladvisor.com/s/" style="
font-family: 'Futura Std Medium', sans-serif;
text-transform: uppercase;
font-weight: normal;
font-style: normal;
font-size: 13px!important;
line-height: 16px;
border-radius: 25px;
padding: 7px 20px 10px 20px;
background: #e97924;
color: #ffffff!important;" class="button-default"> Visit the Community</a></center>
</div></section></div>
<section id="hero">
<div class="hero-heading">
<h4 style="font-family: futura std medium; text-align: center;">ChannelAdvisor's Community is Your Home for E-Commerce Success and Support.</h4>
<p style="text-align: center; font-size: 16px !important;margin-top: 20px;">ChannelAdvisor provides cloud-based e-commerce solutions that enable retailers and manufacturers to integrate, manage and optimize their merchandise sales across hundreds of online channels including Amazon, Google, eBay, and more. The ChannelAdvisor Community is the place to find answers about our e-commerce software products. Whether you are a novice at selling on-line or a long time retailer, we are here to help you reach your goals. The site offers online instructional help, strategic best practices, and forums to collaborate with other ChannelAdvisor users and access our award-winning technical support staff.</p>
</div>
<div class="row mgmt-links-wrapper">
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/alerts" target="_blank">
<div class="link-box">
<i class="fa fas fa-bell"></i>
<p>Alerts</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/ecommerce-strategy" target="_blank">
<div class="link-box">
<i class="fa fa-cogs"></i>
<p>E-Commerce Strategy</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/gettingstarted" target="_blank">
<div class="link-box">
<i class="fa fa-map-signs"></i>
<p>Getting Started</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/knowledge-articles" target="_blank">
<div class="link-box">
<i class="fa fa-book-open"></i>
<p>Knowledge Base</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/support-center" target="_blank">
<div class="link-box">
<i class="fa fa-users"></i>
<p>My Support Center</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<a href="https://community.channeladvisor.com/s/whats-new" target="_blank">
<div class="link-box">
<i class="fa fas fa-newspaper "></i>
<p>What's New</p>
</div>
</a>
</div>
</div>
</section>
<!-- ./Hero section -->
<!-- thank you Modal -->
<div class="modal fade text-center py-5" style="top:30px" id="thanksModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="https://sunlimetech.com/portfolio/sunlimeuikit/imgs/s.png" class="modal-img">
<h3 class="pt-5 mb-0 text-secondary">Thanks for your love and support!</h3>
<p class="pb-3 text-muted"><small>Hope that you enjoy it well! Check also our site</small></p>
<a role="button" class="btn btn-secondary text-white mb-3" href="https://www.sunlimetech.com" target="_blank">www.sunlimetech.com</a>
</div>
</div>
</div>
</div>
<!-- ./thank you Modal -->
@import url('https://fonts.googleapis.com/css?family=Tajawal');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.inner-banner {
background-color: rgba(0, 0, 0, 0.5);
height: 300px;
position: relative;
width: auto;
margin-left: 0;
margin-right: 0;
background-size: cover;
background-position: center;
overflow: hidden;
text-align: center;
}
.wrapper {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 75%;
z-index: 1;
}
a,
a:visited {
color: #ffffff !important;
webkit-transition: color 0.5s;
/* Safari */
transition: color 0.5s;
text-decoration: none;
}
a:hover,
a:focus {
webkit-transition: color 0.5s;
/* Safari */
transition: color 0.5s;
text-decoration: none;
}
#hero {
font-family: futura std book;
background: #fff;
padding: 20px 50px 41px;
color: #212529;
font-size: 1.4rem;
}
#hero .navbar, #search{
margin-bottom:70px;
}
#hero .navbar .navbar-nav .nav-item .nav-link {
text-decoration: none;
font-size: 20px;
padding: 0 20px;
}
#hero .hero-heading {
margin-bottom: 50px;
}
#hero .hero-heading h1 {
font-size: 60px;
}
#hero .mgmt-links-wrapper .link-box {
background: #e87d0d;
padding: 34px 10px;
text-align: center;
min-height: 150px;
margin-bottom: 10px;
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;
height: 160px !important;
}
#hero .mgmt-links-wrapper a {
color: #ffffff !important;
}
#hero .mgmt-links-wrapper .link-box:hover {
background: #e87d0d;
-webkit-box-shadow: 0px 5px 8px 0px rgb(79, 91, 97);
-moz-box-shadow: 0px 5px 8px 0px rgb(79, 91, 97);
box-shadow: 0px 5px 8px 0px rgb(79, 91, 97);
}
#hero .mgmt-links-wrapper .link-box i {
font-size: 40px;
margin-bottom: 12px;
}
#hero .mgmt-links-wrapper .link-box p {
font-size: 18px;
margin-bottom: 0;
font-family: futura std medium;
}''
.navbar-toggler {
background-color: white;
border: 1px solid white;
}
#hero .search-from{
height: 85px;
font-size: 35px;
}
.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
.modal-img{
margin-top: -85px;
width: 33%;
border: 5px solid white;
border-radius: 50%;
padding: 5px;
background: #6c757d;
}
@media (max-width: 767px) {
#hero{
padding:20px 20px 40px
}
#hero .hero-heading h1{
font-size:30px;
}
}
$(window).on('load', function() {
$('#thanksModal').modal('show');
});
$(function() {
$("#search").addClass("d-none");
});
$(".toggle-search").click(function() {
$("#search").removeClass("d-none");
$("#search").addClass("d-block slideDown");
$(".navbar").removeClass("d-flex slideDown");
$(".navbar").addClass("d-none");
});
$(".hide-search").click(function() {
$("#search").removeClass("d-block slideDown");
$(".navbar").addClass("d-flex slideDown");
$("#search").addClass("d-none");
});
