🥚 New secret Theme

SofiDevO · Nov 12, 2023 · 410b467 · 410b467
1 parent e1e5810
commit 410b467
Show file tree

Hide file tree

Showing 31 changed files with 412 additions and 188 deletions.
diff --git a/assets/Styles/Dividers/divider-tools.css b/assets/Styles/Dividers/divider-tools.css
@@ -0,0 +1,27 @@
+.wraper__tools{
+    position: relative;
+    height: 35vh;
+}
+.dark-mode .wraper__tools {
+    background: black;
+}
+.custom-shape-divider-top-1699780157 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+    line-height: 0;
+    transform: rotate(180deg);
+}
+
+.custom-shape-divider-top-1699780157 svg {
+    position: relative;
+    display: block;
+    width: calc(131% + 1.3px);
+    height: 170px;
+}
+
+.custom-shape-divider-top-1699780157 .shape-fill {
+    fill: #000000;
+}
diff --git a/assets/Styles/Dividers/divider.css b/assets/Styles/Dividers/divider.css
@@ -1,6 +1,5 @@
 .wrapper {
 	box-sizing: border-box;
-	scroll-behavior: smooth;
 	position: relative;
 }
 
@@ -23,6 +22,9 @@
 .custom-shape-divider-bottom-1685513857 .shape-fill {
 	fill: rgb(228, 228, 228);
 }
+.dark-mode .custom-shape-divider-bottom-1685513857 .shape-fill {
+	fill: var(--pure-black);
+}
 
 @media (min-width: 768px) {
 	.custom-shape-divider-bottom-1685513857 {

diff --git a/assets/Styles/Dividers/dividerSkillsTools.css b/assets/Styles/Dividers/dividerSkillsTools.css
@@ -1,63 +1,33 @@
+.wraper__skills {
+	position: relative;
+}
 .custom-shape-divider-top-1697134839 {
     position: absolute;
-    top: -38px;
+    top: 0;
     left: 0;
     width: 100%;
     overflow: hidden;
     line-height: 0;
+    background-color: black;
 }
-
 .custom-shape-divider-top-1697134839 svg {
     position: relative;
     display: block;
-    width: calc(101% + 60.3px);
-    height: 119px;
+    width: calc(100% + 581.3px);
+    height: 190px;
 }
 
 .custom-shape-divider-top-1697134839 .shape-fill {
-    fill: transparent;
+	fill: var(--seccond-color);
 }
 .dark-mode .custom-shape-divider-top-1697134839 .shape-fill {
-    fill: #2e016c ;
+	fill: #2e016c;
 }
 
 .dark-mode .custom-shape-divider-top-1697134839 {
-	background-color: black
+	background-color: black;
 }
 
-@media (min-width:678px) {
-    .custom-shape-divider-top-1697134839 {
-        position: absolute;
-        top: -164px;
-        left: 0;
-        width: 100%;
-        overflow: hidden;
-        line-height: 0;
-    }
-
-    .custom-shape-divider-top-1697134839 svg {
-        position: relative;
-    display: block;
-    width: calc(107% + 141.3px);
-    height: 241px;
-}
 
-}
 
-@media  (min-width:1200px) {
-    .custom-shape-divider-top-1697134839 {
-        position: absolute;
-        top: -164px;
-        left: 0;
-        width: 100%;
-        overflow: hidden;
-        line-height: 0;
-    }
-
-    .custom-shape-divider-top-1697134839 svg {
-        position: relative;
-        display: block;
-        width: calc(107% + 704.3px);
-        height: 287px;
-    }
-}
+
diff --git a/assets/Styles/Dividers/divierBlack.css b/assets/Styles/Dividers/divierBlack.css
@@ -3,7 +3,9 @@
     display: block;
     position: relative;
     height: 28vh;
-
+}
+.dark-mode .wrapper__black {
+    background-color: #2e006e;
 }
 .custom-shape-divider-bottom-1693539436 {
     position: absolute;

diff --git a/assets/Styles/dark-mode/darkmode.css b/assets/Styles/dark-mode/darkmode.css
@@ -125,15 +125,6 @@
 	justify-content: flex-start;
 	background: linear-gradient(var(--gradient));
 }
-/* DIVIDERS */
-.dark-mode .custom-shape-divider-bottom-1685513857 .shape-fill {
-	fill: var(--pure-black);
-}
-
- .dark-mode .wrapper__black {
-    background-color: #2e006e;
-}
-
 /* Carrusel */
 
 .dark-mode .tools__caja__slider {

diff --git a/assets/Styles/dark-mode/short-circuit.css b/assets/Styles/dark-mode/short-circuit.css
@@ -0,0 +1,221 @@
+.short-circuit  body{
+    background: rgb(13, 13, 13);
+    color: white;
+}
+@keyframes flicker-in-infinite {
+    0% {
+        opacity: 0;
+    }
+    10% {
+        opacity: 0;
+    }
+    10.1% {
+        opacity: 1;
+    }
+    10.2% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0;
+    }
+    20.1% {
+        opacity: 1;
+        color: var(--glow-blue);
+    filter: drop-shadow(0 0 12px var(--blue));
+    }
+    20.6% {
+        opacity: 0;
+    }
+    30% {
+        opacity: 0;
+    }
+    30.5% {
+        opacity: 1;
+        color: var(--glow-blue);
+    filter: drop-shadow(0 0 12px var(--blue));
+    }
+    30.5% {
+        opacity: 1;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    30.6% {
+        opacity: 0;
+    }
+    45% {
+        opacity: 0;
+    }
+    45.5% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 1;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    55% {
+        opacity: 1;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    55.1% {
+        opacity: 0;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    57% {
+        opacity: 0;
+    }
+    57.1% {
+        opacity: 1;
+    }
+    60% {
+        opacity: 1;
+    }
+    60.1% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 0;
+    }
+    65.5% {
+        opacity: 1;
+        color: var(--glow-blue);
+    filter: drop-shadow(0 0 12px var(--blue));
+    }
+    75% {
+        opacity: 1;
+    }
+    75.1% {
+        opacity: 0;
+    }
+    77% {
+        opacity: 0;
+    }
+    77.1% {
+        opacity: 1;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    85% {
+        opacity: 1;
+    }
+    85.1% {
+        opacity: 0;
+        color: var(--glow-blue);
+        filter: drop-shadow(0 0 12px var(--blue));
+    }
+    86% {
+        opacity: 0;
+    }
+    86.1% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+.short-circuit .titulo{
+    animation: flicker-in-infinite 2s linear 0.5s both infinite;
+    transform: rotate(339deg);
+    overflow: hidden;
+
+}
+
+
+
+
+/* hero section */
+.short-circuit  .hero{
+    background: rgb(13, 13, 13);
+}
+.short-circuit .hero__titulo span{
+    transform: rotate(-90deg);
+    animation: flicker-in-infinite 2s linear 0.5s both infinite;
+	color: var(--seccond-color);
+}
+.short-circuit .img__damage{
+    display: block;
+    transform: rotate(359deg);
+}
+.short-circuit .img__ligth{
+    display: none;
+}
+.short-circuit .platzi, .short-circuit .alura, .short-circuit .linkedin, .short-circuit .github, .short-circuit .youtube {
+    filter: invert(95%) sepia(9%) saturate(6%) hue-rotate(348deg) brightness(87%) contrast(81%);
+}
+
+
+
+
+/* Dividers */
+.short-circuit .custom-shape-divider-bottom-1685513857 .shape-fill {
+    fill: none;
+}
+/* Divider 2 */
+.short-circuit .custom-shape-divider-top-1697134839 svg{
+    background-color:transparent
+}
+.short-circuit .custom-shape-divider-top-1697134839 .shape-fill{
+    fill: none;
+}
+
+/* Section Skills */
+.short-circuit .img{
+    filter: saturate(0);
+}
+
+.short-circuit .slider{
+    animation: flicker-in-infinite 22s linear 3.9s both infinite
+}
+
+
+
+/* caja terminal */
+.short-circuit .caja__cristal{
+    background-color: rgb(37, 24, 8);
+}
+
+.short-circuit .terminal__content {
+    color: rgb(210, 30, 60);
+    line-height: 3rem;
+
+}
+
+.short-circuit .terminal__content span{
+    color: gray;
+}
+
+/* Section about */
+
+.short-circuit .about__img--src{
+    filter: saturate(0);
+    transform: rotate(11deg);
+}
+
+
+.short-circuit .portafolio__tarjeta .faceA{
+    background-color: rgb(26, 26, 26);
+}
+.short-circuit .portafolio__img{
+    filter: saturate(0);
+}
+
+.short-circuit .portafolio__tarjeta:hover .faceB{
+    background-color: rgb(26, 26, 26);
+}
+
+/* Youtube section */
+.short-circuit .ytchannel{
+    overflow: hidden;
+}
+.short-circuit .ytchannel__titulo{
+    z-index: 20;
+
+}
+
+
+/* Form section */
+.short-circuit .form__img{
+    filter: invert();
+}
diff --git a/assets/Styles/formulario.css b/assets/Styles/formulario.css
@@ -38,14 +38,6 @@
 	color: var(--seccond-color);
 }
 
-.formulario__submit {
-	padding: 7px 10px;
-    font-size: 1.7rem;
-    font-weight: 600;
-    width: 100%;
-    max-width: 18rem;
-}
-
 .form__content {
 	display: flex;
     align-items: stretch;