Removed comments; bad design

src/views/HomePage.vue

@@ -5,10 +5,19 @@
     </a> 
     <h1>Keyemail</h1>
   </header>
+  <div class="section-row">
     <div class="intro">
       <h1>Hi, I'm Keyemail or Patrick.</h1>
       <p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
     </div>
+    <article>
+      <h1>Comments!</h1>
+      <div>
+	<span>Developer: Sorry this function is in the workings! Come back later to use this function.</span>	
+      </div>
+      <input type="text" placeholder="Start Typing.." required minlength="1"/>
+    </article>
+  </div>
   <i class="fa-solid fa-arrow-down morearrow" @click="downArrow()" title="Nothing.."></i>
 </template>
 
@@ -73,31 +82,37 @@ header h1 {
   background-color: #afb5c8
 }
 
+.section-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
 .intro {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin-top: 40px;
-  width: 100%;
+  margin-top: 90px;
+  width: 700px;
   color: white;
   font-family: 'Rubik', sans-serif;
   background-color: #151d2f;
   border-radius: 10px;
   padding: 20px;
-  text-align: center;
-  box-sizing: border-box;
 }
 
 .intro h1 {
   font-size: 3.5rem;
   font-weight: 500;
+  text-align: left;
 }
 
 .intro p {
   margin-top: 15px;
   font-size: 1.8rem;
   font-weight: 400;
-  max-width: 800px;
+  text-align: left;
+  max-width: 1200px;
 }
 
 article {
@@ -157,6 +172,22 @@ article input {
   margin-top: 80px;
 }
 
+@media screen and (max-width: 1519px){
+  .section-row > * {
+    width: 100%;
+  }
+  .intro h1 {
+    text-align: center;
+  }
+  .intro p {
+    text-align: center;
+    max-width: 100%;
+  }
+  article{
+   margin-top: 20px;
+  }
+}
+
 @media screen and (max-width: 450px){
   header {
     flex-direction: column;