Inserting the last section and also the footer

JonatasASB · Nov 29, 2024 · f049523 · f049523
1 parent 44e4707
commit f049523
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,4 +1,4 @@
-html {
+body, html {
     overflow-x: hidden !important;
 }
 body {
@@ -90,13 +90,12 @@ main {
 
 }
 .initial {
-    margin: 15px;
+    margin: 15px 0 15px 15px;
     flex-direction: column;
     justify-content: start ;
     align-items: baseline;
 }
 .title-time-line {
-    margin: auto;
     font-size: 25px;
     font-weight: 450;
     border-bottom: 1px solid #a7a7a7;
@@ -123,4 +122,38 @@ main {
     height: 50px;
     margin: 0 20px 0px 0;
     background-color: rgba(241, 82, 82, 0.514);
+}
+.title-last-fight {
+    display: inline-block;
+    margin-left: 25px;
+    font-weight: 500;
+    font-size: 25px;
+    border-bottom: 1px solid #a7a7a7;
+}
+.obs-last-fight {
+    margin: 0 0 10px 25px;
+}
+.container-video {
+    max-width: 450px;
+}
+.video-last-fight {
+    position: relative;
+    height: 0;
+    padding: 0 0 56.25%;
+}
+.video-last-fight iframe {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: 25px;
+}
+footer {
+    background-color: #000;
+    margin-top: 20px;
+    padding: 10px;
+    color: #555;
 }
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@ <h2 class="header-emoji">&#128511;</h2>
                 <ul>
                    <a href="#sobre"><li class="sobre">Sobre</li></a>
                    <a href="#time-line"><li>Cartel no MMA</li></a>
-                   <a href="" id="last-fight"><li>Última Luta</li></a>
+                   <a href="#last-fight"><li>Última Luta</li></a>
                 </ul>
             </nav>
         </div>
@@ -144,5 +144,18 @@ <h1 class="title-time-line">Cartel no MMA</h1>
             </article>
         </div>
     </section>
+    <section id="last-fight">
+        <h1 class="title-last-fight">Última Luta</h1>
+        <div class="container-video">
+            <article class="video-last-fight">
+                <iframe src="https://www.youtube.com/embed/MGsWdoOfBlI?si=91PYtpEAN21YVVqh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </article>
+        </div>
+    </section>
+    <footer class="inf-dev">
+        <div class="container">
+            Todos os Direitos Reservados
+        </div>
+    </footer>
 </body>
 </html>