149 lines
4.7 KiB
Plaintext
149 lines
4.7 KiB
Plaintext
<section class="homepage-topics np-max-width np-subpage-container">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="np-section-header">Explore Courses by Category</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="category-cards">
|
|
{% for category in categories.in_catalog %}
|
|
{% assign category_name = category.name | downcase %}
|
|
{% if category_name != "featured" and category_name != "articles" %}
|
|
{% assign cat_image = "" %}
|
|
|
|
{% if category_name == "customer perception" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
|
|
{% elsif category_name == "shopper behavior" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
|
|
{% elsif category_name == "insights dashboard" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
|
|
{% elsif category_name == "report builder" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
|
|
{% elsif category_name == "apis" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
|
|
{% elsif category_name == "know your store" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
|
|
{% elsif category_name == "metrics" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
|
|
{% elsif category_name == "channel performance" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
|
|
{% elsif category_name == "know your customer" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
|
|
{% elsif category_name == "advanced" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
|
|
{% elsif category_name == "beginner" %}
|
|
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
|
|
{% endif %}
|
|
|
|
<a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
|
|
{% comment %} {% if cat_image %}
|
|
<img class="category-card-image" src="{{cat_image}}" />
|
|
{% endif %} {% endcomment %}
|
|
{% comment %} <div class="category-card-content">
|
|
{{category.name}}
|
|
</div> {% endcomment %}
|
|
{{category.name}}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.homepage-topics {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.category-cards {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.category-card {
|
|
border-radius:30px;
|
|
border:2px solid #3c228a;
|
|
background-color: #3c228a;
|
|
color: #fff;
|
|
width:100%;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
text-align:center;
|
|
margin-bottom:16px;
|
|
padding:16px;
|
|
font-weight:700;
|
|
transition:all 0.2s;
|
|
}
|
|
|
|
.category-card:hover {
|
|
background-color: #13014a;
|
|
}
|
|
|
|
.category-card-image {
|
|
max-width:80px;
|
|
}
|
|
|
|
.category-card-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
@media (min-width:500px) {
|
|
.category-card {
|
|
width:calc(50% - 16px);
|
|
margin:0 16px 32px;
|
|
}
|
|
|
|
.category-card:nth-child(odd) {
|
|
margin-left:0;
|
|
}
|
|
|
|
.category-card:nth-child(even) {
|
|
margin-right:0;
|
|
}
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.category-card {
|
|
width:calc(33.33% - 22px);
|
|
}
|
|
|
|
.category-card:nth-child(even),
|
|
.category-card:nth-child(odd) {
|
|
margin:0 16px 32px;
|
|
}
|
|
|
|
.category-card:nth-child(3n+1) {
|
|
margin-left:0;
|
|
}
|
|
|
|
.category-card:nth-child(3n+3) {
|
|
margin-right:0;
|
|
}
|
|
}
|
|
|
|
@media (min-width:992px) {
|
|
.category-card {
|
|
width:calc(25% - 24px);
|
|
}
|
|
|
|
.category-card:nth-child(3n+3) {
|
|
margin-right:16px;
|
|
}
|
|
|
|
.category-card:nth-child(3n+1) {
|
|
margin-left:16px;
|
|
}
|
|
|
|
.category-card:nth-child(4n+1) {
|
|
margin-left:0;
|
|
}
|
|
|
|
.category-card:nth-child(4n+4) {
|
|
margin-right:0;
|
|
}
|
|
|
|
}
|
|
</style> |