diff --git a/Recursos/Portafolio/css/style.css b/Recursos/Portafolio/css/style.css
new file mode 100644
index 0000000..a10a673
--- /dev/null
+++ b/Recursos/Portafolio/css/style.css
@@ -0,0 +1,121 @@
+@charset "UTF-8";
+* {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-decoration: none;
+ border: none;
+ outline: none;
+}
+
+a,
+a:visited {
+ color: rgb(128, 128, 128);
+ width: 100%;
+ height: 100%;
+}
+body {
+ font-family: "Pacifico", cursive;
+ font-family: "Roboto", sans-serif;
+ background-image: url("../img/pattern-dark.png");
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 100vh;
+ margin: 0;
+}
+
+nav {
+ margin: auto;
+ display: flex;
+ max-width: 1024px;
+ padding: 1em;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid rgb(0, 0, 0, 0.2);
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ background-image: url("../img/pattern-dark.png");
+}
+
+nav ul {
+ font-size: 1.2em;
+ font-weight: 800;
+ color: white;
+ display: inline-flex;
+ gap: 1em;
+}
+nav ul li {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ gap: 2em;
+}
+
+.main_container {
+ margin: auto;
+ display: flex;
+ max-width: 1024px;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 2em;
+ gap: 4em;
+}
+
+.card {
+ width: 200px;
+ height: 300px;
+ perspective: 1000px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-inner {
+ width: 100%;
+ height: 100%;
+ border-radius: 10px;
+ transform-style: preserve-3d;
+ transition: transform 0.5s, width 0.5s, height 0.5s;
+}
+
+.card:hover .card-inner {
+ transform: rotateY(180deg) translateX(10px) translateY(-15px);
+ width: 220px;
+ height: 330px;
+ box-shadow: 0 4px 8px rgba(2, 2, 2, 0.5);
+}
+
+.face {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ backface-visibility: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 20px;
+ font-weight: bold;
+ color: #fff;
+ text-align: center;
+}
+
+.front {
+ border-radius: 10px;
+ background-image: url("../img/pattern-card.png");
+ background-repeat: repeat;
+}
+
+.back {
+ border-radius: 10px;
+ transform: rotateY(180deg);
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.back a img {
+ max-height: 100%;
+ border-radius: 10px;
+}
diff --git a/Recursos/Portafolio/img/constructora.png b/Recursos/Portafolio/img/constructora.png
new file mode 100644
index 0000000..5bed60d
Binary files /dev/null and b/Recursos/Portafolio/img/constructora.png differ
diff --git a/Recursos/Portafolio/img/logo.svg b/Recursos/Portafolio/img/logo.svg
new file mode 100644
index 0000000..5e06d03
--- /dev/null
+++ b/Recursos/Portafolio/img/logo.svg
@@ -0,0 +1,155 @@
+
+
+
+
diff --git a/Recursos/Portafolio/img/pattern-card.png b/Recursos/Portafolio/img/pattern-card.png
new file mode 100644
index 0000000..3e8ce93
Binary files /dev/null and b/Recursos/Portafolio/img/pattern-card.png differ
diff --git a/Recursos/Portafolio/img/pattern-dark.png b/Recursos/Portafolio/img/pattern-dark.png
new file mode 100644
index 0000000..61ff807
Binary files /dev/null and b/Recursos/Portafolio/img/pattern-dark.png differ
diff --git a/Recursos/Portafolio/img/webdiseno.png b/Recursos/Portafolio/img/webdiseno.png
new file mode 100644
index 0000000..58ef187
Binary files /dev/null and b/Recursos/Portafolio/img/webdiseno.png differ
diff --git a/Recursos/Portafolio/index.html b/Recursos/Portafolio/index.html
new file mode 100644
index 0000000..22efc6c
--- /dev/null
+++ b/Recursos/Portafolio/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Tarjetas Volteables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Constructora
+
+
+
+
+
+
+
+
+
+
+ Web Diseño
+
+
+
+
+
+
+