[add] video banner added

aplus/#5
tribikram 2 years ago committed by Mahesh Sharma
parent 0ed9bae401
commit 79f3effc28
  1. 108
      public/frontend/css/style.css
  2. 10
      public/frontend/icons/facebook.svg
  3. 3
      public/frontend/icons/instagram.svg
  4. 3
      public/frontend/icons/linkedIn.svg
  5. BIN
      public/frontend/video/aplus-video.mp4
  6. 13
      resources/views/layout/app.blade.php
  7. 62
      resources/views/welcome.blade.php

@ -46,7 +46,7 @@ h4{
/* new nav*/ /* new nav*/
.header { .header {
padding: 1rem 6rem; padding: 0 6rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -64,15 +64,18 @@ h4{
position: sticky; position: sticky;
box-shadow: 0 2px 4px rgba(99, 99, 99, 0.25); box-shadow: 0 2px 4px rgba(99, 99, 99, 0.25);
} }
.header-scroll .logo{ .header .logo{
height: 5rem; height: 5rem;
} }
.header-scroll .logo{
height: 3.8rem;
}
.navbar-list { .navbar-list {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 2rem; gap: 0.6rem;
text-decoration: none; text-decoration: none;
padding: 0 0.8rem !important; padding: 0 0.8rem !important;
list-style: none; list-style: none;
@ -84,6 +87,13 @@ h4{
line-height: 20px; line-height: 20px;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
.nav-socials{
display: flex;
gap: 10px;
}
.nav-socials a{
text-decoration: none;
}
.nav-link:hover, .nav-link:hover,
.nav-link:active { .nav-link:active {
@ -208,7 +218,73 @@ Responsive Codes
} }
/* new nav */ /* new nav */
/* banner section */
.banner-section{
position: relative;
}
.banner-section .banner-description{
position: absolute;
top: 40%;
left: 10%;
visibility: hidden;
animation: 4s anim-lineUp ease-out;
}
.banner-section .banner-description-two{
position: absolute;
top: 40%;
left: 10%;
visibility: hidden;
animation: 3s anim-lineUp ease-out;
animation-delay: 6s;
}
.banner-section .banner-description-three{
position: absolute;
top: 40%;
left: 10%;
visibility: hidden;
animation: 4s anim-lineUp ease-out;
animation-delay: 8s;
}
.banner-description h2, .banner-description-two h2, .banner-description-three h2{
font-weight: 800;
font-size: 46px;
line-height: 69px;
color: #FFFFFF;
}
@keyframes anim-lineUp {
0% {
opacity: 0;
transform: translateX(-50%);
visibility: visible;
}
20% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
visibility: visible;
transform: translateX(0%);
}
100% {
opacity: 0;
visibility: visible;
transform: translateX(0%);
}
}
.banner-description h3, .banner-description-two h3, .banner-description-three h3{
font-weight: 700;
font-size: 42px;
line-height: 63px;
letter-spacing: 0.01em;
color: #F54C5F;
}
.banner-description p, .banner-description-two p, .banner-description-three p{
font-weight: 400;
font-size: 18px;
line-height: 1.6rem;
color: #FFFFFF;
}
/* achievement section css */ /* achievement section css */
.achievement-section{ .achievement-section{
padding: 3rem 6rem; padding: 3rem 6rem;
@ -477,13 +553,19 @@ Responsive Codes
} }
/* news and update section css */ /* news and update section css */
.quick-enquiry-setion{ .quick-enquiry-setion{
background-image: url('../images/quick-enquiry.png'); background: url('../images/quick-enquiry.png') repeat fixed 100%;
padding: 6rem; padding: 6rem;
background-repeat: no-repeat; background-repeat: no-repeat;
height: auto; height: auto;
box-shadow: inset 0 1700px rgb(0 0 0 / 30%); width: 100%;
box-shadow: inset 0 1700px rgb(0 0 0 / 60%);
background-size: cover!important; background-size: cover!important;
position: relative; }
.quick-enquiry-setion .row{
display: flex;
align-items: center;
position: sticky;
top: 20px;
} }
.contact-phone{ .contact-phone{
display: flex; display: flex;
@ -577,9 +659,21 @@ Responsive Codes
.enquiry-contacts p{ .enquiry-contacts p{
font-weight: 400; font-weight: 400;
font-size: 22px; font-size: 22px;
margin-bottom: 40px;
line-height: 2rem; line-height: 2rem;
color: #FFFFFF; color: #FFFFFF;
} }
.btn-submit{
background: #F54C5F;
border: 2px solid #F54C5F;
border-radius: 4px;;
border-radius: 4px;
padding: 10px 40px;
font-weight: 700;
font-size: 16px;
text-align: center;
color: #FFFFFF;
}
/* footer css */ /* footer css */
.footer{ .footer{
padding: 3rem 6rem 0 6rem; padding: 3rem 6rem 0 6rem;

@ -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_1_101)">
<path d="M8 0C3.5912 0 0 3.5912 0 8C0 12.4088 3.5912 16 8 16C12.4088 16 16 12.4088 16 8C16 3.5912 12.4088 0 8 0ZM8 1.6C11.5441 1.6 14.4 4.4559 14.4 8C14.4 11.2116 12.0523 13.8504 8.975 14.3188V9.90781H10.8375L11.1297 8.01562H8.975V6.98125C8.975 6.19485 9.23119 5.49688 9.96719 5.49688H11.1484V3.84531C10.9404 3.81731 10.5015 3.75625 9.67188 3.75625C7.93907 3.75625 6.92344 4.67145 6.92344 6.75625V8.01562H5.14219V9.90781H6.92344V14.3031C3.89623 13.7927 1.6 11.1762 1.6 8C1.6 4.4559 4.4559 1.6 8 1.6Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1_101">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 757 B

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.44444 4C5.99378 4 4 5.99378 4 8.44444V15.5556C4 18.0062 5.99378 20 8.44444 20H15.5556C18.0062 20 20 18.0062 20 15.5556V8.44444C20 5.99378 18.0062 4 15.5556 4H8.44444ZM8.44444 5.77778H15.5556C17.0258 5.77778 18.2222 6.97422 18.2222 8.44444V15.5556C18.2222 17.0258 17.0258 18.2222 15.5556 18.2222H8.44444C6.97422 18.2222 5.77778 17.0258 5.77778 15.5556V8.44444C5.77778 6.97422 6.97422 5.77778 8.44444 5.77778ZM16.4444 6.66667C16.2087 6.66667 15.9826 6.76032 15.8159 6.92702C15.6492 7.09372 15.5556 7.31981 15.5556 7.55556C15.5556 7.7913 15.6492 8.0174 15.8159 8.18409C15.9826 8.35079 16.2087 8.44444 16.4444 8.44444C16.6802 8.44444 16.9063 8.35079 17.073 8.18409C17.2397 8.0174 17.3333 7.7913 17.3333 7.55556C17.3333 7.31981 17.2397 7.09372 17.073 6.92702C16.9063 6.76032 16.6802 6.66667 16.4444 6.66667ZM12 7.55556C9.54933 7.55556 7.55556 9.54933 7.55556 12C7.55556 14.4507 9.54933 16.4444 12 16.4444C14.4507 16.4444 16.4444 14.4507 16.4444 12C16.4444 9.54933 14.4507 7.55556 12 7.55556ZM12 9.33333C13.4702 9.33333 14.6667 10.5298 14.6667 12C14.6667 13.4702 13.4702 14.6667 12 14.6667C10.5298 14.6667 9.33333 13.4702 9.33333 12C9.33333 10.5298 10.5298 9.33333 12 9.33333Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.77778 4C4.79556 4 4 4.79556 4 5.77778V18.2222C4 19.2044 4.79556 20 5.77778 20H18.2222C19.2044 20 20 19.2044 20 18.2222V5.77778C20 4.79556 19.2044 4 18.2222 4H5.77778ZM5.77778 5.77778H18.2222V18.2222H5.77778V5.77778ZM8.24826 6.94792C7.48649 6.94792 7.02951 7.40585 7.02951 8.01562C7.02951 8.6254 7.48654 9.0816 8.17188 9.0816C8.93365 9.0816 9.39062 8.6254 9.39062 8.01562C9.39062 7.40585 8.9336 6.94792 8.24826 6.94792ZM7.09028 10.2222V16.4444H9.33333V10.2222H7.09028ZM11.184 10.2222V16.4444H13.4271V13.0434C13.4271 12.031 14.1494 11.8854 14.3663 11.8854C14.5832 11.8854 15.1632 12.103 15.1632 13.0434V16.4444H17.3333V13.0434C17.3333 11.0905 16.4655 10.2222 15.3802 10.2222C14.2949 10.2222 13.716 10.5836 13.4271 11.0903V10.2222H11.184Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 867 B

@ -34,7 +34,7 @@
<a class="navbar-brand" id="navbar-brand" href="{{url('/')}}"> <a class="navbar-brand" id="navbar-brand" href="{{url('/')}}">
<img src="{{ App\Models\Setting::where('slug', 'logo')->first()->value}}" class="img-fluid logo" alt=""> <img src="{{ App\Models\Setting::where('slug', 'logo')->first()->value}}" class="img-fluid logo" alt="">
</a> </a>
<ul class="nav nav-inner navbar-list ms-md-auto" id="navigation-links"> <ul class="nav nav-inner navbar-list" id="navigation-links">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{{url('/about')}}">About</a> <a class="nav-link" href="{{url('/about')}}">About</a>
</li> </li>
@ -58,6 +58,17 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link pr-0" href="{{url('/contact')}}">Contact</a> <a class="nav-link pr-0" href="{{url('/contact')}}">Contact</a>
</li> </li>
<li class="nav-socials">
<a href="" target="_blank">
<img src="{{url('frontend/icons/facebook.svg')}}" alt="">
</a>
<a href="" target="_blank">
<img src="{{url('frontend/icons/instagram.svg')}}" alt="">
</a>
<a href="" target="_blank">
<img src="{{url('frontend/icons/linkedIn.svg')}}" alt="">
</a>
</li>
</ul> </ul>
<div class="mobile-navbar-btn ms-auto"> <div class="mobile-navbar-btn ms-auto">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon> <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>

@ -4,32 +4,26 @@
@endsection @endsection
@section('content') @section('content')
<!-- Slider section --> <!-- Slider section -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"> <section class="banner-section">
<div class="carousel-indicators"> <video width="100%" height="auto" id="vid" autoplay playsinline loop muted>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <source src="{{url('frontend/video/aplus-video.mp4')}}" type="video/mp4">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> </video>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> <div class="banner-description">
</div> <h2>Study Commercial</h2>
<div class="carousel-inner"> <h3>Cookery in Australia</h3>
<div class="carousel-item active"> <p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
<img src="{{url('frontend/images/slider.png')}}" class="d-block w-100" alt="..."> </div>
</div> <div class="banner-description-two">
<div class="carousel-item"> <h2>Our pathway will </h2>
<img src="{{url('frontend/images/slider.png')}}" class="d-block w-100" alt="..."> <h3>help you build a secure future in Australia </h3>
</div> <p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
<div class="carousel-item"> </div>
<img src="{{url('frontend/images/slider.png')}}" class="d-block w-100" alt="..."> <div class="banner-description-three">
</div> <h2>Our pathway will </h2>
</div> <h3>help you build a secure future in Australia </h3>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
<span class="carousel-control-prev-icon" aria-hidden="true"></span> </div>
<span class="visually-hidden">Previous</span> </section>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Slider section --> <!-- Slider section -->
<!-- Achievement section --> <!-- Achievement section -->
<section class="achievement-section"> <section class="achievement-section">
@ -271,13 +265,9 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="row"> <div class="enquiry-header text-center">
<div class="col-md-12"> <h2>Quick Enquiry</h2>
<div class="enquiry-header text-center"> <p>Want to get in touch? Please fill in the form below and one of our agents will be in touch with you shortly. </p>
<h2>Quick Enquiry</h2>
<p>Want to get in touch? Please fill in the form below and one of our agents will be in touch with you shortly. </p>
</div>
</div>
</div> </div>
<form action=""> <form action="">
<div class="row enquiry-form"> <div class="row enquiry-form">
@ -319,7 +309,7 @@
</label> </label>
</div> </div>
<select class="form-select" id="inputGroupSelect01"> <select class="form-select" id="inputGroupSelect01">
<option selected>Choose Services</option> <option hidden>Choose Services</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -336,6 +326,9 @@
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message" name="message"></textarea> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message" name="message"></textarea>
</div> </div>
</div> </div>
<div class="text-center mt-3">
<button class="btn-submit">Submit</button>
</div>
</div> </div>
</form> </form>
</div> </div>
@ -343,6 +336,7 @@
</section> </section>
<!-- cotact section --> <!-- cotact section -->
@endsection @endsection
@section('script') @section('script')

Loading…
Cancel
Save