- var page_Title = 'Tour';
- var tour                  = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var tooltip               = true;
- var scrollbar             = true;
- var counter1              = true;
- var avatar_change         = true;

doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Tour 
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Tour  
          // Container-fluid starts
          .container
            .user-profile
              .grid.grid-cols-12.gap-4
                // user profile first-style start
                .col-span-12
                  .card.hovercard.text-center.common-user-image
                    .cardheader
                      .user-image
                        .avatar
                          .common-align 
                            div
                              img#output(src='../assets/images/dashboard-11/user/12.jpg', class="z-0" alt="user" data-intro='This is cuba profile image')
                              input(type='file' accept='image/*' onchange='loadFile(event)' data-intro='Change cuba profile image here')
                              .icon-wrapper#cancelButton
                                i.icofont.icofont-error 
                              .icon-wrapper 
                                i.icofont.icofont-pencil-alt-5
                            .user-designation
                              a(target='_blank', href='') William C. Jennings
                              .desc Designer
                          .follow
                            div
                              .follow-num.counter(data-target='258690') 0
                              span Follower
                            div
                              .follow-num.counter(data-target='659887') 0
                              span Following
                // user profile first-style end 
                .col-span-12
                  .card.user-bio 
                    .card-body
                      .grid.grid-cols-12.gap-4
                        div(class="col-span-12")
                          .ttl-info.text-start(data-intro='This is your profile bio')
                            h6 
                              i.fa-solid.fa-user-tie.pe-2
                              | Bio
                            span.mb-sm-3 Over five years of experience creating visually attractive and user-friendly websites has given me a passion for creating unique and creative websites. skilled in fusing cutting-edge online technologies with beautiful design concepts to create amazing user experiences. robust history in front-end development, UI/UX, and graphic design. highly skilled at solving problems, has a keen eye for detail, and can collaborate with others in a hectic setting.
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-envelope.pe-2
                              | Email
                            span william@jourrapide.com
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-calendar-days.pe-2
                              | Birthday Date
                            span 02 January 2000
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-phone.pe-2
                              | Contact Us
                            span India +91 123-456-7890
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start.pb-0
                            h6
                              i.fa-solid.fa-location-arrow.pe-2
                              | Location 
                            span B69 Libby Street Beverly Hills
                        div(class="col-span-12")
                          .common-flex.justify-center
                            .social-media(data-intro='This is your social details')
                              ul.list-inline
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Facebook')
                                  a(href='https://www.facebook.com/' target="_blank")
                                    i.fa-brands.fa-facebook-f
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Google+')
                                  a(href='https://accounts.google.com/' target="_blank")
                                    i.fa-brands.fa-google-plus-g
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='X (Twitter)')
                                  a(href='https://twitter.com/' target="_blank")
                                    i.fa-brands.fa-x-twitter
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Instagram')
                                  a(href='https://www.instagram.com/' target="_blank")
                                    i.fa-brands.fa-instagram
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='RSS')
                                  a(href='https://rss.app/' target="_blank")
                                    i.fa-solid.fa-share-nodes
                // user profile second-style start
                .col-span-12
                  .card  
                    .profile-img-style  
                      .grid.grid-cols-12.g-2 
                        div(class="col-span-8 sm:col-span-12")
                          .flex
                            img.img-thumbnail.rounded-full.me-3(src='../assets/images/user/7.jpg', alt='Generic placeholder image')
                            .user_dot.align-self-center
                              h6.mt-0.user-name William C. Jennings
                              .tour-wrapper
                                span 25 Jan
                                i.tour-dot.fa.fa-circle
                                span.txt-danger 1 min read
                        div(class="col-span-4 sm:col-span-12").align-self-center.mt-0.text-end
                          .social-media.social-tour 
                            ul.list-inline(class="[@media(max-width:599px)]:!hidden")
                              li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Facebook')
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Google+')
                                a(href='https://accounts.google.com/' target="_blank")
                                  i.fa-brands.fa-google-plus-g
                              li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='X (Twitter)')
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Instagram')
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='RSS')
                                a(href='https://rss.app/' target="_blank")
                                  i.fa-solid.fa-share-nodes
                            .float-sm-end
                              small 10 Hours ago
                      hr
                      p.block-ellipsis 
                        | A person who interacts with a given system, platform, or gadget in order to carry out a particular activity or obtain specific data is referred to as a user. A user is someone who interacts with software, websites, or electronic gadgets in the context of technology.
                      #aniimated-thumbnials-2.grid.grid-cols-12.gap-4.mt-4.pictures
                        a.col-span-6(href='#!' class="sm:col-span-12")
                          .tour-blog(class="[@media(max-width:992px)]:h-[calc(200px_+_(350_-_200)_*_((100vw_-_320px)_/_(992_-_320)))]")
                            img.max-w-full.rounded(src='../assets/images/other-images/mountain.jpg', alt='mountain')
                        a.col-span-6(href='#!' class="sm:col-span-12") 
                          .tour-blog(class="[@media(max-width:992px)]:h-[calc(200px_+_(350_-_200)_*_((100vw_-_320px)_/_(992_-_320)))]")
                            img.max-w-full.rounded(src='../assets/images/other-images/sea.jpg', alt='sea')
                      .like-comment.mt-4(data-intro='This is your like-comment-share icons')
                        ul.list-inline
                          li.list-inline-item.b-r-gray.pe-3
                            label.m-0
                              a(href='#!') 
                                i.fa-solid.fa-heart 
                              |   Like
                          li.list-inline-item.b-r-gray.pe-3
                            label.m-0
                              a(href='#!')
                                i.fa-solid.fa-comments
                              |   Comment
                          li.list-inline-item
                            label.m-0
                              a(href='#!')
                                i.fa-solid.fa-paper-plane
                              |   Share
                // user profile second-style end
          // Container-fluid Ends 
        include ../../components/footer
    include ../../components/footer-files