Sandbox Jekyll documentation
About
Copy any custom block snippet below and paste it on your page to build your website easily.
Example 1
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
<div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
<figure class="rounded">
<img src="{{ page.about1.image }}" srcset="{{ page.about1.image2x }} 2x" alt="">
</figure>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-4 mb-3">{{ page.about1.title }}</h2>
<p class="lead fs-lg">{{ page.about1.lead }}</p>
<p class="mb-6">{{ page.about1.text }}</p>
<div class="row gx-xl-10 gy-6">
{% for feature in page.about1.features %}
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="/assets/img/icons/lineal/{{ feature.icon }}.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
</div>
<div>
<h4 class="mb-1">{{ feature.title }}</h4>
<p class="mb-0">{{ feature.text }}</p>
</div>
</div>
</div>
<!--/column -->
{% endfor %}
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># About Section 1
about1:
enable: true
image: /assets/img/photos/about7.webp
image2x: /assets/img/photos/[email protected]
title: "Who Are We?"
lead: "We are a digital and branding company that believes in the power of creative strategy and along with great design."
text: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et."
features:
- icon: target
title: "Our Mission"
text: "Dapibus eu leo quam ornare curabitur blandit tempus."
- icon: award-2
title: "Our Values"
text: "Aenean lacinia bibendum nulla sed consectetur."Example 2
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-12 align-items-center">
<div class="col-lg-6 position-relative">
<div class="btn btn-circle btn-primary pe-none position-absolute counter-wrapper flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">
<h3 class="text-white mb-1 mt-n2"><span class="counter counter-lg">20+</span></h3>
<p>Year Experience</p>
</div>
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-10 offset-md-2">
<figure class="rounded"><img src="{{ page.about2.image1 }}" srcset="{{ page.about2.image1_2x }} 2x" alt=""></figure>
</div>
<div class="col-md-12">
<figure class="rounded"><img src="{{ page.about2.image2 }}" srcset="{{ page.about2.image2_2x }} 2x" alt=""></figure>
</div>
</div>
</div>
<div class="col-md-6">
<figure class="rounded"><img src="{{ page.about2.image3 }}" srcset="{{ page.about2.image3_2x }} 2x" alt=""></figure>
</div>
</div>
</div>
<!--/column -->
<div class="col-lg-6">
<img src="/assets/img/icons/lineal/{{ page.about2.icon }}.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
<h3 class="display-5 mb-5">{{ page.about2.title }}</h3>
<p class="mb-7">{{ page.about2.text }}</p>
<div class="row counter-wrapper gy-6">
{% for stat in page.about2.stats %}
<div class="col-md-4">
<h3 class="counter text-primary">{{ stat.count }}</h3>
<p>{{ stat.label }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section># About Section 2
about2:
enable: true
icon: handshake
image1: /assets/img/photos/ab1.webp
image1_2x: /assets/img/photos/[email protected]
image2: /assets/img/photos/ab2.webp
image2_2x: /assets/img/photos/[email protected]
image3: /assets/img/photos/ab3.webp
image3_2x: /assets/img/photos/[email protected]
title: "We are a creative company that focuses on establishing long-term relationships with customers."
text: "Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula."
stats:
- count: 7518
label: "Completed Projects"
- count: 3472
label: "Satisfied Customers"
- count: 2184
label: "Expert Employees"Example 3
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<figure class="rounded"><img src="{{ page.about3.image }}" srcset="{{ page.about3.image2x }} 2x" alt="" /></figure>
<div class="row">
<div class="col-xl-10 mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top" data-image-src="{{ page.about3.overlay_image }}">
<div class="card-body p-9 p-xl-10">
<div class="row align-items-center counter-wrapper gy-4 text-center">
{% for stat in page.about3.stats %}
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">{{ stat.count }}</h3>
<p>{{ stat.label }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</section># About Section 3
about3:
enable: true
image: /assets/img/photos/about5.webp
image2x: /assets/img/photos/[email protected]
overlay_image: /assets/img/photos/bg3.webp
stats:
- count: 7518
label: "Completed Projects"
- count: 3472
label: "Satisfied Customers"
- count: 2184
label: "Expert Employees"
- count: 4523
label: "Awards Won"Example 4
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-6 position-relative order-lg-2">
<div class="shape bg-dot primary rellax w-16 h-20" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
<div class="overlap-grid overlap-grid-2">
<div class="item">
<figure class="rounded shadow"><img src="{{ page.about4.image1 }}" srcset="{{ page.about4.image1_2x }} 2x" alt=""></figure>
</div>
<div class="item">
<figure class="rounded shadow"><img src="{{ page.about4.image2 }}" srcset="{{ page.about4.image2_2x }} 2x" alt=""></figure>
</div>
</div>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-4 mb-3">{{ page.about4.title }}</h2>
<p class="lead fs-lg">{{ page.about4.lead }}</p>
<p class="mb-6">{{ page.about4.text }}</p>
<div class="row gy-3 gx-xl-8">
{% for feature in page.about4.features %}
<div class="col-xl-6">
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
<li><span><i class="uil uil-check"></i></span><span>{{ feature }}</span></li>
</ul>
</div>
{% endfor %}
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># About Section 4
about4:
enable: true
image1: /assets/img/photos/about2.webp
image1_2x: /assets/img/photos/[email protected]
image2: /assets/img/photos/about3.webp
image2_2x: /assets/img/photos/[email protected]
title: "We bring solutions to make life easier for our customers."
lead: "We are a creative company that focuses on establishing long-term relationships with customers."
text: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit."
features:
- "Aenean eu leo quam ornare curabitur blandit tempus."
- "Nullam quis risus eget urna mollis ornare donec elit."
- "Etiam porta sem malesuada magna mollis euismod."
- "Fermentum massa vivamus faucibus amet euismod."Example 5
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7 order-lg-2">
<figure><img class="w-auto" src="{{ page.about5.image }}" srcset="{{ page.about5.image2x }} 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="fs-15 text-uppercase text-line text-primary mb-3">{{ page.about5.subtitle }}</h2>
<h3 class="display-5 mb-7">{{ page.about5.title }}</h3>
<div class="accordion accordion-wrapper" id="accordionExample">
{% for item in page.about5.accordion_items %}
<div class="card plain accordion-item">
<div class="card-header" id="heading{{ forloop.index }}">
<button class="{% unless forloop.first %}collapsed{% endunless %}" data-bs-toggle="collapse"
data-bs-target="#collapse{{ forloop.index }}"
aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
aria-controls="collapse{{ forloop.index }}">{{ item.title }}</button>
</div>
<div id="collapse{{ forloop.index }}"
class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
aria-labelledby="heading{{ forloop.index }}"
data-bs-parent="#accordionExample">
<div class="card-body">
<p>{{ item.content }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<!--/.accordion -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># About Section 5
about5:
enable: true
image: /assets/img/illustrations/i2.webp
image2x: /assets/img/illustrations/[email protected]
subtitle: "Why Choose Us?"
title: "A few reasons why our valued customers choose us."
accordion_items:
- title: "Professional Design"
content: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel."
- title: "Top-Notch Support"
content: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel."
- title: "Header and Slider Options"
content: "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel."Example 6
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7">
<figure><img class="w-auto" src="{{ page.about6.image }}" srcset="{{ page.about6.image2x }} 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h3 class="display-4 mb-6 pe-xxl-6">{{ page.about6.title }}</h3>
<ul class="progress-list mt-3">
{% for item in page.about6.progress_items %}
<li>
<p>{{ item.label }}</p>
<div class="progressbar line {{ item.color }}" data-value="{{ item.value }}"></div>
</li>
{% endfor %}
</ul>
<!-- /.progress-list -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># About Section 6
about6:
enable: true
image: /assets/img/illustrations/i8.webp
image2x: /assets/img/illustrations/[email protected]
title: "We bring rapid solutions to make the life of our customers easier."
progress_items:
- label: "Marketing"
color: "blue"
value: 100
- label: "Strategy"
color: "yellow"
value: 80
- label: "Development"
color: "orange"
value: 85
- label: "Data Analysis"
color: "green"
value: 90Example 7
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
<div class="col-md-8 col-lg-6 position-relative">
<a href="{{ page.about7.video_url }}" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
<figure class="rounded"><img src="{{ page.about7.image }}" srcset="{{ page.about7.image2x }} 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h3 class="display-4 mb-3">{{ page.about7.title }}</h3>
<p class="lead fs-lg mb-6">{{ page.about7.description_before }} <span class="underline">{{ page.about7.description_highlight }}</span> {{ page.about7.description_after }}</p>
<ul class="progress-list">
{% for item in page.about7.progress_items %}
<li>
<p>{{ item.label }}</p>
<div class="progressbar line primary" data-value="{{ item.value }}"></div>
</li>
{% endfor %}
</ul>
<!-- /.progress-list -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># About Section 7
about7:
enable: true
video_url: /assets/media/movie.mp4
image: /assets/img/photos/about12.webp
image2x: /assets/img/photos/[email protected]
title: "Sandbox Brings Awesomeness"
description_before: "We have considered our solutions to"
description_highlight: "support every stage"
description_after: "of your growth."
progress_items:
- label: "Marketing"
value: 100
- label: "Strategy"
value: 80
- label: "Development"
value: 85Example 8
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center">
<div class="col-lg-6">
<div class="row gx-md-5 gy-5">
<div class="col-12">
<figure class="rounded mx-md-5"><img src="{{ page.about8.main_image }}" srcset="{{ page.about8.main_image2x }} 2x" alt=""></figure>
</div>
<div class="col-md-6">
<figure class="rounded"><img src="{{ page.about8.image2 }}" srcset="{{ page.about8.image2_2x }} 2x" alt=""></figure>
</div>
<div class="col-md-6">
<figure class="rounded"><img src="{{ page.about8.image3 }}" srcset="{{ page.about8.image3_2x }} 2x" alt=""></figure>
</div>
</div>
</div>
<div class="col-lg-6">
<h2 class="fs-16 text-uppercase text-muted mb-3">{{ page.about8.subtitle }}</h2>
<h3 class="display-3 mb-10">{{ page.about8.title_before }} <span class="underline-3 style-2 yellow">{{ page.about8.title_highlight }}</span> {{ page.about8.title_after }}</h3>
<div class="row gy-8">
{% for feature in page.about8.features %}
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="{{ feature.icon }}" class="svg-inject icon-svg icon-svg-xs solid-mono {{ feature.icon_color }} me-4" alt="" />
</div>
<div>
<h4 class="mb-1">{{ feature.title }}</h4>
<p class="mb-0">{{ feature.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section># About Section 8
about8:
enable: true
main_image: /assets/img/photos/g8.webp
main_image2x: /assets/img/photos/[email protected]
image2: /assets/img/photos/g9.webp
image2_2x: /assets/img/photos/[email protected]
image3: /assets/img/photos/g10.webp
image3_2x: /assets/img/photos/[email protected]
subtitle: "What Makes Us Different?"
title_before: "We bring"
title_highlight: "solutions"
title_after: "to make life easier for our customers."
features:
- title: "Creativity"
description: "Curabitur blandit lacus porttitor ridiculus mus."
icon: /assets/img/icons/solid/lamp.svg
icon_color: text-fuchsia
- title: "Innovative Thinking"
description: "Curabitur blandit lacus porttitor ridiculus mus."
icon: /assets/img/icons/solid/bulb.svg
icon_color: text-violet
- title: "Rapid Solutions"
description: "Curabitur blandit lacus porttitor ridiculus mus."
icon: /assets/img/icons/solid/puzzle.svg
icon_color: text-orange
- title: "Top-Notch Support"
description: "Curabitur blandit lacus porttitor ridiculus mus."
icon: /assets/img/icons/solid/headphone.svg
icon_color: text-greenExample 9
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-md-8 gy-10 align-items-center">
<div class="col-lg-6 offset-lg-1 order-lg-2 position-relative">
<figure class="rounded">
<img class="img-fluid" src="{{ page.about9.image }}" srcset="{{ page.about9.image2x }} 2x" alt="" />
</figure>
<div class="card shadow-lg position-absolute d-none d-md-block" style="top: 15%; left: -7%">
<div class="card-body py-4 px-5">
<div class="d-flex flex-row align-items-center">
<div>
<img src="{{ page.about9.stats_card.icon }}" class="svg-inject icon-svg icon-svg-sm solid-duo {{ page.about9.stats_card.icon_color }} me-3" alt="" />
</div>
<div>
<h3 class="fs-25 counter mb-0 text-nowrap">{{ page.about9.stats_card.counter }}</h3>
<p class="fs-16 lh-sm mb-0 text-nowrap">{{ page.about9.stats_card.label }}</p>
</div>
</div>
</div>
</div>
<div class="card shadow-lg position-absolute text-center d-none d-md-block" style="bottom: 10%; left: -10%;">
<div class="card-body p-6">
<div class="progressbar semi-circle {{ page.about9.progress_card.color }} mb-3" data-value="{{ page.about9.progress_card.value }}"></div>
<h4 class="mb-0">{{ page.about9.progress_card.title }}</h4>
</div>
</div>
</div>
<div class="col-lg-5">
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">{{ page.about9.subtitle }}</h2>
<h3 class="display-4 mb-4 me-lg-n5">{{ page.about9.title }}</h3>
<p class="mb-6">{{ page.about9.description }}</p>
<ul class="icon-list bullet-bg bullet-soft-primary">
{% for feature in page.about9.features %}
<li><i class="uil uil-check"></i>{{ feature.text }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section> # About Section 9
about9:
enable: true
image: /assets/img/photos/about27.webp
image2x: /assets/img/photos/[email protected]
stats_card:
icon: /assets/img/icons/solid/cloud-group.svg
icon_color: text-grape-fuchsia
counter: 25000+
label: Happy Clients
progress_card:
value: 80
color: fuchsia
title: Time Saved
subtitle: What Makes Us Different?
title: We make spending stress free so you have the perfect control.
description: Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus. Integer posuere erat a ante venenatis dapibus posuere velit.
features:
- text: Aenean eu leo quam. Pellentesque ornare.
- text: Nullam quis risus eget urna mollis ornare.
- text: Donec id elit non mi porta gravida at eget.Example 10
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
<div class="col-md-8 col-lg-6 mx-auto">
<div class="img-mask mask-1">
<img src="{{ page.about10.image }}" srcset="{{ page.about10.image2x }} 2x" alt="" />
</div>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-5 mb-5">{{ page.about10.title }}</h2>
<p class="mb-6">{{ page.about10.description }}</p>
<div class="row counter-wrapper gy-6">
{% for stat in page.about10.stats %}
<div class="col-md-4">
<h3 class="counter">{{ stat.value }}</h3>
<p>{{ stat.label }}</p>
</div>
{% endfor %}
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!-- /.row -->
<div class="row gx-md-8 gx-xl-12 gy-6 mt-8">
<div class="col-lg-4">
<h3>{{ page.about10.skills.title }}</h3>
<p>{{ page.about10.skills.description }}</p>
<ul class="progress-list">
{% for skill in page.about10.skills.items %}
<li{% if forloop.last %} class="mb-0"{% endif %}>
<p>{{ skill.name }}</p>
<div class="progressbar line soft-primary" data-value="{{ skill.value }}"></div>
</li>
{% endfor %}
</ul>
</div>
<!-- /column -->
<div class="col-lg-4">
<h3>{{ page.about10.features.title }}</h3>
<p>{{ page.about10.features.description }}</p>
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
{% for item in page.about10.features.items %}
<li><i class="uil uil-check"></i>{{ item.text }}</li>
{% endfor %}
</ul>
</div>
<!-- /column -->
<div class="col-lg-4">
<h3>{{ page.about10.process.title }}</h3>
{% for step in page.about10.process.steps %}
<div class="d-flex flex-row{% unless forloop.last %} mb-5{% endunless %}">
<div>
<span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5">
<span class="number fs-18">{{ forloop.index }}</span>
</span>
</div>
<div>
<h5 class="mb-1">{{ step.title }}</h5>
<p class="mb-0">{{ step.description }}</p>
</div>
</div>
{% endfor %}
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section># About Section 10
about10:
enable: true
image: /assets/img/photos/about29.webp
image2x: /assets/img/photos/[email protected]
title: Hi, I'm Julia, a documentary wedding and couples photographer currently working from and based in London.
description: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
stats:
- value: 500K+
label: Shots Taken
- value: 500+
label: Happy Clients
- value: 25
label: Awards Won
skills:
title: My Skills
description: Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna vel consectetur purus sit amet fermentum.
items:
- name: Photoshop
value: 100
- name: Final Cut
value: 80
- name: Motion Video
value: 85
- name: Manipulation
value: 75
features:
title: Why Choose Me?
description: Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.
items:
- text: Aenean eu leo quam pellentesque.
- text: Nullam quis risus eget urna mollis.
- text: Donec id elit non mi porta gravida.
- text: Fusce dapibus tellus ac commodo.
- text: Cras justo odio dapibus ac facilisis in.
process:
title: My Process
steps:
- title: Collect Ideas
description: Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.
- title: Data Analysis
description: Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.
- title: Finalize Product
description: Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.Example 11
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
<div class="col-md-8 col-lg-6 order-lg-2 mx-auto">
<div class="img-mask mask-2">
<img src="{{ page.about11.image }}" srcset="{{ page.about11.image2x }} 2x" alt="" />
</div>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-5 mb-3">{{ page.about11.title }}</h2>
<p class="lead fs-lg">{{ page.about11.lead }}</p>
{% for paragraph in page.about11.description %}
<p>{{ paragraph }}</p>
{% endfor %}
<a href="{{ page.about11.button.url }}" class="btn btn-primary rounded-pill mt-2">{{ page.about11.button.text }}</a>
</div>
<!--/column -->
</div>
<!-- /.row -->
<div class="row gx-md-8 gx-xl-12 mt-10 mt-md-13">
<div class="col-lg-4">
<h2 class="display-5 mb-3">{{ page.about11.process.title }}</h2>
<p>{{ page.about11.process.description }}</p>
</div>
<!-- /column -->
<div class="col-lg-8">
<div class="row gy-6 gx-md-8 gx-xl-12">
{% for step in page.about11.process.steps %}
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<span class="icon btn btn-circle btn-primary pe-none me-4">
<span class="number fs-18">{{ forloop.index }}</span>
</span>
</div>
<div>
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-0">{{ step.description }}</p>
</div>
</div>
</div>
<!--/column -->
{% endfor %}
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section> # About Section 11
about11:
enable: true
image: /assets/img/photos/about30.webp
image2x: /assets/img/photos/[email protected]
title: About Me
lead: I'm Caitlyn Sandbox, a photographer specializing in food, drink and product photography.
description:
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur.
button:
text: Learn More
url: "#"
process:
title: My Working Process
description: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus. Aenean eu leo quam.
steps:
- title: Concept
description: Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.
- title: Prepare
description: Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.
- title: Retouch
description: Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.
- title: Finalize
description: Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.Example 12
<!-- Your original HTML code here --> # About Section 12
about12:
enable: true
subtitle: "Why Choose Sandbox?"
title:
before: "Here are a few"
highlight: "reasons why"
after: "our customers choose the Sandbox app."
doodles:
top:
image: "/assets/img/svg/doodle3.svg"
position:
top: "-20%"
right: "-12%"
bottom:
image: "/assets/img/svg/doodle9.svg"
position:
bottom: "5%"
left: "-17%"
main_image: "/assets/img/photos/devices5.webp"
main_image2x: "/assets/img/photos/[email protected]"
features:
- title: "Scheduled Transactions"
description: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna."
icon: "/assets/img/icons/solid/calendar.svg"
bg_class: "bg-pale-grape"
- title: "Multiple Currencies"
description: "Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum."
icon: "/assets/img/icons/solid/currency.svg"
bg_class: "bg-pale-green"
- title: "Database Management"
description: "Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes."
icon: "/assets/img/icons/solid/server.svg"
bg_class: "bg-pale-pink"
- title: "Sync Between Devices"
description: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna."
icon: "/assets/img/icons/solid/devices.svg"
bg_class: "bg-pale-yellow"
- title: "Smart Search"
description: "Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum."
icon: "/assets/img/icons/solid/search.svg"
bg_class: "bg-pale-blue"
- title: "Detailed Reports"
description: "Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes."
icon: "/assets/img/icons/solid/compare.svg"
bg_class: "bg-pale-leaf"Example 13
<!-- Your original HTML code here --> # About Section 13
about13:
subtitle: "Who Are We?"
title: "Company that believes in the power of creative strategy."
description: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed."
gallery:
- src: "/assets/img/photos/g12.webp"
srcset: "/assets/img/photos/[email protected] 2x"
alt: "Gallery image 1"
column_class: "col-md-6"
figure_class: "rounded"
- src: "/assets/img/photos/g13.webp"
srcset: "/assets/img/photos/[email protected] 2x"
alt: "Gallery image 2"
column_class: "col-md-6 align-self-end"
figure_class: "rounded"
- src: "/assets/img/photos/g11.webp"
srcset: "/assets/img/photos/[email protected] 2x"
alt: "Gallery image 3"
column_class: "col-12"
figure_class: "rounded mx-md-5"
stats:
- value: "99.7%"
label: "Customer Satisfaction"
- value: "12x"
label: "Revenue Growth"
features:
- number: 1
title: "Our Vision"
description: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget. Fusce dapibus tellus."
- number: 2
title: "Our Mission"
description: "Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet. Sed posuere consectetur."
- number: 3
title: "Our Values"
description: "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna scelerisque."
cta:
text: "More Details"
url: "#"Example 14
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-md-8 gx-xl-12 gy-10 align-items-center mb-16 mb-md-18">
<div class="col-md-8 col-lg-6 mx-auto">
<div class="img-mask mask-3 px-xxl-5">
<img src="{{ page.about14.image }}" srcset="{{ page.about14.image2x }}" alt="{{ page.about14.image_alt }}" />
</div>
</div>
<div class="col-lg-6">
<h2 class="display-2 mb-3">{{ page.about14.title }}</h2>
<p class="lead fs-24">{{ page.about14.lead }}</p>
{% for paragraph in page.about14.paragraphs %}
<p>{{ paragraph }}</p>
{% endfor %}
<a href="{{ page.about14.button.url }}" class="btn btn-primary btn-icon btn-icon-end mt-2">
{{ page.about14.button.text }} <i class="uil uil-arrow-up-right"></i>
</a>
</div>
</div>
<div class="row gx-md-8 gx-xl-12 gy-10">
<div class="col-lg-5 mx-auto">
<h2 class="display-2 mb-3">{{ page.about14.experience.title }}</h2>
<p class="lead fs-24 pe-xxl-8">{{ page.about14.experience.lead }}</p>
<a href="{{ page.about14.experience.button.url }}" class="btn btn-primary btn-icon btn-icon-end mt-2">
{{ page.about14.experience.button.text }} <i class="uil uil-arrow-up-right"></i>
</a>
</div>
<div class="col-lg-7">
<ul class="timeline">
{% for job in page.about14.timeline %}
<li class="timeline-item">
<div class="timeline-info meta fs-14">{{ job.period }}</div>
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3 class="timeline-title">{{ job.title }}</h3>
<p>{{ job.description }}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section> # About Section 14
about14:
image: "/assets/img/avatars/avatar.webp"
image2x: "/assets/img/avatars/[email protected]"
image_alt: "Profile avatar"
title: "More about me"
lead: "👋 Hello! I'm Camille, a multidisciplinary product designer 🧸 based in New York City 🚕. I'm very passionate about the work 💌 that I do."
paragraphs:
- "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa justo sit amet risus."
- "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur."
button:
text: "Learn More"
url: "#"
experience:
title: "My experiences"
lead: "I've had the pleasure to work with companies 🏢 across a variety of industries 🏛️ I'm always interested in new ✨ and exciting adventures 🧨"
button:
text: "Download Resume"
url: "#"
timeline:
- period: "Nov 2017 - Present"
title: "Creative Director at Malory House"
description: "Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non euismod id nulla."
- period: "Sep 2015 - Apr 2017"
title: "Senior Developer at Longwave Studio"
description: "Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis eu pede mollis pretium. Pellentesque ut neque."
- period: "May 2011 - Sep 2015"
title: "Junior Developer at Webpaint Media"
description: "Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet."Sign In
Please enter your credentials to continue.
Password
Sign In
Don’t have an account? Sign up
or
Create Account
Create your account to get started.
Name
Password
Confirm Password
Create Account
Already have an account? Sign in
or