From e596781a4a04e8421e2772248275ccf091ce1143 Mon Sep 17 00:00:00 2001
From: Jonas <83239419+Jonas0o0@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:00:50 +0200
Subject: [PATCH] Add files via upload

---
 css/styles.css          |  18 +--
 index.html              |  38 +++++-
 src/PTHD/css/styles.css | 292 ++++++++++++++++++++++++++++++++++++++++
 src/PTHD/index.html     |  71 ++++++++++
 4 files changed, 410 insertions(+), 9 deletions(-)
 create mode 100644 src/PTHD/css/styles.css
 create mode 100644 src/PTHD/index.html

diff --git a/css/styles.css b/css/styles.css
index 361acc5..f6ccb36 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -715,7 +715,7 @@ section.Pr  h1{
     font-family: JFont;
 }
 
-section.Pr .project-container{
+section.Pr .project-container, section.Pr .concour-container{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -723,7 +723,8 @@ section.Pr .project-container{
     justify-content: space-evenly;
 }
 
-section.Pr .project-container .box{
+
+section.Pr .project-container .box, .concour-container  .box{
     font-family: 'Roboto', sans-serif;
     width: 30%;
     min-width: 300px;
@@ -744,25 +745,26 @@ section.Pr .project-container .box:nth-child(1), section.Pr .project-container .
     color: #fff;
 }
 
-section.Pr .project-container .box:nth-child(2), section.Pr .project-container .box:nth-child(2) a{
+section.Pr .concour-container .box:nth-child(1), section.Pr .concour-container .box:nth-child(1) a{
     position: relative;
-    background-color: #ffffff;
-    color: #000000;
+    /**background-color: #000000;**/
+    background-image: url('https://img.freepik.com/photos-premium/fond-noir-points-blancs-points-dessus_662214-30678.jpg');
+    color: #FFD500;
 }
 
-section.Pr .project-container .box a:hover::after{
+section.Pr .project-container .box a:hover::after, section.Pr .concour-container .box a:hover::after{
     width: 100%;
     left: 0;
 }
 
-section.Pr .project-container .box h1{
+section.Pr .project-container .box h1, section.Pr .concour-container .box h1{
     font-size: 100px;
     margin: 0;
     font-weight: bold;
     font-family: JFont;
 }
 
-section.Pr .project-container .box a{
+section.Pr .project-container .box a, section.Pr .concour-container .box a{
     text-align: center;
     text-decoration: none;
     padding: 5px;
diff --git a/index.html b/index.html
index c745a11..fdaf8a7 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <nav>
         <div class="verticalnav-container">
             <ul>
-                <li><a href="#Home">Home</a></li>
+                <li><a href="/#Home">Home</a></li>
                 <li><a href="#AP">About me</a></li>
                 <li><a href="#Skill">Skills</a></li>
                 <li><a href="#Pr">Projects</a></li>
@@ -147,6 +147,42 @@ <h1>Premier site web serieux</h1>
                 </a>
             </div>
         </div>
+        <h1>Concour</h1>
+        <div class="concour-container">
+            <div data-aos="fade-right" class="box">
+                <h1>La Nuit du code 2023</h1>
+                <p>La Nuit du Code est un marathon de programmation durant lequel,par équipes de deux ou trois,nous avons 6h pour coder un jeu avec Python.</p>
+                <a href="src/soon.htm">
+                    telecharger le jeu
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+                    </svg>
+                </a>
+                <a href="https://www.nuitducode.netl">
+                    Plus d'info
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+                    </svg>
+                </a>
+            </div>
+            <div data-aos="fade-left" class="box">
+                <h1>Passe Ton Hack d'Abord</h1> 
+                <p>C'est un CTF co-organisé par le Commandement de la cyberdéfense (COMCYBER) et la Direction Générale de l'Enseignement Scolaire (DGESCO) du ministère de l'Éducation Nationale et de la Jeunesse, constitue une opportunité pour les lycéens.
+                    Il vise à les initier de manière ludique à la cybersécurité, tout en suscitant un vif intérêt pour ce domaine.</p>
+                <a href="src/PTHD/index.html">
+                    Classement 
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+                    </svg>
+                </a>
+                <a href="https://www.defense.gouv.fr/comcyber/actualites/passe-ton-hack-dabord-2e-edition-elargie-lensemble-du-territoire-francais">
+                    Plus d'info
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
     </section>
     <section class="CM" id="CM">
         <h1>Contact me</h1>
diff --git a/src/PTHD/css/styles.css b/src/PTHD/css/styles.css
new file mode 100644
index 0000000..be6871b
--- /dev/null
+++ b/src/PTHD/css/styles.css
@@ -0,0 +1,292 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap');
+
+@font-face {
+    font-family: JFont;
+    src: url(../assets/Fonts/Thunder-VF.ttf);
+}
+
+*{
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    --scroll-behavior: smooth;
+    scroll-behavior: smooth;
+    scroll-padding-top: 50px;
+}
+
+body {
+    background-color: #ffffff;
+    color: #000000;
+}
+body::after{
+    content: '';
+    height: 2px;
+    position: fixed;
+    top: calc(50% - 1px);
+    left: 0;
+    right: 0;
+    background-color: #892222;
+    z-index: 10;
+    opacity: 0;
+}
+
+nav div.burgerNav-container{
+    opacity: 0;
+    width: 0;
+}
+
+nav .link{
+    overflow: hidden;
+    opacity: 0;
+    height: 0;
+}
+
+nav div.verticalnav-container{
+    opacity: 1;
+    width: 100%;
+}
+
+nav{
+    height: 50px;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+    background-color: #000000;
+    z-index: 10;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+nav ul {
+    font-family: 'Roboto', sans-serif;
+    height: 50px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+}
+
+nav ul li{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+    font-size: 20px;
+  }
+
+nav ul li a{
+    padding: 0px 10px;
+    margin: 0px 10px;
+    color: #fff;
+    text-decoration: none;
+    float: left;
+    transition: all ease-in-out .2s;
+    border:none;
+    position: relative;
+}
+
+nav ul a::after{
+    content: '';
+    position: absolute;
+    width: 0px;
+    height: 2px;
+    left: 50%;
+    bottom:0;
+    margin-top: 1px;
+    background-color: rgb(255, 255, 255);
+    transition: all ease-in-out .3s;
+}
+
+nav ul li:hover a:after{
+    width: 100%;
+    left: 0;
+}
+
+header div.main-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+}
+
+header div.arrow {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+@keyframes arrowAnimation{
+    0%{
+        transform: translateY(0px);
+    }
+    50%{
+        transform: translateY(-50px);
+    }
+    100%{
+        transform: translateY(0px);
+    }
+}
+
+header div.arrow a svg{
+    color: #fff;
+    animation: arrowAnimation 2s ease-in-out infinite;
+}
+
+span {
+    font-size: 500px;
+    font-weight: bold;
+    font-family: JFont;
+}
+
+@media screen and (max-width: 1200px) {
+    span {
+        font-size: 300px;
+    }
+}
+
+@media screen and (max-width: 900px) {
+    span {
+        font-size: 200px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    nav{
+        height: auto;
+    }
+    nav div.burgerNav-container{
+        opacity: 1;
+        width: 100%;
+    }
+
+    nav ul {
+        height: 0px;
+    }
+    
+    nav div.verticalnav-container{
+        overflow: hidden;
+        opacity: 0;
+        width: 0;
+    }
+
+    nav .burguerNav{
+        width: 100%;
+        height: 50px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    nav .burguerNav a{
+        text-align: center;
+        font-family: 'Roboto', sans-serif;
+        text-decoration: none;
+        color: rgb(255, 255, 255);
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+    
+    nav .burguerNav .burguer{
+        right: 15px;
+        top: 0px;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: center;
+    }
+    
+    nav .burguerNav .burguer .bar{
+        position: absolute;
+        width: 30px;
+        height: 3px;
+        background-color: #fff;
+        border-radius: 5px;
+        transition: ease-in .3s;
+    }
+    
+    nav .burguerNav .burguer .up{
+        transform: translateY(-10px);
+    }
+    
+    nav .burguerNav .burguer .mid{
+        width: 25px;
+        opacity: 1;
+    }
+    
+    nav .burguerNav .burguer .down{
+        transform: translateY(10px);
+    }
+    
+    nav .burguerNav .burguer .up.active{
+        width: 30px;
+        transform: rotateZ(-45deg);
+    }
+    
+    nav .burguerNav .burguer .mid.active{
+        opacity: 0;
+    }
+    
+    nav .burguerNav .burguer .down.active{
+        width: 30px;
+        transform: rotateZ(45deg);
+    }
+    
+    nav .link{
+        overflow: hidden;
+        opacity: 0;
+        height: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        transition: ease-in-out .3s;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;
+    }
+    
+    nav .link.active{
+        opacity: 1;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    }
+    
+    nav .link a{
+        font-family: 'Roboto', sans-serif;
+        text-decoration: none;
+        color: #ffffff;
+        transition: ease .3s;
+        padding: 1px 10px;
+        margin: 5px 1px;
+        position: relative;
+    }
+
+    nav .link a::after{
+        content: '';
+        position: absolute;
+        width: 0px;
+        height: 2px;
+        left: 50%;
+        bottom:0;
+        margin-top: 1px;
+        background-color: rgb(255, 255, 255);
+        transition: all ease-in-out .3s;
+    }
+    
+    nav .link a:hover::after{
+        width: 100%;
+        left: 0;
+    }
+}
diff --git a/src/PTHD/index.html b/src/PTHD/index.html
new file mode 100644
index 0000000..c4ef38d
--- /dev/null
+++ b/src/PTHD/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <title>Passe Ton Hack Dabord</title>
+</head>
+<body>
+    <nav>
+        <div class="verticalnav-container">
+            <ul>
+                <li><a href="../../index.html#Home">Home</a></li>
+                <li><a href="../../index.html#AP">About me</a></li>
+                <li><a href="../../index.html#Skill">Skills</a></li>
+                <li><a href="../../index.html#Pr">Projects</a></li>
+                <li><a href="../../index.html#CM">Contact me</a></li>
+            </ul>
+        </div>
+        <div class="burgerNav-container">
+            <div class="burguerNav">
+                <a href="index.html">PROGRAMMEUR | ETUDIANT</a>
+                <div class="burguer">
+                    <div class="bar up "></div>
+                    <div class="bar mid "></div>
+                    <div class="bar down "></div>
+                </div>
+            </div>
+            <div class="link">
+                <a href="../../index.html#Home" class="animation">Home</a>
+                <a href="../../index.html#AP" class="animation">About me</a>
+                <a href="../../index.html#Skill" class="animation">Skills</a>
+                <a href="../../index.html#Pr" class="animation">Projects</a>
+                <a href="../../index.html#CM" class="animation">Contact me</a>
+            </div>
+        </div>
+    </nav>
+    <section>
+        <p>Notre equipe, les zinzins de l'espace, est composer de 4 membre, nous avons réussi a faire 2380 point lors de concour ce qui nous a perit d'être 77ième sur 1 200 mais ce classemnt n'est pas tres representatif car beaucoup d'équipe on le meme score mais pasle même rang c'est pourquoi :</p>
+        <table>
+            <caption>
+                <a href="https://www.defense.gouv.fr/sites/default/files/comcyber/classement-final-ctf-ptha_2024_0.pdf">Source : Resultat officiels</a>
+            </caption>
+            <thead>
+                <tr>
+                    <th>Catégorie</th>
+                    <th>Position</th>
+                    <th>Nombre de participant</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Global</td>
+                    <td>77</td>
+                    <td>1200</td>
+                </tr>
+                <tr>
+                    <td>Même rang les egaliter</td>
+                    <td>10</td>
+                    <td>90</td>
+                </tr>
+                <tr>
+                    <td>Académie de Lille</td>
+                    <td>6</td>
+                    <td>45</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</body>
+</html>
\ No newline at end of file