File size: 23.3Kb
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Webtek - IT Solution and Technology HTML Template - Home One</title>
<meta name="author" content="Webtek">
<meta name="description" content="Webtek - IT Solution and Technology HTML Template">
<meta name="keywords" content="Webtek - IT Solution and Technology HTML Template">
<meta name="robots" content="INDEX,FOLLOW">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicons - Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--==============================
Google Fonts
============================== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gantari:wght@100;300;400;500;600;700;800;900&family=Inter:wght@100;400;500;600;700;800;900&family=Urbanist:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!--==============================
All CSS File
============================== -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fontawesome Icon -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.min.css">
<!-- Swiper css -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- datetimepicker -->
<link rel="stylesheet" href="assets/css/jquery.datetimepicker.min.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!--********************************
Code Start From Here
******************************** -->
<div class="cursor"></div>
<div class="cursor2"></div>
<!--==============================
Preloader
==============================-->
<div id="preloader" class="preloader ">
<button class="th-btn th-radius preloaderCls">Cancel Preloader </button>
<div id="loader" class="th-preloader">
<div class="animation-preloader">
<div class="txt-loading">
<span preloader-text="W" class="characters">W</span>
<span preloader-text="E" class="characters">E</span>
<span preloader-text="B" class="characters">B</span>
<span preloader-text="T" class="characters">T</span>
<span preloader-text="E" class="characters">E</span>
<span preloader-text="C" class="characters">C</span>
<span preloader-text="K" class="characters">K</span>
</div>
</div>
</div>
</div>
<div class="space ">
<div class="h1 text-center mt-4">Colors</div>
<div class="container mb-5">
<div class="row">
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--theme-color);">Theme Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--theme-color);">Theme Color 2</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--title-color);">Title Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--body-color);">Body Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--gray-color);">Gray Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--smoke-color);">Smoke Color</div>
</div>
</div>
</div>
<div class="h1 text-center mt-4">Container</div>
<div class="container mb-5">
<div class="bg-dark py-2">
<div class="h1 text-center text-white">row</div>
<div class="row">
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus labore, expedita numquam similique odio tempora quo aperiam ipsa quibusdam laboriosam mollitia suscipit! Ullam ipsa maiores magnam soluta adipisci praesentium esse similique quae molestias? Nostrum pariatur voluptatibus veritatis soluta nesciunt quo praesentium. Dolorem vitae deleniti doloremque facere, eaque harum aspernatur dolore hic minus veniam sit expedita sapiente maiores accusantium quo repellendus obcaecati exercitationem labore fugiat! Qui eveniet earum esse delectus quis aspernatur? Vel, voluptatem dolorem possimus ea qui facere. Sapiente cumque id animi veritatis similique quidem consequatur, incidunt natus quis. Recusandae dolorem minus, obcaecati esse ipsam architecto et eius voluptatem ducimus.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus labore, expedita numquam similique odio tempora quo aperiam ipsa quibusdam laboriosam mollitia suscipit! Ullam ipsa maiores magnam soluta adipisci praesentium esse similique quae molestias? Nostrum pariatur voluptatibus veritatis soluta nesciunt quo praesentium. Dolorem vitae deleniti doloremque facere, eaque harum aspernatur dolore hic minus veniam sit expedita sapiente maiores accusantium quo repellendus obcaecati exercitationem labore fugiat! Qui eveniet earum esse delectus quis aspernatur? Vel, voluptatem dolorem possimus ea qui facere. Sapiente cumque id animi veritatis similique quidem consequatur, incidunt natus quis. Recusandae dolorem minus, obcaecati esse ipsam architecto et eius voluptatem ducimus.</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, aspernatur, eius fugit modi veniam inventore sequi necessitatibus laborum deserunt debitis porro veritatis fugiat ipsa commodi est atque ab quasi! Tempora, eaque facilis id molestias libero hic dolore quos, vitae blanditiis veritatis iure rem. Voluptate nostrum quasi nam error nobis est.</h2>
<h4>table style</h4>
<table>
<thead>
<tr>
<th><a href="#">This is a link</a></th>
<th>Table Title</th>
<th>Table Title</th>
<th>Table Title</th>
</tr>
</thead>
<tbody>
<tr>
<th>Table title</th>
<td><a href="#">This is a link</a></td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table title</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table title</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>table footer data</td>
<td>table footer data</td>
<td>table footer data</td>
<td>table footer data</td>
</tr>
</tfoot>
</table>
<h4>blockquote style</h4>
<blockquote>
<p>Stay hungry. Stay foolish.</p>
</blockquote>
<h4>Nested links</h4>
<h3><a href="#">This is a link in title</a></h3>
<h1><a href="#" class="text-inherit">Inherit link in title</a></h1>
<h2><a href="#" class="text-reset">reset link in title</a></h2>
<p><a href="#">link in paragraph</a></p>
<h4>List styles</h4>
<ul>
<li>List item one
<ul>
<li>List item one
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three
<ol>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
<ol>
<li>List item one
<ol reversed="reversed">
<li>List item one -reversed attribute</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
<ol>
<li>List item one
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
</ol>
<h4>Input Styles</h4>
<div class="row">
<div class="form-group col-lg-6 has-label">
<label for="text">Company name (optional)*</label>
<input type="text" id="text" placeholder="Enter Your Name">
</div>
<div class="form-group col-lg-6 has-label">
<label for="text2">Company name (optional)*</label>
<input type="text" id="text2" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-lg-6">
<input type="text" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-lg-6">
<input type="text" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-12">
<select name="name" id="name">
<option value="" selected disabled hidden>Select Subject</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
</div>
<div class="form-group col-12">
<textarea name="textARea" id="textARea" cols="30" rows="10" placeholder="Write you message"></textarea>
<i class="far fa-pencil"></i>
</div>
<div class="form-group col-12">
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, similique?</label>
</div>
<div class="form-group col-12">
<div>
<input type="radio" name="fav_language" value="HTML">
<label for="html">HTML</label>
</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
</div>
<div>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label>
</div>
</div>
</div>
<h4>Buttons Style</h4>
<div class="p-5 mb-4 bg-light">
<div class="row align-items-center gy-3 gx-3">
<div class="col-auto"><a href="#" class="th-btn">Appointment</a></div>
<div class="col-auto"><a href="#" class="th-btn">Appointment<i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="th-btn style2"><span class="btn-icon"><i class="far fa-plus"></i></span><span class="btn-text">Register Now</span></a></div>
</div>
</div>
<h4>Icon Button Style</h4>
<div class="p-5 mb-4 bg-light">
<div class="row align-items-center gy-3 gx-3">
<div class="col-auto"><a href="#" class="icon-btn"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style2"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style3"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style1 btn-md"><i class="far fa-chevron-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style2 btn-md"><i class="far fa-chevron-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style3 btn-md"><i class="far fa-chevron-right"></i></a></div>
</div>
</div>
</div>
</div><!--==============================
Footer Area
==============================-->
<footer class="footer-wrapper footer-layout1" data-bg-src="assets/img/bg/footer_bg_1.jpg">
<div class="widget-area">
<div class="container">
<div class="row justify-content-between">
<div class="col-xl-12">
<div class="footer-top-area">
<div class="footer-top">
<div class="footer-logo">
<a href="index.html"><img src="assets/img/logo-footer.svg" alt="Webtek"></a>
</div>
<div class="">
<p class="footer-text">Their team's technical expertise is truly outstanding. They took
the time to thoroughly understand our goals and requirements and then designed and
implemented solutions that not only addressed our immediate challenges but also
positioned us for future growth.</p>
</div>
</div>
<div class="footer-menu-area">
<ul class="footer-menu">
<li>
<a href="index.html">Home</a>
</li>
<li><a href="#">Pages</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="th-social">
<a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="row gy-4 justify-content-center justify-content-lg-between">
<div class="col-lg-auto">
<div class="info-box">
<div class="info-box_icon">
<i class="fa-solid fa-location-dot"></i>
</div>
<div>
<span class="info-box_subtitle">Address</span>
<p class="info-box_text">12 Division Park, SKY <span class="d-block"> 12546. Berlin</span></p>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="info-box">
<div class="info-box_icon">
<i class="fa-solid fa-envelope"></i>
</div>
<div>
<span class="info-box_subtitle">Email</span>
<p class="info-box_text">
<a href="mailto:help@webteck-mail.com" class="info-box_link">help@webteck-mail.com</a>
<a href="mailto:24/7@webteck-online.com" class="info-box_link">24/7@webteck-online.com</a>
</p>
</div>
</div>
</div>
<div class="col-lg-auto">
<div class="info-box">
<div class="info-box_icon">
<i class="fa-solid fa-phone"></i>
</div>
<div>
<span class="info-box_subtitle">Call</span>
<p class="info-box_text">
<a href="tel:+215253632156" class="info-box_link">+(215) 2536-32156</a>
<a href="tel:+452369421587" class="info-box_link">+(452) 3694-21587</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-wrap text-center">
<div class="container">
<p class="copyright-text">Copyright <i class="fal fa-copyright"></i> 2024 <a href="home-web-agency.html">Webtek</a>. All Rights Reserved.</p>
</div>
</div>
</footer>
<!--********************************
Code End Here
******************************** -->
<!-- Scroll To Top -->
<div class="scroll-top">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;">
</path>
</svg>
</div>
<!--==============================
All Js File
============================== -->
<!-- Jquery -->
<script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
<!-- Swiper Js -->
<script src="assets/js/swiper-bundle.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Magnific Popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- Counter Up -->
<script src="assets/js/jquery.counterup.min.js"></script>
<!-- Range Slider -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- imagesloaded -->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<!-- isotope -->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- datetimepicker -->
<script src="assets/js/jquery.datetimepicker.min.js"></script>
<!-- gsap -->
<script src="assets/js/gsap.min.js"></script>
<!-- ScrollTrigger -->
<script src="assets/js/ScrollTrigger.min.js"></script>
<!-- nice select -->
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/smooth-scroll.js"></script>
<!-- Main Js File -->
<script src="assets/js/main.js"></script>
</body>
</html>