[add] video banner added

aplus/#5
tribikram 2 years ago committed by Mahesh Sharma
parent 0ed9bae401
commit 79f3effc28
  1. 110
      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*/
.header {
padding: 1rem 6rem;
padding: 0 6rem;
display: flex;
justify-content: space-between;
align-items: center;
@ -64,15 +64,18 @@ h4{
position: sticky;
box-shadow: 0 2px 4px rgba(99, 99, 99, 0.25);
}
.header-scroll .logo{
.header .logo{
height: 5rem;
}
.header-scroll .logo{
height: 3.8rem;
}
.navbar-list {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 2rem;
gap: 0.6rem;
text-decoration: none;
padding: 0 0.8rem !important;
list-style: none;
@ -84,6 +87,13 @@ h4{
line-height: 20px;
color: #FFFFFF !important;
}
.nav-socials{
display: flex;
gap: 10px;
}
.nav-socials a{
text-decoration: none;
}
.nav-link:hover,
.nav-link:active {
@ -208,7 +218,73 @@ Responsive Codes
}
/* 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{
padding: 3rem 6rem;
@ -477,13 +553,19 @@ Responsive Codes
}
/* news and update section css */
.quick-enquiry-setion{
background-image: url('../images/quick-enquiry.png');
background: url('../images/quick-enquiry.png') repeat fixed 100%;
padding: 6rem;
background-repeat: no-repeat;
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;
position: relative;
}
.quick-enquiry-setion .row{
display: flex;
align-items: center;
position: sticky;
top: 20px;
}
.contact-phone{
display: flex;
@ -577,9 +659,21 @@ Responsive Codes
.enquiry-contacts p{
font-weight: 400;
font-size: 22px;
margin-bottom: 40px;
line-height: 2rem;
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{
padding: 3rem 6rem 0 6rem;
@ -643,4 +737,4 @@ Responsive Codes
.developed-by a{
text-decoration: none;
color: #53676E;
}
}

@ -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('/')}}">
<img src="{{ App\Models\Setting::where('slug', 'logo')->first()->value}}" class="img-fluid logo" alt="">
</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">
<a class="nav-link" href="{{url('/about')}}">About</a>
</li>
@ -58,6 +58,17 @@
<li class="nav-item">
<a class="nav-link pr-0" href="{{url('/contact')}}">Contact</a>
</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>
<div class="mobile-navbar-btn ms-auto">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>

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

Loading…
Cancel
Save