[ADD]

F-phenix · May 25, 2024 · 9b23492 · 9b23492
1 parent fa3f86a
commit 9b23492
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# F-Phenix Portfolio
+<div align="center">
+  <img src="assets/images/phenix.png" alt="logo"/>
+</div>
 
 Bienvenue sur le portfolio officiel de F-Phenix, un groupe d'étudiants passionnés par le développement web. Ce projet présente nos compétences, projets et réalisations.
 
@@ -69,17 +71,22 @@ cd portphonix
 
 ## Test local (Docker)
 
-  - Prérequis:
-    - [Docker engine](https://docs.docker.com/engine/install/)
-    - [Docker compose](https://docs.docker.com/compose/install/linux/)
+- Prérequis:
+  - [Docker engine](https://docs.docker.com/engine/install/)
+  - [Docker compose](https://docs.docker.com/compose/install/linux/)
 
   Pour lancer le conteneur,
 
   ```bash
-    $ ~ cd local && bash start.sh
+    ~ cd local && bash start.sh
   ```
 
   Pour arrêter le conteneur,
+
   ```bash
-    $ ~ cd local && bash stop.sh
-  ```
+    ~ cd local && bash stop.sh
+  ```
+
+## Previews
+
+<img src="preview_cover.png">
diff --git a/assets/css/cover_style.css b/assets/css/cover_style.css
@@ -11,30 +11,85 @@
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 .cover-text {
-    position: relative; 
+    position: relative;
     width: 100%;
-    height: 200px; 
-
+    height: 200px;
 }
 .cover-text-citation {
     font-size: 1.5rem;
     font-weight: bold;
-
-
+    text-shadow: 
+    1px 1px 0 #212226;
 }
 .cover-text-bigtitle {
-    -webkit-text-stroke: 3px#f29f54;
+    -webkit-text-stroke: 1.5px#eb8329;
     font-size: 13rem;
    color:  #212226;
 }
+
+.cover-text-welcome{
+    margin-top: 20px;
+    font-size: 15px;
+    color: #fefcfb;
+    opacity: 0.6;
+    font-weight: normal;
+
+}
 .layer-one {
-    top: 0; 
-    left: 0; 
-    width: 100%; 
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
     z-index: 1;
 }
 .layer-two {
     margin: 0 20%;
     z-index: 2;
-}
+}
+
+.cover-button {
+    width: 150px;
+    /* height: 100px; */
+    position: absolute;
+    display: flex;
+     top: 85% ;
+     overflow: auto;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.cover-button-shape,.cover-button-text {
+    flex: 1;
+}
+
+.cover-button-shape{
+    position: absolute;
+    background-color: black;
+    bottom: 5px;
+    position: relative; 
+    width: 70px;
+    margin: 20px auto;
+
+}
+.cover-button-shape-one {
+    position: absolute;
+    top: 0;
+    left: 10;
+    width: 50px;
+    height: 2px;
+    background-color: #fefcfb;
+    z-index: 2;
+
+}
+.cover-button-shape-two {
+    background-color: #eb8329;
+    position: absolute;
+    top: -20px;
+    width:  40px;
+    height:  35px;
+    z-index: 1;
+}
+/* .cover-button-text {
+    width: 50px;
+} */
diff --git a/assets/css/header_style.css b/assets/css/header_style.css
@@ -16,11 +16,12 @@
     z-index: 1000; 
 }
 
-
 .header-logo {
-    font-size: 24px;
-    color: #007bff; 
-    text-decoration: none;
+    width: 80px;
+    height: 40px;
+    background-image: url('/assets/images/phenix.png');
+    background-size: contain;
+    background-repeat: no-repeat;
 }
 
 
@@ -32,17 +33,23 @@
 .header-apropos-item,
 .header-projets-item,
 .header-experience-item {
-    margin-left: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-top: 15px;
     color: #fefcfb; 
     font-size: 16px;
     font-weight: 700;
     text-decoration: none;
 }
 
 
-/* .header-home-item:hover,
+.header-home-item:hover,
 .header-apropos-item:hover,
 .header-projets-item:hover,
 .header-experience-item:hover {
-    color: #007bff; 
-} */
+    color: #fefcfb;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-radius: 5px;
+    background-color: #eb8329;
+}
diff --git a/assets/images/phenix.png b/assets/images/phenix.png
diff --git a/index.html b/index.html
@@ -10,25 +10,32 @@
 </head>
 <body>
     <div id="root"></div>
-    <!-- <div class="header">
-        <a class="header-logo">Logo</a>
+    <div class="header">
+        <div class="header-logo"></div>
         <div class="header-right">
             <a class="header-home-item" >Acceuil</a>
             <a class="header-apropos-item">A-propos</a>
-            <a class="header-projets-item">Contact</a>
+            <a class="header-projets-item">Projets</a>
             <a class="header-experience-item">Experiences</a>
         </div>
     </div>
-    <br> -->
+
     <div class ="cover">
         <div class="cover-text">
             <div class="layer-one"><h1 class="cover-text-bigtitle">Phenix</h1></div>
-            <div class="layer-two"><p class="cover-text-citation">"Comme le Phénix, nous portons en nous la capacité de renaître et de transformer notre existence."</p>
+            <div class="layer-two"><p class="cover-text-citation">"Comme le Phénix, nous portons en nous la capacité de renaître et de transformer notre existence."</p></div>
+            <p class="cover-text-welcome">Bienvenue sur le portfolio officiel du Foyer Phenix.</p>
+        </div>
+        <div class="cover-button">
+            <div class="cover-button-shape">
+                <div class="cover-button-shape-one"></div>
+                <div class="cover-button-shape-two"></div>
             </div>
-
+            <a class="cover-button-text">VOIR PLUS</a>
         </div>
+
+    </div>
     </div>
-
 </body>
 <!-- <script src="assets/js/script.js"></script> -->
 </html>

diff --git a/preview_cover.png b/preview_cover.png