Ajout des sperateur de section en vage + le style des classement dePTHD

Jonas0o0 · Apr 9, 2024 · b4d55cb · b4d55cb
1 parent 94d164b
commit b4d55cb
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 43 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -17,8 +17,8 @@ html {
 }
 
 body {
-    background-color: #000000;
-    color: #fff;
+    background-color: #ffffff;
+    color: #000000;
 }
 body::after{
     content: '';
@@ -105,6 +105,11 @@ nav ul li:hover a:after{
     left: 0;
 }
 
+header{
+    color: #ffffff;
+    background-color: #000000;
+}
+
 header div.main-content {
     display: flex;
     flex-direction: row;
@@ -305,7 +310,7 @@ section.Ap {
     overflow: hidden;
     width: 100%;
     min-height: 100vh;
-    background-color: #fff;
+    background-color: #ffffff;
     color: #000000;
     display: flex;
     flex-direction: column;
@@ -350,6 +355,8 @@ section.Ap  h1{
 }
 
 section.SK {
+    color: #ffffff;
+    background-color: #000000;
     overflow: hidden;
     width: 100%;
     display: flex;
@@ -703,7 +710,7 @@ section.Pr {
     color: #000000;
     display: flex;
     flex-direction: column;
-    padding: 200px 0px;
+    padding: 50px 0px;
     overflow: hidden;
 }
 
@@ -785,11 +792,12 @@ section.Pr .project-container .box a, section.Pr .concour-container .box a{
 section.CM{
     width: 100%;
     background-color: #000000;
+    color: #ffffff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-bottom: 150px;
+    padding-bottom: 150px;
 }
 
 section.CM .container{
@@ -929,6 +937,7 @@ footer {
     min-height: 150px;
     height: auto;
     background-color: #000000;
+    color: #ffffff;
     display: flex;
     flex-direction: column;
     padding: 50px 50px 10px 50px;
@@ -942,6 +951,7 @@ footer div{
 }
 
 footer div span.lettre{
+    color: #ffffff;
     font-size: 100px;
     font-style: italic;
     font-weight: bold;

diff --git a/index.html b/index.html
@@ -65,13 +65,17 @@ <h1>About me</h1>
         </div>
         </div>
     </section>
-    <section  data-aos="fade-up" class="SK">
+    <section style="transform: rotate(180deg);">
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+        </svg>
+    </section>
+    <section class="SK">
         <div id="Skill" class="text-container">
-            <h1>Skills</h1>
+            <h1 data-aos="fade-up">Skills</h1>
             <p>Passionné d'informatique, je maîtrise plusieurs langages tels que Python, HTML, CSS, SQL et JavaScript, avec une préférence pour le développement front-end. Spécialisé dans la création d'effets parallax, je cherche à concevoir des interfaces interactives et esthétiques. J'utilise des outils courants comme Visual Studio Code, Git et PyCharm pour façonner des expériences utilisateur captivantes. Bien que je n'aie pas encore de projets officiels à mon actif, mon engagement et ma créativité sont prêts à être déployés. Actuellement en terminale, je m'efforce constamment d'apprendre et d'innover dans le domaine du développement web.</p>
         </div>
         <div id="SkillBox" data-aos="fade-left">
-            <center><p>My Skills</p></center>
             <img src="assets/Images/colombe.jpg" alt="Skill - Pawan Mall" />
             <div class="SkillBar">
                 <div id="Skill-PYTHON"> 
@@ -117,6 +121,11 @@ <h1>Skills</h1>
             </div>
         </div>
     </section>
+    <section>
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+        </svg> 
+    </section>
     <section id="Pr", class="Pr">
         <h1>Project</h1>
         <div class="project-container">
@@ -214,6 +223,11 @@ <h1>La Nuit du code 2024 (En cour)</h1>
             </div>
         </div>
     </section>
+    <section style="background-color: #fff; transform: rotate(180deg);">
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+        </svg>
+    </section> 
     <section class="CM" id="CM">
         <h1>Contact me</h1>
         <div class="container">
@@ -262,7 +276,7 @@ <h1>Contact me</h1>
     </div>
     </section>
     <footer>
-        <div data-aos="fade-up">
+        <div>
             <span class="lettre">J</span>
             <span class="lettre">O</span>
             <span class="lettre">N</span>

diff --git a/src/PTHD/css/styles.css b/src/PTHD/css/styles.css
@@ -2,7 +2,7 @@
 
 @font-face {
     font-family: JFont;
-    src: url(../assets/Fonts/Thunder-VF.ttf);
+    src: url(../../../assets/Fonts/Thunder-VF.ttf);
 }
 
 *{
@@ -17,8 +17,9 @@ html {
 }
 
 body {
-    background-color: #ffffff;
-    color: #000000;
+    background-color: #000000;
+    color: #ffffff;
+    font-family: 'Roboto';
 }
 body::after{
     content: '';
@@ -290,3 +291,86 @@ span {
         left: 0;
     }
 }
+
+section {
+    width: 100%;
+    padding: 50px 0px 130px 0px;
+    background-color: #ffffff;
+    color: #000000;
+}
+
+section div{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+section h1 {
+    font-size: 50px;
+    font-style: italic;
+    font-weight: bold;
+    font-family: JFont;
+}
+
+section p{
+ margin: 50px;    
+}
+
+section table{
+    text-align: center;
+    border-collapse: collapse;
+    width: 50%;
+}
+
+section table, td, th {
+    border: 1px solid;
+    padding: 5px;
+}
+
+footer {
+    width: auto;
+    min-height: 150px;
+    height: auto;
+    background-color: #000000;
+    display: flex;
+    flex-direction: column;
+    padding: 50px 50px 10px 50px;
+    border-top: 5px solid #fff;
+    justify-content: center;
+    text-align: center;
+}
+
+footer div{
+    text-align: left;
+}
+
+footer div span.lettre{
+    font-size: 100px;
+    font-style: italic;
+    font-weight: bold;
+    font-family: JFont;
+}
+
+footer p{
+    font-family: 'Roboto', sans-serif;
+    text-decoration: underline;
+    margin-top: 25px;
+}
+
+footer div span.lettre:nth-child(1){
+    animation-delay: 0.1s;
+}
+footer div span.lettre:nth-child(2){
+    animation-delay: 0.2s;
+}
+footer div span.lettre:nth-child(3){
+    animation-delay: 0.3s;
+}
+footer div span.lettre:nth-child(4){
+    animation-delay: 0.4s;
+}
+footer div span.lettre:nth-child(5){
+    animation-delay: 0.5s;
+}
diff --git a/src/PTHD/index.html b/src/PTHD/index.html
@@ -36,36 +36,48 @@
         </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>
+        <div>
+            <h1>Classement</h1>
+            <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 pour chaque égalité</td>
+                        <td>10</td>
+                        <td>90</td>
+                    </tr>
+                    <tr>
+                        <td>Académie de Lille</td>
+                        <td>6</td>
+                        <td>45</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </section>
-</body>
+    <footer>
+        <div>
+            <span class="lettre">J</span>
+            <span class="lettre">O</span>
+            <span class="lettre">N</span>
+            <span class="lettre">A</span>
+            <span class="lettre">S</span>
+        </div>
+        <p>&copy; 2024, Tout droits réservés.</p>
+    </footer>
 </html>
diff --git a/src/Test/css/styles.css b/src/Test/css/styles.css
@@ -0,0 +1,23 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+section.box{
+    height: 300px;
+    width: 100%;
+    text-align: center;
+    font-size: 100px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+section.black {
+    color: #fff;
+    background-color: #000;
+}
+
+section.white {
+    color: #000;
+    background-color: #fff;
+}
+
diff --git a/src/Test/index.html b/src/Test/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Testy test</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <section class="black box">BLACK</section>
+    <section>
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+        </svg> 
+    </section>
+    <section class="white box">WHITE</section>
+    <section style="transform: rotate(180deg);">
+        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+        </svg>
+    </section>
+    <section class="black box">BLACK</section>
+</body>
+</html>