Blood Bank Management System Project

Project Name: Blood Bank Management System Project

Database: MySQL
Type: Web Application
Abstract: This is a web-based project that can be used to handle
the blood donation management of a blood bank.

➢ 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.

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
Project Folder

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:

2. After that, fill in the text box with ‘bld_dntn’ and hit create button
3. After that go to the import button and select the file and click the
import button on the bottom

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

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', '[email protected]', 'New York', 'NY', '2021-12-31 18:30:00'),
(2, 'janejohnson', 'p@ssw0rd', 'Jane Johnson', '1982-02-14', 'F', 'O neg',
'123-456-7891', '[email protected]', 'Chicago', 'IL', '2022-02-13 18:30:00'),
(3, 'robertdoe', 'p@ssw0rd', 'Robert Doe', '1985-03-31', 'M', 'B pos', '123-
456-7892', '[email protected]', 'Los Angeles', 'CA', '2022-03-30 18:30:00'),
(4, 'sarahmiller', 'p@ssw0rd', 'Sarah Miller', '1988-04-30', 'F', 'AB pos',
'123-456-7893', '[email protected]', 'Houston', 'TX', '2022-04-29 18:30:00'),
(5, 'michaelbrown', 'p@ssw0rd', 'Michael Brown', '1991-05-15', 'M', 'A neg',
'123-456-7894', '[email protected]', 'Philadelphia', 'PA', '2022-05-14
18:30:00'),
(6, 'chriswilson', 'p@ssw0rd', 'Chris Wilson', '1995-06-01', 'M', 'O pos',
'123-456-7895', '[email protected]', 'Seattle', 'WA', '2022-05-31 18:30:00'),
(7, 'sarahdavis', 'p@ssw0rd', 'Sarah Davis', '1998-07-14', 'F', 'B neg', '123-
456-7896', '[email protected]', 'Boston', 'MA', '2022-07-13 18:30:00'),
(8, 'mikemiller', 'p@ssw0rd', 'Mike Miller', '2001-08-31', 'M', 'AB neg',
'123-456-7897', '[email protected]', 'Miami', 'FL', '2022-08-30 18:30:00'),
(9, 'jenniferbrown', 'p@ssw0rd', 'Jennifer Brown', '2004-09-30', 'F', 'A pos',
'123-456-7898', '[email protected]', 'Dallas', 'TX', '2022-09-29
18:30:00'),
(10, 'davidsmith', 'p@ssw0rd', 'David Smith', '2007-10-15', 'M', 'O neg',
'123-456-7899', '[email protected]', 'San Francisco', 'CA', '2022-10-14
18:30:00'),
(11, 'emmajohnson', 'p@ssw0rd', 'Emma Johnson', '2010-11-01', 'F', 'B pos',
'123-456-7900', '[email protected]', 'Denver', 'CO', '2022-10-31 18:30:00'),
(12, 'mattdoe', 'p@ssw0rd', 'Matt Doe', '2013-12-14', 'M', 'AB+', '123-456-
7901', '[email protected]', 'Atlanta', 'GA', '2022-12-13 18:30:00'),
(13, 'kimberlywilson', 'p@ssw0rd', 'Kimberly Wilson', '2016-01-31', 'F', 'A
neg', '123-456-7902', '[email protected]', 'Phoenix', 'AZ', '2023-01-30
18:30:00'),
(14, 'andrewdavis', 'p@ssw0rd', 'Andrew Davis', '0000-00-00', 'M', 'O pos',
'123-456-7903', '[email protected]', 'Portland', 'OR', '0000-00-00
00:00:00'),
(15, 'lauramiller', 'p@ssw0rd', 'Laura Miller', '2020-03-15', 'F', 'B neg',
'123-456-7904', '[email protected]', 'Tucson', 'AZ', '2023-03-14 18:30:00'),
(16, 'johnsmith', 'p@ssw0rd', 'John Smith', '2020-04-16', 'M', 'AB neg', '123-
456-7890', '[email protected]', 'Phoenix', 'AZ', '2023-04-15 18:30:00'),
(17, 'sarahjohnson', 'p@ssw0rd', 'Sarah Johnson', '2020-05-17', 'F', 'AB neg',
'123-456-7891', '[email protected]', 'Mesa', 'AZ', '2023-05-16 18:30:00'),
(18, 'michaelbrown', 'p@ssw0rd', 'Michael Brown', '2020-06-18', 'M', 'AB pos',
'123-456-7892', '[email protected]', 'Chandler', 'AZ', '2023-06-17
18:30:00'),
(19, 'katiejohnson', 'p@ssw0rd', 'Katie Johnson', '2020-07-19', 'F', 'AB pos',
'123-456-7893', '[email protected]', 'Gilbert', 'AZ', '2023-07-18 18:30:00'),
(20, 'johnsmith2', 'p@ssw0rd', 'Johney Smith', '1980-01-01', 'M', 'A pos',
'124-456-7890', '[email protected]', '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 */;

db_connection.php
<?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;
}

OUTPUT