short session

added emojis
fixed a width problem creating an extra nudge on the side

frontend/src/components/Landing.js

@@ -7,9 +7,9 @@ const Landing = () => {
     <div className='Header'>
         <div className='text-container'>
         <h1>Welcome to Liqour Buddy!</h1>
-        <p>A project by Ludvig Damberg and Ludvig Hillert for Linköping University </p>
+        <p>A project by Ludvig Damberg and Ludvig Hillert for Linköping University. </p>
         <p>Scroll down to see a checklist for our project and test the current features! Keep in mind that this is a project
-            under developement, some features might not work or have any response.
+            under developement, some features might not work or have any response. 🍹🍻
         </p>
         </div>
         <div className='image-container'>
@@ -18,30 +18,30 @@ const Landing = () => {
     </div>
     <div className='Header2'>
         <div className='card'>
-            <h1>Functionality</h1>
+            <h1>Functionality 🍺</h1>
             <ul className='list'>
-           <li className='item'>Creating Posts </li>
+           <li className='item'>Creating Posts ✅ </li>
            <li className='item'>Account Sign Up </li>
            <li className='item'>Logging In </li>
            <li className='item'>Authentication Checking </li>
            </ul>
         </div>
         <div className='card'>
-            <h1>Pages</h1>
+            <h1>Pages🍺</h1>
             <ul className='list'>
            <li className='item'>Home </li>
            <li className='item'>About </li>
            <li className='item'>Discover </li>
            <li className='item'>Log In and Sign Up </li>
-           <li className='item'>Crate Post </li>
+           <li className='item'>Crate Post ✅</li>
            </ul>
         </div>
         <div className='card'>
-            <h1>User Experience</h1>
+            <h1>User Experience🍺</h1>
             <ul className='list'>
-           <li className='item'>Scrolling Uriggers </li>
-           <li className='item'>Hover Unteractions </li>
-           <li className='item'>Instructional Unterface </li>
+           <li className='item'>Scrolling Triggers </li>
+           <li className='item'>Hover Interactions </li>
+           <li className='item'>Instructional Interface </li>
            <li className='item'>Easy Usage </li>
            <li className='item'>Consistent Theme </li>
            

frontend/src/index.css

@@ -3,6 +3,9 @@
 body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
+  box-sizing: border-box;
+  background-color: rgb(49, 117, 121);
+
 }
 .img{
   margin-top: 10px;

frontend/src/styles.css

 
 .Header{
-    width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
@@ -22,14 +21,14 @@
 
 
 .image-container {
-    width: 500px; /* set width of image container */
-    height: 500px; /* set height of image container */
-    border-radius: 50%; /* make image container circular */
-    overflow: hidden;
+  width: 500px; /* set width of image container */
+  height: 500px; /* set height of image container */
+  border-radius: 50%; /* make image container circular */
+  overflow: hidden;
   display: flex; /* Add display flex to center image vertically */
   align-items: center; /* Center image vertically */
   justify-content: center; /* Center image horizontally */
-  margin: 2px;
+
   }
   
 .image-container img {
@@ -49,31 +48,33 @@ object-fit: cover;
 }
 
 .Header2{
-    width: 100vw;
     height: 60vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgb(49, 117, 121);
+    background: rgb(49, 117, 121);
     flex-wrap: wrap; /* Add flex-wrap property to allow text to wrap */
+
 }
 .card {
     flex: 1;
     margin: 0 45px;
     max-width: 400px;
     aspect-ratio: 1/1; /* Set aspect ratio to 1:1 */
-    background: rgb(94, 138, 141);
+    background: rgb(62, 121, 124);
     border-radius: 10px;
     box-shadow: 0 8px 13px 0 rgba(41, 41, 43, 0.548);
     text-align: center;
-    color: rgb(253, 235, 133);
+    color: rgb(255, 240, 153);
   }
   .list{
   list-style: none;
   padding: 0;
   margin: 0;
   color: rgb(255, 255, 255);
-  }
+  font-size: 120%;
+  
+}
   .item{
     margin-top: 30px;
     margin-bottom: 15px;