summaryrefslogtreecommitdiff
path: root/src/main/resources/templates/elements.html
diff options
context:
space:
mode:
authorAlisaLinUwU <alisalinuwu@gmail.com>2025-01-26 10:42:28 +0500
committerAlisaLinUwU <alisalinuwu@gmail.com>2025-01-26 10:42:28 +0500
commit0225bdb772d1334cc1aa7ab0fc3678df0864df6b (patch)
tree85a8c8e4fcf1d935fcbad54886b73410c8cb2e26 /src/main/resources/templates/elements.html
Initializemain
Diffstat (limited to 'src/main/resources/templates/elements.html')
-rw-r--r--src/main/resources/templates/elements.html946
1 files changed, 946 insertions, 0 deletions
diff --git a/src/main/resources/templates/elements.html b/src/main/resources/templates/elements.html
new file mode 100644
index 0000000..1853bb1
--- /dev/null
+++ b/src/main/resources/templates/elements.html
@@ -0,0 +1,946 @@
+<!doctype html>
+<html class="no-js" lang="zxx">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Barber</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- <link rel="manifest" href="site.webmanifest"> -->
+ <link rel="shortcut icon" type="image/x-icon" href="@{img/favicon.png">
+ <!-- Place favicon.ico in the root directory -->
+
+ <!-- CSS here -->
+ <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
+ <link rel="stylesheet" th:href="@{css/owl.carousel.min.css}">
+ <link rel="stylesheet" th:href="@{css/magnific-popup.css}">
+ <link rel="stylesheet" th:href="@{css/font-awesome.min.css}">
+ <link rel="stylesheet" th:href="@{css/themify-icons.css}">
+ <link rel="stylesheet" th:href="@{css/nice-select.css}">
+ <link rel="stylesheet" th:href="@{css/flaticon.css}">
+ <link rel="stylesheet" th:href="@{css/gijgo.css}">
+ <link rel="stylesheet" th:href="@{css/animate.css}">
+ <link rel="stylesheet" th:href="@{css/slicknav.css}">
+ <link rel="stylesheet" th:href="@{css/style.css}">
+ <!-- <link rel="stylesheet" href="css/responsive.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]-->
+
+ <!-- header-start -->
+ <header>
+ <div class="header-area ">
+ <div id="sticky-header" class="main-header-area">
+ <div class="container">
+ <div class="row align-items-center">
+ <div class="col-xl-3 col-lg-3">
+ <div class="logo-img">
+ <a th:href="@{/}">
+ <img th:src="@{img/logo.png}" alt="">
+ </a>
+ </div>
+ </div>
+ <div class="col-xl-9 col-lg-9">
+ <div class="menu_wrap d-none d-lg-block">
+ <div class="menu_wrap_inner d-flex align-items-center justify-content-end">
+ <div class="main-menu">
+ <nav>
+ <ul id="navigation">
+ <li><a class="active" th:href="@{/}">home</a></li>
+ <li><a th:href="@{/service}">service</a></li>
+ <li><a href="#">blog <i class="ti-angle-down"></i></a>
+ <ul class="submenu">
+ <li><a th:href="@{/blog}">blog</a></li>
+ <li><a th:href="@{/single-blog}">single-blog</a></li>
+ </ul>
+ </li>
+ <li><a href="#">pages <i class="ti-angle-down"></i></a>
+ <ul class="submenu">
+ <li><a th:href="@{/about}">about</a></li>
+ <li><a th:href="@{/elements}">elements</a></li>
+ </ul>
+ </li>
+ <li><a th:href="@{/contact}">Contact</a></li>
+ </ul>
+ </nav>
+ </div>
+ <div class="book_room">
+ <div class="book_btn">
+ <a class="popup-with-form" href="#test-form">Appointment</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-12">
+ <div class="mobile_menu d-block d-lg-none"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+ <!-- header-end -->
+
+ <!-- bradcam_area_start -->
+ <div class="bradcam_area breadcam_bg overlay">
+ <div class="container">
+ <div class="row">
+ <div class="col-lg-12">
+ <h3>elements</h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- bradcam_area_end -->
+
+ <!-- Start Sample Area -->
+ <section class="sample-text-area">
+ <div class="container box_1170">
+ <h3 class="text-heading">Text Sample</h3>
+ <p class="sample-text">
+ Every avid independent filmmaker has <b>Bold</b> about making that <i>Italic</i> interest documentary,
+ or short
+ film to show off their creative prowess. Many have great ideas and want to “wow”
+ the<sup>Superscript</sup> scene,
+ or video renters with their big project. But once you have the<sub>Subscript</sub> “in the can” (no easy
+ feat), how
+ do you move from a <del>Strike</del> through of master DVDs with the <u>“Underline”</u> marked
+ hand-written title
+ inside a secondhand CD case, to a pile of cardboard boxes full of shiny new, retail-ready DVDs, with UPC
+ barcodes
+ and polywrap sitting on your doorstep? You need to create eye-popping artwork and have your project
+ replicated.
+ Using a reputable full service DVD Replication company like PacificDisc, Inc. to partner with is
+ certainly a
+ helpful option to ensure a professional end result, but to help with your DVD replication project, here
+ are 4 easy
+ steps to follow for good DVD replication results:
+
+ </p>
+ </div>
+ </section>
+ <!-- End Sample Area -->
+
+ <!-- Start Button -->
+ <section class="button-area">
+ <div class="container box_1170 border-top-generic">
+ <h3 class="text-heading">Sample Buttons</h3>
+ <div class="button-group-area">
+ <a href="#" class="genric-btn default">Default</a>
+ <a href="#" class="genric-btn primary">Primary</a>
+ <a href="#" class="genric-btn success">Success</a>
+ <a href="#" class="genric-btn info">Info</a>
+ <a href="#" class="genric-btn warning">Warning</a>
+ <a href="#" class="genric-btn danger">Danger</a>
+ <a href="#" class="genric-btn link">Link</a>
+ <a href="#" class="genric-btn disable">Disable</a>
+ </div>
+ <div class="button-group-area mt-10">
+ <a href="#" class="genric-btn default-border">Default</a>
+ <a href="#" class="genric-btn primary-border">Primary</a>
+ <a href="#" class="genric-btn success-border">Success</a>
+ <a href="#" class="genric-btn info-border">Info</a>
+ <a href="#" class="genric-btn warning-border">Warning</a>
+ <a href="#" class="genric-btn danger-border">Danger</a>
+ <a href="#" class="genric-btn link-border">Link</a>
+ <a href="#" class="genric-btn disable">Disable</a>
+ </div>
+ <div class="button-group-area mt-40">
+ <a href="#" class="genric-btn default radius">Default</a>
+ <a href="#" class="genric-btn primary radius">Primary</a>
+ <a href="#" class="genric-btn success radius">Success</a>
+ <a href="#" class="genric-btn info radius">Info</a>
+ <a href="#" class="genric-btn warning radius">Warning</a>
+ <a href="#" class="genric-btn danger radius">Danger</a>
+ <a href="#" class="genric-btn link radius">Link</a>
+ <a href="#" class="genric-btn disable radius">Disable</a>
+ </div>
+ <div class="button-group-area mt-10">
+ <a href="#" class="genric-btn default-border radius">Default</a>
+ <a href="#" class="genric-btn primary-border radius">Primary</a>
+ <a href="#" class="genric-btn success-border radius">Success</a>
+ <a href="#" class="genric-btn info-border radius">Info</a>
+ <a href="#" class="genric-btn warning-border radius">Warning</a>
+ <a href="#" class="genric-btn danger-border radius">Danger</a>
+ <a href="#" class="genric-btn link-border radius">Link</a>
+ <a href="#" class="genric-btn disable radius">Disable</a>
+ </div>
+ <div class="button-group-area mt-40">
+ <a href="#" class="genric-btn default circle">Default</a>
+ <a href="#" class="genric-btn primary circle">Primary</a>
+ <a href="#" class="genric-btn success circle">Success</a>
+ <a href="#" class="genric-btn info circle">Info</a>
+ <a href="#" class="genric-btn warning circle">Warning</a>
+ <a href="#" class="genric-btn danger circle">Danger</a>
+ <a href="#" class="genric-btn link circle">Link</a>
+ <a href="#" class="genric-btn disable circle">Disable</a>
+ </div>
+ <div class="button-group-area mt-10">
+ <a href="#" class="genric-btn default-border circle">Default</a>
+ <a href="#" class="genric-btn primary-border circle">Primary</a>
+ <a href="#" class="genric-btn success-border circle">Success</a>
+ <a href="#" class="genric-btn info-border circle">Info</a>
+ <a href="#" class="genric-btn warning-border circle">Warning</a>
+ <a href="#" class="genric-btn danger-border circle">Danger</a>
+ <a href="#" class="genric-btn link-border circle">Link</a>
+ <a href="#" class="genric-btn disable circle">Disable</a>
+ </div>
+ <div class="button-group-area mt-40">
+ <a href="#" class="genric-btn default circle arrow">Default<span class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn primary circle arrow">Primary<span class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn success circle arrow">Success<span class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn info circle arrow">Info<span class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn warning circle arrow">Warning<span class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn danger circle arrow">Danger<span class="lnr lnr-arrow-right"></span></a>
+ </div>
+ <div class="button-group-area mt-10">
+ <a href="#" class="genric-btn default-border circle arrow">Default<span
+ class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn primary-border circle arrow">Primary<span
+ class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn success-border circle arrow">Success<span
+ class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn info-border circle arrow">Info<span
+ class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn warning-border circle arrow">Warning<span
+ class="lnr lnr-arrow-right"></span></a>
+ <a href="#" class="genric-btn danger-border circle arrow">Danger<span
+ class="lnr lnr-arrow-right"></span></a>
+ </div>
+ <div class="button-group-area mt-40">
+ <a href="#" class="genric-btn primary e-large">Extra Large</a>
+ <a href="#" class="genric-btn success large">Large</a>
+ <a href="#" class="genric-btn primary">Default</a>
+ <a href="#" class="genric-btn success medium">Medium</a>
+ <a href="#" class="genric-btn primary small">Small</a>
+ </div>
+ <div class="button-group-area mt-10">
+ <a href="#" class="genric-btn primary-border e-large">Extra Large</a>
+ <a href="#" class="genric-btn success-border large">Large</a>
+ <a href="#" class="genric-btn primary-border">Default</a>
+ <a href="#" class="genric-btn success-border medium">Medium</a>
+ <a href="#" class="genric-btn primary-border small">Small</a>
+ </div>
+ </div>
+ </section>
+ <!-- End Button -->
+
+ <!-- Start Align Area -->
+ <div class="whole-wrap">
+ <div class="container box_1170">
+ <div class="section-top-border">
+ <h3 class="mb-30">Left Aligned</h3>
+ <div class="row">
+ <div class="col-md-3">
+ <img th:src="@{img/elements/d.jpg}" alt="" class="img-fluid">
+ </div>
+ <div class="col-md-9 mt-sm-20">
+ <p>Recently, the US Federal government banned online casinos from operating in America by making
+ it illegal to
+ transfer money to them through any US bank or payment system. As a result of this law, most
+ of the popular
+ online casino networks such as Party Gaming and PlayTech left the United States. Overnight,
+ online casino
+ players found themselves being chased by the Federal government. But, after a fortnight, the
+ online casino
+ industry came up with a solution and new online casinos started taking root. These began to
+ operate under a
+ different business umbrella, and by doing that, rendered the transfer of money to and from
+ them legal. A major
+ part of this was enlisting electronic banking systems that would accept this new
+ clarification and start doing
+ business with me. Listed in this article are the electronic banking systems that accept
+ players from the United
+ States that wish to play in online casinos.</p>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border text-right">
+ <h3 class="mb-30">Right Aligned</h3>
+ <div class="row">
+ <div class="col-md-9">
+ <p class="text-right">Over time, even the most sophisticated, memory packed computer can begin
+ to run slow if we
+ don’t do something to prevent it. The reason why has less to do with how computers are made
+ and how they age and
+ more to do with the way we use them. You see, all of the daily tasks that we do on our PC
+ from running programs
+ to downloading and deleting software can make our computer sluggish. To keep this from
+ happening, you need to
+ understand the reasons why your PC is getting slower and do something to keep your PC
+ running at its best. You
+ can do this through regular maintenance and PC performance optimization programs</p>
+ <p class="text-right">Before we discuss all of the things that could be affecting your PC’s
+ performance, let’s
+ talk a little about what symptoms</p>
+ </div>
+ <div class="col-md-3">
+ <img th:src="@{img/elements/d.jpg}" alt="" class="img-fluid">
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <h3 class="mb-30">Definition</h3>
+ <div class="row">
+ <div class="col-md-4">
+ <div class="single-defination">
+ <h4 class="mb-20">Definition 01</h4>
+ <p>Recently, the US Federal government banned online casinos from operating in America by
+ making it illegal to
+ transfer money to them through any US bank or payment system. As a result of this law,
+ most of the popular
+ online casino networks</p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="single-defination">
+ <h4 class="mb-20">Definition 02</h4>
+ <p>Recently, the US Federal government banned online casinos from operating in America by
+ making it illegal to
+ transfer money to them through any US bank or payment system. As a result of this law,
+ most of the popular
+ online casino networks</p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="single-defination">
+ <h4 class="mb-20">Definition 03</h4>
+ <p>Recently, the US Federal government banned online casinos from operating in America by
+ making it illegal to
+ transfer money to them through any US bank or payment system. As a result of this law,
+ most of the popular
+ online casino networks</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <h3 class="mb-30">Block Quotes</h3>
+ <div class="row">
+ <div class="col-lg-12">
+ <blockquote class="generic-blockquote">
+ “Recently, the US Federal government banned online casinos from operating in America by
+ making it illegal to
+ transfer money to them through any US bank or payment system. As a result of this law, most
+ of the popular
+ online casino networks such as Party Gaming and PlayTech left the United States. Overnight,
+ online casino
+ players found themselves being chased by the Federal government. But, after a fortnight, the
+ online casino
+ industry came up with a solution and new online casinos started taking root. These began to
+ operate under a
+ different business umbrella, and by doing that, rendered the transfer of money to and from
+ them legal. A major
+ part of this was enlisting electronic banking systems that would accept this new
+ clarification and start doing
+ business with me. Listed in this article are the electronic banking”
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <h3 class="mb-30">Table</h3>
+ <div class="progress-table-wrap">
+ <div class="progress-table">
+ <div class="table-head">
+ <div class="serial">#</div>
+ <div class="country">Countries</div>
+ <div class="visit">Visits</div>
+ <div class="percentage">Percentages</div>
+ </div>
+ <div class="table-row">
+ <div class="serial">01</div>
+ <div class="country"> <img th:src="@{img/elements/f1.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-1" role="progressbar" style="width: 80%"
+ aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">02</div>
+ <div class="country"> <img th:src="@{img/elements/f2.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-2" role="progressbar" style="width: 30%"
+ aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">03</div>
+ <div class="country"> <img th:src="@{img/elements/f3.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-3" role="progressbar" style="width: 55%"
+ aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">04</div>
+ <div class="country"> <img th:src="@{img/elements/f4.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-4" role="progressbar" style="width: 60%"
+ aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">05</div>
+ <div class="country"> <img th:src="@{img/elements/f5.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-5" role="progressbar" style="width: 40%"
+ aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">06</div>
+ <div class="country"> <img th:src="@{img/elements/f6.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-6" role="progressbar" style="width: 70%"
+ aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">07</div>
+ <div class="country"> <img th:src="@{img/elements/f7.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-7" role="progressbar" style="width: 30%"
+ aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="table-row">
+ <div class="serial">08</div>
+ <div class="country"> <img th:src="@{img/elements/f8.jpg}" alt="flag">Canada</div>
+ <div class="visit">645032</div>
+ <div class="percentage">
+ <div class="progress">
+ <div class="progress-bar color-8" role="progressbar" style="width: 60%"
+ aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <h3>Image Gallery</h3>
+ <div class="row gallery-item">
+ <div class="col-md-4">
+ <a href="@{img/elements/g1.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g1.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-4">
+ <a href="@{img/elements/g2.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g2.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-4">
+ <a href="@{img/elements/g3.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g3.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-6">
+ <a href="@{img/elements/g4.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g4.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-6">
+ <a href="@{img/elements/g5.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g5.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-4">
+ <a href="@{img/elements/g6.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g6.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-4">
+ <a href="@{img/elements/g7.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g7.jpg);"></div>
+ </a>
+ </div>
+ <div class="col-md-4">
+ <a href="@{img/elements/g8.jpg" class="img-pop-up">
+ <div class="single-gallery-image" style="background: url(../static/img/elements/g8.jpg);"></div>
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <div class="row">
+ <div class="col-md-4">
+ <h3 class="mb-20">Image Gallery</h3>
+ <div class="typography">
+ <h1>This is header 01</h1>
+ <h2>This is header 02</h2>
+ <h3>This is header 03</h3>
+ <h4>This is header 04</h4>
+ <h5>This is header 01</h5>
+ <h6>This is header 01</h6>
+ </div>
+ </div>
+ <div class="col-md-4 mt-sm-30">
+ <h3 class="mb-20">Unordered List</h3>
+ <div class="">
+ <ul class="unordered-list">
+ <li>Fta Keys</li>
+ <li>For Women Only Your Computer Usage</li>
+ <li>Facts Why Inkjet Printing Is Very Appealing
+ <ul>
+ <li>Addiction When Gambling Becomes
+ <ul>
+ <li>Protective Preventative Maintenance</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>Dealing With Technical Support 10 Useful Tips</li>
+ <li>Make Myspace Your Best Designed Space</li>
+ <li>Cleaning And Organizing Your Computer</li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-md-4 mt-sm-30">
+ <h3 class="mb-20">Ordered List</h3>
+ <div class="">
+ <ol class="ordered-list">
+ <li><span>Fta Keys</span></li>
+ <li><span>For Women Only Your Computer Usage</span></li>
+ <li><span>Facts Why Inkjet Printing Is Very Appealing</span>
+ <ol class="ordered-list-alpha">
+ <li><span>Addiction When Gambling Becomes</span>
+ <ol class="ordered-list-roman">
+ <li><span>Protective Preventative Maintenance</span></li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li><span>Dealing With Technical Support 10 Useful Tips</span></li>
+ <li><span>Make Myspace Your Best Designed Space</span></li>
+ <li><span>Cleaning And Organizing Your Computer</span></li>
+ </ol>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="section-top-border">
+ <div class="row">
+ <div class="col-lg-8 col-md-8">
+ <h3 class="mb-30">Form Element</h3>
+ <form action="#">
+ <div class="mt-10">
+ <input type="text" name="first_name" placeholder="First Name"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'First Name'" required
+ class="single-input">
+ </div>
+ <div class="mt-10">
+ <input type="text" name="last_name" placeholder="Last Name"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'" required
+ class="single-input">
+ </div>
+ <div class="mt-10">
+ <input type="text" name="last_name" placeholder="Last Name"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last Name'" required
+ class="single-input">
+ </div>
+ <div class="mt-10">
+ <input type="email" name="EMAIL" placeholder="Email address"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email address'" required
+ class="single-input">
+ </div>
+ <div class="input-group-icon mt-10">
+ <div class="icon"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div>
+ <input type="text" name="address" placeholder="Address" onfocus="this.placeholder = ''"
+ onblur="this.placeholder = 'Address'" required class="single-input">
+ </div>
+ <div class="input-group-icon mt-10">
+ <div class="icon"><i class="fa fa-plane" aria-hidden="true"></i></div>
+ <div class="form-select">
+ <select>
+ <option value=" 1">City</option>
+ <option value="1">Dhaka</option>
+ <option value="1">Dilli</option>
+ <option value="1">Newyork</option>
+ <option value="1">Islamabad</option>
+ </select>
+ </div>
+ </div>
+ <div class="input-group-icon mt-10">
+ <div class="icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
+ <div class="form-select">
+ <select>
+ <option value=" 1">Country</option>
+ <option value="1">Bangladesh</option>
+ <option value="1">India</option>
+ <option value="1">England</option>
+ <option value="1">Srilanka</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="mt-10">
+ <textarea class="single-textarea" placeholder="Message" onfocus="this.placeholder = ''"
+ onblur="this.placeholder = 'Message'" required></textarea>
+ </div>
+ <!-- For Gradient Border Use -->
+ <!-- <div class="mt-10">
+ <div class="primary-input">
+ <input id="primary-input" type="text" name="first_name" placeholder="Primary color" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Primary color'">
+ <label for="primary-input"></label>
+ </div>
+ </div> -->
+ <div class="mt-10">
+ <input type="text" name="first_name" placeholder="Primary color"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Primary color'" required
+ class="single-input-primary">
+ </div>
+ <div class="mt-10">
+ <input type="text" name="first_name" placeholder="Accent color"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Accent color'" required
+ class="single-input-accent">
+ </div>
+ <div class="mt-10">
+ <input type="text" name="first_name" placeholder="Secondary color"
+ onfocus="this.placeholder = ''" onblur="this.placeholder = 'Secondary color'"
+ required class="single-input-secondary">
+ </div>
+ </form>
+ </div>
+ <div class="col-lg-3 col-md-4 mt-sm-30">
+ <div class="single-element-widget">
+ <h3 class="mb-30">Switches</h3>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>01. Sample Switch</p>
+ <div class="primary-switch">
+ <input type="checkbox" id="default-switch">
+ <label for="default-switch"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>02. Primary Color Switch</p>
+ <div class="primary-switch">
+ <input type="checkbox" id="primary-switch" checked>
+ <label for="primary-switch"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>03. Confirm Color Switch</p>
+ <div class="confirm-switch">
+ <input type="checkbox" id="confirm-switch" checked>
+ <label for="confirm-switch"></label>
+ </div>
+ </div>
+ </div>
+ <div class="single-element-widget mt-30">
+ <h3 class="mb-30">Selectboxes</h3>
+ <div class="default-select">
+ <select>
+ <option value=" 1">English</option>
+ <option value="1">Spanish</option>
+ <option value="1">Arabic</option>
+ <option value="1">Portuguise</option>
+ <option value="1">Bengali</option>
+ </select>
+ </div>
+ </div>
+ <div class="single-element-widget mt-30">
+ <h3 class="mb-30">Checkboxes</h3>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>01. Sample Checkbox</p>
+ <div class="primary-checkbox">
+ <input type="checkbox" id="default-checkbox">
+ <label for="default-checkbox"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>02. Primary Color Checkbox</p>
+ <div class="primary-checkbox">
+ <input type="checkbox" id="primary-checkbox" checked>
+ <label for="primary-checkbox"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>03. Confirm Color Checkbox</p>
+ <div class="confirm-checkbox">
+ <input type="checkbox" id="confirm-checkbox">
+ <label for="confirm-checkbox"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>04. Disabled Checkbox</p>
+ <div class="disabled-checkbox">
+ <input type="checkbox" id="disabled-checkbox" disabled>
+ <label for="disabled-checkbox"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>05. Disabled Checkbox active</p>
+ <div class="disabled-checkbox">
+ <input type="checkbox" id="disabled-checkbox-active" checked disabled>
+ <label for="disabled-checkbox-active"></label>
+ </div>
+ </div>
+ </div>
+ <div class="single-element-widget mt-30">
+ <h3 class="mb-30">Radios</h3>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>01. Sample radio</p>
+ <div class="primary-radio">
+ <input type="checkbox" id="default-radio">
+ <label for="default-radio"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>02. Primary Color radio</p>
+ <div class="primary-radio">
+ <input type="checkbox" id="primary-radio" checked>
+ <label for="primary-radio"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>03. Confirm Color radio</p>
+ <div class="confirm-radio">
+ <input type="checkbox" id="confirm-radio" checked>
+ <label for="confirm-radio"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>04. Disabled radio</p>
+ <div class="disabled-radio">
+ <input type="checkbox" id="disabled-radio" disabled>
+ <label for="disabled-radio"></label>
+ </div>
+ </div>
+ <div class="switch-wrap d-flex justify-content-between">
+ <p>05. Disabled radio active</p>
+ <div class="disabled-radio">
+ <input type="checkbox" id="disabled-radio-active" checked disabled>
+ <label for="disabled-radio-active"></label>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- End Align Area -->
+
+ <!-- footer_start -->
+ <footer class="footer">
+ <div class="footer_top">
+ <div class="container">
+ <div class="row">
+ <div class="col-xl-5 col-md-6 col-lg-5 ">
+ <div class="footer_widget">
+ <div class="footer_logo">
+ <a href="#">
+ <img th:src="@{img/logo.png}" alt="">
+ </a>
+ </div>
+ <p class="address_text">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. <br> Quis ipsum suspendisse.
+ </p>
+ <div class="socail_links">
+ <ul>
+ <li>
+ <a href="#">
+ <i class="ti-facebook"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <i class="ti-twitter-alt"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <i class="fa fa-dribbble"></i>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <i class="fa fa-instagram"></i>
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+ </div>
+ <div class="col-xl-3 col-md-6 col-lg-3">
+ <div class="footer_widget">
+ <h3 class="footer_title">
+ Information
+ </h3>
+ <ul class="links">
+ <li><a href="#">About</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Testimonial</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-xl-2 col-md-6 col-lg-2">
+ <div class="footer_widget">
+ <h3 class="footer_title">
+ Services
+ </h3>
+ <ul class="links">
+ <li><a href="#">Smooth Shave </a></li>
+ <li><a href="#">Beard Triming</a></li>
+ <li><a href="#"> Haircut Styles</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-xl-2 col-md-6 col-lg-2">
+ <div class="footer_widget">
+ <h3 class="footer_title">
+ Follow Us
+ </h3>
+ <ul class="links">
+ <li><a href="#">FaceBook</a></li>
+ <li><a href="#">Instagram</a></li>
+ <li><a href="#"> Twitter</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="copy-right_text">
+ <div class="container">
+ <div class="row">
+ <div class="col-xl-12">
+ <p class="copy_right text-center">
+ <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
+ Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
+ <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </footer>
+ <!-- footer_end -->
+
+
+ <!-- form itself end-->
+ <form id="test-form" class="white-popup-block mfp-hide">
+ <div class="popup_box ">
+ <div class="popup_inner">
+ <h3>Make an Appointment</h3>
+ <form action="#">
+ <div class="row">
+ <div class="col-xl-6 col-md-6">
+ <input id="datepicker" placeholder="Date">
+ </div>
+ <div class="col-xl-6 col-md-6">
+ <input id="timepicker" placeholder="time">
+ </div>
+ <div class="col-xl-6 col-md-6">
+ <select class="form-select wide">
+ <option data-display="Choose services">Choose services 1</option>
+ <option value="1">Choose services 2</option>
+ <option value="2">Choose services 3</option>
+ <option value="3">Choose services 4</option>
+ </select>
+ </div>
+ <div class="col-xl-6 col-md-6">
+ <select class="form-select wide">
+ <option data-display="Choose Barbers">Choose Barbers</option>
+ <option value="1">Zaki</option>
+ <option value="2">Ronky</option>
+ <option value="3">kalu</option>
+ </select>
+ </div>
+ <div class="col-xl-6 col-md-6">
+ <input type="text" placeholder="Your name">
+ </div>
+ <div class="col-xl-6 col-md-6">
+ <input type="text" placeholder="Phone no">
+ </div>
+ <div class="col-xl-12">
+ <input type="email" placeholder="Your email">
+ </div>
+ <div class="col-xl-12">
+ <button type="submit" class="boxed-btn3">Submit</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </form>
+<!-- form itself end -->
+
+ <!-- JS here -->
+ <script th:src="@{js/vendor/modernizr-3.5.0.min.js}"></script>
+ <script th:src="@{js/vendor/jquery-1.12.4.min.js}"></script>
+ <script th:src="@{js/popper.min.js}"></script>
+ <script th:src="@{js/bootstrap.min.js}"></script>
+ <script th:src="@{js/owl.carousel.min.js}"></script>
+ <script th:src="@{js/isotope.pkgd.min.js}"></script>
+ <script th:src="@{js/ajax-form.js}"></script>
+ <script th:src="@{js/waypoints.min.js}"></script>
+ <script th:src="@{js/jquery.counterup.min.js}"></script>
+ <script th:src="@{js/imagesloaded.pkgd.min.js}"></script>
+ <script th:src="@{js/scrollIt.js}"></script>
+ <script th:src="@{js/jquery.scrollUp.min.js}"></script>
+ <script th:src="@{js/wow.min.js}"></script>
+ <script th:src="@{js/nice-select.min.js}"></script>
+ <script th:src="@{js/jquery.slicknav.min.js}"></script>
+ <script th:src="@{js/jquery.magnific-popup.min.js}"></script>
+ <script th:src="@{js/plugins.js}"></script>
+ <script th:src="@{js/gijgo.min.js}"></script>
+
+ <!--contact js-->
+ <script th:src="@{js/contact.js}"></script>
+ <script th:src="@{js/jquery.ajaxchimp.min.js}"></script>
+ <script th:src="@{js/jquery.form.js}"></script>
+ <script th:src="@{js/jquery.validate.min.js}"></script>
+ <script th:src="@{js/mail-script.js}"></script>
+
+ <script th:src="@{js/main.js}"></script>
+ <script>
+ $('#datepicker').datepicker({
+ iconsLibrary: 'fontawesome',
+ disableDaysOfWeek: [0, 0],
+ // icons: {
+ // rightIcon: '<span class="fa fa-caret-down"></span>'
+ // }
+ });
+ $('#datepicker2').datepicker({
+ iconsLibrary: 'fontawesome',
+ icons: {
+ rightIcon: '<span class="fa fa-caret-down"></span>'
+ }
+
+ });
+ var timepicker = $('#timepicker').timepicker({
+ format: 'HH.MM'
+ });
+ </script>
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-22 02:31:01 +0000