home page done

done home page

Author: xwellstr

asset/img/vieillechat.jpg

@@ -49,10 +49,8 @@
     <main class="main-container">
       <section class="hero-section">
        <div class="inner-hero-section">
-          <div class="video-hero-container">
-            <video class="video-hero" autoplay loop>
-                <source src="/asset/video/vidtp2.mp4" type="video/mp4">
-            </video>
+          <div class="img-hero-container">
+              <img src="./asset/img/vieillechat.jpg" class="img-hero" alt="pauline et son chat"/> 
             <div class="hero-content">
                 <h1 class="hero-title">Le journal de qoubec: Où les Nouvelles Deviennent Sketchs</h1>
                 <p class="hero-paragraph"><strong class="strong-word-hero-paragraph">Pauline Tremblay de Saint-Côme</strong> a perdu <em class="emp-word-hero-paragraph">son chaton</em> <br/>et ne le retrouve plus depuis plus d'une semaine. La SQ lance un alerte Amber afin de le retrouver.</p>
@@ -65,7 +63,17 @@ <h1 class="hero-title">Le journal de qoubec: Où les Nouvelles Deviennent Sketch
         </div> 
       </section>
       <section class="about-us-section">
-           
+        <div class="about-us-inner-section">
+          <div class="about-us-text-container">
+            <h2 class="about-us-title">Qui sommes-nous?</h2>
+            <p class="about-us-paragraph">"Le Journal de Qoubec", où l'actu se déguise en sketch ! Ici, on décortique les nouvelles avec sarcasme et sans filtre. Préparez-vous à rire jaune de l'absurde réalité. Info ou Intox ? À vous de démêler le vrai du faux, mais toujours avec un éclat de rire. Piquant, provocant, hilarant - c'est le Qoubec comme jamais vu !</p>
+          </div>
+          <div class="about-us-video-container">
+            <video class="about-us-video" autoplay loop>
+                <source src="/asset/video/vidtp2.mp4" type="video/mp4">
+            </video>
+          </div>
+        </div>   
       </section>
     </main>
 

index.html

@@ -12,7 +12,7 @@
    margin-top: 20px;
 
 }
-.video-hero-container{
+.img-hero-container{
     width: 100%;
     height:100%;
     position: relative;
@@ -23,13 +23,11 @@
     overflow: hidden;
     z-index: 0;
 }
-.video-hero{
-   width:100%;
-   height:auto;
-   object-fit: contain;
-   filter: brightness(60%);
+.img-hero{
+    width: 100%;
+    height:auto;
+    filter: brightness(50%);
 }
-
 .hero-content{
     position: absolute;
     z-index: 10;
@@ -90,4 +88,47 @@
 
 .hero-button-link:visited{
     color:var(--background)
-}
+}
+
+.about-us-section{
+    width: 100%;
+    height:500px;
+    margin-top: 80px;
+
+}
+
+.about-us-inner-section{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width:100%;
+    height:100%;
+
+}
+
+.about-us-text-container{
+    width:50%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.about-us-video-container{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 50%;
+    height:100%;
+    background-color: aqua;
+    overflow: hidden;
+    border-radius: 10px;
+}
+
+.about-us-video{
+    width: auto;
+    height:100%;
+    object-fit: contain;
+    filter: brightness(60%);
+ }
+