Files
Globaly-CSS-Practice/people.php
2024-06-14 16:58:36 +02:00

407 lines
19 KiB
PHP

<!DOCTYPE php>
<php lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
<title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
<style>
.table-container-others{
display: flex;
justify-content: space-between;
}
.table-others{
font-size: 13px;
border: 1px solid ;
}
.th-others{
color: #15c1cb;
padding: 0;
border: 1px solid;
border-color: #333333;
}
.td-others{
padding: 0;
border: 1px solid;
border-color: #333333;
}
@media screen and (min-width:768px) {
.table-others{
font-size: 20px;
}
.th-others{
padding: 0 10px;
}
.td-others{
padding: 0 10px;
}
}
@media screen and (min-width:992px) {
.table-others{
font-size: 25px;
}
.th-others{
padding: 0 25px;
}
.td-others{
padding: 0 25px;
}
}
</style>
</head>
<?php
require 'php/connect.inc.php';
$query = "SELECT `id`,`name`, `surname`, `email`, `birth_day`, `birth_month`, `birth_year` FROM `globaly_accounts`";
$query_run = mysqli_query($con, $query);
$data = array();
$query_num_rows = mysqli_num_rows($query_run);
if ($query_num_rows > 0) {
while ($query_row = mysqli_fetch_assoc($query_run)) {
$id = $query_row['id'];
// Store the data in an associative array with $id as key
$data[$id] = array(
'name' => $query_row['name'],
'surname' => $query_row['surname'],
'email' => $query_row['email'],
'birth_day' => $query_row['birth_day'],
'birth_month' => $query_row['birth_month'],
'birth_year' => $query_row['birth_year']
);
}
}
?>
<body>
<?php require 'php/core.inc.php'; ?>
<!-- nav bar -->
<nav class="navbar clearfix d-flex justify-content-center d-md-flex justify-content-md-end">
<ul class="socials-ul clearfix d-none d-md-flex align-items-md-center pb-0 mt-0 mb-0">
<li id="socials">
<a href="https://www.facebook.com">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li id="socials">
<a href="https://x.com">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li id="socials">
<a href="https://www.google.com">
<i class="fa-brands fa-google-plus-g"></i>
</a>
</li>
<li id="socials">
<a href="https://www.pinterest.com">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li id="socials">
<a href="https://rs.linkedin.com">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
</ul>
<div class="form-container">
<form class="form-search d-flex align-items-center d-sm-flex justify-content-sm-between" role="search">
<input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search ...">
<button class="btn" type="submit" style="padding-bottom: 0px;padding-top: 0px;">
<span class="material-icons">
search
</span>
</button>
</form>
</div>
</nav>
<!-- header -->
<header class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-4 mx-0 mt-md-4 mb-md-3 mx-md-3">
<div class="contact d-flex flex-column">
<div class="number d-inline">
<span id="phone-img" class="material-icons">
phone
</span>
<a class="phone" href="#">800-2345-6789</a>
</div>
<a id="mail" href="#" class="mt-1">globaly@demolink.org</a>
</div>
<div class="horizontal-menu d-none d-md-none d-lg-flex ">
<ul class="nav-ul-hor d-md-flex d-md-row s mb-0">
<a href="index.php" style="text-decoration: none;">
<li class="navs"> Home</li>
</a>
<li id="li-home" class="navs">People</li>
<a href="about.php" style="text-decoration: none;">
<li class="navs">About us</li>
</a>
<a href="services.php" style="text-decoration: none;">
<li class="navs">Services</li>
</a>
<a href="cases.php" style="text-decoration: none;">
<li class="navs">Cases</li>
</a>
<a href="news.php" style="text-decoration: none;">
<li class="navs">News</li>
</a>
<a href="contacts.php" style="text-decoration: none;">
<li class="navs">Contacts</li>
</a>
</ul>
</div>
<img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
<div class="dropdown" id="dropdownid" style="position: absolute; width:fit-content;">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-users"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<?php if (loggedin()) {
echo '<li><a class="dropdown-item" href="login.html">Log in</a></li>
<li><a class="dropdown-item" href="signup.php">Sign up</a></li>
<li><a class="dropdown-item" href="php/logout.php">Log out</a></li>';
} else {
echo '<li><a class="dropdown-item" href="login.html">Log in</a></li>
<li><a class="dropdown-item" href="signup.php">Sign up</a></li>';
} ?>
</ul>
</div>
<!-- site navigation-->
<nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 " style="background-color: white; height: 68px; box-shadow: 2px 8px 24px rgba(0,0,0,.1);">
<div class="container-fluid ">
<button class="navbar-toggler d-flex justify-content-center align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="material-icons">menu
</span><span>Menu</span>
</button>
</div>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div id="myDropdown" class="dropdown-content">
<ul class="nav-ul mb-0">
<a href="index.php" style="text-decoration: none;">
<li class="navs"> Home</li>
</a>
<li id="li-home" class="navs">People</li>
<a href="about.php" style="text-decoration: none;">
<li class="navs">About us</li>
</a>
<a href="services.php" style="text-decoration: none;">
<li class="navs">Services</li>
</a>
<a href="cases.php" style="text-decoration: none;">
<li class="navs">Cases</li>
</a>
<a href="news.php" style="text-decoration: none;">
<li class="navs">News</li>
</a>
<a href="contacts.php" style="text-decoration: none;">
<li class="navs">Contacts</li>
</a>
</ul>
<div class="links d-inline-block w-100">
<ul class="socials-ul d-flex align-items-center justify-content-left mb-0">
<li id="socials">
<a href="https://www.facebook.com">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li id="socials">
<a href="https://x.com">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li id="socials">
<a href="https://www.google.com">
<i class="fa-brands fa-google-plus-g"></i>
</a>
</li>
<li id="socials">
<a href="https://www.pinterest.com">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li id="socials">
<a href="https://rs.linkedin.com">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="horizontal-menu d-none d-lg-none d-md-flex d-md-row justify-content-md-start align-items-md-center">
<ul class="nav-ul-hor d-md-flex d-md-row s mb-0" style="box-shadow: 2px 8px 24px rgba(0,0,0,.1);">
<a href="index.php" style="text-decoration: none;">
<li class="navs"> Home</li>
</a>
<li id="li-home" class="navs">People</li>
<a href="about.php" style="text-decoration: none;">
<li class="navs">About us</li>
</a>
<a href="services.php" style="text-decoration: none;">
<li class="navs">Services</li>
</a>
<a href="cases.php" style="text-decoration: none;">
<li class="navs">Cases</li>
</a>
<a href="news.php" style="text-decoration: none;">
<li class="navs">News</li>
</a>
<a href="contacts.php" style="text-decoration: none;">
<li class="navs">Contacts</li>
</a>
</ul>
</div>
<div class="breadcrumb">
<div class="breadcrumb-item"><a href="index.php">Home</a></div>
<div class="breadcrumb-item-sep">/</div>
<div class="breadcrumb-item-about" aria-current="page">People</div>
</div>
</div>
<!-- Fourth part -->
<div class="fourth-part-au d-flex align-items-center justify-content-center flex-column my-5 pb-4 mx-md-5">
<div class="headline d-flex align-items-center justify-content-center flex-column">
<h3 class="headline-h3">Meet</h3>
<h2 class="headline-h2">the Main Team</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team1.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[1]['name'] . ' ' . $data[1]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[1]['email'] . '<br>' . $data[1]['birth_day'] . '.' . $data[1]['birth_month'] . '.' . $data[1]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team2.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[2]['name'] . ' ' . $data[2]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[2]['email'] . '<br>' . $data[2]['birth_day'] . '.' . $data[2]['birth_month'] . '.' . $data[2]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team3.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[3]['name'] . ' ' . $data[3]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[3]['email'] . '<br>' . $data[3]['birth_day'] . '.' . $data[3]['birth_month'] . '.' . $data[3]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team4.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[4]['name'] . ' ' . $data[4]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[4]['email'] . '<br>' . $data[4]['birth_day'] . '.' . $data[4]['birth_month'] . '.' . $data[4]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team7.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[5]['name'] . ' ' . $data[5]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[5]['email'] . '<br>' . $data[5]['birth_day'] . '.' . $data[5]['birth_month'] . '.' . $data[5]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card4 d-flex align-items-center justify-content-center flex-column mb-4">
<img class="img-fourth-au" src="assets/images/team6.jpg" alt="">
<div class="card-text4 d-flex align-items-center justify-content-start flex-column">
<h4 class="h4-fourth"><?php echo $data[6]['name'] . ' ' . $data[6]['surname']; ?></h4>
<p class="p-fourth"><?php echo $data[6]['email'] . '<br>' . $data[6]['birth_day'] . '.' . $data[6]['birth_month'] . '.' . $data[6]['birth_year'] . '.'; ?></p>
</div>
</div>
</div>
</div>
<div class="headline d-flex align-items-center justify-content-center flex-column">
<h3 class="headline-h3">Meet</h3>
<h2 class="headline-h2">Others</h2>
</div>
<div class="table-container-others">
<table class="table-others">
<thead>
<tr>
<th class="th-others">Name</th>
<th class="th-others">Surname</th>
<th class="th-others">Email</th>
<th class="th-others">Birth Date</th>
</tr>
</thead>
<tbody>
<?php
for ($id = 7; $id <= max(array_keys($data)); $id++) {
if (isset($data[$id])) {
echo "<tr>";
// Combine key and value for birth date into a formatted string
$birthDate = "{$data[$id]['birth_day']}.{$data[$id]['birth_month']}.{$data[$id]['birth_year']}.";
echo "<td class='td-others'>{$data[$id]['name']}</td>";
echo "<td class='td-others'>{$data[$id]['surname']}</td>";
echo "<td class='td-others'>{$data[$id]['email']}</td>";
echo "<td class='td-others'>$birthDate</td>";
echo "</tr>";
} else {
echo "<tr><td colspan='4'>No data found for ID $id</td></tr>";
}
}
?>
</tbody>
</table>
</div>
</div>
</section>
<!-- footer -->
<footer class="d-flex flex-column justify-content-center align-items-center pb-4 py-lg-5 py-md-5">
<img src="assets/images/footer-logo.webp" class="mt-3 mt-md-0" alt="">
<div class="footer-copyright">
(c)2024 Globaly. All rights reserved. |
<a href="#">Privacy Policy</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</php>