Blood Bank Management System Project In PHP

-- 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 */;

<?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));
}
 
?>

<?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>

<?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>

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();
}

<!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>

<!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>

<?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");
 
?>

* {
    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;