Scribd
Upload
2 views

Web Technology

The document consists of an HTML file for a travel website that includes sections for home, adventure ideas, popular packages, and a contact form. It features a responsive design with navigation links, images, and a footer with contact information and social media links. Additionally, there is a PHP script for handling contact form submissions and storing user information in a database.

Uploaded by

Priyadharshini K
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Technology

The document consists of an HTML file for a travel website that includes sections for home, adventure ideas, popular packages, and a contact form. It features a responsive design with navigation links, images, and a footer with contact information and social media links. Additionally, there is a PHP script for handling contact form submissions and storing user information in a database.

Uploaded by

Priyadharshini K
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Index.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Tour & Travel</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Iconscout Link -->
<link rel="stylesheet"
href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
</head>
<body>
<header class="header">
<a href="#" class="logo"><i class="fas fa-hiking"></i>
travel.com</a>
<nav class="navbar">
<div id="nav-close" class="fas fa-times"></div>
<a href="#home">home</a>
<a href="#category">Adventures</a>
<a href="#packages">packages</a>
<a href="#contact">contact</a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-bars"></div>
<div id="search-btn" class="fas fa-search"></div>
</div>
</header>
<div class="search-form">
<div id="close-search" class="fas fa-times"></div>
<form action="">
<input type="search" name="" placeholder="search here..."
id="search-box">
<label for="search-box" class="fas fa-search"></label>
</form>
</div>
<section class="home" id="home">
<div class="wrapper">
<div class="box" style="background: url(images/home1.jpg) no-
repeat;">
<div class="content">
<span>never stop</span>
<h3>exploring</h3>
<p>Travel.com offers best deals on India tour packages.</p>
<a href="#category" class="btn">get started</a>
</div>
</div>
</div>
</section>
<!-- Adventure section -->
<section class="category" id="category">
<h1 class="heading">Adventure Idea!</h1>
<div class="box-container">
<div class="box">
<img src="images/category-1.jpg"
alt="BungeeJumpingImg">
<h3>bungee jump</h3>
<p>Bungee jumping is an activity that involves a person
jumping from a great height while connected to a large elastic
cord.</p>
<a href="https://en.wikipedia.org/wiki/Bungee_jumping"
class="btn">read more</a>
</div>
:
</section>
<section class="packages" id="packages>
<h1 class="heading">popular packages</h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/img-1.jpg" alt="">
</div>
<div class="content">
<h3>Manali Package</h3>
<p>Kullu Manali Shimla has always been a very popular
destination for the old, young travelers as well as newly married
couples who look for cheapest Manali tour packages &amp; Manali
Honeymoon Packages to experience the perfect solitude and calmness
at its best.</p>
<div class="price">Rs 5,999 - Rs 8,999</div>
<a href="#contact" class="btn">explore now</a>
</div>
</div>
:
</section>
<section class="contact" id="contact">
<div class="wrapper1">
<div class="title1">
<h1>Contact us</h1>
</div>
<div class="contact-form">
<form method = "post" action = "contact_us.php">
<div class="input-fields">
<input type="text" class="input" placeholder="Name"
name="name">
<input type="email" class="input" placeholder="Email
Address" name="email" pattern=".+@gmail\.com">
<input type="phone" class="input" placeholder="Phone"
name="phone">
<input type="text" class="input" placeholder="Subject"
name="subject">
</div>
<div class="msg">
<textarea placeholder="Message"
name="message"></textarea> <br>
<div class="btn1"><button type="submit">send <i class="uil
uil-message"></i></div>
</div>
</form>
</div>
</div>
</section>
<section class="footer>
<div class="box-container">
<div class="box">
<h3>Quick links</h3>
<a href="#home">home</a>
<a href="#packages">packages</a>
<a href="#query">query</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#contact">ask questions</a>
<a href="#">terms of use</a>
<a href="#">privacy policy</a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="tel:+917871736671"> <i class="fas fa-
phone"></i> +91 7871736671 </a>
<a href="mailto: [email protected]"> <i
class="fas fa-envelope"></i> [email protected]
</a>
<a href="#"> <i class="fas fa-map"></i> Tamilnadu, india
- 226010 </a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook
</a>
<a href="#"> <i class="fab fa-instagram"></i> instagram
</a>
:
</div>
</div>
<div class="credit">created by <span>Priya Dharshini</span> |
all rights reserved!</div>
</section>
<!-- footer section ends -->
<script src="js/script.js"></script>
</body>
</html>

Contact_Us.php
<?php
$db_hostname="127.0.0.1";
$db_username="root";
$db_password="";
$db_name="contact";
$conn=mysqli_connect($db_hostname,$db_username,$db_password,
$db_name);
if(!$conn){
echo "Connection Failed: ", mysqli_connect_error();
exit;
}
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$sql="INSERT INTO contact(Name, Email, Phone, Subject,
Message)
VALUES ('$name', '$email', '$phone', '$subject', '$message')";
$result=mysqli_query($conn, $sql);
if(!$result)
{
echo "Error: ", mysqli_error($conn);
exit;
}
mysqli_close($conn);
echo "
<div style='text-align: center; margin-top: 50px;'>
<img src='images/Thumbs-up.jpg' alt='Success' style='display:
block; margin: 0 auto;'>
<h1 style='font-weight: bold;'>We will contact you
soon!</h1>
</div> ";?>

You might also like