last fixes for css

Carpenteri1 · Aug 20, 2024 · b0ad28e · b0ad28e
1 parent 058bbb4
commit b0ad28e
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 25 deletions.
diff --git a/src/app/Utility/stringhandler.ts b/src/app/Utility/stringhandler.ts
@@ -126,4 +126,9 @@ export class StringHandler {
 
     //#endregion
 
+    //#region footer
+    static readonly ContactMeAt: string = "Contact Me At";
+
+    //endregion
+
 }
diff --git a/src/app/component/cardlayoutcomponent/cardlayout.component.css b/src/app/component/cardlayoutcomponent/cardlayout.component.css
@@ -95,3 +95,11 @@
 button {
   background-color: #2E3445;
 }
+
+@media (max-width: 1366px) {
+    .bi-arrow-right,
+    .bi-arrow-left,
+    .col-2{
+      display: none;
+    }
+}
diff --git a/src/app/component/carouselcomponent/carousel.component.css b/src/app/component/carouselcomponent/carousel.component.css
@@ -1,9 +1,4 @@
 
-
-.col-8{
-  height: 550px;
-}
-
 .progress{
   padding: 0%;
 }
@@ -71,13 +66,10 @@
       }
     }
 
-    @media (max-width:  767px) {
+    @media (max-width:  1366px) {
       .bi-arrow-right,
-      .bi-arrow-left,
-      .arrow{
+      .bi-arrow-left{
         display: none;
       }
-
-
     }
 
diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
@@ -1,12 +1,12 @@
 <div class="container">
-    <div class="row w-100">
-        <div class="col-xl-2 col-l-2 col-md-1 d-flex justify-content-center arrow">
+    <div class="row text-center">   
+        <h2>{{title}}</h2>
+    </div>
+    <div class="row" style="padding: 2em;">
+        <div class="col-2 d-flex justify-content-center arrow">
             <button class="no-outline" style="margin-left:auto;" (click)="toggleGroup('left')"><i class="bi bi-arrow-left"></i></button>
         </div>
-        <div class="col-xl-8 col-l-8 col-md-10 col-s-12">
-            <div class="row text-center">   
-                <h2>{{title}}</h2>
-            </div>
+        <div class="col-xl-8 col-l-12">
             <div class="row">
                 <div class="d-flex justify-content-center" *ngFor="let item of currentListOfSKills" [@fadeOut]="fadeState" [@fadeIn]="fadeState">
                     <div class="skill-main" >
@@ -20,7 +20,7 @@ <h2>{{title}}</h2>
                 </div>
             </div>
         </div>
-        <div class="col-xl-2 col-l-2 col-md-1 d-flex justify-content-center arrow">
+        <div class="col-2 d-flex justify-content-center arrow">
             <button class="no-outline" style="margin-right:auto;" (click)="toggleGroup('right')"><i class="bi bi-arrow-right"></i></button>
         </div>
     </div>

diff --git a/src/app/component/footercomponent/footer.component.html b/src/app/component/footercomponent/footer.component.html
@@ -2,7 +2,7 @@
        <div class="row pt-2">
          <div class="col-2"></div>
          <div class="col-8 text-center">
-            <h2>Contact me at</h2>
+            <h2>{{contactMeAt}}</h2>
          </div>
          <div class="col-2"></div>
        </div>

diff --git a/src/app/component/footercomponent/footer.component.ts b/src/app/component/footercomponent/footer.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { StringHandler } from "src/app/Utility/stringhandler";
 
 @Component({
     selector:'footer-component',
@@ -11,5 +12,5 @@ import { Component } from "@angular/core";
 })
 
 export class FooterComponent{
-
+  contactMeAt = StringHandler.ContactMeAt;
 }
diff --git a/src/app/component/maincompontent/main.component.css b/src/app/component/maincompontent/main.component.css
@@ -46,22 +46,23 @@ h5 {
 }
 
 .jumping-arrow {
-  display: none !important;
+  display: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1366px) {
 
   .jumping-arrow {
-    display: block !important;
+    display: block;
     background-color: transparent;
     position: fixed;
     color: #b29600;
     border: none;
     border-radius: 5px;
-    bottom: 5%;
+    bottom: 10px;
     cursor: pointer;
+    z-index: 1;
     transition: background-color 0.3s;
-    animation: jump 1s ease-out infinite;
+    animation: jump 1.2s ease-out infinite;
   }
 
   @keyframes jump {

diff --git a/src/app/component/scrollbuttoncomponent/maincompontent/scrollbutton.component.css b/src/app/component/scrollbuttoncomponent/maincompontent/scrollbutton.component.css
@@ -27,7 +27,7 @@
   background-color: #242323;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1366px) {
   .scroll-button-container{
     display: none;
   }