add .centered-article

Author: carlosjorger

css/presentation-section.css

@@ -2,12 +2,15 @@
     color: var(--default-font-color);
     font-family: var(--default-font-family);
     padding: 1em;
+  
 }
 
 #presentation-title {
     font-size: 2.6rem;
     color: var( --default-secundary-font-color);
     animation: 1s show-presentation ease;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 
 #presentation-main-skill {
@@ -18,6 +21,8 @@
     animation-duration: 1s;
     animation-delay: 0.2s;
     animation-fill-mode: forwards;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 
 #presentation-description {
@@ -27,5 +32,7 @@
     animation-duration: 1s;
     animation-delay: 0.4s;
     animation-fill-mode: forwards;
+    margin-top: 0.7rem;
+    margin-bottom: 0.7rem;
 }
 

css/styles.css

@@ -102,9 +102,12 @@ nav {
   font-size: 1.7rem;
 
 }
-
-/* Ids */
-
+.centered-article{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 90%;
+}
 
 @keyframes show-presentation {
   0% {

index.html

@@ -53,7 +53,7 @@
     </nav>
   </header>
   <section>
-    <div class="presentation">
+    <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>
       <h3 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer</h3>
       <p id="presentation-description">
@@ -63,7 +63,7 @@ <h3 id="presentation-main-skill">I'm an <br class='br-show'>full-stack engineer<
     </div>
   </section>
   <section>
-    <article id="aboutMe">
+    <article id="aboutMe" class="centered-article">
       <h2 class="subtitle reveal">
         About me
       </h2>