Add Catalogo experiencias

css/preloader.css

@@ -1,73 +1,42 @@
-#preloader {
-  position: fixed;
-  z-index: 999999;
-  background: black;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-
+.loader-bg {
+    position: fixed;
+    z-index: 99999;
+    background-color: #171717;
+    width: 100%;
+    height: 100%;
 }
-#loader {
-  display: block;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #9370DB;
-  -webkit-animation: spin1 2s linear infinite;
-  animation: spin1 2s linear infinite;
+
+#container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
 }
-#loader:before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #BA55D3;
-  -webkit-animation: spin1 3s linear infinite;
-  animation: spin1 3s linear infinite;
+
+#container {
+    width: 200px;
+    height: 200px;
 }
-#loader:after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #FF00FF;
-  -webkit-animation: spin1 1.5s linear infinite;
-  animation: spin1 1.5s linear infinite;
+
+@keyframes animation {
+    0% {
+        stroke-dasharray: 1,98;
+        stroke-dashoffset: -105;
+    }
+    50% {
+        stroke-dasharray: 80,10;
+        stroke-dashoffset: -160;
+    }
+    100% {
+        stroke-dasharray: 1,98;
+        stroke-dashoffset: -300;
+    }
 }
-@-webkit-keyframes spin1 {
-  0%   {
-      -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-      transform: rotate(0deg);
-  }
-  100% {
-      -webkit-transform: rotate(360deg);
-      -ms-transform: rotate(360deg);
-      transform: rotate(360deg);
-  }
-}
-@keyframes spin1 {
-  0%   {
-      -webkit-transform: rotate(0deg);
-      -ms-transform: rotate(0deg);
-      transform: rotate(0deg);
-  }
-  100% {
-      -webkit-transform: rotate(360deg);
-      -ms-transform: rotate(360deg);
-      transform: rotate(360deg);
-  }
+
+#spinner {
+    transform-origin: center;
+    animation-name: animation;
+    animation-duration: 1.2s;
+    animation-timing-function: cubic-bezier(1.0, 0.4, 0.4, 1.0);
+    animation-iteration-count: infinite;
 }

css/responsive.css

@@ -49,10 +49,61 @@
     h3{font-size: 1.5em;}
     h4{font-size: 1.1em;}
 
-
+    #about {
+        text-align: center;
+        /* Otros estilos específicos para dispositivos móviles */
+    }
     .myphoto{text-align: center;}
 
-
+    #all {
+        width: 100%;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: visible;
+        position: relative;
+    }
+
+    #allcontent {
+        width: 90%; /* Reduzco el ancho para dispositivos móviles */
+        max-width: 100%;
+        margin: 20px auto 0 auto;
+    }
+
+    .portfolio {
+        width: 100%; /* Establezco un ancho del 100% para que ocupe todo el ancho de la pantalla */
+        max-width: 100%;
+        position: relative;
+        right: auto;
+        top: auto;
+        cursor: pointer;
+        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+    }
+
+    .opened {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .ombra {
+        display: none;
+    }
+
+    .txt {
+        margin-top: 10px;
+        padding-top: 10px;
+        width: 100%;
+        padding-left: 0;
+    }
+
+    #navi {
+        bottom: -20px;
+        left: 0;
+        margin: 0;
+    }
+
+    .footer {
+        bottom: -20px;
+    }
     /*Hero area*/
     #hero{height: 400px; }    
     .herocontent{padding-top: 30px;}

css/style.css

@@ -373,37 +373,181 @@ ABOUT SECTION
 ANIMATION SECTION
 ================================*/
 
+#all {
+  width: 100%;
+  height: auto; /* Cambia la altura a automática para que se ajuste al contenido */
+  overflow-x: hidden;
+  overflow-y: visible;
+  position: relative;
+}
+
+a:link, a:visited {
+	color: #333;
+	border-bottom:1px solid #333;
+	-webkit-transition: .3s;
+	-moz-transition: .3s;
+	transition: .3s;
+	text-decoration:none;
+}
 
-.animation-wrapper {
-    width: 50%;
-    padding-bottom: 50%;
-
-  }
-
-  .sphere-animation {
-    position: absolute;
-    top: -20%   ;
-    left: 20%;
-    width: 1080px;
-    height: 1080px;
-    margin: -290px 0 0 -290px;
-  }
-
-  .sphere path {
-    fill: url(#sphereGradient);
-    stroke-width: 1px;
-    stroke: rgba(28, 8, 85, 0.35);
-    backface-visibility: hidden;
-  }
-
-  @media (min-width: 640px) {
-    .sphere path {
-      stroke-width: .4px;
-    }
+a:hover {
+	color: #000;
+	border-bottom:1px solid #000;
+	text-decoration:none;
+}
 
-  }
+img{
+    width:100%;
+}
+
+#allcontent{
+	margin:60px auto 0 auto;
+    width:40%;
+    max-width:1140px;
+    height:700px;
+    position:relative;
+	-webkit-animation: comein 1.5s ease-in-out;
+	-moz-animation: comein 1.5s ease-in-out;
+	animation: comein 1.5s ease-in-out;
+}
+
+.portfolio{
+    width:80%;
+    max-width:800px;
+    position:absolute;
+    right:0;
+    top:0;
+    -webkit-transition: .2s;
+    -moz-transition: .2s;
+    transition: .2s;
+    cursor:pointer;
+	-webkit-box-shadow:-2px 0 3px rgba(0,0,0,0.3);
+	-moz-box-shadow:-2px 0 3px rgba(0,0,0,0.3);
+	box-shadow:-2px 0 3px rgba(0,0,0,0.3);
+}
 
 
+.portfolio:nth-child(1) {
+	left: 10px;
+}
+.portfolio:nth-child(1):hover {  
+	-webkit-transform: rotate(-2deg);
+    -moz-transform: rotate(-2deg);
+    transform: rotate(-2deg);
+	left: 0;
+}
+
+.portfolio:nth-child(2) {
+	left: 20%;
+}
+.portfolio:nth-child(2):hover {
+	-webkit-transform: rotate(-2deg);
+    -moz-transform: rotate(-2deg);
+    transform: rotate(-2deg);
+}
+
+.opened {  
+	z-index: 1000;
+	left:0 !important;
+	-webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-box-shadow:0 0 3px rgba(0,0,0,0.3);
+	-moz-box-shadow:0 0 3px rgba(0,0,0,0.3);
+	box-shadow:0 0 3px rgba(0,0,0,0.3);
+	width:100%;
+    max-width:1140px;
+}
+
+.opened img{
+		z-index:5;
+}
+
+.ombra{
+	position:absolute;
+    bottom:20px;
+    left:10px;
+    width:90%;
+	height:20px;
+	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	-webkit-transform:rotate(-2deg);
+	-moz-transform:rotate(-2deg);
+	transform:rotate(-2deg);
+	display:none;
+	z-index:-1;
+}
+
+.ombra:after{
+	display:block;
+	content:"";
+	position:absolute;
+    bottom:-8px;
+    right:-93px;
+    width:90%;
+	height:20px;
+	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+	-webkit-transform:rotate(4deg);
+	-moz-transform:rotate(4deg);
+	transform:rotate(4deg);
+}
+
+.txt{
+    display:block;
+	margin:-2px 0 0 0;
+	padding-top:20px;
+	width:98%;
+	padding-left:2%;
+	height:33px;
+	background: #000000;
+}
+
+
+#navi{
+	position:absolute;
+	bottom:-40px;
+	left:50%;
+	margin:0 0 0 -62px;
+	background:#000;
+	opacity:0.8;
+	color:#fff;
+	height:24px;
+	-webkit-border-radius:20px;
+    -moz-border-radius:20px;
+    border-radius:20px;
+    padding:7px 10px 0 10px;
+}
+.footer{
+	font-size:0.6em;
+	color:#333;
+	text-align:center;
+	width:100%;
+	height:30px;
+	position:absolute;
+	bottom:-100px;
+	left:0;
+}
+
+
+/*enter*/
+@-webkit-keyframes comein {
+	0% { opacity: 0; -webkit-transform: translateY(-3000px); }
+	80% { opacity: 1; -webkit-transform: translateY(40px); }
+	100% { -webkit-transform: translateY(0); }
+}
+@-moz-keyframes comein {
+	0% { opacity: 0; -moz-transform: translateY(-3000px); }
+	80% { opacity: 1; -moz-transform: translateY(40px); }
+	100% { -moz-transform: translateY(0); }
+}
+@keyframes comein {
+	0% { opacity: 0; transform: translateY(-3000px); }
+	80% { opacity: 1; transform: translateY(40px); }
+	100% { transform: translateY(0); }
+}
 
 /*================================
 PORTFOLIO SECTION