Wednesday, August 9, 2023

Q2 )Create a website using HTML and CSS code to design webpages as follows - The first webpage will accept the name of the traveller, date of travel, telephone number. It also has submit button as an image. The second webpage has information about the name of transporter, time , seatno and destination displayed one belowtheotherintheformofunorderedlistas • Name of transporter– AirAsia • Time - 09:30am • Seatno– B39 • Destination–Delhi Both pages should be interlinked. Create external style sheet with relevant tags

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Traveler Information</title>

</head>

<body>

    <div class="container">

        <h1>Traveler Information</h1>

        <form action="transporter.html">

            <label for="name">Name:</label>

            <input type="text" id="name" name="name" required><br>

 

            <label for="date">Date of Travel:</label>

            <input type="date" id="date" name="date" required><br>

 

            <label for="phone">Telephone Number:</label>

            <input type="tel" id="phone" name="phone" required><br>

 

            <input type="image" src="submit_button.png" alt="Submit">

        </form>

    </div>

</body>

</html>

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Transporter Information</title>

</head>

<body>

    <div class="container">

        <h1>Transporter Information</h1>

        <ul>

            <li><strong>Name of Transporter:</strong> AirAsia</li>

            <li><strong>Time:</strong> 09:30am</li>

            <li><strong>Seat No:</strong> B39</li>

            <li><strong>Destination:</strong> Delhi</li>

        </ul>

    </div>

</body>

</html>

 

 

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #f0f0f0;

}

 

.container {

    max-width: 600px;

    margin: 50px auto;

    padding: 20px;

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

 

h1 {

    text-align: center;

    margin-bottom: 20px;

}

 

form {

    text-align: center;

}

 

form label, form input[type="text"], form input[type="date"], form input[type="tel"] {

    display: block;

    margin-bottom: 10px;

    width: 100%;

}

 

ul {

    list-style: none;

    padding: 0;

}

 

ul li {

    margin-bottom: 10px;

}