Se configuro el footer

coxmau77 · Jan 31, 2024 · 8d146d9 · 8d146d9
1 parent d3ff06e
commit 8d146d9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -37,6 +37,7 @@ html {
   font-size: 18px;
   font-family: var(--font-family);
   text-wrap: balance;
+  background-color: pink;
 }
 
 body {
@@ -46,6 +47,7 @@ body {
   display: flex;
   font-size: medium;
   flex-direction: column;
+  margin-bottom: 6rem;
 }
 
 h1,
@@ -94,6 +96,10 @@ button {
   }
 }
 
+.hide-content {
+  display: none;
+}
+
 /* <HEADER  */
 header {
   /* background-color: lightcoral; */
@@ -219,3 +225,24 @@ section > div {
   }
 }
 /* </SECTION */
+
+/* <FOOTER */
+footer {
+  padding: var(--pg);
+  border-top: 1px var(--border-color) solid;
+  text-align: center;
+  grid-area: footer;
+  background-color: var(--container-color);
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+
+  .social {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin: .5rem;
+  }
+}
+/* </FOOTER */
diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
     <link rel="shortcut icon" href="#" type="image/x-icon">
 </head>
 
-<body class="dark-theme">
+<!-- <body class="dark-theme"> -->
+<body>
     <header>
         <div class="logo">
             <h1>txt</h1>
@@ -41,15 +42,15 @@ <h2>Encypt txt challenge</h2>
             </button>
         </div>
     </main>
-    <section class="content-a hide-content">
+    <section class="content-a">
         <div>
             <!-- <img src="./img/no-message-img.svg" alt="No message image"> -->
             <i class="bi bi-exclamation-octagon-fill"></i>
             <h2>Ningún mensaje fue encontrado</h2>
             <p>Ingresa el texto que desees encriptar o desencriptar.</p>
         </div>
     </section>
-    <section class="content-b">
+    <section class="content-b hide-content">
         <div>
             <div>
                 <h2>content B section</h2>
@@ -66,10 +67,10 @@ <h2>content B section</h2>
     <footer>
         <small>&copy; Copyright - 2024 | Mauricio Cox</small>
         <div class="social">
-            <a href="http://" target="_blank" rel="noopener noreferrer" title="Visitar perfil en GitHub">
+            <a href="https://github.com/coxmau77" target="_blank" rel="noopener noreferrer" title="Visitar perfil en GitHub">
                 <i class="bi bi-github"></i>
             </a>
-            <a href="http://" target="_blank" rel="noopener noreferrer" title="Visitar perfil en Linkedin">
+            <a href="https://www.linkedin.com/in/coxmau77/" target="_blank" rel="noopener noreferrer" title="Visitar perfil en Linkedin">
                 <i class="bi bi-linkedin"></i>
             </a>
         </div>