[add] appointment page

et#19
tribikram 2 years ago committed by Mahesh Sharma
parent 41f88d9e24
commit 8d304d8bbf
  1. 61
      public/frontend/css/style.css
  2. 82
      public/frontend/plugin/zabuto_calendar.min.css
  3. 5
      public/frontend/plugin/zabuto_calendar.min.js
  4. 64
      resources/views/appointment.blade.php
  5. 7
      resources/views/layout/app.blade.php
  6. 6
      resources/views/welcome.blade.php
  7. 6
      routes/web.php

@ -57,7 +57,17 @@ h2{
line-height: 22px;
color: #2B2A29 !important;
}
.header .appointment-btn{
text-decoration: none;
color: #FFFFFF;
background: #326CBF;
padding: 10px 1rem;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 17px;
line-height: 22px;
}
.nav-link:hover,
.nav-link:active {
color: #326CBF !important;
@ -434,7 +444,8 @@ Responsive Codes
.blog-detail-section,
.faq-section,
.student-visa-section,
.services-page-section{
.services-page-section,
.appointment-section{
padding: 3rem 6rem;
}
.services-section .row,
@ -1443,6 +1454,48 @@ Responsive Codes
text-align: center;
color: #111111;
}
/* appointment page css */
.appointment-cards{
display: flex;
flex-direction: column;
gap: 20px;
}
.appointment-card{
background-color: #E5F0FF;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: #000000;
padding: 10px 20px;
border-radius: 20px;
width: 360px;
}
.appointment-card-img{
width: 50px;
}
.claender-top{
display: flex;
gap: 10px;
}
.zabuto-calendar{
margin-top: 20px !important;
}
table.lightgrey-weekends tbody td:nth-child(n+6) {
background-color: #f3f3f3;
}
.appointment-section h1{
color: #296AC7;
margin-bottom: 2rem;
}
.calender-section h3{
font-size: 18px;
color: #9f9f9f;
}
.calender-section h2{
color: #296AC7;
}
/* appointment page css ends */
/* Footer Css */
.footer{
@ -1522,7 +1575,9 @@ Responsive Codes
align-items: center;
gap: 10px;
}
.blog-info h6{
.blog-info h6,
.claender-top p,
.claender-top h5{
margin-bottom: 0;
}
.socials-icon{

@ -0,0 +1,82 @@
/*! Zabuto Calendar - v2.1.0 - 2022-12-29
* https://github.com/zabuto/calendar
* Copyright (c) 2022 Anke Heijnen; Licensed MIT */
.zabuto-calendar {
width: 100%;
margin: 0;
padding: 0
}
.zabuto-calendar__navigation__item--next,
.zabuto-calendar__navigation__item--prev {
text-align: center;
cursor: pointer
}
.zabuto-calendar__navigation__item--header {
text-align: center
}
.zabuto-calendar__navigation__item--header__title {
cursor: pointer;
font-weight: bolder
}
.zabuto-calendar__days-of-week__item {
text-align: center
}
.zabuto-calendar__day {
text-align: center
}
.zabuto-calendar__day--today {
text-align: center
}
.zabuto-calendar.table td,
.zabuto-calendar.table th {
vertical-align: middle
}
.zabuto-calendar.table thead td {
padding-top: 14px;
padding-bottom: 14px;
background-color: #fafafa
}
.zabuto-calendar.table-bordered thead td {
border: 0
}
.zabuto-calendar.table thead th {
background-color: #f0f0f0
}
.zabuto-calendar.table>thead:first-child>tr:first-child>td {
border-top: 1px solid #ddd
}
.zabuto-calendar.table>thead>tr>th {
border-bottom: 2px solid #ddd
}
.zabuto-calendar.table>tbody td {
width: calc(100% / 7)
}
.zabuto-calendar.table>tbody>tr:last-child>td {
border-bottom: 1px solid #ddd
}
.zabuto-calendar.table>tbody td .badge {
font-size: 100%
}
.zabuto-calendar.clickable>tbody td {
cursor: pointer
}
.zabuto-calendar.table.clickable>tbody td:hover {
background-color: #f0f0f0
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,64 @@
@extends('layout.app')
@section('title')
<title>Book an Appointment</title>
<meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
<meta name="robots" content="index, follow" />
<meta property="og:url" content="" />
<meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
<meta property="og:title" content="ET-Visas"/>
<meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
<section class="appointment-section">
<div class="row">
<div class="col-md-6">
<h1>Book an Appointment</h1>
<div class="appointment-cards">
<a href="" class="appointment-card">
<div class="appointment-card-img">
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
</div>
<div>
<h3>Education Services</h3>
</div>
</a>
<a href="" class="appointment-card">
<div class="appointment-card-img">
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
</div>
<div>
<h3>Education Services</h3>
</div>
</a>
</div>
</div>
<div class="col-md-6">
<div class="calender-section">
<div class="claender-top">
<p>Time Zone:</p>
<h5>Australia / Sydney</h5>
</div>
<h2>Select available date</h2>
<h3>Education services | 30 mins</h3>
<div id="demo-calendar-apppearance"></div>
</div>
</div>
</div>
</section>
@endsection
@section('script')
<script>
$(document).ready(function () {
$("#demo-calendar-apppearance").zabuto_calendar({
classname: 'table clickable table-bordered lightgrey-weekends',
week_starts: 'monday',
show_days: true,
today_markup: '<span class="badge bg-primary">[day]</span>',
navigation_markup: {
prev: '<i class="fas fa-chevron-circle-left"></i>',
next: '<i class="fas fa-chevron-circle-right"></i>'
}
});
});
</script>
@endsection

@ -122,6 +122,9 @@
<li class="nav-item">
<a class="nav-link" href="{{url('/faqs')}}">FAQs</a>
</li>
<li>
<a href="{{url('/appointment')}}" class="appointment-btn">BOOK AN APPOINTMENT</a>
</li>
</ul>
<div class="mobile-navbar-btn">
<img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
@ -283,6 +286,10 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<!-- require the plugin files -->
<link href="{{url('frontend/plugin/zabuto_calendar.min.css')}}" rel="stylesheet">
<script src="{{url('frontend/plugin/zabuto_calendar.min.js')}}"></script>
@yield('script')
<script>
$.ajaxSetup({

@ -152,7 +152,7 @@
</div>
<div class="col-md-6">
<div class="why-us-desc">
{!!$about_us->skip(1)->first()->description!!}
{!!$about_us->skip(1)->first()->description ?? '' !!}
<!-- <h1>Why Choose Us</h1>
<p>A remarkable number of Nepalese students from across the world, from diverse backgrounds, have achieved their international education goals successfully through us, the best Study Abroad Consultants in Nepal.</p> -->
<div class="why-us-lists">
@ -160,7 +160,7 @@
<img src="{{url('frontend/icons/exclusive.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
{!!$about_us->skip(1)->first()->sub_description!!}
{!!$about_us->skip(1)->first()->sub_description ?? ''!!}
</div>
</div>
<div class="why-us-lists">
@ -168,7 +168,7 @@
<img src="{{url('frontend/icons/coin.svg')}}" class="img-fluid" alt="">
</div>
<div class="list-des">
{!!$about_us->skip(1)->first()->bottom_description!!}
{!!$about_us->skip(1)->first()->bottom_description ?? '' !!}
</div>
</div>
<!--<div class="why-us-lists">-->

@ -296,9 +296,9 @@ Route::get('/career_counselling', function () {
Route::get('/insurance', function () {
return view('insurance');
});
// Route::get('/study-abroad-detail', function () {
// return view('study-abroad-detail');
// });
Route::get('/appointment', function () {
return view('appointment');
});
// Route::get('/visa', function () {
// return view('visa');
// });

Loading…
Cancel
Save