inital commit
This commit is contained in:
660
templates/template_4/site/index.html
Normal file
660
templates/template_4/site/index.html
Normal file
@@ -0,0 +1,660 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Business template</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="multipurpose business template" />
|
||||
<meta name="keywords" content="business template, multipurpose template" />
|
||||
<link rel="stylesheet" href="assets/css/libs/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="assets/css/libs/bootstrap-icons/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="assets/css/libs/aos.css" />
|
||||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||||
<script src="assets/js/libs/jquery.min.js"></script>
|
||||
<script src="assets/js/libs/bootstrap.min.js"></script>
|
||||
<script src="assets/js/libs/aos.js"></script>
|
||||
<script src="assets/js/app.js"></script>
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#nav">
|
||||
|
||||
<div class="spinner spinner-border" id="spinner" role="status"></div>
|
||||
|
||||
<!-- navbar section start -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="navbar" id="nav">
|
||||
<div class="container-fluid">
|
||||
<!-- navbar's logo -->
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="assets/img/logo.png" alt="logo" width="90" height="50" />
|
||||
</a>
|
||||
<!-- mobile's menu trigger button -->
|
||||
<button
|
||||
data-bs-toggle="offcanvas"
|
||||
class="navbar-toggler collapsed"
|
||||
type="button"
|
||||
data-bs-target="#mobileNavbar"
|
||||
id="mobileNavbarButton"
|
||||
aria-controls="mobileNavbar"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-start"
|
||||
tabindex="-1"
|
||||
id="mobileNavbar"
|
||||
aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header">
|
||||
<!-- mobile's menu header -->
|
||||
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Menu</h5>
|
||||
<!-- mobile's menu close button -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close text-reset"
|
||||
data-bs-dismiss="offcanvas"
|
||||
aria-label="Close">
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body position-relative">
|
||||
<!-- mobile's menu spinner -->
|
||||
<div class="spinner spinner-border" id="menu-spinner" role="status"></div>
|
||||
<!-- navbar links -->
|
||||
<ul class="nav navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#services">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#pricing">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-link" href="#clients">Clients</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#team">Team</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#testimonials">Testimonials</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#posts">Blog</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- navbar section end -->
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div id="home">
|
||||
|
||||
<!-- slider section start -->
|
||||
|
||||
<div id="carouselIndicators" class="carousel slide">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<!-- first slide -->
|
||||
<div class="carousel-item active">
|
||||
<div class="carousel-caption">
|
||||
<h2>Professional approach</h2>
|
||||
<p>Professionalism leads to workplace success</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second slide -->
|
||||
<div class="carousel-item">
|
||||
<div class="carousel-caption">
|
||||
<h2>Team of experts</h2>
|
||||
<p>Our best experts handle your project</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- thord slide -->
|
||||
<div class="carousel-item">
|
||||
<div class="carousel-caption">
|
||||
<h2>Business collaboration</h2>
|
||||
<p>We share ideas and skills in order to achieve goals</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- slider section end -->
|
||||
</div>
|
||||
|
||||
<!-- about section start -->
|
||||
<div id="about" class="pt-5">
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6" data-aos="slide-right">
|
||||
<div class="fs-1">About</div>
|
||||
Our company is a consulting company with many years of experience in the IT industry, offering reliable services. We are a strategic technology partner that help companies optimize their business process by proving IT solutions.
|
||||
We support clients at every level of their projects, from preparation, development to maintenance.
|
||||
<div class="ms-3 mt-2 mb-3">
|
||||
<div class="about-item">
|
||||
<i class="bi bi-people-fill tmp-icon tmp-about-icon me-3"></i>
|
||||
<div>
|
||||
<strong>best team</strong>
|
||||
<div>we provide developers, UI designers and devops</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<i class="bi bi-boxes tmp-icon tmp-about-icon me-3"></i>
|
||||
<div>
|
||||
<strong>professional approach</strong>
|
||||
<div>we have many years of experience in the consulting industry</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-item">
|
||||
<i class="bi bi-gear-wide-connected tmp-icon tmp-about-icon me-3"></i>
|
||||
<div>
|
||||
<strong>solution</strong>
|
||||
<div>solutions tailored to a specific customer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="slide-left">
|
||||
<img src="assets/img/about/about.jpg" class="about-icon shadow-sm mb-2" alt="about company" width="534" height="357" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- about section end -->
|
||||
|
||||
<!-- services section start -->
|
||||
<div class="pt-5" id="services">
|
||||
|
||||
<div class="fs-1">Services</div>
|
||||
|
||||
<div class="services-content pt-3">
|
||||
<div class="container">
|
||||
<div class="row" data-aos="slide-left">
|
||||
<!-- first service -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card service-card">
|
||||
<i class="bi tmp-icon tmp-service-icon bi-code-slash"></i>
|
||||
<div class="service-title">development</div>
|
||||
Development is the process of coming into existence or of creating something new or more advanced
|
||||
</div>
|
||||
</div>
|
||||
<!-- second service -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card service-card">
|
||||
<i class="bi tmp-icon tmp-service-icon bi-palette-fill"></i>
|
||||
<div class="service-title">UI Designing</div>
|
||||
UI design is the process designers use to build interfaces in software or computerized devices
|
||||
</div>
|
||||
</div>
|
||||
<!-- third service -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card service-card">
|
||||
<i class="bi tmp-icon tmp-service-icon bi-server"></i>
|
||||
<div class="service-title">Devops</div>
|
||||
DevOps is a set of practices that combines software development and IT operations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- services section end -->
|
||||
|
||||
<!-- pricing section start -->
|
||||
<div class="pt-5" id="pricing">
|
||||
<div class="fs-1">Pricing</div>
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-center" data-aos="slide-up">
|
||||
|
||||
<!-- first pricing option -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm pricing-card">
|
||||
<div class="fs-4 card-header font-weight-normal">
|
||||
Basic
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title pricing-price">95$</div>
|
||||
<ul class="pricing-list">
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> Development
|
||||
</li>
|
||||
<li class="text-black-50">
|
||||
<i class="bi bi-x tmp-icon tmp-pricing-list-icon"></i> UI Designing
|
||||
</li>
|
||||
<li class="text-black-50">
|
||||
<i class="bi bi-x tmp-icon tmp-pricing-list-icon"></i> DevOps
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second pricing option -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm pricing-card">
|
||||
<div class="fs-4 card-header font-weight-normal">
|
||||
Standard
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title pricing-price">495$</div>
|
||||
<ul class="pricing-list">
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> Development
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> UI Designing
|
||||
</li>
|
||||
<li class="text-black-50">
|
||||
<i class="bi bi-x tmp-icon tmp-pricing-list-icon"></i> DevOps
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- third pricing option -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm pricing-card">
|
||||
<div class="fs-4 card-header font-weight-normal">
|
||||
Premium
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title pricing-price">995$</div>
|
||||
<ul class="pricing-list">
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> Development
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> UI Designing
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-check tmp-icon tmp-pricing-list-icon"></i> DevOps
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary">Buy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pricing section end -->
|
||||
|
||||
<!-- clients section start -->
|
||||
<div class="pt-5" id="clients">
|
||||
<div class="fs-1">Clients</div>
|
||||
<div class="clients-content py-3">
|
||||
<div class="container">
|
||||
<div class="row" data-aos="fade-right">
|
||||
<div class="col col-sm-6 col-lg-3">
|
||||
<img src="assets/img/clients/client1.png" alt="1st client" width="200" height="200" />
|
||||
</div>
|
||||
<div class="col col-sm-6 col-lg-3">
|
||||
<img src="assets/img/clients/client2.png" alt="2nd client" width="200" height="200" />
|
||||
</div>
|
||||
<div class="col col-sm-6 col-lg-3">
|
||||
<img src="assets/img/clients/client3.png" alt="3rd client" width="200" height="200" />
|
||||
</div>
|
||||
<div class="col col-sm-6 col-lg-3">
|
||||
<img src="assets/img/clients/client4.png" alt="4th client" width="200" height="200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- clients section end -->
|
||||
|
||||
<!-- team section start -->
|
||||
<div class="pt-5" id="team">
|
||||
<div class="fs-1">Meet our team</div>
|
||||
<div class="container team-content" data-aos="zoom-in">
|
||||
<div class="row">
|
||||
|
||||
<!-- first team member -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12 mb-3 text-center" data-showHide>
|
||||
<div class="team-member">
|
||||
<img src="assets/img/team/person1.jpg" alt="team leader" width="280" height="280" />
|
||||
<div class="team-member-name-position-section">
|
||||
<div class="team-member-name">Peter Philips</div>
|
||||
<div class="team-member-position">Team Leader</div>
|
||||
<div data-showEl class="team-details mt-2">
|
||||
<div>
|
||||
<a href="tel:0800123456789">0 800 123 456 789</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:peter.philips@example.com">peter.philips@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second team member -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12 mb-3 text-center" data-showHide>
|
||||
<div class="team-member">
|
||||
<img src="assets/img/team/person2.jpg" alt="product owner" width="280" height="280" />
|
||||
<div class="team-member-name-position-section">
|
||||
<div class="team-member-name">Hanna Brown</div>
|
||||
<div class="team-member-position">Product Owner</div>
|
||||
<div data-showEl class="team-details mt-2">
|
||||
<div>
|
||||
<a href="tel:0800123456789">0 800 123 456 789</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:hanna.brown@example.com">hanna.brown@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- third team member -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12 mb-3 text-center" data-showHide>
|
||||
<div class="team-member">
|
||||
<img src="assets/img/team/person3.jpg" alt="software engineer" width="280" height="280" />
|
||||
<div class="team-member-name-position-section">
|
||||
<div class="team-member-name">Raphael Williams</div>
|
||||
<div class="team-member-position">Software Engineer</div>
|
||||
<div data-showEl class="team-details mt-2">
|
||||
<div>
|
||||
<a href="tel:0800123456789">0 800 123 456 789</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:raphael.williams@example.com">raphael.williams@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fourth team member -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12 mb-3 text-center" data-showHide>
|
||||
<div class="team-member">
|
||||
<img src="assets/img/team/person4.jpg" alt="ui designer" width="280" height="280" />
|
||||
<div class="team-member-name-position-section">
|
||||
<div class="team-member-name">Aza Thomas</div>
|
||||
<div class="team-member-position">UI Designer</div>
|
||||
<div data-showEl class="team-details mt-2">
|
||||
<div>
|
||||
<a href="tel:0800123456789">0 800 123 456 789</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:aza.thomas@example.com">aza.thomas@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- team section end -->
|
||||
|
||||
<!-- testimonials section start -->
|
||||
<div class="pt-5" id="testimonials">
|
||||
<div class="fs-1">What people say</div>
|
||||
|
||||
<div class="container testimonials-content" data-aos="slide-left">
|
||||
<div class="row">
|
||||
|
||||
<!-- first testimonial -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12">
|
||||
<div class="card mb-3 shadow-sm testimonial-card">
|
||||
<div class="testimonial-author">
|
||||
<img src="assets/img/testimonials/testimonials1.jpg" alt="1st testimonial" width="60" height="60" />
|
||||
<div class="testimonial-author-name-position-section">
|
||||
<div class="testimonial-author-name">John Smith</div>
|
||||
<div class="testimonial-author-position">Team Leader</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>I will refer everyone I know. ITS is worth much more than I paid.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second testimonial -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12">
|
||||
<div class="card mb-3 shadow-sm testimonial-card">
|
||||
<div class="testimonial-author">
|
||||
<img src="assets/img/testimonials/testimonials2.jpg" alt="2nd testimonial" width="60" height="60" />
|
||||
<div class="testimonial-author-name-position-section">
|
||||
<div class="testimonial-author-name">Scarlett Jackson</div>
|
||||
<div class="testimonial-author-position">Business owner</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>I am completely blown away. ITS is exactly what our business has been lacking.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- third testimonial -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12">
|
||||
<div class="card mb-3 shadow-sm testimonial-card">
|
||||
<div class="testimonial-author">
|
||||
<img src="assets/img/testimonials/testimonials3.jpg" alt="3rd testimonial" width="60" height="60" />
|
||||
<div class="testimonial-author-name-position-section">
|
||||
<div class="testimonial-author-name">Katherine Spencer</div>
|
||||
<div class="testimonial-author-position">Product Owner</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>I STRONGLY recommend ITS to EVERYONE interested in running a successful online business!</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fourth testimonial -->
|
||||
<div class="col-xl-3 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm testimonial-card">
|
||||
<div class="testimonial-author">
|
||||
<img src="assets/img/testimonials/testimonials4.jpg" alt="4th testimonial" width="60" height="60" />
|
||||
<div class="testimonial-author-name-position-section">
|
||||
<div class="testimonial-author-name"> Craig Cooper</div>
|
||||
<div class="testimonial-author-position">Software Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div> will recommend you to my colleagues. We're loving it. I can't say enough about ITS.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- testimonials section end -->
|
||||
|
||||
<!-- blog section start -->
|
||||
<div class="pt-5" id="posts">
|
||||
<div class="fs-1">Latest blog posts</div>
|
||||
<div class="container posts-content" data-aos="zoom-out-up">
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
<!-- first post -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm post-card">
|
||||
<img src="assets/img/posts/post1.jpg" class="post-img" alt="progressive web apps" width="382" height="254" />
|
||||
<div class="post-title">Progressive Web Apps</div>
|
||||
Progressive Web Applications use web platform functions to provide users with an experience comparable to native applications.
|
||||
<div class="post-details mt-2">
|
||||
<i class="bi bi-clock tmp-icon ms-2"></i> March 3, 2021
|
||||
<i class="bi bi-chat tmp-icon ms-2"></i> 3 comments
|
||||
</div>
|
||||
<a href="#" class="post-link">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second post -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm post-card">
|
||||
<img src="assets/img/posts/post2.jpg" class="post-img" alt="cordova or capacitor" width="382" height="254" />
|
||||
<div class="post-title">Cordova or Capacitor</div>
|
||||
Both Capacitor and Cordova manage a Web View and provide a structured way of exposing native functionality to your web code.
|
||||
<div class="post-details mt-2">
|
||||
<i class="bi bi-clock tmp-icon ms-2"></i> March 3, 2021
|
||||
<i class="bi bi-chat tmp-icon ms-2"></i> 2 comments
|
||||
</div>
|
||||
<a href="#" class="post-link">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- third post -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm post-card">
|
||||
<img src="assets/img/posts/post3.jpg" class="post-img" alt="Kubernetes" width="382" height="254" />
|
||||
<div class="post-title">What is Kubernetes?</div>
|
||||
Kubernetes, also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications.
|
||||
<div class="post-details mt-2">
|
||||
<i class="bi bi-clock tmp-icon ms-2"></i> March 3, 2021
|
||||
<i class="bi bi-chat tmp-icon ms-2"></i> 5 comments
|
||||
</div>
|
||||
<a href="#" class="post-link">read more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- blog section end -->
|
||||
|
||||
<!-- newsletter section start -->
|
||||
<div class="newsletter px-2 pt-2 pb-3 p-md-4 mt-3 text-white text-center d-flex justify-content-center align-items-center">
|
||||
<div class="position-relative newsletter-content">
|
||||
<div class="fs-3">Newsletter</div>
|
||||
<p>Keep up with our always upcoming news and updates. Enter your e-mail and subscribe to our newsletter.</p>
|
||||
<form autocomplete="off" class="d-flex" id="newsletter-form">
|
||||
<input type="email" class="form-control" id="newsletter-email" placeholder="name@example.com" required />
|
||||
<button type="submit" id="newsletter-form-button" class="btn btn-primary ms-2">send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade" role="alert" id="newsletter-success-alert">
|
||||
You have successfully signed up to our newsletter
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible fade" role="alert" id="newsletter-error-alert">
|
||||
The request could not be sent
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
</div>
|
||||
<!-- newsletter section end -->
|
||||
|
||||
<!-- contact section start -->
|
||||
<div id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<img src="assets/img/logo-white.png" alt="company logo" width="90" height="50" />
|
||||
<p class="my-3">Our company is a consulting company with many years of experience in the IT industry, offering reliable services</p>
|
||||
|
||||
<!-- social links -->
|
||||
<div class="contact-social-icons ">
|
||||
<div>Get social</div>
|
||||
<a href="#" class="me-1">
|
||||
<i class="bi bi-youtube tmp-icon tmp-contact-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="me-1">
|
||||
<i class="bi bi-linkedin tmp-icon tmp-contact-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="me-1">
|
||||
<i class="bi bi-twitter tmp-icon tmp-contact-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="me-1">
|
||||
<i class="bi bi-facebook tmp-icon tmp-contact-icon"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i class="bi bi-instagram tmp-icon tmp-contact-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contact information -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="pb-2 mb-2 border-bottom">
|
||||
<div>Phone</div>
|
||||
<div>
|
||||
<i class="bi bi-telephone-fill me-1 tmp-icon tmp-contact-icon"></i>
|
||||
<a href="tel:0801234567">+1 123-456-7890</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pb-2 mb-2 border-bottom">
|
||||
<div>E-mail</div>
|
||||
<div>
|
||||
<i class="bi bi-envelope-fill me-1 tmp-icon tmp-contact-icon"></i>
|
||||
<a href="mailto:offline@example.com">offline@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Address</div>
|
||||
<div>
|
||||
<i class="bi bi-geo-alt-fill me-1 tmp-icon tmp-contact-icon"></i>
|
||||
<a href="#">
|
||||
4209 Genesee Ave, San Diego, USA
|
||||
</a>
|
||||
</div>
|
||||
<!-- google map -->
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d22556.233955585394!2d-117.21505925996809!3d32.81865266947334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa2539b606d399b!2sMarshalls!5e0!3m2!1sen!2spl!4v1640362900920!5m2!1sen!2spl"
|
||||
style="border:0;"
|
||||
allowfullscreen=""
|
||||
class="my-2 contact-map"
|
||||
title="google map"
|
||||
loading="lazy">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contact form start -->
|
||||
|
||||
<form id="contact-form" class="col-lg-4 col-md-12" autocomplete="off">
|
||||
<div class="fs-3">Get in touch</div>
|
||||
<p>We are available 24/7 by e-mail or telephone. You can also use our quick contact form to get in touch with us.</p>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label" >Email address</label>
|
||||
<input type="email" class="form-control" id="email" placeholder="name@example.com" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="content" class="form-label">Content</label>
|
||||
<textarea class="form-control" id="content" rows="3" required></textarea>
|
||||
</div>
|
||||
<button type="submit" id="contact-form-button" class="btn btn-primary mb-3">send</button>
|
||||
</form>
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade" role="alert" id="form-success-alert">
|
||||
The message was sent
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible fade" role="alert" id="form-error-alert">
|
||||
The message could not be send
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<!-- contact form end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- contact section end -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user