changed about and fixed pop up msg position

Amalkrishnanvp · Aug 7, 2024 · 4b773cc · 4b773cc
1 parent 5255626
commit 4b773cc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -81,8 +81,8 @@ <h2 class="font-semibold text-3xl md:text-4xl my-name">Amal</h2>
                         <div class="info md:mr-8 rounded-md px-4 py-4 md:p-8">
                             <p
                                 class="text-lg lg:text-xl xl:text-2xl text-center pt-1 md:mt-0 md:text-left font-semibold">
-                                FULL
-                                STACK
+                                FRONT
+                                END
                                 DEVELOPER <i class="fa-solid fa-code text-lg xl:text-2xl ml-1"></i></p>
                             <h1
                                 class="font-bold text-3xl lg:text-4xl xl:text-5xl text-center pt-1 sm:mt-0 sm:text-left">
@@ -123,12 +123,10 @@ <h2 class="text-4xl md:text-5xl font-semibold md:mb-2 pb-6 pt-2 about-heading md
                                 <h3 class="text-3xl md:text-5xl mb-8">I am a <span id="identity"
                                         class="text-3xl md:text-5xl"></span><span id="cursor"
                                         class="text-3xl md:text-5xl d-inline-block">|</span></h3>
-                                <p class="md:text-lg">Welcome to my portfolio! I'm Amal, A Full Stack Developer with
-                                    focus
-                                    on
-                                    MERN stack. With a deep understanding of both front-end and back-end technologies, I
-                                    specialize in delivering comprehensive solutions that not only look great but also
-                                    perform flawlessly.</p>
+                                <p class="md:text-lg">Welcome to my portfolio! I'm Amal, A front-end
+                                    developer on a journey of full stack development. With an
+                                    understanding of front-end technologies, I provide comprehensive solutions that not
+                                    only look great but also perfrom flawlessly.</p>
                             </div>
                         </div>
                     </div>
@@ -262,7 +260,8 @@ <h3 class="text-3xl md:text-5xl mb-8">I am a <span id="identity"
                         </div>
                         <!-- Form in contact section -->
                         <div class="contact-form flex justify-center pt-5 md:pt-7 pb-16">
-                            <div class="gap-2 fixed pop-up-msg text-white border-blue-400 py-2 px-4 rounded-md hidden">
+                            <div
+                                class="gap-2 fixed pop-up-msg text-white border-blue-400 py-2 px-4 rounded-md hidden top-28 md:top-36">
                                 <div class="text-base">Your message has been sent</div>
                                 <div>
                                     <i class="fa-regular fa-paper-plane"></i>
@@ -347,8 +346,9 @@ <h4 class="text-xl mb-4 font-semibold">Socials</h4>
                     </a>
                 </div>
             </div>
+        </footer>
     </div>
-    </footer>
+
 
     <!-- Website scripts  -->
     <script src="public/javascripts/app.js">

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -566,6 +566,18 @@ video {
   top: 0px;
 }
 
+.top-24 {
+  top: 6rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.top-28 {
+  top: 7rem;
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -651,10 +663,6 @@ video {
   height: 7rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -679,6 +687,10 @@ video {
   flex-shrink: 0;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .resize-none {
   resize: none;
 }
@@ -1042,7 +1054,6 @@ footer {
 }
 
 .pop-up-msg {
-  top: 30%;
   background-color: green !important;
   transition: opacity 2s ease-in-out;
 }
@@ -1103,6 +1114,18 @@ footer {
 }
 
 @media (min-width: 768px) {
+  .md\:top-24 {
+    top: 6rem;
+  }
+
+  .md\:top-32 {
+    top: 8rem;
+  }
+
+  .md\:top-36 {
+    top: 9rem;
+  }
+
   .md\:mb-2 {
     margin-bottom: 0.5rem;
   }
@@ -1139,10 +1162,6 @@ footer {
     height: 24rem;
   }
 
-  .md\:h-auto {
-    height: auto;
-  }
-
   .md\:w-32 {
     width: 8rem;
   }

diff --git a/src/input.css b/src/input.css
@@ -79,7 +79,6 @@ footer {
   color: #adb5bd;
 }
 .pop-up-msg {
-  top: 30%;
   background-color: green !important;
   transition: opacity 2s ease-in-out;
 }