Scribd
Upload
13 views10 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views10 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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