commit 602d36ae92ba40a6dbb2d8f08309c6b4bd68e5e6
Author: Erwann Philippe <APEI0195@apeimbge.local>
Date:   Tue Feb 24 15:26:25 2026 +0100

    base de l'intranet

diff --git a/Assets/Icones/APEIMBGE.jpg b/Assets/Icones/APEIMBGE.jpg
new file mode 100644
index 0000000..827a354
Binary files /dev/null and b/Assets/Icones/APEIMBGE.jpg differ
diff --git a/Assets/Logos/3cx.jpg b/Assets/Logos/3cx.jpg
new file mode 100644
index 0000000..486ea13
Binary files /dev/null and b/Assets/Logos/3cx.jpg differ
diff --git a/Assets/Logos/3cx.png b/Assets/Logos/3cx.png
new file mode 100644
index 0000000..2658704
Binary files /dev/null and b/Assets/Logos/3cx.png differ
diff --git a/Assets/Logos/avs.png b/Assets/Logos/avs.png
new file mode 100644
index 0000000..94894df
Binary files /dev/null and b/Assets/Logos/avs.png differ
diff --git a/Assets/Logos/google.png b/Assets/Logos/google.png
new file mode 100644
index 0000000..df09777
Binary files /dev/null and b/Assets/Logos/google.png differ
diff --git a/Assets/Logos/netvie.jpg b/Assets/Logos/netvie.jpg
new file mode 100644
index 0000000..481ec89
Binary files /dev/null and b/Assets/Logos/netvie.jpg differ
diff --git a/Assets/Logos/orange.png b/Assets/Logos/orange.png
new file mode 100644
index 0000000..11892eb
Binary files /dev/null and b/Assets/Logos/orange.png differ
diff --git a/Assets/Logos/outlook.jpg b/Assets/Logos/outlook.jpg
new file mode 100644
index 0000000..567e527
Binary files /dev/null and b/Assets/Logos/outlook.jpg differ
diff --git a/Assets/Logos/teams.png b/Assets/Logos/teams.png
new file mode 100644
index 0000000..4ba035d
Binary files /dev/null and b/Assets/Logos/teams.png differ
diff --git a/Assets/Logos/undefined.png b/Assets/Logos/undefined.png
new file mode 100644
index 0000000..5dfca32
Binary files /dev/null and b/Assets/Logos/undefined.png differ
diff --git a/Assets/functions.php b/Assets/functions.php
new file mode 100644
index 0000000..b493c5e
--- /dev/null
+++ b/Assets/functions.php
@@ -0,0 +1,125 @@
+<?php
+function getRaccourcis($bdd){
+    $results = mysqli_query($bdd, "SELECT * FROM `raccourcis`");
+    $return = [];
+    return $results;
+}
+
+function connectBDD($domain, $user, $password, $db){
+    $link = mysqli_connect($domain, $user, $password, $db);
+
+    if (!$link) {
+        die('Erreur de connexion');
+    } else {
+        mysqli_set_charset($link, "utf8");
+
+        return $link;
+    }
+}
+
+function getActus($bdd){
+    $results = mysqli_query($bdd, "SELECT * FROM `actus` ORDER BY `id` LIMIT 4");
+    $return = [];
+    return $results;
+}
+
+function validateCSRFToken($csrf_server, $csrf_client) {
+    if (!hash_equals($csrf_server, $csrf_client)) {
+        echo($csrf_client. " " . $csrf_server);
+        die('CSRF token validation failed');
+    }
+    return true;
+}
+
+function verifyPassword($hash_password, $tryPassword){
+    $hashTry = hash('sha256', $tryPassword);
+    if($hash_password == $hashTry){
+        return true;
+    }
+    return false;
+}
+
+function getHashPwd($bdd, $username){
+
+    $stmt = mysqli_prepare(
+        $bdd,
+        "SELECT password FROM utilisateurs WHERE username = ? LIMIT 1"
+    );
+
+    mysqli_stmt_bind_param($stmt, "s", $username);
+    mysqli_stmt_execute($stmt);
+
+    $result = mysqli_stmt_get_result($stmt);
+    $user = mysqli_fetch_assoc($result);
+
+    mysqli_stmt_close($stmt);
+
+    return $user; // retourne un tableau ou null
+}
+
+function getEvenements($bdd, $site){
+
+    $results = mysqli_query(
+        $bdd,
+        "SELECT * FROM evenements WHERE `site_id`='" . $site . "' ORDER BY date DESC"
+    );
+
+    $evenements = [];
+
+    while ($row = mysqli_fetch_assoc($results)) {
+        $evenements[] = $row;
+    }
+
+    return $evenements;
+}
+
+function getSite($bdd, $username){
+    $stmt = mysqli_prepare(
+        $bdd,
+        "SELECT site_id FROM utilisateurs WHERE username = ? LIMIT 1"
+    );
+
+    mysqli_stmt_bind_param($stmt, "s", $username);
+    mysqli_stmt_execute($stmt);
+
+    $result = mysqli_stmt_get_result($stmt);
+    $row = mysqli_fetch_assoc($result);
+
+    mysqli_stmt_close($stmt);
+
+    return $row ? $row['site_id'] : null;
+}
+
+function getSiteName($bdd, $site){
+    $stmt = mysqli_prepare(
+        $bdd,
+        "SELECT nom FROM site WHERE site_id = ? LIMIT 1"
+    );
+
+    mysqli_stmt_bind_param($stmt, "s", $site);
+    mysqli_stmt_execute($stmt);
+
+    $result = mysqli_stmt_get_result($stmt);
+    $row = mysqli_fetch_assoc($result);
+
+    mysqli_stmt_close($stmt);
+
+    return $row ? $row['nom'] : null;
+}
+
+function getEventName($bdd, $event){
+    $stmt = mysqli_prepare(
+        $bdd,
+        "SELECT titre FROM evenements WHERE id = ? LIMIT 1"
+    );
+
+    mysqli_stmt_bind_param($stmt, "s", $event);
+    mysqli_stmt_execute($stmt);
+
+    $result = mysqli_stmt_get_result($stmt);
+    $row = mysqli_fetch_assoc($result);
+
+    mysqli_stmt_close($stmt);
+
+    return $row ? $row['titre'] : null;
+}
\ No newline at end of file
diff --git a/Assets/navbar.php b/Assets/navbar.php
new file mode 100644
index 0000000..7191851
--- /dev/null
+++ b/Assets/navbar.php
@@ -0,0 +1,27 @@
+<?php
+$pages = ['index.php', 'guides.php', 'pratiques.php', 'photos.php'];
+$customNames = ['Accueil', 'Guides', 'Bonnes pratiques', 'Photos de l\'APEI'];
+?>
+<!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+                <?php for($i=0; $i<sizeof($pages); $i++): ?>
+                    <?php if($page == $customNames[$i]):?>
+                    <li class="nav-item active">
+                    <?php else:?>
+                    <li class="nav-item">
+                    <?php endif;?>
+                        <a href="<?= $pages[$i] ?>" class="nav-link"><?= explode('.', $customNames[$i])[0] ?></a>
+                    </li>
+                <?php endfor;?>
+                <?php
+                ?>
+            </ul>
+        </div>
+    </nav>
+    <!-- Fin navbar -->
\ No newline at end of file
diff --git a/Assets/style.css b/Assets/style.css
new file mode 100644
index 0000000..52dbd9a
--- /dev/null
+++ b/Assets/style.css
@@ -0,0 +1,16 @@
+/* Global */
+body{
+    /*background-color: #163361;*/
+    /*background-color: #538eec;*/
+    background-color: #fff;
+    font-family: 'Merriweather', serif;
+}
+
+h1{
+    text-align: center;
+    color: #000;
+}
+
+h2{
+    color: #000
+}
\ No newline at end of file
diff --git a/event.php b/event.php
new file mode 100644
index 0000000..e243760
--- /dev/null
+++ b/event.php
@@ -0,0 +1,34 @@
+<?php
+include("./Assets/functions.php");
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+$page = 'Bonnes pratiques';
+
+/* Gestion de la connexion */
+session_start();
+if(!isset($_SESSION['connected']) || $_SESSION['connected'] == false){
+   header('location: login.php'); 
+}
+
+/* Récupération de l'évènement */
+$titre = getEventName($bdd, $_GET['event']);
+
+?>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Intranet de l'APEI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
+    <link rel="stylesheet" href="./styles-scripts/photos.css">
+  </head>
+  <body>
+    <?php include('./Assets/navbar.php');?>
+
+    <h1><?= $titre ?></h1>
+
+    <!-- footer pas toucher -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/guides.php b/guides.php
new file mode 100644
index 0000000..437f570
--- /dev/null
+++ b/guides.php
@@ -0,0 +1,21 @@
+<?php
+include("./Assets/functions.php");
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+$page = 'Guides';
+?>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Intranet de l'APEI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
+  </head>
+  <body>
+    <?php include('./Assets/navbar.php');?>
+
+    <!-- footer pas toucher -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..2b3e184
--- /dev/null
+++ b/index.php
@@ -0,0 +1,50 @@
+<?php
+include("./Assets/functions.php");
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+$page = "Accueil";
+?>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Intranet de l'APEI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="./styles-scripts/index.css">
+    <link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
+  </head>
+  <body>
+    <?php include('./Assets/navbar.php'); ?>
+    <!-- Carousel -->
+    <ul id="carousel" class="carousel">
+    <?php 
+    $actus = getActus($bdd);
+    foreach ($actus as $actu): ?>
+        <li data-accName="<?= htmlspecialchars($actu["id"]) ?>" class="carousel">
+            <h2><?= htmlspecialchars($actu["titre"]) ?></h2>
+
+            <div class="carouselContent">
+                <img src="<?= htmlspecialchars($actu["image"]) ?>" alt="image de couverture">
+                <p><?= nl2br(htmlspecialchars($actu["actu"])) ?></p>
+            </div>
+        </li>
+    <?php endforeach; ?>
+    </ul>
+    <!-- Fin carousel -->
+     <h3>Raccourcis :</h3>
+     <div class="container">
+    <?php
+    $raccourcis = getRaccourcis($bdd);
+    foreach($raccourcis as $raccourci) : ?>
+        <div class="element <?= $raccourci["nom"] ?>" onclick="window.location.href = '<?= $raccourci['url'] ?>/'" style="cursor: pointer">
+        <h3><?= $raccourci["nom"] ?></h3>
+        <img src="<?= $raccourci["image"] ?>" width='80px'>
+        </div>
+    <?php endforeach; ?>
+    </div>
+
+    <!-- footer pas toucher -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+    <script src="./styles-scripts/index.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/login.php b/login.php
new file mode 100644
index 0000000..6fae542
--- /dev/null
+++ b/login.php
@@ -0,0 +1,41 @@
+<?php
+require('./Assets/functions.php');
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+
+session_start();
+
+if(isset($_POST['user']) && isset($_POST['password'])){
+    if(validateCSRFToken($_SESSION['csrf'], $_POST['csrf']) && verifyPassword(getHashPwd($bdd, $_POST['user'])["password"], $_POST['password'])){
+        $csrf = '';
+        $_SESSION['connected'] = true;
+        $_SESSION['site'] = getSite($bdd, $_POST['user']);
+        header('location: photos.php');
+    }
+}else{
+    $csrf = bin2hex(random_bytes(32));
+    $_SESSION['csrf'] = $csrf;
+}
+?>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <title>Se connecter !</title>
+</head>
+<body>
+    <form method="POST">
+  <div class="form-group">
+    <label for="user">Nom d'utilisateur :</label>
+    <input type="text" class="form-control" id="user" name="user" required>
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" class="form-control" id="password" name="password" required>
+  </div>
+  <input type="hidden" name="csrf" value="<?= $csrf ?>">
+  <button type="submit" class="btn btn-primary">Connexion</button>
+</form>
+</body>
+</html>
\ No newline at end of file
diff --git a/photos.php b/photos.php
new file mode 100644
index 0000000..d9ff8bc
--- /dev/null
+++ b/photos.php
@@ -0,0 +1,69 @@
+<?php
+include("./Assets/functions.php");
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+$page = 'Bonnes pratiques';
+
+/* Gestion de la connexion */
+session_start();
+if(!isset($_SESSION['connected']) || $_SESSION['connected'] == false){
+   header('location: login.php'); 
+}
+
+/* Récupération des évènements */
+$evenements = getEvenements($bdd, $_SESSION['site']);
+
+?>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Intranet de l'APEI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
+    <link rel="stylesheet" href="./styles-scripts/photos.css">
+  </head>
+  <body>
+    <?php include('./Assets/navbar.php');?>
+
+    <h3>Évènements de <?= getSiteName($bdd, $_SESSION['site']) ?></h3>
+
+    <div class="parent">
+      <div class="div1">
+        <a href="./event.php?event=<?= $evenements[0]["id"] ?>">
+        <img src="<?= $evenements[0]["couverture"] ?>" alt="">
+        <div class="overlay">
+          <p><?= $evenements[0]["titre"] ?></p>
+        </div>
+        </a>
+      </div>
+      <div class="div2">
+        <a href="./event.php?event=<?= $evenements[1]["id"] ?>">
+        <img src="<?= $evenements[1]["couverture"] ?>" alt="">
+        <div class="overlay">
+          <p><?= $evenements[1]["titre"] ?></p>
+        </div>
+        </a>
+      </div>
+      <div class="div3">
+        <a href="./event.php?event=<?= $evenements[2]["id"] ?>">
+        <img src="<?= $evenements[2]["couverture"] ?>" alt="">
+        <div class="overlay">
+          <p><?= $evenements[2]["titre"] ?></p>
+        </div>
+        </a>
+      </div>
+      <div class="div4">
+        <a href="./event.php?event=<?= $evenements[3]["id"] ?>">
+        <img src="<?= $evenements[3]["couverture"] ?>" alt="">
+        <div class="overlay">
+          <p><?= $evenements[3]["titre"] ?></p>
+        </div>
+        </a>
+      </div>
+    </div>
+
+    <!-- footer pas toucher -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/pratiques.php b/pratiques.php
new file mode 100644
index 0000000..8d9be12
--- /dev/null
+++ b/pratiques.php
@@ -0,0 +1,21 @@
+<?php
+include("./Assets/functions.php");
+$bdd = connectBDD("localhost", "root", "root", "intranet");
+$page = 'Bonnes pratiques';
+?>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Intranet de l'APEI</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
+  </head>
+  <body>
+    <?php include('./Assets/navbar.php');?>
+
+    <!-- footer pas toucher -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles-scripts/index.css b/styles-scripts/index.css
new file mode 100644
index 0000000..933209d
--- /dev/null
+++ b/styles-scripts/index.css
@@ -0,0 +1,174 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Helvetica", "Arial", sans-serif;
+}
+
+h1 {
+  text-align: center;
+  font-size: 1.7rem;
+}
+ul.carousel {
+  width: 100%;
+  height: 300px;
+  /*max-height: 500px;*/
+  padding: 30px;
+  display: flex;
+  gap: 4vw;
+}
+li.carousel {
+  list-style-type: none;
+  background-color: #eeeeee;
+  border: 1px solid #2c54b3;
+  padding: 20px;
+
+  flex: 0 0 100%;
+}
+
+ul.carousel {
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+}
+li.carousel {
+  scroll-snap-align: center;
+}
+ul.carousel::scroll-button(*) {
+  border: 0;
+  font-size: 2rem;
+  background: none;
+  color: black;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+ul.carousel::scroll-button(*):hover,
+ul.carousel::scroll-button(*):focus {
+  opacity: 1;
+}
+
+ul.carousel::scroll-button(*):active {
+  translate: 1px 1px;
+}
+
+ul.carousel::scroll-button(*):disabled {
+  opacity: 0.2;
+  cursor: unset;
+}
+/*
+ul::scroll-button(left) {
+  content: "◄" / "Previous";
+}
+
+ul::scroll-button(right) {
+  content: "►" / "Next";
+}
+  */
+ul.carousel {
+  anchor-name: --my-carousel;
+}
+
+/*
+ul::scroll-button(*) {
+  position: absolute;
+  position-anchor: --my-carousel;
+}
+ul::scroll-button(left) {
+  right: calc(anchor(left) - 70px);
+  bottom: calc(anchor(top) + 13px);
+}
+
+ul::scroll-button(right) {
+  left: calc(anchor(right) - 70px);
+  bottom: calc(anchor(top) + 13px);
+}
+  */
+ul.carousel {
+  scroll-marker-group: after;
+}
+ul.carousel::scroll-marker-group {
+  position: absolute;
+  position-anchor: --my-carousel;
+  top: calc(anchor(bottom) - 70px);
+  justify-self: anchor-center;
+
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+li.carousel::scroll-marker {
+  content: attr(data-accName);
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  border: 2px solid black;
+  border-radius: 50%;
+  overflow: hidden;
+  text-indent: 16px;
+}
+li.carousel::scroll-marker:target-current {
+  background-color: black;
+}
+ul.carousel img{
+    max-width: 360px;
+}
+
+ul.carousel {
+  overflow-x: auto;
+}
+
+/* Chrome / Edge / Safari */
+ul.carousel::-webkit-scrollbar {
+  height: 0px;
+}
+
+/* Firefox */
+ul.carousel {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+div.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+div.element {
+    padding: 5px;
+    box-sizing: border-box;
+    width: 220px;
+    height: 150px;
+    border-radius: 5px;
+}
+
+div.element img{
+    display: block;
+    margin: auto;
+}
+
+div.element h3{
+    text-align: center;
+}
+
+li.carousel .carouselContent {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+li.carousel .carouselContent img {
+  height: 150px;
+  max-width: 360px;
+  object-fit: cover;
+}
+
+li.carousel .carouselContent p {
+  flex: 1;
+}
+
+.nav-link{
+  font-size: larger;
+}
\ No newline at end of file
diff --git a/styles-scripts/index.js b/styles-scripts/index.js
new file mode 100644
index 0000000..c2575da
--- /dev/null
+++ b/styles-scripts/index.js
@@ -0,0 +1,24 @@
+const carousel = document.getElementById("carousel");
+const slides = carousel.querySelectorAll("li");
+let currentIndex = 0;
+const intervalTime = 10000;
+
+function goToSlide(index) {
+  if (index < 0) index = slides.length - 1;
+  if (index >= slides.length) index = 0;
+
+  slides[index].scrollIntoView({
+    behavior: "smooth",
+    inline: "center",
+    block: "nearest"
+  });
+
+  currentIndex = index;
+}
+
+
+function nextSlide() {
+    goToSlide(currentIndex + 1);
+}
+
+setInterval(nextSlide, intervalTime);
\ No newline at end of file
diff --git a/styles-scripts/photos.css b/styles-scripts/photos.css
new file mode 100644
index 0000000..f6be3e8
--- /dev/null
+++ b/styles-scripts/photos.css
@@ -0,0 +1,57 @@
+.parent {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 2px;
+    grid-row-gap: 2px;
+    max-height: 75vh;
+}
+
+.div1 { grid-area: 1 / 1 / 4 / 4; }
+.div2 { grid-area: 1 / 4 / 3 / 6; }
+.div3 { grid-area: 3 / 4 / 4 / 5; }
+.div4 { grid-area: 3 / 5 / 4 / 6; }
+
+img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.parent > div {
+    position: relative;
+    overflow: hidden;
+}
+
+.overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    padding: 20px;
+
+    background: linear-gradient(
+        to top,
+        rgba(0,0,0,0.75),
+        rgba(0,0,0,0)
+    );
+
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.overlay p {
+    color: white;
+    margin: 0;
+    font-size: 18px;
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+
+.parent > div:hover .overlay {
+    opacity: 1;
+}
+
+.parent > div:hover .overlay p {
+    transform: translateY(0);
+}
\ No newline at end of file