Updated in Blog, Appointment

public/frontend/css/style.css

@@ -45,7 +45,7 @@ h2{
     justify-content: center;
     align-items: center;
     text-align: center;
-    gap: 2rem;
+    gap: 1.2rem;
     text-decoration: none;
     padding: 0 0.8rem !important;
     list-style: none;
@@ -64,10 +64,14 @@ h2{
     padding: 10px 1rem;
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
-    font-weight: 500;
+    font-weight: 600;
-    font-size: 17px;
+    font-size: 16px;
     line-height: 22px;
 }
+.header .appontment-btn:hover{
+    background: #E32394;
+    transition: all 250ms ease-in-out;
+}
 .nav-link:hover,
 .nav-link:active {
     color: #326CBF !important;
@@ -727,17 +731,20 @@ Responsive Codes
 .blog-img img{
     border-radius: 12px 12px 0 0;
 }
-.blog-date{
+.blog-date {
     position: absolute;
-    right: 20px;
+    right: 15px;
-    bottom: -35px;
+    bottom: -30px;
     display: inline-flex;
     background: #326CBF;
     border-radius: 50%;
-    padding: 20px 10px;
+    padding: 5px 5px;
     color: #FFF1FC;
     border: 3px solid #7AA9EC;
-}
+    width: 56px;
+    height: 56px;
+    align-items: center;
+  }
 .blog-date h5{
     font-weight: 700;
     font-size: 15px;
@@ -746,6 +753,13 @@ Responsive Codes
     color: #FFFFFF;
     margin-bottom: 0;
 }
+.mr-3 {
+    margin-right: 30px;
+  }
+  
+  .dinline {
+    display: inline-block;
+  }
 /* blog ection css end */
 
 /* study abroad css starts */
@@ -1249,7 +1263,7 @@ Responsive Codes
 /* blogs page css */
 .article-card{
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     gap: 20px;
     width: 100%;
 }
@@ -1401,7 +1415,12 @@ Responsive Codes
     font-size: 14px;
     line-height: 18px;
     color: #000000;
+    display: inline;
 }
+.recent-post-desc h5:nth-of-type(2){
+    margin-left:10px;
+}
+
 .recent-post-desc h2{
     font-weight: 700;
     font-size: 18px;
@@ -1467,17 +1486,56 @@ Responsive Codes
     gap: 20px;
     text-decoration: none;
     color: #000000;
-    padding: 10px 20px;
+    padding: 10px 15px;
-    border-radius: 20px;
+    border-radius: 12px;
     width: 360px;
 }
 .appointment-card-img{
-    width: 50px;
+    width: 40px;
+    padding:5px;
+}
+.appointment-card h3{
+    font-weight: bold;
+    font-size:24px;
 }
-.claender-top{
+.appointment-section form input:focus, .btn-close:focus, .appointment-section form textarea:focus{
+    box-shadow: none;
+}
+.appointment-section .modal-header{
+    background:#296AC7;
+    color:#fff;
+}
+.appointment-section .modal-footer button{
+    font-weight: 600;
+}
+.appointment-section .btn-primary{
+    background: #296AC7;
+    font-weight: 600;
+}
+.appointment-section .btn-secondary{
+    background: #5d5d5d;
+}
+.appointment-section .btn-primary:hover{
+    background: #0A4EB0;
+    border:1px solid #0b4aa5;
+    font-weight: 600;
+}
+.appointment-section .btn-secondary:hover{
+    background: #e62194;
+    border:1px solid #e62194;
+    font-weight: 600;
+}
+.appointment-section .btn-close{
+    background:url(../images/corss-white.svg) 0 0 no-repeat;
+}
+.calendar-top{
     display: flex;
     gap: 10px;
 }
+.calendar-top h5{
+    font-weight: bold;
+    font-size: 18px;
+}
 .zabuto-calendar{
     margin-top: 20px !important;
 }
@@ -1503,14 +1561,32 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     cursor: not-allowed;
 }
 .available-dates{
-    background: #f0f0f0;
+    /* background: #f0f0f0; */
     display: inline-block;
     text-align: center;
     justify-content: center;
     color: #272626;
-    padding: 10px;
     margin-top: 1rem;
 }
+.available-dates button{
+    display: inline-block;
+    background: #e5f0ff;
+    border: 1px solid #e0ecfb;
+    color:#1a60c5;
+    padding: 10px 12px;
+    margin-left: 15px;
+}
+.available-dates button:nth-of-type(1){
+    margin-left:0;
+}
+.available-dates button, .appointment-section .modal-footer button{
+    transition: all 250ms ease-in-out;
+}
+.available-dates button:hover{
+    background: #296ac7;
+    border:1px solid #2464c0;
+    color:#fff;
+}
 .available-dates h5{
     margin-bottom: 0;
 }
@@ -1595,8 +1671,8 @@ table.lightgrey-weekends tbody td:nth-child(n+6) {
     gap: 10px;
 }
 .blog-info h6,
-.claender-top p,
+.calendar-top p,
-.claender-top h5{
+.calendar-top h5{
     margin-bottom: 0;
 }
 .socials-icon{

public/frontend/images/corss-white.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_205_38)">
+<path d="M0.293031 0.293081C0.480558 0.10561 0.734866 0.000294724 1.00003 0.000294724C1.26519 0.000294724 1.5195 0.10561 1.70703 0.293081L8.00003 6.58608L14.293 0.293081C14.3853 0.197571 14.4956 0.121389 14.6176 0.0689798C14.7396 0.0165708 14.8709 -0.0110155 15.0036 -0.0121693C15.1364 -0.0133231 15.2681 0.0119786 15.391 0.0622595C15.5139 0.11254 15.6255 0.186793 15.7194 0.280686C15.8133 0.374579 15.8876 0.486231 15.9379 0.609127C15.9881 0.732024 16.0134 0.863703 16.0123 0.996482C16.0111 1.12926 15.9835 1.26048 15.9311 1.38249C15.8787 1.50449 15.8025 1.61483 15.707 1.70708L9.41403 8.00008L15.707 14.2931C15.8892 14.4817 15.99 14.7343 15.9877 14.9965C15.9854 15.2587 15.8803 15.5095 15.6948 15.6949C15.5094 15.8803 15.2586 15.9855 14.9964 15.9878C14.7342 15.99 14.4816 15.8892 14.293 15.7071L8.00003 9.41408L1.70703 15.7071C1.51843 15.8892 1.26583 15.99 1.00363 15.9878C0.741433 15.9855 0.49062 15.8803 0.305212 15.6949C0.119804 15.5095 0.014635 15.2587 0.0123566 14.9965C0.0100781 14.7343 0.110873 14.4817 0.293031 14.2931L6.58603 8.00008L0.293031 1.70708C0.10556 1.51955 0.000244141 1.26525 0.000244141 1.00008C0.000244141 0.734917 0.10556 0.480609 0.293031 0.293081Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_205_38">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/images/visa_service/2023/01/27/57b106a7c6f774313201376345dcba0d.svg

@@ -1,8 +0,0 @@
-<svg width="94" height="27" viewBox="0 0 94 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 11.0001L12 2.00006" stroke="#E22899" stroke-width="2"/>
-<path d="M81 26L92 17" stroke="#E22899" stroke-width="2"/>
-<path d="M3 25L33 1" stroke="#E22899" stroke-width="2"/>
-<path d="M43 25L73 1" stroke="#E22899" stroke-width="2"/>
-<path d="M23 25L53 1" stroke="#E22899" stroke-width="2"/>
-<path d="M63 25L93 1" stroke="#E22899" stroke-width="2"/>
-</svg>

public/images/visa_service/2023/01/27/883104c5142e46c0cb872806936a0228.svg

@@ -1,8 +0,0 @@
-<svg width="94" height="27" viewBox="0 0 94 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 11.0001L12 2.00006" stroke="#E22899" stroke-width="2"/>
-<path d="M81 26L92 17" stroke="#E22899" stroke-width="2"/>
-<path d="M3 25L33 1" stroke="#E22899" stroke-width="2"/>
-<path d="M43 25L73 1" stroke="#E22899" stroke-width="2"/>
-<path d="M23 25L53 1" stroke="#E22899" stroke-width="2"/>
-<path d="M63 25L93 1" stroke="#E22899" stroke-width="2"/>
-</svg>

resources/views/appointment.blade.php

@@ -34,62 +34,61 @@
             </div>
             <div class="col-md-7">
                 <div class="calender-section">
-                    <div class="claender-top">
+                    <div class="calendar-top">
-                        <p>Time Zone:</p>
+                        <h5>Time Zone:</h5>
-                        <h5>Australia / Sydney</h5>
+                        <h5>Australia | Sydney</h5>
                     </div>
                     <h2>Select available date</h2>
                     <h3>Education services | 30 mins</h3>
                     <div id="demo-calendar-apppearance"></div>
-                    <div class="available-dates">
+                    <div id='available-dates' class="available-dates">
-                        <h5 id='available-dates'></h5>
+                        <!-- <h5 id='available-dates'></h5> -->
                     </div>
                 </div>
             </div>
         </div>
-    </section>
-
-
-<!-- Modal -->
-<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="appointmentModalLabel">Book Appointment</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <!-- Form with the fields name, email, phone, and notes -->
-        <form>
-          <div class="form-group">
-            <label for="name">Name</label>
-            <input type="text" class="form-control" id="name" required>
-          </div>
-          <div class="form-group">
-            <label for="email">Email</label>
-            <input type="email" class="form-control" id="email" required>
-          </div>
-          <div class="form-group">
-            <label for="phone">Phone</label>
-            <input type="tel" class="form-control" id="phone" required>
-          </div>
-          <div class="form-group">
-            <label for="notes">Notes</label>
-            <textarea class="form-control" id="notes"></textarea>
-          </div>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Book Appointment</button>
-      </div>
-    </div>
-  </div>
-</div>
 
+        <!-- Appointment Modal -->
+        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h3 class="modal-title" id="appointmentModalLabel">Book Appointment</h3>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                        </button> -->
+                    </div>
+                    <div class="modal-body">
+                        <!-- Form with the fields name, email, phone, and notes -->
+                        <form>
+                        <div class="form-group mb-2">
+                            <label for="name">Name</label>
+                            <input type="text" class="form-control mt-1" id="name" required>
+                        </div>
+                        <div class="form-group mb-2">
+                            <label for="email">Email</label>
+                            <input type="email" class="form-control mt-1" id="email" required>
+                        </div>
+                        <div class="form-group mb-2">
+                            <label for="phone">Phone</label>
+                            <input type="tel" class="form-control mt-1" id="phone" required>
+                        </div>
+                        <div class="form-group mb-2">
+                            <label for="notes">Notes</label>
+                            <textarea class="form-control mt-1" id="notes"></textarea>
+                        </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-primary">Book Appointment</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
+    </section>
 
 
 @endsection
@@ -167,7 +166,7 @@
             for (var i = 0; i < appointments.length; i++) {
                 var appointment = appointments[i];
                 var isAm = appointment.start_time < '12:00:00';
-                timeSlots += '<button type="button" class="time-slot" data-toggle="modal" data-target="#appointmentModal" data-appointment-id="' + appointment.id + '">' + appointment.start_time + ' ' + (isAm ? 'AM' : 'PM') + '</button><br>';
+                timeSlots += '<button type="button" class="time-slot" data-toggle="modal" data-target="#appointmentModal" data-appointment-id="' + appointment.id + '">' + appointment.start_time + ' - ' + appointment.end_time +' ' + (isAm ? 'AM' : 'PM') + '</button>';
             }
 
             $('#available-dates').html(timeSlots);

resources/views/blogs.blade.php

@@ -33,9 +33,9 @@
             <div class="col-md-5">
                 <div class="featured-article">
                     <img src="{{url($blog->thumnail ?? $blog->image )}}" class="w-100" alt="">
-                    <h3>Study in Australia</h3>
+                    <h3 class="dinline mr-3">Study in Australia</h3>
                     @php $date = Carbon\Carbon::createFromFormat('Y-m-d', $blog->publish_date);@endphp
-                    <h6>{{$date->format('j M, Y')}}</h6>
+                    <h6 class="dinline mr-3">{{$date->format('j M, Y')}}</h6>
                     <h2>{{$blog->title}} </h2>
                     <p>{!!(\Illuminate\Support\Str::limit($blog->description, 200, $end='...'))!!}</p>
                     <a href="{{url('/blog/'.$blog->slug)}}">Read More <i class="fa-solid fa-arrow-right-long ms-2 fa-sm"></i></a>
@@ -50,8 +50,8 @@
                             <img src="{{url($blog->thumbnail ?? $blog->image)}}" class="w-100" alt="">
                         </div>
                         <div class="article-desc">
-                            <h3>Study in Australia</h3>
+                            <h3 class="dinline mr-3">Study in Australia</h3>
-                            <h6>{{$blog->publish_date}}</h6>
+                            <h6 class="dinline mr-3">{{$blog->publish_date}}</h6>
                             <h2>{{$blog->title}} </h2>
                             <p>{!!(\Illuminate\Support\Str::limit($blog->description, 200, $end='...'))!!}</p>
                             <a href="{{url('/blog/'.$blog->slug)}}">Read More <i class="fa-solid fa-arrow-right-long ms-2 fa-xs"></i></a>