<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
</head>
<body>
<%- include('./parcials/header') %>
<main class="bg-shapes-main">
<div class="bg-shapes">
<figure>
<img src="<%= baseUrl %>images/banner-top-left.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">
</figure>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot.png" alt="">
</span>
<span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot2.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot3.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot4.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot5.png" alt="">
</span>
</div>
<!-- <section class="inner-banner">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="banner-content">
<h1 class="theme-h2">About Us</h1>
<ul class="banner-links">
<li>
<a href="/">Home</a>
</li>
<li>About Us</li>
</ul>
</div>
</div>
</div>
</div>
</section> -->
<section class="about-us padding-sec">
<% const section01 = content.find(item => item.name === 'Section-01'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="sec-content">
<div class="row g-4">
<div class="col-12">
<img class="barbell img-fluid mb-4" src="<%= `${baseUrl}${section01.imageUrl}` %>" alt="">
<!--<h6 class="theme-tagline">history</h6>-->
<h2 class="theme-h2"><%= section01.heading %></h2>
<% section01.paragraph.forEach((paragraph) => { %>
<p class="theme-p"><%= paragraph %></p>
<% }) %>
<a href="<%= section01.link?.link %>" class="theme-btn"><%= section01.link?.text %></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-main">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="footer-content">
<h2 class="theme-h2">Tell Them How You Feel With A Pair Of Virtual Ballz</h2>
<h5 class="footer-h5">Virtual (adjective).</h5>
<ol class="footer-ol">
<li>Created by computer technology and appearing to exist but not existing in the physical
world:</li>
<li>Existing, seen, or happening online or on a computer screen, rather than in person or in the
physical world:</li>
<li>Something that exists in the mind, exists in essence but not in fact or created by a
computer:</li>
</ol>
</div>
</div>
</div>
</div>
<div class="bg-shapes">
<figure>
<img src="<%= baseUrl %>images/banner-top-left.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">
</figure>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot.png" alt="">
</span>
<span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot2.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot3.png" alt="">
</span>
<!-- <span data-parallax='{"x": 50, "y": -30}'>
<img src="<%= baseUrl %>images/floating-circle-dots.png" alt="">
</span> -->
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot5.png" alt="">
</span>
</div>
</footer>
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
</body>
</html>