Blood Bank Management System Project In PHP

This tutorial is going to be an exciting and thrilling one as we are going to create a blood donation and blood Bank Management System Project In PHP. We will use bootstrap and jQuery for the front end.

Blood Bank Management System Project In PHP: Project Overview

Project Name:Blood Bank Management System Project In PHP
Abstract:This is a web-based project that can be used to handle the blood donation management of a blood bank.
Technologies Used:HTML, CSS, JavaScript, BootStrap, jQuery, and PHP
IDE:VS code
PHP version
(Recommended):
8.3
Database:MySQL
Type:Web Application
Recommended for:Final Year Students and advanced PHP learning students

Complete Source code for Blood Bank Management System Project In PHP

This whole code bundles up the logic for the making of the Blood Bank Management System Project In PHP.

After downloading the zip file, extract it and place it in the htdocs folder of your c/xampp folder. 

Then create a new table by visiting the localhost/PHPMyAdmin and import the SQL file from the zip file. Check out the output to know how to run this project.

Output

Video output:

Image output:

output for Blood Bank Management System Project In PHP

Features

  • Login/Logout
  • See All Blood Donors
  • List Yourself as a Donor
  • View Blood types, addresses, and mobile numbers of donors
  • Sort donors according to blood type

Setting up project

If you don’t have xampp installed, follow this link.

Before Jumping right into code make sure that you have Xampp installed and these 2 essential processes running:

  1. Apache
  2. MySQL
xampp setup

Project Folder

setup

We will do all the code in the C:\xampp\htdocs folder. We will create a new folder with the name blood-donation and open it in VS code. Before we go into more detail, we will create the database and the table for the donors.

MySQL database setup

So first, we will create the database and the table for the donors. To make the required tables we will add a new table by the name ‘bld_dntn’ in the PHPMyAdmin and then import the SQL file. To import the SQL file, first, visit http://localhost/phpmyadmin/ in your browser. Now follow the steps below:

1. Click on the new icon on the left

phpmyadmin

2. After that, fill in the text box with ‘bld_dntn’ and hit create button

create database

3. After that go to the import button and select the file and click the import button on the bottom

import
click import

4. If successful you will see a screen something like this

file imported message

We will import the SQL file to create the necessary tables and prefill the table with sample data. Create a file name donors.sql inside the project and paste this code there.

donors.sql

-- phpMyAdmin SQL Dump
-- version 5.2.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Dec 21, 2022 at 04:10 AM
-- Server version: 10.4.27-MariaDB
-- PHP Version: 8.1.12
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- Database: `bld_dntn`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `donors`
--
 
CREATE TABLE `donors` (
  `id` int(10) NOT NULL,
  `username` varchar(20) NOT NULL,
  `password` varchar(40) NOT NULL,
  `fullname` varchar(50) DEFAULT NULL,
  `dob` date NOT NULL,
  `sex` varchar(10) NOT NULL,
  `bloodgroup` varchar(10) NOT NULL,
  `mobile` varchar(25) NOT NULL,
  `email` varchar(50) NOT NULL,
  `town` varchar(20) DEFAULT NULL,
  `state` varchar(30) NOT NULL DEFAULT 'Patna',
  `lastdate` timestamp NOT NULL DEFAULT '2022-12-21 18:30:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;
 
--
-- Dumping data for table `donors`
--
 
INSERT INTO `donors` (`id`, `username`, `password`, `fullname`, `dob`, `sex`, `bloodgroup`, `mobile`, `email`, `town`, `state`, `lastdate`) VALUES
(1, 'johnsmith', 'p@ssw0rd', 'John Smith', '1980-01-01', 'M', 'A pos', '123-456-7890', 'john@example.com', 'New York', 'NY', '2021-12-31 18:30:00'),
(2, 'janejohnson', 'p@ssw0rd', 'Jane Johnson', '1982-02-14', 'F', 'O neg', '123-456-7891', 'jane@example.com', 'Chicago', 'IL', '2022-02-13 18:30:00'),
(3, 'robertdoe', 'p@ssw0rd', 'Robert Doe', '1985-03-31', 'M', 'B pos', '123-456-7892', 'robert@example.com', 'Los Angeles', 'CA', '2022-03-30 18:30:00'),
(4, 'sarahmiller', 'p@ssw0rd', 'Sarah Miller', '1988-04-30', 'F', 'AB pos', '123-456-7893', 'sarah@example.com', 'Houston', 'TX', '2022-04-29 18:30:00'),
(5, 'michaelbrown', 'p@ssw0rd', 'Michael Brown', '1991-05-15', 'M', 'A neg', '123-456-7894', 'michael@example.com', 'Philadelphia', 'PA', '2022-05-14 18:30:00'),
(6, 'chriswilson', 'p@ssw0rd', 'Chris Wilson', '1995-06-01', 'M', 'O pos', '123-456-7895', 'chris@example.com', 'Seattle', 'WA', '2022-05-31 18:30:00'),
(7, 'sarahdavis', 'p@ssw0rd', 'Sarah Davis', '1998-07-14', 'F', 'B neg', '123-456-7896', 'sarah@example.com', 'Boston', 'MA', '2022-07-13 18:30:00'),
(8, 'mikemiller', 'p@ssw0rd', 'Mike Miller', '2001-08-31', 'M', 'AB neg', '123-456-7897', 'mike@example.com', 'Miami', 'FL', '2022-08-30 18:30:00'),
(9, 'jenniferbrown', 'p@ssw0rd', 'Jennifer Brown', '2004-09-30', 'F', 'A pos', '123-456-7898', 'jennifer@example.com', 'Dallas', 'TX', '2022-09-29 18:30:00'),
(10, 'davidsmith', 'p@ssw0rd', 'David Smith', '2007-10-15', 'M', 'O neg', '123-456-7899', 'david@example.com', 'San Francisco', 'CA', '2022-10-14 18:30:00'),
(11, 'emmajohnson', 'p@ssw0rd', 'Emma Johnson', '2010-11-01', 'F', 'B pos', '123-456-7900', 'emma@example.com', 'Denver', 'CO', '2022-10-31 18:30:00'),
(12, 'mattdoe', 'p@ssw0rd', 'Matt Doe', '2013-12-14', 'M', 'AB+', '123-456-7901', 'matt@example.com', 'Atlanta', 'GA', '2022-12-13 18:30:00'),
(13, 'kimberlywilson', 'p@ssw0rd', 'Kimberly Wilson', '2016-01-31', 'F', 'A neg', '123-456-7902', 'kimberly@example.com', 'Phoenix', 'AZ', '2023-01-30 18:30:00'),
(14, 'andrewdavis', 'p@ssw0rd', 'Andrew Davis', '0000-00-00', 'M', 'O pos', '123-456-7903', 'andrew@example.com', 'Portland', 'OR', '0000-00-00 00:00:00'),
(15, 'lauramiller', 'p@ssw0rd', 'Laura Miller', '2020-03-15', 'F', 'B neg', '123-456-7904', 'laura@example.com', 'Tucson', 'AZ', '2023-03-14 18:30:00'),
(16, 'johnsmith', 'p@ssw0rd', 'John Smith', '2020-04-16', 'M', 'AB neg', '123-456-7890', 'john@example.com', 'Phoenix', 'AZ', '2023-04-15 18:30:00'),
(17, 'sarahjohnson', 'p@ssw0rd', 'Sarah Johnson', '2020-05-17', 'F', 'AB neg', '123-456-7891', 'sarah@example.com', 'Mesa', 'AZ', '2023-05-16 18:30:00'),
(18, 'michaelbrown', 'p@ssw0rd', 'Michael Brown', '2020-06-18', 'M', 'AB pos', '123-456-7892', 'michael@example.com', 'Chandler', 'AZ', '2023-06-17 18:30:00'),
(19, 'katiejohnson', 'p@ssw0rd', 'Katie Johnson', '2020-07-19', 'F', 'AB pos', '123-456-7893', 'katie@example.com', 'Gilbert', 'AZ', '2023-07-18 18:30:00'),
(20, 'johnsmith2', 'p@ssw0rd', 'Johney Smith', '1980-01-01', 'M', 'A pos', '124-456-7890', 'johney@example.com', 'California', 'CA', '2021-12-31 18:30:00');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `donors`
--
ALTER TABLE `donors`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `donors`
--
ALTER TABLE `donors`
  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=63;
COMMIT;
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Coding Blood Bank Management System Project In PHP

db_connection.php

This code will be used to connect to the database.

<?php
 
// Connection parameters for the database
$db_host = 'localhost';
$db_user = 'root';
$db_password = '';
$db_database = 'bld_dntn';
 
// Connect to the database using the mysqli extension
$con = mysqli_connect($db_host, $db_user, $db_password, $db_database);
 
// If the connection fails, display an error message
if (mysqli_connect_errno()) {
  die('Could not connect: ' . mysqli_error($con));
}
 
?>

registe.php

To let a user register himself as a donor, we will create a file name register.php where we will add both the logic as well as the front-end code for registering for a donor, and the code for the same will look like this. The register.php file will let the user register themselves as donors.

<?php
 
// Start output buffering and a new session
ob_start();
session_start();
 
// Include the database connection file
require "db_connection.php";
 
// Check if all required POST variables have been set
if (isset($_POST['fullname']) && isset($_POST['gender']) && isset($_POST['dob']) && isset($_POST['bloodgroup']) && isset($_POST['mobile']) && isset($_POST['email']) && isset($_POST['state']) && isset($_POST['town']) && isset($_POST['username']) && isset($_POST['password'])) {
    // Check if all required POST variables are not empty
    if (!empty($_POST['fullname']) && !empty($_POST['gender']) && !empty($_POST['dob']) && !empty($_POST['bloodgroup']) && !empty($_POST['mobile']) && !empty($_POST['email']) && !empty($_POST['state']) && !empty($_POST['username']) && !empty($_POST['password'])) {
        // Store POST variables in local variables
        $user = $_POST['username'];
        $pw = md5($_POST['password']);
        $f_name = $_POST['fullname'];
        $birthday = $_POST['dob'];
        $sex = $_POST['gender'];
        $blood = $_POST['bloodgroup'];
        $mobile = $_POST['mobile'];
        $email = $_POST['email'];
        $town = $_POST['town'];
        $state = $_POST['state'];
 
        // Check if a session is active
        if (isset($_SESSION['sess_user_id']) && !empty($_SESSION['sess_user_id'])) {
            // If a session is active
            $sess = $_SESSION['sess_user_id'];
            $SQL = "UPDATE donors SET username='" . $user . "',password='" . $pw . "',fullname='" . $f_name . "',dob='" . $birthday . "',sex='" . $sex . "',bloodgroup='" . $blood . "',mobile='" . $mobile . "',email='" . $email . "',town='" . $town . "',state='" . $state . "' WHERE id='" . $sess . "'";
        } else {
            $SQL = "INSERT INTO donors (username, password, fullname, dob, sex, bloodgroup, mobile, email, town, state) VALUES ('" . $user . "', '" . $pw . "', '" . $f_name . "', '" . $birthday . "', '" . $sex . "', '" . $blood . "', '" . $mobile . "', '" . $email . "', '" . $town . "', '" . $state . "')";
        }
 
        $query_run = mysqli_query($con, $SQL);
 
        if ($query_run) {
            // If it did, show an alert message saying that the message was successfully sent
            echo '<script language="javascript">';
            echo 'alert("message successfully sent")';
            echo '</script>';
 
            // Check if a session is active
            if (isset($_SESSION['sess_user_id']) && !empty($_SESSION['sess_user_id'])) {
                // If a session is active, redirect the user to the logout page
                header("Location: logout.php");
            }
        } else {
            // If the query did not run successfully, show an alert message saying that the registration failed
            echo '<script language="javascript">';
            echo 'alert("REGISTRATION FAILED")';
            echo '</script>';
        }
    } else {
        echo '<script language="javascript">';
        echo 'alert("PLEASE FILL AND SELECT ALL REQUIRED FIELDS")';
        echo '</script>';
    }
}
 
 
?>
 
<!DOCTYPE html>
<html>
 
<head>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="script.js"></script>
 
 
 
</head>
 
<body>
 
    <div class="col-12" style="height: 180px">
 
        <div id="nav" class="col-12">
            <ul>
 
                <li><a href="find_blood.php">Find Donor</a></li>
 
                <li><a class="active" href="register.php">Be A Donor</a></li>
                <?php
                if (isset($_SESSION['sess_user_id']) && !empty($_SESSION['sess_user_id'])) {
                    echo '<li style="background-color: rgba(255,0,0,0.5);"><a href="logout.php">Logout</a></ul>';
                }
                ?>
            </ul>
        </div>
        <span class="info2" style="left: 40%">REGISTER</span>
    </div>
    <div class="col-12" style="overflow: auto; padding: 0 20% 0 20%;">
        <div class="col-12" style="text-align: left; padding: 5%; background-color: #504caf;">
            <form action="register.php" method="post">
                Username(required)<span style="color: red;">*</span><br>
                <input class="in" type="text" name="username" placeholder="You can use Your email here for unique name"
                    required style="color: black;"><br><br>
                Password(required)<span style="color: red;">*</span><br>
                <input class="in" type="password" name="password" placeholder="Password" required
                    style="color: black;"><br><br>
                Fullname(required)<span style="color: red;">*</span><br>
                <input class="in" type="text" name="fullname" placeholder="Enter Fullname" required
                    style="color: black;"><br><br>
                Date Of Birth(required)<span style="color: red;">*</span><br>
                <input class="in" type="date" name="dob" placeholder="dd/mm/yyyy" required><br><br>
                Gender(required)<span style="color: red;">*</span><br>
                <input type="radio" name="gender" value="male" checked>Male
                <input type="radio" name="gender" value="female">Female
                <input type="radio" name="gender" value="other">Other<br><br>
                Blood Group(required)<span style="color: red;">*</span><br>
                <select name="bloodgroup" required>
                    <option value="">Enter Blood Group</option>
                    <option value="A pos">A+</option>
                    <option value="A neg">A-</option>
                    <option value="B pos">B+</option>
                    <option value="B neg">B-</option>
                    <option value="O pos">O+</option>
                    <option value="O neg">O-</option>
                    <option value="AB pos">AB+</option>
                    <option value="AB neg">AB-</option>
                </select><br><br>
                Mobile(required)<span style="color: red;">*</span><br>
                <input class="in" type="text" name="mobile" placeholder="Enter 10 digit Mobile No." pattern="[0-9]{10}" required
                    style="color: black;"><br><br>
                Email(required)<span style="color: red;">*</span><br>
                <input class="in" type="email" name="email" placeholder="Enter Your Email" required
                    style="color: black;"><br><br>
                Town<br>
                <input class="in" type="text" name="town" placeholder="Enter Town" style="color: black;"><br><br>
                State(required)<span style="color: red;">*</span><br>
                <input class="in" type="text" name="state" placeholder="Enter State" required
                    style="color: black;"><br><br>
                <input class="qw" style="font-size: 16px; color: white;" type="submit" value="SEND">
            </form>
        </div>
    </div>
    </div>
 
 
</body>
 
</html>

find_blood.php

To let the users access the list of donors and filter them according to blood types we will add another screen with the help of the file find_blood.php, this file will also need a bit of javascript to manage the dropdown menu state which we will define as well.

<?php
ob_start();
session_start();
require "db_connection.php";
 
?>
 
 
 
<!DOCTYPE html>
<html>
 
<head>
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="script.js"></script>
 
 
 
</head>
 
<body>
 
    <div class="col-12" style="height: 100px">
        <!-- Output a div element with an "comname" ID -->
        <div id="comname">
        </div>
 
        <!-- Output a div element with a "nav" ID and a "col-12" class -->
        <div id="nav" class="col-12">
            <!-- Output an unordered list -->
            <ul>
 
                <!-- Output a list item with a link to the "find_blood.php" page -->
                <li><a class="active" href="find_blood.php">Find Donor</a></li>
 
                <!-- Output a list item with a link to the "register.php" page -->
                <li><a href="register.php">Be A Donor</a></li>
                <?php
                // Check if the session variable "sess_user_id" is set and not empty
                if (isset($_SESSION['sess_user_id']) && !empty($_SESSION['sess_user_id'])) {
                    // Output a list item with a link to the "logout.php" page
                    echo '<li style="background-color: rgba(255,0,0,0.5);"><a href="logout.php">Logout</a></ul>';
                }
                ?>
            </ul>
        </div>
 
 
    </div>
    <div style="margin: 0; padding: 0 3% 0 7%; text-align: center;">
        <!-- Output a div element with a "col-11" class and some inline styles -->
        <div class="col-11" style="background-color: rgba(82, 127, 99,0.5); padding: 0">
            <!-- Output a div element with some inline styles -->
            <div style="background-color: rgb(5 85 92);overflow: auto;width: 100%; padding: 5px;">
                <!-- Output a form element -->
                <form>
                    <!-- Output a select element with some inline JavaScript -->
                    <select name="bloodgroup" onchange="showUser(this.value)" id="sel">
                        <option value="">Select Blood Group</option>
                        <option value="A pos">A+</option>
                        <option value="A neg">A-</option>
                        <option value="B pos">B+</option>
                        <option value="B neg">B-</option>
                        <option value="O pos">O+</option>
                        <option value="O neg">O-</option>
                        <option value="AB pos">AB+</option>
                        <option value="AB neg">AB-</option>
                    </select>
                </form>
            </div>
            <!-- Output a div element with some inline styles and an "txtHint" ID -->
            <div id="txtHint" style="padding: 5% 0 5% 0; width: 100%; overflow: auto;"></div>
        </div>
 
    </div>
 
    <?php
 
    // Check if the GET superglobal variable is set
    if (isset($_GET)) {
        // Set $a to the value of the "bloodgroup" parameter in the GET request, or to "A pos" if it is not set
        $a = $_GET["bloodgroup"] ?? "A pos";
    } else {
        // Set $a to an empty string if the GET superglobal is not set
        $a = "";
    }
 
    ?>
 
    <script>
        // When the page finishes loading
        window.onload = function () {
            // Get the value of the PHP variable $a
            var val = '<?php echo $a; ?>';
            // Get the element with the "sel" ID
            var sel = document.getElementById('sel');
            // Get the options in the element
            var opts = sel.options;
            // Loop through the options
            for (var opt, j = 0; opt = opts[j]; j++) {
                // If the option value matches the value of $a
                if (opt.value == val) {
                    // Set the selected index of the element to the current option
                    sel.selectedIndex = j;
                    // Break out of the loop
                    break;
                }
            }
            // Get the value of the PHP variable $a
            var va = '<?php echo $a; ?>';
            // Call the showUser function with the value of $a as an argument
            showUser(va);
        }
    </script>
 
 
</body>
</html>

script.js

To assist with the work for dropdowns and their ease of use with cross-platform browsers we will create another file named script.js within the same folder.

var myIndex = 0;
 
function ha(elm) {
  window.location = "find_blood.php?bloodgroup=" + elm.value;
}
 
function showUser(str) {
  console.log(str);
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", "getuser.php?q=" + str, true);
  xmlhttp.send();
}

getuser.php

To build the users table inside the find_blood.php page we will facilitate the functionality with the help of this file named getuser.php.

<!DOCTYPE html>
<html>
 
<head>
    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
 
        #customers td,
        #customers th {
            border: 1px solid green;
            padding: 25px;
        }
 
        #customers tr:nth-child(even) {
            background-color: #f2f2f2;
        }
 
        #customers tr:hover {
            background-color: green;
        }
 
        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #504caf;
            color: white;
        }
    </style>
</head>
 
<body>
 
    <?php
 
// Include the database connection file
require "db_connection.php";
 
// Get the value of the "q" parameter in the GET request
$q = $_GET["q"];
 
// Select all rows from the "donors" table where the "bloodgroup" column matches the value of the "q" parameter
$sql = "SELECT * FROM donors WHERE bloodgroup = '" . $q . "'";
 
// Execute the query and store the result
$result = mysqli_query($con, $sql);
 
// Output a heading and table element
echo "<h2>Donors List</h2>";
echo "<table id='customers'>
<tr>
<th>Name</th>
<th>Blood Group</th>
<th>Email Id</th>
<th>Mobile Number</th>
<th>City</th>
</tr>";
 
// Fetch each row from the result as an associative array
while ($row = mysqli_fetch_array($result)) {
    // Output a row in the table for each row in the result
    echo "<tr>";
    echo "<td>" . $row['fullname'] . "</td>";
    echo "<td>" . $row['bloodgroup'] . "</td>";
    echo "<td>" . $row['email'] . "</td>";
    echo "<td>" . $row['mobile'] . "</td>";
    echo "<td>" . $row['town'] . "</td>";
    echo "</tr>";
}
 
// Output the closing table tag
echo "</table>";
 
// Close the database connection
mysqli_close($con);
 
?>
 
</body>
 
</html>

index.php

By default, if we visit http://localhost/blood-donation/ it will look for an index.php file that we will define and redirect its contents to be from find_blood.php.

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="script.js"></script>
</head>
 
<body>
    <?php include "find_blood.php"; ?>
</body>
 
</html>

logout.php

To log the user out we will write the logic for the same under the logout.php file.

<?php
 
// Start a new session or resume an existing one
session_start();
 
// Destroy the current session and release the session ID
session_destroy();
 
// Redirect the user to the "index.php" page
header("location: index.php");
 
?>

main.css

Though most of the styling is done with bootstrap there are instances where we needed an extra file for custom CSS. To accommodate the same we will create a file named main.css within the same folder.

* {
    box-sizing: border-box;
}
 
body {
    margin: 0px;
}
 
#info {
    overflow: hidden;
 
    z-index: 10;
    position: absolute;
    text-align: center;
    overflow: auto;
    left: 0;
    top: 400px;
    -webkit-animation: myfirst1 0.5s ease-in-out 0.1s 1 normal;
    animation: myfirst1 0.5s ease-in-out 0.1s 1 normal;
}
 
#info1 {
    position: absolute;
    left: 35%;
    top: 150px;
    font-size: 16px;
    font-size: 3vw;
    color: rgb(252, 5, 5);
    text-shadow: 1px 1px 2px black;
    z-index: 10;
}
 
form select {
 
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.5);
    font-size: 15px;
    font-weight: bold;
    padding: 2px 10px;
    width: 30%;
    height: 50px;
    *width: 30%;
    *background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
 
}
 
 
#comname {
    width: 100%;
    padding: 0 20% 0 20%;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 20px;
    font-size: 25px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    z-index: 10;
}
 
 
#comname i.fa {
    padding: 0;
    margin: 0;
    font-size: 50px;
    height: 0;
    text-align: center;
    text-decoration: none;
    background: transparent;
    color: white;
    z-index: 100;
}
 
 
#nav {
 
    position: absolute;
    left: 0;
    z-index: 100;
    padding: 0;
    background-color: rgba(13, 23, 17, 0.995);
    display: flex;
    align-self: center;
    flex-wrap: nowrap;
    justify-content: space-around;
}
 
 
#nav ul {
    list-style-type: none;
    /* margin: 0 20% 0 20%; */
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}
 
#nav li {
    float: left;
}
 
#nav li a {
    display: block;
    color: white;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    padding: 14px 16px;
    text-decoration: none;
}
 
#nav li a:hover {
    background-color: #504caf;
}
 
.active {
    background-color: #504caf;
}
 
a.fa {
    padding: 10px;
    font-size: 15px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    background: rgba(82, 127, 99, 0.5);
    color: white;
}
 
a.fa-facebook:hover {
    background: #3B5998;
    color: white;
}
 
a.fa-twitter:hover {
    background: #55ACEE;
    color: white;
}
 
a.fa-google:hover {
    background: #dd4b39;
    color: white;
}
 
a.fa-youtube:hover {
    background: #bb0000;
    color: white;
}
 
a.fa-instagram:hover {
    background: #125688;
    color: white;
}
 
#upper h5 {
    font-size: 20px;
    color: white;
}
 
.qw {
    background-color: rgba(82, 127, 99, 0.5);
    border-radius: 5px;
    height: 40px;
    width: 50%;
    border-width: 0;
}
 
.qw a {
    text-decoration: none;
    color: white;
}
 
.qw:hover {
    background: #bb0000;
}
 
 
i.fa {
    padding: 35px;
    font-size: 50px;
    width: 120px;
    height: 120px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    background: rgba(82, 127, 99, 0.5);
    color: white;
}
 
 
/* For desktop: */
.col-1 {
    width: 8.33%;
}
 
.col-2 {
    width: 16.66%;
}
 
.col-3 {
    width: 25%;
}
 
.col-4 {
    width: 33.33%;
}
 
.col-5 {
    width: 41.66%;
}
 
.col-6 {
    width: 50%;
}
 
.col-7 {
    width: 58.33%;
}
 
.col-8 {
    width: 66.66%;
}
 
.col-9 {
    width: 75%;
}
 
.col-10 {
    width: 83.33%;
}
 
.col-11 {
    width: 91.66%;
}
 
.col-12 {
    width: 100%;
}
 
@media only screen and (max-width: 768px) {
 
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
 
    #nav ul {
        margin: 0 0 0 0;
        font-size: 2vw;
    }
 
}
 
.info2 {
    position: absolute;
    top: 100px;
    font-weight: bolder;
    font-size: 16px;
    font-size: 4vw;
    color: rgb(254, 7, 7);
    text-shadow: 1px 1px 2px black;
    z-index: 10;
}
 
 
 
div.container {
    padding: 10px;
}
 
.in {
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.5);
    font-size: 15px;
    font-weight: bold;
    padding: 2px 10px;
    width: 100%;
    height: 50px;
    *width: 100%;
    *background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
}
 
.in:focus {
    background: transparent;
    *background: transparent;
    color: black;
}
 
.im {
    width: 120px;
    height: 120px;
    border-radius: 10px;
}
 
.im:hover {
    opacity: 0.4;
}
 
.container {
    padding: 16px;

Thank you for visiting our website.


Also Read:

Share:
Avatar of Harry

Author: Harry

Hello friends, thanks for visiting my website. I am a Python programmer. I, with some other members, write blogs on this website based on Python and Programming. We are still in the growing phase that's why the website design is not so good and there are many other things that need to be corrected in this website but I hope all these things will happen someday. But, till then we will not stop ourselves from uploading more amazing articles. If you want to join us or have any queries, you can mail me at admin@copyassignment.com Thank you