_layouts/portfolio-landing.html in hardpool-flat-1.0.0 vs _layouts/portfolio-landing.html in hardpool-flat-2.0.0
- old
+ new
@@ -1,40 +1,40 @@
---
layout: default
---
<!-- banner start -->
{%- assign banners = site.posts | where: "categories", "banner" | slice: 0, 4 -%}
-<div class="container-fluid bg-grad mb-5">
+<div class="container-fluid bg-grad mb-5 pb-3 pb-md-0 px-0">
<div class="container">
<div id="mainbanner" class="carousel slide carousel-fade banner-carousel" data-ride="carousel">
- <ol class="carousel-indicators">
+ <ol class="carousel-indicators d-none d-md-flex">
{%- for post in banners -%}
<li data-target="#mainbanner" data-slide-to="{{ forloop.index | minus: 1 }}" {% if forloop.first %}class="active"{% endif %}></li>
{%- endfor -%}
</ol>
<div class="carousel-inner">
{%- for post in banners -%}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<div class="row">
- <div class="col-9 p-0">
- <a href="{{ post.url }}"><div class="img-43" style="background-image:url('{{ post.img_h }}')"></div></a>
+ <div class="col-md-9 p-0">
+ <a href="{{ post.url }}"><div class="img-43 gtm-landing-banner" data-title="{{ post.title }}" style="background-image:url('{{ post.img_h }}')"></div></a>
<!-- <img src="{{ post.img_h }}" class="d-block w-100" alt="{{ post.title }}"> -->
</div>
- <div class="col-5 p-0 overlap-right d-flex align-items-center h-100">
- <div>
- <div class="p-3 bnr-wrapper">
+ <div class="col-md-5 p-0 overlap-right position-relative d-flex align-items-center h-100">
+ <div class="text-center text-md-left">
+ <div class="py-1 px-4 py-md-3 px-md-3 bnr-wrapper text-left">
<h2>{{ post.title }}</h2>
- <p>{{ post.excerpt | strip_html | truncate: 150 }}</p>
+ <p class="mb-0">{{ post.excerpt | strip_html | truncate: 150 }}</p>
</div>
- <a href="{{ post.url }}" class="btn btn-secondary float-right mt-3">View post</a>
+ <a href="{{ post.url }}" class="btn btn-secondary float-md-right mt-3 gtm-landing-banner" data-title="{{ post.title }}">View post</a>
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
- <div class="carousel-control-wrapper">
+ <div class="carousel-control-wrapper d-none d-md-block">
<a class="carousel-control-prev" href="#mainbanner" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mainbanner" role="button" data-slide="next">
@@ -50,17 +50,17 @@
<p class="section-heading"><span>My outfits</span></p>
{% assign thumbs = site.posts | slice: 0, 5 %}
<div class="container mb-5">
<div class="row sm-gutters">
{%- for post in thumbs -%}
- <div class="col">
+ <div class="col-4 col-md">
{%- if post.img_t contains 'insta_sc|' -%}
{%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
{%- else -%}
{%- assign t_url = post.img_t -%}
{%- endif -%}
- <div class="thumb-post" data-toggle="modal" data-target="#mdShop{{ forloop.index }}" style="background-image:url('{{ t_url }}')"></div>
+ <div class="thumb-post gtm-landing-shop" data-title="{{ post.title }}" data-toggle="modal" data-target="#mdShop{{ forloop.index }}" style="background-image:url('{{ t_url }}')"></div>
</div>
{%- endfor -%}
</div>
</div>
<!-- shop outfit start end -->
@@ -68,21 +68,21 @@
{%- assign featured = site.posts | where: "categories", "featured" -%}
<div class="container mb-5">
{%- for post in featured -%}
{%- assign ri = forloop.index | modulo: 2 -%}
<div class="row my-7 position-relative">
- <div class="col-7 {% if ri==0 %}order-2 offset-5{% endif %}">
- <a href="{{ post.url }}"><div class="img-34" style="background-image:url('{{ post.img_v }}')"></div></a>
+ <div class="col-md-7 {% if ri==0 %}order-md-2 offset-md-5{% endif %}">
+ <a href="{{ post.url }}"><div class="img-34 gtm-landing-featured" data-title="{{ post.title }}" style="background-image:url('{{ post.img_v }}')"></div></a>
<!-- <img src="{{ post.img_v }}" class="d-block w-100" alt="{{ post.title }}"> -->
</div>
- <div class="col-6 p-0 pt-3 {% if ri==0 %}overlap-left order-1{% else %}overlap-right{% endif %} d-flex align-items-center h-100">
+ <div class="col-md-6 p-md-0 pt-3 {% if ri==0 %}overlap-left order-md-1{% else %}overlap-right{% endif %} d-flex align-items-center h-100">
<div class="row">
- <div class="col-12">
- <a href="{{ post.url }}"><div class="img-43 img-overlap" style="background-image:url('{{ post.img_h }}')"></div></a>
+ <div class="col-md-12 d-none d-md-block">
+ <a href="{{ post.url }}"><div class="img-43 img-overlap gtm-landing-featured" data-title="{{ post.title }}" style="background-image:url('{{ post.img_h }}')"></div></a>
<!-- <img src="{{ post.img_h }}" class="d-block w-100 img-overlap" alt="{{ post.title }}"> -->
</div>
- <div class="col-10 mt-2 px-5 {% if ri==1 %}offset-2{% endif %}">
+ <div class="col-md-10 mt-md-2 px-5 {% if ri==1 %}offset-md-2{% endif %}">
<h2>{{ post.title }}</h2>
<p class="mb-2 outfits-info">
{%- assign unique_outfits = post.outfits | uniq -%}
{%- for outfit in unique_outfits -%}
<span class="px-2 text-primary">{{ outfit.title }}</span>
@@ -98,13 +98,13 @@
{%- if rio!=0 -%}{%- continue -%}{%- else -%}
{%- assign i1 = forloop.index0 | plus: 1 -%}
{%- assign i2 = forloop.index0 | plus: 2 -%}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<div class="row sm-gutters">
- <div class="col"><a href="{{ post.outfits[forloop.index0].link }}" target="_blank"><div class="thumb-post" style="background-image:url('{{ post.outfits[forloop.index0].img }}')"></div></a></div>
- <div class="col"><a href="{{ post.outfits[i1].link }}" target="_blank"><div class="thumb-post" style="background-image:url('{{ post.outfits[i1].img }}')"></div></a></div>
- <div class="col"><a href="{{ post.outfits[i2].link }}" target="_blank"><div class="thumb-post" style="background-image:url('{{ post.outfits[i2].img }}')"></div></a></div>
+ <div class="col"><a href="{{ post.outfits[forloop.index0].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[forloop.index0].title }} | {{ post.outfits[forloop.index0].link }}" style="background-image:url('{{ post.outfits[forloop.index0].img }}')"></div></a></div>
+ <div class="col"><a href="{{ post.outfits[i1].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[i1].title }} | {{ post.outfits[i1].link }}" style="background-image:url('{{ post.outfits[i1].img }}')"></div></a></div>
+ <div class="col"><a href="{{ post.outfits[i2].link }}" target="_blank"><div class="thumb-post gtm-shop-item" data-title="{{ post.outfits[i2].title }} | {{ post.outfits[i2].link }}" style="background-image:url('{{ post.outfits[i2].img }}')"></div></a></div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
@@ -119,10 +119,10 @@
</a>
</div>
</div>
{%- endif -%}
<!-- outfits carousel -->
- <a href="{{ post.url }}" class="btn btn-secondary mt-3">View post</a>
+ <a href="{{ post.url }}" class="btn btn-secondary mt-3 gtm-landing-featured" data-title="{{ post.title }}">View post</a>
</div>
</div>
</div>
</div>
{%- endfor -%}
\ No newline at end of file