Portfolio | Rojo y Azul Studio by Carlos Palmón
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "Portfolio de Rojo y Azul Studio",
"description": "Casos de éxito en Estrategia Digital y SEO.",
"author": {
"@type": "Person",
"name": "Carlos Palmón"
}
}
:root {
/* Colors */
--navy: #0A1F3D;
--coral: #FF6B6B;
--white: #FFFFFF;
--white-80: rgba(255, 255, 255, 0.8);
--white-60: rgba(255, 255, 255, 0.6);
--white-40: rgba(255, 255, 255, 0.4);
--white-20: rgba(255, 255, 255, 0.2);
--navy-light: #1A2F4D;
/* Typography */
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Work Sans', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background-color: var(--navy);
color: var(--white);
overflow-x: hidden;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--navy);
}
::-webkit-scrollbar-thumb {
background: var(--coral);
border-radius: 4px;
}
/* Animated Banner */
.banner {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--navy) 0%, #0D2847 100%);
}
.banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.05) 0%, transparent 50%);
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -30px) scale(1.1); }
}
.banner-text {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 700;
text-align: center;
position: relative;
z-index: 1;
line-height: 1.1;
}
.banner-text .highlight {
color: var(--coral);
display: block;
font-style: italic;
animation: slideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}
.banner-text .studio {
font-size: 0.4em;
display: block;
margin-top: 1rem;
letter-spacing: 0.3em;
font-weight: 400;
color: var(--white-80);
animation: slideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--white-60);
font-size: 0.875rem;
letter-spacing: 0.2em;
animation: bounce 2s infinite;
cursor: pointer;
white-space: nowrap;
}
@keyframes bounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(10px);
}
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Introduction Section */
.intro-section {
padding: 8rem 0 6rem;
position: relative;
}
.intro-content {
max-width: 800px;
}
.intro-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--white);
}
/* EDITABLE CONTENT - Modify this text as needed */
.intro-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--white-80);
font-weight: 300;
}
/* END EDITABLE CONTENT */
.intro-line {
width: 60px;
height: 2px;
background: var(--coral);
margin: 3rem 0 0;
}
/* Category Buttons */
.categories {
padding: 4rem 0 8rem;
text-align: center;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.category-btn {
background: transparent;
border: 1px solid var(--white-40);
color: var(--white);
padding: 2rem 2.5rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--coral);
transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: -1;
}
.category-btn:hover {
border-color: var(--coral);
transform: translateY(-4px);
}
.category-btn:hover::before {
left: 0;
}
.category-btn.active {
border-color: var(--coral);
background: var(--coral);
}
/* Portfolio Grid */
.portfolio-section {
padding: 4rem 0;
}
.portfolio-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 8rem;
align-items: center;
opacity: 0;
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.portfolio-item:nth-child(even) {
direction: rtl;
}
.portfolio-item:nth-child(even) > * {
direction: ltr;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio-item:nth-child(3) { animation-delay: 0.3s; }
.portfolio-text {
padding: 2rem 0;
}
.portfolio-category {
font-size: 0.875rem;
letter-spacing: 0.15em;
color: var(--coral);
margin-bottom: 1rem;
text-transform: uppercase;
font-weight: 500;
}
.portfolio-title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--white);
}
.portfolio-description {
font-size: 1rem;
line-height: 1.8;
color: var(--white-80);
margin-bottom: 2rem;
font-weight: 300;
}
.portfolio-stats {
display: flex;
gap: 3rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.stat {
display: flex;
flex-direction: column;
}
.stat-number {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--coral);
line-height: 1;
}
.stat-label {
font-size: 0.875rem;
color: var(--white-60);
margin-top: 0.5rem;
}
.portfolio-cta {
display: inline-block;
background: var(--coral);
color: var(--white);
padding: 1rem 2.5rem;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.05em;
transition: all 0.3s ease;
border: 1px solid var(--coral);
cursor: pointer;
}
.portfolio-cta:hover {
background: transparent;
transform: translateX(4px);
}
.portfolio-media {
position: relative;
overflow: hidden;
background: var(--navy-light);
aspect-ratio: 16/10;
border: 1px solid var(--white-20);
}
.portfolio-media img,
.portfolio-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-media:hover img,
.portfolio-media:hover video {
transform: scale(1.05);
}
/* PLACEHOLDER - Replace with your actual media */
.portfolio-media.placeholder::after {
content: 'Media placeholder - Insert image or video here';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white-40);
font-size: 0.875rem;
text-align: center;
width: 80%;
}
/* END PLACEHOLDER */
/* About Section */
.about-section {
padding: 8rem 0;
background: linear-gradient(to bottom, var(--navy) 0%, var(--navy-light) 100%);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 5rem;
align-items: center;
}
.about-image {
aspect-ratio: 3/4;
background: var(--navy);
border: 1px solid var(--white-20);
position: relative;
overflow: hidden;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* PLACEHOLDER - Replace with your photo */
.about-image.placeholder::after {
content: 'Your photo here';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white-40);
font-size: 1rem;
}
/* END PLACEHOLDER */
.about-text h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
margin-bottom: 2rem;
color: var(--white);
}
.about-achievements {
margin-bottom: 3rem;
}
.achievement {
margin-bottom: 2rem;
padding-left: 2rem;
position: relative;
}
.achievement::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 3px;
height: calc(100% - 0.5rem);
background: var(--coral);
}
.achievement h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--white);
font-weight: 600;
}
.achievement p {
color: var(--white-80);
line-height: 1.6;
font-weight: 300;
}
/* Sticky Contact Button */
.sticky-contact {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.sticky-contact.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.contact-btn {
background: var(--coral);
color: var(--white);
border: none;
padding: 1.25rem 2.5rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
transition: all 0.3s ease;
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(255, 107, 107, 0.4);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 31, 61, 0.95);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--navy-light);
padding: 3rem;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--white-20);
position: relative;
animation: modalSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlide {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--white-80);
font-size: 2rem;
cursor: pointer;
line-height: 1;
transition: color 0.3s ease;
z-index: 10;
}
.modal-close:hover {
color: var(--coral);
}
.modal h3 {
font-family: var(--font-display);
font-size: 2rem;
margin-bottom: 1rem;
color: var(--white);
}
.modal p {
color: var(--white-80);
margin-bottom: 2rem;
}
/* HubSpot Form Styling */
.hubspot-form {
min-height: 200px;
background: var(--white);
padding: 2rem;
border-radius: 4px;
margin-top: 1rem;
}
/* Style HubSpot form elements to match design */
.hubspot-form .hs-form {
color: var(--navy);
}
.hubspot-form .hs-form label {
color: var(--navy);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.hubspot-form .hs-form input[type="text"],
.hubspot-form .hs-form input[type="email"],
.hubspot-form .hs-form input[type="tel"],
.hubspot-form .hs-form textarea,
.hubspot-form .hs-form select {
background: #F5F5F5;
border: 1px solid #D0D0D0;
color: var(--navy);
padding: 0.875rem;
font-family: var(--font-body);
width: 100%;
margin-bottom: 1rem;
border-radius: 2px;
font-size: 0.9375rem;
}
.hubspot-form .hs-form input:focus,
.hubspot-form .hs-form textarea:focus,
.hubspot-form .hs-form select:focus {
outline: none;
border-color: var(--coral);
}
.hubspot-form .hs-form input::placeholder,
.hubspot-form .hs-form textarea::placeholder {
color: #999;
}
.hubspot-form .hs-form input[type="submit"] {
background: var(--coral);
color: var(--white);
border: 1px solid var(--coral);
padding: 1rem 2.5rem;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 2px;
}
.hubspot-form .hs-form input[type="submit"]:hover {
background: #FF5555;
border-color: #FF5555;
}
.hubspot-form .hs-error-msgs {
color: #D32F2F;
font-size: 0.75rem;
margin-top: 0.25rem;
}
.hubspot-form .hs-form-field {
margin-bottom: 1.25rem;
}
/* reCAPTCHA styling */
.hubspot-form .hs-form .grecaptcha-badge {
margin-top: 1rem;
}
/* Checkbox and legal text styling */
.hubspot-form .hs-form .hs-form-booleancheckbox label {
color: #666;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
}
.hubspot-form .hs-form .legal-consent-container p {
color: #666;
font-size: 0.8125rem;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 968px) {
.banner-text {
font-size: clamp(2.5rem, 10vw, 5rem);
padding: 0 1rem;
}
.intro-section {
padding: 6rem 0 4rem;
}
.intro-title {
font-size: clamp(1.75rem, 7vw, 2.5rem);
line-height: 1.3;
max-width: 100%;
}
.intro-description {
font-size: 1rem;
}
.portfolio-item,
.about-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.portfolio-item:nth-child(even) {
direction: ltr;
}
.category-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.category-btn {
padding: 1.5rem 2rem;
}
.sticky-contact {
bottom: 1rem;
right: 1rem;
}
.contact-btn {
padding: 1rem 2rem;
font-size: 0.875rem;
}
.modal-content {
padding: 2rem;
width: 95%;
}
.portfolio-stats {
gap: 2rem;
}
.hubspot-form {
padding: 1.5rem;
}
.about-section {
padding: 6rem 0;
}
}
@media (max-width: 480px) {
.intro-title {
font-size: 1.5rem;
line-height: 1.4;
}
.scroll-indicator {
font-size: 0.75rem;
letter-spacing: 0.15em;
}
}
/* Filter Animations */
.portfolio-item.hidden {
display: none;
}
Rojo y Azul Studio
by Carlos Palmón
MARKETING PORTFOLIO
SCROLL
Marketing Specialist
Soy Carlos, Marketing Specialist con sede en Barcelona. Este es el lugar donde encontrarás todos mis trabajos.
Todos los Proyectos
Data & SEO
Copywriting
AI
Data & SEO
Estrategia SEO Integral
Desarrollo completo de estrategia SEO para e-commerce del sector moda. Implementación de arquitectura web optimizada, investigación de palabras clave y optimización técnica.
+247%
Tráfico orgánico
+180%
Conversiones
Quiero este recurso
Copywriting
Campaña Email Marketing
Serie de 12 emails automatizados para funnel de conversión. Copy persuasivo con enfoque en storytelling y generación de urgencia, adaptado a diferentes segmentos de audiencia.
42%
Open rate
18%
Click rate
Quiero este recurso
AI
Automatización con IA
Sistema de generación automática de contenido para redes sociales utilizando IA. Incluye calendario editorial inteligente, análisis de tendencias y optimización de publicaciones.
-70%
Tiempo producción
+95%
Engagement
Quiero este recurso
<!-- Replace placeholder class and add:
-->
Convirtiendo Datos en Resultados
+500% ROI en Campañas Digitales
Especializado en estrategias data-driven que combinan análisis profundo con creatividad persuasiva para maximizar conversiones.
Certificaciones Google & HubSpot
Formación continua en las últimas tendencias de marketing digital, SEO, automatización y análisis de datos.
+50 Proyectos Exitosos
Desde startups hasta empresas consolidadas, ayudando a negocios a escalar su presencia digital y aumentar sus ventas.
Consigue tus Objetivos
Contactar
// Sticky button visibility on scroll
const stickyButton = document.querySelector('.sticky-contact');
const banner = document.querySelector('.banner');
window.addEventListener('scroll', () => {
const bannerHeight = banner.offsetHeight;
if (window.scrollY > bannerHeight - 100) {
stickyButton.classList.add('visible');
} else {
stickyButton.classList.remove('visible');
}
});
// Modal functionality
const modal = document.getElementById('contactModal');
const openModalButtons = document.querySelectorAll('.open-modal');
const closeModal = document.querySelector('.modal-close');
openModalButtons.forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
modal.classList.add('active');
document.body.style.overflow = 'hidden';
});
});
closeModal.addEventListener('click', () => {
modal.classList.remove('active');
document.body.style.overflow = 'auto';
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.remove('active');
document.body.style.overflow = 'auto';
}
});
// Category filter functionality
const categoryButtons = document.querySelectorAll('.category-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item');
categoryButtons.forEach(button => {
button.addEventListener('click', () => {
const category = button.dataset.category;
// Update active button
categoryButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
// Filter portfolio items
portfolioItems.forEach(item => {
if (category === 'all' || item.dataset.category === category) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
});
});
// Smooth scroll for scroll indicator
document.querySelector('.scroll-indicator').addEventListener('click', () => {
document.querySelector('.intro-section').scrollIntoView({
behavior: 'smooth'
});
});
or -->
-->