Skip to content

Design front page of a college or department using graphics method.

To design a front page of a college or department in PHP using graphics, you’ll need to use HTML and CSS for layout and styling while PHP can dynamically serve content or integrate server-side functionality. Below is an example:

<?php

// Dynamic Variables

$collegeName = “GNIMT”;

$fullName = “Guru Nanak Institute of Management and Technology”;

$year = date(“Y”);

?>

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

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

    <title><?php echo $collegeName; ?> – Front Page</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background: #f0f0f5;

        }

        header {

            background: linear-gradient(90deg, #00509e, #00274d);

            color: white;

            padding: 20px;

            text-align: center;

        }

        header h1 {

            margin: 0;

            font-size: 3em;

        }

        header p {

            margin: 5px 0 0;

            font-size: 1.2em;

        }

        nav {

            display: flex;

            justify-content: space-around;

            background: #003566;

            padding: 10px 0;

        }

        nav a {

            color: white;

            text-decoration: none;

            font-size: 1.2em;

        }

        nav a:hover {

            text-decoration: underline;

        }

        .banner {

            background: url(‘college_banner.jpg’) no-repeat center center/cover;

            height: 300px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

        }

        .banner h2 {

            font-size: 3em;

        }

        .cards {

            display: flex;

            justify-content: center;

            gap: 20px;

            padding: 20px;

        }

        .card {

            background: white;

            width: 30%;

            padding: 15px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            border-radius: 5px;

            text-align: center;

        }

        .card h3 {

            margin-top: 0;

        }

        footer {

            background: #003566;

            color: white;

            text-align: center;

            padding: 10px;

        }

    </style>

</head>

<body>

    <header>

        <h1><?php echo $collegeName; ?></h1>

        <p><?php echo $fullName; ?></p>

    </header>

    <nav>

        <a href=”#about”>About Us</a>

        <a href=”#programs”>Programs</a>

        <a href=”#admissions”>Admissions</a>

        <a href=”#contact”>Contact Us</a>

    </nav>

    <div class=”banner”>

        <h2>Welcome to <?php echo $collegeName; ?></h2>

    </div>

    <div class=”cards”>

        <div class=”card”>

            <h3>Academic Excellence</h3>

            <p>High standards of education and innovation.</p>

        </div>

        <div class=”card”>

            <h3>Modern Facilities</h3>

            <p>World-class infrastructure for student success.</p>

        </div>

        <div class=”card”>

            <h3>Dynamic Campus Life</h3>

            <p>Engaging activities for holistic development.</p>

        </div>

    </div>

    <footer>

        <p>&copy; <?php echo $year; ?> <?php echo $collegeName; ?>. All Rights Reserved.</p>

    </footer>

</body>

</html>

Explanation:

  1. Dynamic PHP Variables:
    • $collegeName and $fullName are used to populate the header and banner dynamically.
    • $year dynamically sets the current year in the footer.
  2. Graphics:
    • The header uses a gradient background for a modern look.
    • The banner displays a background image, which can be replaced with an actual file like college_banner.jpg.
  3. Navigation Bar:
    • Simple navigation links styled with hover effects.
  4. Cards:
    • Key features (e.g., Academic Excellence, Modern Facilities) are displayed as cards.
  5. Footer:
    • Displays the dynamic copyright year with a professional touch.

How to Use:

  • Save the file as index.php and place it in a PHP-supported server.
  • Replace 'college_banner.jpg' with the actual path of your banner image.
  • Add real content or database integration for dynamic data.