[add] contact us form added

aplus#6
tribikram 2 years ago committed by Mahesh Sharma
parent ce550c58da
commit cf023f185c
  1. 110
      public/frontend/css/style.css
  2. 10
      public/frontend/icons/contact-call-icon.svg
  3. 5
      public/frontend/icons/contact-icon.svg
  4. 10
      public/frontend/icons/contact-location-icon.svg
  5. 10
      public/frontend/icons/contact-mail-icon.svg
  6. 104
      resources/views/contact.blade.php

@ -571,7 +571,7 @@ Responsive Codes
display: flex; display: flex;
text-decoration: none; text-decoration: none;
align-items: center; align-items: center;
gap: 10px; gap: 20px;
} }
.contact-phone h5{ .contact-phone h5{
margin-bottom: 0; margin-bottom: 0;
@ -783,3 +783,111 @@ Responsive Codes
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #FFFFFF;
} }
/* contact us css */
.contact-us-section{
padding: 3rem 6rem;
background: #0A2849;
}
.get-in-touch-section{
padding: 3rem 6rem;
background: #F5F5F5;
}
.get-in-card{
background: linear-gradient(90.85deg, #0E4F97 -8.48%, #103E70 64.66%);
box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25);
border-radius: 15px;
padding: 3rem;
}
.get-in-card .row{
display: flex;
align-items: center;
}
.contact-icon{
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
}
.contact-icon h5{
font-weight: 500;
color: #FFFFFF;
margin-bottom: 0;
}
.get-in-desc h2{
font-weight: 700;
font-size: 28px;
color: #FFFFFF;
}
.get-in-desc p{
font-weight: 500;
font-size: 14px;
line-height: 178%;
color: #FFFFFF;
margin-bottom: 50px;
}
.get-in-card .col-md-7{
position: relative;
}
.get-in-card .col-md-7::before{
content: '';
position: absolute;
background: #F54C5F;
border-radius: 5px;
z-index: 1;
top: 10%;
width: 97%;
height: 450px;
}
.contact-form{
position: relative;
background: #F7F7F9;
border-radius: 10px;
padding: 20px;
z-index: 2;
margin: 0 10px;
}
.contact-form h2{
font-weight: 500;
font-size: 22px;
line-height: 178%;
text-align: center;
color: #0A2849;
margin-bottom: 30px;
}
.submit-btn button{
background: #F54C5F;
border-radius: 44px;
padding: 10px 20px;
border: none;
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: #FFFFFF;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
box-shadow: none;
}
.contact-form label{
font-weight: 400;
font-size: 15px;
line-height: 1.8rem;
color: #0A2849;
}
.contact-form .form-control,
.contact-form select{
border: none;
padding: 0.6rem;
}
.contact-form textarea::-webkit-input-placeholder,
.contact-form select,
.contact-form input::-webkit-input-placeholder{
font-weight: 400;
line-height: 1.6rem;
font-size: 12px;
color: #7B8792;
}
.aplus-display-select{
color: #0A2849;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 34 KiB

@ -0,0 +1,5 @@
<svg width="6" height="16" viewBox="0 0 6 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3" cy="3" r="3" fill="white"/>
<circle cx="3" cy="13" r="3" fill="white"/>
<path d="M3 12V4.5" stroke="white"/>
</svg>

After

Width:  |  Height:  |  Size: 225 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

@ -0,0 +1,104 @@
@extends('layout.app')
@section('title')
<title>Contact Us</title>
@endsection
@section('content')
<section class="contact-us-section">
</section>
<section class="get-in-touch-section">
<div class="get-in-card">
<div class="row">
<div class="col-md-5">
<div class="get-in-desc">
<div class="contact-icon">
<img src="{{url('frontend/icons/contact-icon.svg')}}" alt="">
<h5>Contact us</h5>
</div>
<h2>Get in touch with us</h2>
<p>If you have an enquiry regarding immigration to
Australia, please fill out the enquiry form below and
one of our migration agents will be in touch.
</p>
<div class="contact-desc">
<a href="tel: +61 - 047 817 7809" class="contact-phone">
<img src="{{url('frontend/icons/contact-call-icon.svg')}}" alt="">
<h5>+61 - 047 817 7809</h5>
</a>
<a href="mailto: info@aplusagency.com.au" class="contact-phone">
<img src="{{url('frontend/icons/contact-mail-icon.svg')}}" alt="">
<h5>info@aplusagency.com.au</h5>
</a>
<a href="https://goo.gl/maps/P4Y2PYGMpGa83L2R8" target="_blank" class="contact-phone">
<img src="{{url('frontend/icons/contact-location-icon.svg')}}" alt="">
<h5>Suite 503, Level 5, 368 Sussex Street Sydney, NSW 2000</h5>
</a>
</div>
</div>
</div>
<div class="col-md-7">
<div class="contact-form">
<h2>Please fill-up the form</h2>
<form action="">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="">Full name</label>
<input type="text" class="form-control" placeholder="Enter your name" name="" id="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Email address</label>
<input type="email" class="form-control" placeholder="Enter your email adress" name="" id="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Phone</label>
<input type="text" class="form-control" placeholder="Enter your phone number" name="" id="">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Nationality</label>
<select name="" class="form-select" id="">
<option hidden class="hidden-select">Select your Nationality</option>
<option value="1" class="aplus-display-select">China</option>
<option value="2" class="aplus-display-select">Nepal</option>
<option value="3" class="aplus-display-select">India</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Course</label>
<select name="" id="" class="form-select">
<option hidden>Choose course</option>
<option value="" class="aplus-display-select">Cookery</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="">Enter Captch</label>
<input type="text" class="form-control" placeholder="Captcha">
</div>
</div>
<div class="col-md-12">
<div class="mb-5">
<label for="">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write a message.." name="message"></textarea>
</div>
</div>
<div class="submit-btn">
<button type="submit">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
@endsection
Loading…
Cancel
Save