diff options
Diffstat (limited to 'src/main/resources/templates/single-blog.html')
| -rw-r--r-- | src/main/resources/templates/single-blog.html | 707 |
1 files changed, 707 insertions, 0 deletions
diff --git a/src/main/resources/templates/single-blog.html b/src/main/resources/templates/single-blog.html new file mode 100644 index 0000000..561fdcc --- /dev/null +++ b/src/main/resources/templates/single-blog.html @@ -0,0 +1,707 @@ +<!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" th: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" th: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>single Blog</h3> + </div> + </div> + </div> + </div> + <!-- bradcam_area_end --> + + <!--================Blog Area =================--> + <section class="blog_area single-post-area section-padding"> + <div class="container"> + <div class="row"> + <div class="col-lg-8 posts-list"> + <div class="single-post"> + <div class="feature-img"> + <img class="img-fluid" th:src="@{img/blog/single_blog_1.png}" alt=""> + </div> + <div class="blog_details"> + <h2>Second divided from form fish beast made every of seas + all gathered us saying he our + </h2> + <ul class="blog-info-link mt-3 mb-4"> + <li><a href="#"><i class="fa fa-user"></i> Travel, Lifestyle</a></li> + <li><a href="#"><i class="fa fa-comments"></i> 03 Comments</a></li> + </ul> + <p class="excert"> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower + </p> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. who has the willpower to actually + </p> + <div class="quote-wrapper"> + <div class="quotes"> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at + a fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. + </div> + </div> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower + </p> + <p> + MCSE boot camps have its supporters and its detractors. Some people do not understand why you + should have to spend money on boot camp when you can get the MCSE study materials yourself at a + fraction of the camp price. However, who has the willpower to actually sit through a + self-imposed MCSE training. who has the willpower to actually + </p> + </div> + </div> + <div class="navigation-top"> + <div class="d-sm-flex justify-content-between text-center"> + <p class="like-info"><span class="align-middle"><i class="fa fa-heart"></i></span> Lily and 4 + people like this</p> + <div class="col-sm-4 text-center my-2 my-sm-0"> + <!-- <p class="comment-count"><span class="align-middle"><i class="fa fa-comment"></i></span> 06 Comments</p> --> + </div> + <ul class="social-icons"> + <li><a href="#"><i class="fa fa-facebook-f"></i></a></li> + <li><a href="#"><i class="fa fa-twitter"></i></a></li> + <li><a href="#"><i class="fa fa-dribbble"></i></a></li> + <li><a href="#"><i class="fa fa-behance"></i></a></li> + </ul> + </div> + <div class="navigation-area"> + <div class="row"> + <div + class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center"> + <div class="thumb"> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/preview.png}" alt=""> + </a> + </div> + <div class="arrow"> + <a href="#"> + <span class="lnr text-white ti-arrow-left"></span> + </a> + </div> + <div class="detials"> + <p>Prev Post</p> + <a href="#"> + <h4>Space The Final Frontier</h4> + </a> + </div> + </div> + <div + class="col-lg-6 col-md-6 col-12 nav-right flex-row d-flex justify-content-end align-items-center"> + <div class="detials"> + <p>Next Post</p> + <a href="#"> + <h4>Telescopes 101</h4> + </a> + </div> + <div class="arrow"> + <a href="#"> + <span class="lnr text-white ti-arrow-right"></span> + </a> + </div> + <div class="thumb"> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/next.png}" alt=""> + </a> + </div> + </div> + </div> + </div> + </div> + <div class="blog-author"> + <div class="media align-items-center"> + <img th:src="@{img/blog/author.png}" alt=""> + <div class="media-body"> + <a href="#"> + <h4>Harvard milan</h4> + </a> + <p>Second divided from form fish beast made. Every of seas all gathered use saying you're, he + our dominion twon Second divided from</p> + </div> + </div> + </div> + <div class="comments-area"> + <h4>05 Comments</h4> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_1.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_2.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-list"> + <div class="single-comment justify-content-between d-flex"> + <div class="user justify-content-between d-flex"> + <div class="thumb"> + <img th:src="@{img/comment/comment_3.png}" alt=""> + </div> + <div class="desc"> + <p class="comment"> + Multiply sea night grass fourth day sea lesser rule open subdue female fill which them + Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser + </p> + <div class="d-flex justify-content-between"> + <div class="d-flex align-items-center"> + <h5> + <a href="#">Emilly Blunt</a> + </h5> + <p class="date">December 4, 2017 at 3:12 pm </p> + </div> + <div class="reply-btn"> + <a href="#" class="btn-reply text-uppercase">reply</a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="comment-form"> + <h4>Leave a Reply</h4> + <form class="form-contact comment_form" action="#" id="commentForm"> + <div class="row"> + <div class="col-12"> + <div class="form-group"> + <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9" + placeholder="Write Comment"></textarea> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control" name="name" id="name" type="text" placeholder="Name"> + </div> + </div> + <div class="col-sm-6"> + <div class="form-group"> + <input class="form-control" name="email" id="email" type="email" placeholder="Email"> + </div> + </div> + <div class="col-12"> + <div class="form-group"> + <input class="form-control" name="website" id="website" type="text" placeholder="Website"> + </div> + </div> + </div> + <div class="form-group"> + <button type="submit" class="button button-contactForm btn_1 boxed-btn">Send Message</button> + </div> + </form> + </div> + </div> + <div class="col-lg-4"> + <div class="blog_right_sidebar"> + <aside class="single_sidebar_widget search_widget"> + <form action="#"> + <div class="form-group"> + <div class="input-group mb-3"> + <input type="text" class="form-control" placeholder='Search Keyword' + onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Keyword'"> + <div class="input-group-append"> + <button class="btn" type="button"><i class="ti-search"></i></button> + </div> + </div> + </div> + <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn" + type="submit">Search</button> + </form> + </aside> + <aside class="single_sidebar_widget post_category_widget"> + <h4 class="widget_title">Category</h4> + <ul class="list cat-list"> + <li> + <a href="#" class="d-flex"> + <p>Resaurant food</p> + <p>(37)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Travel news</p> + <p>(10)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Modern technology</p> + <p>(03)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Product</p> + <p>(11)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Inspiration</p> + <p>(21)</p> + </a> + </li> + <li> + <a href="#" class="d-flex"> + <p>Health Care</p> + <p>(21)</p> + </a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget popular_post_widget"> + <h3 class="widget_title">Recent Post</h3> + <div class="media post_item"> + <img th:src="@{img/post/post_1.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>From life was you fish...</h3> + </a> + <p>January 12, 2019</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_2.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>The Amazing Hubble</h3> + </a> + <p>02 Hours ago</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_3.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>Astronomy Or Astrology</h3> + </a> + <p>03 Hours ago</p> + </div> + </div> + <div class="media post_item"> + <img th:src="@{img/post/post_4.png}" alt="post"> + <div class="media-body"> + <a href="single-blog.html"> + <h3>Asteroids telescope</h3> + </a> + <p>01 Hours ago</p> + </div> + </div> + </aside> + <aside class="single_sidebar_widget tag_cloud_widget"> + <h4 class="widget_title">Tag Clouds</h4> + <ul class="list"> + <li> + <a href="#">project</a> + </li> + <li> + <a href="#">love</a> + </li> + <li> + <a href="#">technology</a> + </li> + <li> + <a href="#">travel</a> + </li> + <li> + <a href="#">restaurant</a> + </li> + <li> + <a href="#">life style</a> + </li> + <li> + <a href="#">design</a> + </li> + <li> + <a href="#">illustration</a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget instagram_feeds"> + <h4 class="widget_title">Instagram Feeds</h4> + <ul class="instagram_row flex-wrap"> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_5.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_6.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_7.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_8.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_9.png}" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="img-fluid" th:src="@{img/post/post_10.png}" alt=""> + </a> + </li> + </ul> + </aside> + <aside class="single_sidebar_widget newsletter_widget"> + <h4 class="widget_title">Newsletter</h4> + <form action="#"> + <div class="form-group"> + <input type="email" class="form-control" onfocus="this.placeholder = ''" + onblur="this.placeholder = 'Enter email'" placeholder='Enter email' required> + </div> + <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn" + type="submit">Subscribe</button> + </form> + </aside> + </div> + </div> + </div> + </div> + </section> + <!--================ Blog Area end =================--> + + <!-- 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 ©<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 |