/home/bdqbpbxa/demo-subdomains/adaptiq.goodface.com.ua/frontend/ui-kit.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
UI KIT
</title>
<!-- TODO: Set or remove page description -->
<meta charset="utf-8">
<meta name="description" content="Page description">
<!-- TODO: Delete noindex on production -->
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
<!-- TODO: Set absolute page URL -->
<link rel="canonical" href="https://sitename.com/page">
<!-- Mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/lib/swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/adaptive.css">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Generate favicon by https://realfavicongenerator.net/ -->
<!-- Opengraph -->
<!-- TODO: Add or remove opengraph -->
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website">
<meta property="og:image:type" content="images/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://sitename.com">
<meta property="og:site_name" content="Company name">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="images/opengraph.png">
</head>
<body>
<style>
body {
background-color: wheat;
}
main {
padding-top: 96px;
}
.color-row * {
margin: 0;
width: 100%;
height: 100px;
}
.color-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.button-row {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 0 !important;
}
.button-row * {
margin: 20px 40px;
}
.chapter {
margin: 0;
}
.chapter .main__img {
width: 100%;
}
.chapter.-all-width-chapter {
min-height: 100vh;
position: relative;
}
.chapter>* {
margin: 40px 0;
}
.chapter>h1 {
margin: 40px 40px 0 40px;
}
.chapter:not(:last-child) {
border-bottom: 2px solid var(--text-dark);
}
.forms-flex {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.forms-flex .form {
display: block;
width: calc(50% - 160px);
margin: 40px;
min-width: 300px;
}
.swiper-outer-container {
overflow-x: hidden;
}
</style>
<main>
<header class="header">
<div class="container">
<div class="header__wrapper">
<a href="#" class="logo">
<img src="images/ui-kit/logo-black.png" alt="Logo black">
<img src="images/ui-kit/logo-white.png" alt="Logo white">
</a>
<a href="#" class="default-button -bordered">
We’re hiring!
</a>
<div class="header__burger">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header__menu --black-section">
<div class="header__menu-wrapper">
<div class="scrollable-section">
<div class="container">
<div class="header__menu-menu title-1 mob-title-1">
<a href="#">
Home
</a>
<a href="#">
Services
</a>
<a href="#">
Cases<sup class="title-3 mob-text-2 --light">34</sup>
</a>
<a href="#">
About Us
</a>
<a href="#">
Careers<sup class="title-3 mob-text-2 --light">34</sup>
</a>
</div>
<a href="contact.html" class="default-button">
Get in touch
</a>
</div>
<div class="img">
<img src="images/ui-kit/black-cube.svg" alt="">
</div>
</div>
<div class="header__menu-footer">
<div class="container">
<div class="header__menu-footer-content">
<p class="text text-2 mob-text-2 --light">
Talk to us directly <a href="#">contact@adaptiq.com</a>
</p>
<p class="text text-2 mob-text-2 --light">
Follow us on <a href="#">LinkedIn</a>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Typography
</h1>
<h1 class="title-1 mob-title-1">
This is title 1
</h1>
<h1 class="title-1 mob-title-1 --light">
This is title 1 light
</h1>
<h2 class="title-2 mob-title-2">
This is title 2
</h2>
<h2 class="title-2 mob-title-2 --light">
This is title 2 light
</h2>
<h3 class="title-3 mob-title-3">
This is title 3
</h3>
<h3 class="title-3 mob-title-3 --light">
This is title 3 light
</h3>
<p class="text-1 mob-text-1">
This is text 1
</p>
<p class="text-2 mob-text-2">
This is text 2
</p>
<p class="text-3 mob-text-3">
This is buble text
</p>
<a href="#" class="link-1 mob-link-1">
This is buble text
</a>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Colors
</h1>
<div class="color-row">
<div style="background: var(--red)"></div>
<div style="background: var(--red-gradient)"></div>
<div style="background: var(--text-dark)"></div>
<div style="background: var(--background-dark)"></div>
<div style="background: var(--dark-grey)"></div>
<div style="background: var(--grey)"></div>
<div style="background: var(--light-grey)"></div>
<div style="background: var(--light)"></div>
<div style="background: var(--white)"></div>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Buttons
</h1>
<div class="button-row">
<a href="#" class="default-button">
Default button
</a>
<a href="#" class="default-button -bordered">
Bordered button
</a>
<a href="#" class="default-button -with-arrow">
Arrow button
</a>
</div>
<div class="button-row">
<a href="#" class="default-button -black">
Default button
</a>
<a href="#" class="default-button -black -bordered">
Bordered button
</a>
<a href="#" class="default-button -black -with-arrow">
Arrow button
</a>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Forms
</h1>
<div class="forms-flex">
<div class="form">
<form action="#">
<div class="input-box" data-important="not-empty">
<input type="text" placeholder="Name ">
</div>
<div class="input-box" data-important="not-empty">
<input type="text" placeholder="Name ">
</div>
<div class="input-box" data-important="not-empty">
<textarea class="-adaptive-height" placeholder="Name "></textarea>
</div>
<div class="input-box -file-input" data-empty-text="Upload file" data-important="file">
<input id="file" type="file">
<label for="file">Upload file</label>
</div>
<div class="input-box --checkbox text-2 mob-text-2" data-important="checked">
<input type="checkbox" checked>
<span class="visible-part">
<p>I agree to <a href="terms_conditions.html">Terms & Conditions</a> and <a
href="terms_conditions.html">Privacy Policy</a></p>
</span>
</div>
</form>
</div>
<div class="form -black">
<form action="#">
<div class="input-box" data-important="not-empty">
<input type="text" placeholder="Name ">
</div>
<div class="input-box" data-important="not-empty">
<input type="text" placeholder="Name ">
</div>
<div class="input-box" data-important="not-empty">
<textarea class="-adaptive-height" placeholder="Name "></textarea>
</div>
<div class="input-box -file-input" data-empty-text="Upload file" data-important="file">
<input id="file_2" type="file">
<label for="file_2">Upload file</label>
</div>
<div class="input-box --checkbox text-2 mob-text-2" data-important="checked">
<input type="checkbox" checked>
<span class="visible-part">
<p>I agree to <a href="terms_conditions.html">Terms & Conditions</a> and <a
href="terms_conditions.html">Privacy Policy</a></p>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Testimonials
</h1>
<div class="testimonial-card -not-slide">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
</div>
<div class="swiper-outer-container">
<div class="testimonial-slider swiper">
<div class="testimonials__navigation">
<div class="testimonials__navigation-button swiper-button-prev"></div>
<div class="testimonials__navigation-button swiper-button-next"></div>
</div>
<div class="swiper-wrapper">
<div class="testimonial-card swiper-slide">
<div class="testimonial-card__left">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
<a href="#" class="default-button -with-arrow button-to-pc">
Read Case Study
</a>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us
in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned
with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
<a href="#" class="default-button -with-arrow button-to-mob">
Read Case Study
</a>
</div>
<div class="testimonial-card swiper-slide">
<div class="testimonial-card__left">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us
in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned
with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
</div>
<div class="testimonial-card swiper-slide">
<div class="testimonial-card__left">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
<a href="#" class="default-button -with-arrow button-to-pc">
Read Case Study
</a>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us
in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned
with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
<a href="#" class="default-button -with-arrow button-to-mob">
Read Case Study
</a>
</div>
<div class="testimonial-card swiper-slide">
<div class="testimonial-card__left">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
<a href="#" class="default-button -with-arrow button-to-pc">
Read Case Study
</a>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us
in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned
with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
<a href="#" class="default-button -with-arrow button-to-mob">
Read Case Study
</a>
</div>
<div class="testimonial-card swiper-slide">
<div class="testimonial-card__left">
<div class="tesimonial-card__user">
<div class="tesimonial-card__user-img">
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
<div class="img">
<img src="images/ui-kit/test-elipse.png" alt="">
</div>
</div>
<div class="tesimonial-card__user-text">
<p class="text-2 mob-text-2">
John Dow
</p>
<p class="text-2 mob-text-2 --light">
the Company
</p>
</div>
</div>
<a href="#" class="default-button -with-arrow button-to-pc">
Read Case Study
</a>
</div>
<div class="testimonial-card__content">
<p class="text-1 mob-text-1">
For us it was important that the company was not just building what we asked, but also challenged us
in
our ask and provide consulting along the way. Furthermore, the mission of Adaptiq very much aligned
with
our own, especially the social impact they try to make was a deciding factor for us.
</p>
</div>
<a href="#" class="default-button -with-arrow button-to-mob">
Read Case Study
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Sticky blocks
</h1>
<div class="sticky-list" data-visible-part-height="64,40">
<div class="sticky-block --black-section">
<div class="container">
<div class="sticky-block__content">
<h3 class="title title-2 mob-title-3">
<span class="sticky-block__number title-3 mob-title-3">1</span>
"Us" over "Me"
</h3>
<div class="sticky-block__content-wrapper">
<div class="sticky-block__img">
<img src="images/home/values-1.png" alt="">
</div>
<div class="sticky-block__text title-3 mob-text-2 --light">
<p>We encourage independent decision-making that brings good for the whole group.</p>
<p>We know that sometimes it requires courage.</p>
<p>We encourage cross-functional thinking and we share results.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-block --black-section">
<div class="container">
<div class="sticky-block__content">
<h3 class="title title-2 mob-title-3">
<span class="sticky-block__number title-3 mob-title-3">1</span>
"Us" over "Me"
</h3>
<div class="sticky-block__content-wrapper">
<div class="sticky-block__img">
<img src="images/home/values-1.png" alt="">
</div>
<div class="sticky-block__text title-3 mob-text-2 --light">
<p>We encourage independent decision-making that brings good for the whole group.</p>
<p>We know that sometimes it requires courage.</p>
<p>We encourage cross-functional thinking and we share results.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-block --black-section">
<div class="container">
<div class="sticky-block__content">
<h3 class="title title-2 mob-title-3">
<span class="sticky-block__number title-3 mob-title-3">1</span>
"Us" over "Me"
</h3>
<div class="sticky-block__content-wrapper">
<div class="sticky-block__img">
<img src="images/home/values-1.png" alt="">
</div>
<div class="sticky-block__text title-3 mob-text-2 --light">
<p>We encourage independent decision-making that brings good for the whole group.</p>
<p>We know that sometimes it requires courage.</p>
<p>We encourage cross-functional thinking and we share results.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-block --black-section">
<div class="container">
<div class="sticky-block__content">
<h3 class="title title-2 mob-title-3">
<span class="sticky-block__number title-3 mob-title-3">1</span>
"Us" over "Me"
</h3>
<div class="sticky-block__content-wrapper">
<div class="sticky-block__img">
<img src="images/home/values-1.png" alt="">
</div>
<div class="sticky-block__text title-3 mob-text-2 --light">
<p>We encourage independent decision-making that brings good for the whole group.</p>
<p>We know that sometimes it requires courage.</p>
<p>We encourage cross-functional thinking and we share results.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-block --black-section">
<div class="container">
<div class="sticky-block__content">
<h3 class="title title-2 mob-title-3">
<span class="sticky-block__number title-3 mob-title-3">1</span>
"Us" over "Me"
</h3>
<div class="sticky-block__content-wrapper">
<div class="sticky-block__img">
<img src="images/home/values-1.png" alt="">
</div>
<div class="sticky-block__text title-3 mob-text-2 --light">
<p>We encourage independent decision-making that brings good for the whole group.</p>
<p>We know that sometimes it requires courage.</p>
<p>We encourage cross-functional thinking and we share results.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Clients
</h1>
<div>
<div class="container">
<div class="client-list">
<div class="client-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card -double-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="default-button -with-arrow">
Read Case Study
</a>
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card -double-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="default-button -with-arrow">
Read Case Study
</a>
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<div class="client-card -double-card">
<div class="client-card__preview">
<div class="mobile-icon">
<span></span>
<span></span>
</div>
<div class="img">
<img src="images/ui-kit/test-cube.png" alt="">
</div>
</div>
<div class="client-card__content">
<p class="top-tag text-2 mob-text-2 --light">
Logistics
</p>
<p class="title title-3 mob-title-4">
Bringg
</p>
<p class="text text-2 mob-text-2 --light">
Facts and a brief descripription of the client and what it’s product is Achievements, goals.
</p>
<div class="buttons-container">
<a href="#" class="default-button -with-arrow">
Read Case Study
</a>
<a href="#" class="link link-1">
See Open Positions
</a>
</div>
</div>
</div>
<a href="contact.html" class="client-card -new-client">
<div class="plus">
<span></span>
<span></span>
</div>
<p class="title title-3 mob-title-4">
Become our client.
</p>
</a>
</div>
</div>
</div>
</div>
<div class="chapter">
<h1 class="title-1 mob-title-1">
Cases
</h1>
<div class="container">
<a href="case-study.html" class="case-card">
<div class="case-card__img">
<div class="img">
<img src="images/ui-kit/test-vertical.png" alt="">
</div>
<div class="case-card__tags">
<div class="case-card__tag text-2 mob-text-2">
Industy
</div>
</div>
<div class="case-card__param-list">
<div class="case-card__param">
<p class="case-card__param-name text-2 --light">
Team size
</p>
<p class="case-card__param-value text-2">
7
</p>
</div>
<div class="case-card__param">
<p class="case-card__param-name text-2 --light">
Technologies
</p>
<p class="case-card__param-value text-2">
Angular, Git, GraphQL
</p>
</div>
</div>
</div>
<div class="case-card__description">
<h3 class="title title-3">
Case study #2
</h3>
<p class="text text-2 mob-text-1 --light">
Company
</p>
</div>
</a>
<div class="case-card -big-card">
<div class="case-card__img">
<div class="img">
<img src="images/ui-kit/test-vertical.png" alt="">
</div>
<div class="case-card__tags">
<div class="case-card__tag text-2 mob-text-2">
Industy
</div>
</div>
<div class="case-card__param-list">
<div class="case-card__param">
<p class="case-card__param-name text-2 --light">
Team size
</p>
<p class="case-card__param-value text-2">
7
</p>
</div>
<div class="case-card__param">
<p class="case-card__param-name text-2 --light">
Technologies
</p>
<p class="case-card__param-value text-2">
Angular, Git, GraphQL
</p>
</div>
</div>
</div>
<div class="case-card__description">
<h3 class="title title-2 mob-title-2">
Dynamic, data-driven optimisation of public mobility<span class="--red-color">.</span>
</h3>
<p class="text text-1 mob-text-1">
Via develops innovative solutions for on-demand and pre-scheduled transit, powered by the world's most
advanced technology.
</p>
<div class="bottom-container">
<p class="text text-2 mob-text-2">
VIA
</p>
<a href="#" class="link link-1">
Read Case Study
</a>
</div>
</div>
</div>
</div>
</div>
<div class="chapter -all-width-chapter">
<div class="container">
<div class="main__img" data-x-offset="60" data-y-offset="60" data-offset-per-row="32.5"
data-y-offset-per-lvl="32.5" data-x-offset-per-lvl="55">
<div class="main__img-wrapper">
<div class="cube" data-col="1" data-row="1" data-lvl="1"></div>
<div class="cube" data-col="2" data-row="1" data-lvl="1"></div>
<div class="cube" data-col="3" data-row="1" data-lvl="1"></div>
<div class="cube" data-col="1" data-row="2" data-lvl="1"></div>
<div class="cube" data-col="2" data-row="2" data-lvl="1"></div>
<div class="cube" data-col="3" data-row="2" data-lvl="1"></div>
<div class="cube" data-col="1" data-row="3" data-lvl="1"></div>
<div class="cube" data-col="2" data-row="3" data-lvl="1"></div>
<div class="cube" data-col="3" data-row="3" data-lvl="1"></div>
<div class="cube" data-col="1" data-row="1" data-lvl="2"></div>
<div class="cube" data-col="2" data-row="1" data-lvl="2"></div>
<div class="cube" data-col="3" data-row="1" data-lvl="2"></div>
<div class="cube" data-col="1" data-row="2" data-lvl="2"></div>
<div class="cube" data-col="2" data-row="2" data-lvl="2"></div>
<div class="cube" data-col="3" data-row="2" data-lvl="2"></div>
<div class="cube" data-col="1" data-row="3" data-lvl="2"></div>
<div class="cube" data-col="2" data-row="3" data-lvl="2"></div>
<div class="cube" data-col="3" data-row="3" data-lvl="2"></div>
<div class="cube" data-col="1" data-row="1" data-lvl="3"></div>
<div class="cube" data-col="2" data-row="1" data-lvl="3"></div>
<div class="cube" data-col="3" data-row="1" data-lvl="3"></div>
<div class="cube" data-col="1" data-row="2" data-lvl="3"></div>
<div class="cube" data-col="2" data-row="2" data-lvl="3"></div>
<div class="cube" data-col="3" data-row="2" data-lvl="3"></div>
<div class="cube" data-col="1" data-row="3" data-lvl="3"></div>
<div class="cube" data-col="2" data-row="3" data-lvl="3"></div>
<div class="cube" data-col="3" data-row="3" data-lvl="3"></div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-contact --black-section" id="footer-contact">
<div class="container">
<div class="footer-contact__content -top">
<div class="footer-contact__left">
<div class="bubble-tag text-3 mob-text-3">
Contact form
</div>
<h2 class="title title-1 mob-title-1">
Let’s talk<span class="--red-color">.</span>
</h2>
</div>
<div class="footer-contact__right"></div>
</div>
<div class="footer-contact__content">
<div class="footer-contact__left">
<p class="text text-2 --light">
Please fill in the form below and a Adaptiq expert will contact you directly to see how we can help your
business grow.
</p>
<div class="form">
<form action="#">
<div class="input-box" data-important="not-empty">
<input type="text" placeholder="Name">
</div>
<div class="input-box">
<input type="email" placeholder="E-mail" data-important="email">
</div>
<div class="input-box" data-important="not-empty">
<textarea class="-adaptive-height" placeholder="Message"></textarea>
</div>
<div class="input-box --checkbox text-2 mob-text-2" data-important="checked">
<input type="checkbox" checked>
<span class="visible-part">
<p>I agree to <a href="terms_conditions.html">Terms & Conditions</a> and <a
href="terms_conditions.html">Privacy Policy</a></p>
</span>
</div>
<input type="submit" class="submit default-button" value="Submit">
</form>
</div>
</div>
<div class="footer-contact__right">
<a href="mailto:contact@adaptiq.co" class="title title-3">
contact@adaptiq.co
</a>
<p class="text text-2 --light">
Talk to us directly.
</p>
<div class="img">
<img src="images/ui-kit/right-turned-white-cube.svg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="footer-content --black-section">
<div class="container">
<div class="footer-content__wrapper">
<div class="footer-content__top footer-content__content">
<div class="footer-content__top-menu text-2 mob-text-2 --bold">
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="cases.html">Cases</a>
<a href="careers.html">Careers</a>
</div>
<p class="text text-2 mob-text-2 --light">
Follow us on <a href="#">LinkedIn</a>
</p>
</div>
<div class="footer-content__bottom footer-content__content">
<div class="footer-content__bottom-menu">
<p class="text text-2 mob-text-2 --light">© Adaptiq Ltd. 2022</p>
<a href="terms_conditions.html" class="text-2 mob-text-2 --light">Terms & Conditions</a>
<a href="terms_conditions.html" class="text-2 mob-text-2 --light">Privacy Policy</a>
</div>
<p class="text text-2 mob-text-2 --light">
Designed by <a href="https://goodface.agency/">Goodface</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Code here -->
<script src="js/lib/jquery-3.6.0.min.js"></script>
<script src="js/lib/swiper-bundle.min.js"></script>
<script src="js/custom-solutions.js"></script>
<script src="js/script.js"></script>
<script src="js/animations.js"></script>
<script src="js/test.js"></script>
</body>
</html>