Contact section page in php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- contact section -->
<section id="contact" class="py-5 bg-warning mt-3">
<div class="container">
<!-- title contact -->
<!-- title -->
<div class="row">
<div class="col text-center ">
<h1 class="display-4 text-uppercase mb-0 ">
<strong>contact</strong>
</h1>
<div class="title-underline bg-danger"></div>
<!-- <p class="mt-2 text-capitalize text-muted">Lorem ipsum dolor sit amet.</p> -->
</div>
</div>
<!-- end of title -->
<div class="row">
<div class="col-md-6 my-3">
<div class="card card-body bg-secondary">
<!-- title -->
<div class="card-title text-center text-white">
<h1 class="text-capitalize">Contact Us</h1>
<p>Message Us</p>
</div>
<!-- end of title -->
<form >
<!-- simple form -->
<div class="form-group mt-3">
<input type="name" class="form-control " placeholder="Name">
</div>
<!-- email -->
<div class="form-group mt-3">
<input type="email" class="form-control " placeholder="email">
</div>
<!-- phone -->
<div class="form-group mt-3">
<input type="tel" class="form-control " placeholder="phone">
</div>
<!-- append -->
<button type="submit" class="btn btn-outline-dark btn-block text-uppercase">submit</button>
</form>
</div>
</div>
<!-- google map -->
<div class="col-md-6 my-3">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4016734.8249906246!2d73.88302361924977!3d10.532718659919057!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b0812ffd49cf55b%3A0x64bd90fbed387c99!2sKerala!5e0!3m2!1sen!2sin!4v1598183800629!5m2!1sen!2sin" width="600" height="450" frameborder="0"
style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- end of contact section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Footer section in php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- font awesom -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- font awsome -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>mini-project</title>
</head>
<body>
<footer class="bg-dark text-white text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">College Notes Management System</h5>
<p>
WebsiteSetup.org is a free resource site for helping people to create,
customize and improve their websites
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">ABOUT US</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">About Us</a>
</li>
<li>
<a href="#!" class="text-white">Privacy Policy</a>
</li>
<li>
<a href="#!" class="text-white">Terms & Conditions</a>
</li>
<li>
<a href="#!" class="text-white">SUPPORT</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">CONTACT</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">HTML & CSS</a>
</li>
<li>
<a href="#!" class="text-white">JavaScript</a>
</li>
<li>
<a href="#!" class="text-white">Python</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
<a class="text-white" href="">fisalcholakkal</a>
</div>
<!-- Copyright -->
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
0 Comments