Adding new colors to About Me section

SofiDevO · Nov 7, 2023 · 65306e6 · 65306e6
1 parent 00707d9
commit 65306e6
Show file tree

Hide file tree

Showing 7 changed files with 424 additions and 58 deletions.
diff --git a/assets/Styles/about.css b/assets/Styles/about.css
@@ -18,35 +18,35 @@
 
 
 .card__about {
-    overflow: hidden;
+	overflow: hidden;
     width: 31rem;
     height: 54rem;
     padding: 0 0 239px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background: rgba(255, 56, 152, 0.284);
+    background: rgb(20 0 51);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-radius: 17px;
     border: 1px solid rgba(255, 255, 255, 0.18);
 }
 
-.card-title {
+.card-title p{
 	text-align: center;
-    color: var(--main-color);
     font-size: 2.5rem;
     font-weight: 700;
     margin-top: -6rem;
+	color: var(--green-terminal);
   }
 
 
   .card-title span {
     font-size: 2rem;
     font-weight: 500;
-    color: var(--purple);
+    color: var(--pink-terminal);
   }
 .card-photo {
     transform: scale(0.3) translate(226px, 747px);
@@ -75,10 +75,11 @@
 	border: none;
 	cursor: pointer;
 }
-.icon__size{
+.about__icons{
     width: 3rem;
+	filter: invert(100%);
 }
-.icon__size:hover{
+.about__icons:hover{
 	transform: scale(1.2);
 }
 
@@ -154,6 +155,7 @@
 }
 .contactar__boton__icono {
 	width: 25px;
+	filter: invert(100%) saturate(5);
 }
 
 @media (min-width: 768px) {

diff --git a/assets/Styles/dark-mode/darkmode.css b/assets/Styles/dark-mode/darkmode.css
@@ -168,13 +168,26 @@
 	transition: 3s ease-in-out;
 }
 .dark-mode .card__about{
-	background-color: var(--blue);
+	background-color: var(--terminal-bg-dark);
 }
+
+.dark-mode .card-title p{
+	color: var(--blue);
+	filter: var(--glow-blue);
+  }
+
+
+  .card-title span {
+    color: var(--pink-terminal);
+  }
 .dark-mode .terminal__content span {
 	color: var(--blue);
 	filter: var(--glow-blue);
 	transition: 3s ease-in-out;
 }
+.dark-mode .icon__size{
+	filter: var(--icons-glow-dark);
+}
 
 .dark-mode .terminal__content p {
 	color: white;
@@ -186,7 +199,7 @@
 	filter: invert(100%) saturate(0%) drop-shadow(-1px 2px 4px #76ffc3);
 }
 .dark-mode .boton {
-	background: rgba(0, 0, 0, 0.8);
+	background:var(--pure-black);
 	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 	backdrop-filter: blur(19px);
 	-webkit-backdrop-filter: blur(19px);
@@ -235,7 +248,7 @@
 }
 
 /* Seccion Hobbies */
-.dark-mode .frase{
+.dark-mode .hobbies{
 	background: linear-gradient(var(--gradient));
 }
 

diff --git a/assets/Styles/elements/cajaTerminal.css b/assets/Styles/elements/cajaTerminal.css
@@ -111,7 +111,7 @@
 }
 .terminal__content span{
     color: var(--green-terminal);
-    font-weight: bold;
+    font-weight: 500;
 	font-family: 'Source Code Pro', monospace;
 }
 .terminal__content a{

diff --git a/assets/Styles/elements/toogleDark.css b/assets/Styles/elements/toogleDark.css
@@ -45,7 +45,7 @@
   box-shadow: -15px 35px 68px 0px rgba(145, 192, 255, 0.5), inset 12px -12px 16px 0px rgba(214, 232, 255, 0.214), inset 0px 11px 28px 0px rgb(255, 255, 255);
   padding: 7px;
   display: flex;
-  bottom: 36vh;
+  bottom: 92vh;
   right: 1.7rem;
   position: fixed;