Chiefsoft/WrenchCoinWebsite
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Files
master
WrenchCoinWebsite/sandbox310/src/demo2.html
T
dev-chiefworks b085356c99 first commit
2022-09-25 15:25:10 -04:00

378 lines
18 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
@@include('_head.html')
<link rel="preload" href="@@webRoot/assets/css/fonts/dm.css" as="style" onload="this.rel='stylesheet'">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-light">
<div class="bg-primary text-white fw-bold fs-15 mb-2">
<div class="container py-2 d-md-flex flex-md-row">
<div class="d-flex flex-row align-items-center">
<div class="icon text-white fs-22 mt-1 me-2"> <i class="uil uil-location-pin-alt"></i></div>
<address class="mb-0">Moonshine St. 14/05 Light City</address>
</div>
<div class="d-flex flex-row align-items-center me-6 ms-auto">
<div class="icon text-white fs-22 mt-1 me-2"> <i class="uil uil-phone-volume"></i></div>
<p class="mb-0">00 (123) 456 78 90</p>
</div>
<div class="d-flex flex-row align-items-center">
<div class="icon text-white fs-22 mt-1 me-2"> <i class="uil uil-message"></i></div>
<p class="mb-0"><a href="mailto:sandbox@email.com" class="link-white hover">sandbox@email.com</a></p>
</div>
</div>
<!-- /.container -->
</div>
@@include('_navbar.html', {
"classList": "center-nav transparent navbar-light",
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})
</header>
<!-- /header -->
<section class="wrapper bg-light">
<div class="container pt-8 pt-md-14">
<div class="row gx-lg-0 gx-xl-8 gy-10 gy-md-13 gy-lg-0 mb-7 mb-md-10 mb-lg-16 align-items-center">
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2" data-cue="zoomIn">
<div class="shape bg-dot primary rellax w-17 h-19" data-rellax-speed="1" style="top: -1.7rem; left: -1.5rem;"></div>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -0.8rem; width: 85%; height: 90%;"></div>
<figure class="rounded"><img src="@@webRoot/assets/img/photos/about7.jpg" srcset="@@webRoot/assets/img/photos/about7@2x.jpg 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 mt-lg-n10 text-center text-lg-start" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5">We bring solutions to make life easier for our customers.</h1>
<p class="lead fs-25 lh-sm mb-7 px-md-10 px-lg-0">We have considered our solutions to support every stage of your growth.</p>
<div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a href="#" class="btn btn-lg btn-primary rounded-pill me-2">Explore Now</a></span>
<span><a href="#" class="btn btn-lg btn-outline-primary rounded-pill">Free Trial</a></span>
</div>
</div>
<!--/column -->
</div>
<!-- /.row -->
<div class="px-lg-5 mb-14 mb-md-17">
<div class="row gx-0 gx-md-8 gx-xl-12 gy-8 align-items-center">
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c1.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c2.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c3.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c4.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c5.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col-4 col-md-2">
<figure class="px-5 px-md-0 px-lg-2 px-xl-3 px-xxl-4"><img src="@@webRoot/assets/img/brands/c6.png" alt="" /></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /div -->
<div class="row">
<div class="col-md-10 col-lg-8 col-xl-7 col-xxl-6 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">What We Do?</h2>
<h3 class="display-4 mb-10">The service we offer is specifically designed to meet your needs.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gx-md-8 gy-8 text-center mb-14 mb-md-17">
<div class="col-md-6 col-lg-3">
<div class="icon btn btn-circle btn-lg btn-primary disabled mb-5"> <i class="uil uil-phone-volume"></i> </div>
<h4>24/7 Support</h4>
<p class="mb-3">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<a href="#" class="more hover">Learn More</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="icon btn btn-circle btn-lg btn-primary disabled mb-5"> <i class="uil uil-shield-exclamation"></i> </div>
<h4>Secure Payments</h4>
<p class="mb-3">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<a href="#" class="more hover">Learn More</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="icon btn btn-circle btn-lg btn-primary disabled mb-5"> <i class="uil uil-laptop-cloud"></i> </div>
<h4>Daily Updates</h4>
<p class="mb-3">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<a href="#" class="more hover">Learn More</a>
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="icon btn btn-circle btn-lg btn-primary disabled mb-5"> <i class="uil uil-chart-line"></i> </div>
<h4>Market Research</h4>
<p class="mb-3">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<a href="#" class="more hover">Learn More</a>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center mb-14 mb-md-17 mb-lg-19">
<div class="col-md-8 col-lg-6 position-relative">
<div class="shape bg-line red rounded-circle rellax w-18 h-18" data-rellax-speed="1" style="top: -2.2rem; left: -2.4rem;"></div>
<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="@@webRoot/assets/img/photos/about9.jpg" srcset="@@webRoot/assets/img/photos/about9@2x.jpg 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h2 class="display-4 mb-3">How It Works?</h2>
<p class="lead fs-lg mb-6">So here are three working steps why our valued customers choose us.</p>
<div class="d-flex flex-row mb-6">
<div>
<span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">1</span></span>
</div>
<div>
<h4 class="mb-1">Collect Ideas</h4>
<p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div>
<span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">2</span></span>
</div>
<div>
<h4 class="mb-1">Data Analysis</h4>
<p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">3</span></span>
</div>
<div>
<h4 class="mb-1">Finalize Product</h4>
<p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
<h3 class="display-4 mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container-fluid px-md-6">
<div class="swiper-container blog grid-view mb-17 mb-md-19" data-margin="30" data-nav="true" data-dots="true" data-items-xxl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp10.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp11.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp12.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp13.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp14.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp15.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="./assets/img/photos/pp16.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container-fluid -->
<div class="container">
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center mb-14 mb-md-17 mb-lg-19">
<div class="col-md-8 col-lg-6 position-relative">
<a href="@@webRoot/assets/media/movie.mp4" 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="@@webRoot/assets/img/photos/about12.jpg" srcset="@@webRoot/assets/img/photos/about12@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-lg-5 offset-lg-1">
<h2 class="fs-15 text-uppercase text-muted mb-3">Who Are We?</h2>
<h3 class="display-4 mb-6">Company that believes in the power of creative strategy.</h3>
<p class="mb-6">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.</p>
<div class="row gy-3 gx-xl-8">
<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>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
</ul>
</div>
<!--/column -->
<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>Etiam porta sem malesuada magna mollis euismod.</span></li>
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-8 gx-xl-12 gy-10 mb-16 mb-md-17 mb-xl-20 align-items-center">
<div class="col-lg-4">
<h2 class="fs-15 text-uppercase text-muted mb-3">Meet the Team</h2>
<h3 class="display-5 mb-5">Save your time and money by choosing our professional team.</h3>
<p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
<a href="#" class="btn btn-primary rounded-pill mt-3">See All Members</a>
</div>
<!--/column -->
<div class="col-lg-8">
<div class="swiper-container text-center mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="rounded-circle w-20 mx-auto mb-4" src="@@webRoot/assets/img/avatars/t1.jpg" srcset="@@webRoot/assets/img/avatars/t1@2x.jpg 2x" alt="" />
<h4 class="mb-1">Cory Zamora</h4>
<div class="meta mb-2">Marketing Specialist</div>
<p class="mb-2">Etiam porta sem magna malesuada mollis.</p>
<nav class="nav social justify-content-center text-center mb-0">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-slack"></i></a>
<a href="#"><i class="uil uil-linkedin"></i></a>
</nav>
<!-- /.social -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<img class="rounded-circle w-20 mx-auto mb-4" src="@@webRoot/assets/img/avatars/t2.jpg" srcset="@@webRoot/assets/img/avatars/t2@2x.jpg 2x" alt="" />
<h4 class="mb-1">Coriss Ambady</h4>
<div class="meta mb-2">Financial Analyst</div>
<p class="mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
<nav class="nav social justify-content-center text-center mb-0">
<a href="#"><i class="uil uil-youtube"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
</nav>
<!-- /.social -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<img class="rounded-circle w-20 mx-auto mb-4" src="@@webRoot/assets/img/avatars/t3.jpg" srcset="@@webRoot/assets/img/avatars/t3@2x.jpg 2x" alt="" />
<h4 class="mb-1">Nikolas Brooten</h4>
<div class="meta mb-2">Sales Manager</div>
<p class="mb-2">Donec ornare elit quam porta gravida at eget.</p>
<nav class="nav social justify-content-center text-center mb-0">
<a href="#"><i class="uil uil-linkedin"></i></a>
<a href="#"><i class="uil uil-tumblr-square"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
</nav>
<!-- /.social -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<img class="rounded-circle w-20 mx-auto mb-4" src="@@webRoot/assets/img/avatars/t4.jpg" srcset="@@webRoot/assets/img/avatars/t4@2x.jpg 2x" alt="" />
<h4 class="mb-1">Jackie Sanders</h4>
<div class="meta mb-2">Investment Planner</div>
<p class="mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
<nav class="nav social justify-content-center text-center mb-0">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
</nav>
<!-- /.social -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<img class="rounded-circle w-20 mx-auto mb-4" src="@@webRoot/assets/img/avatars/t5.jpg" srcset="@@webRoot/assets/img/avatars/t5@2x.jpg 2x" alt="" />
<h4 class="mb-1">Tina Geller</h4>
<div class="meta mb-2">Assistant Buyer</div>
<p class="mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
<nav class="nav social justify-content-center text-center mb-0">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-slack"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
</nav>
<!-- /.social -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="card bg-soft-primary">
<div class="card-body p-md-10 py-xxl-16 position-relative">
<div class="position-absolute d-none d-lg-block" style="bottom:0; left:10%; width: 28%; z-index:2">
<figure><img src="@@webRoot/assets/img/photos/co2.png" srcset="@@webRoot/assets/img/photos/co2@2x.png 2x" alt=""></figure>
</div>
<div class="row gx-md-0 gx-xl-12 text-center">
<div class="col-lg-7 offset-lg-5 col-xl-6">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed”</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info p-0">
<h5 class="mb-1">Coriss Ambady</h5>
<div class="meta mb-0">Financial Analyst</div>
</div>
</div>
</blockquote>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<footer class="bg-light">
<div class="container py-13 py-md-15">
@@include('_footer-widgets.html')
</div>
<!-- /.container -->
</footer>
@@include('_page-progress.html')
@@include('_scripts.html')
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink