Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfólio Moderno</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| /* CSS Variables */ | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --dark: #0f172a; | |
| --dark-light: #1e293b; | |
| --light: #f8fafc; | |
| --gray: #94a3b8; | |
| --gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); | |
| --gradient-hover: linear-gradient(135deg, #4f46e5 0%, #db2777 100%); | |
| --shadow: 0 10px 40px rgba(0, 0, 0, 0.1); | |
| --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.15); | |
| --radius: 16px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Reset & Base */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: var(--light); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--light); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-dark); | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| padding: 1rem 5%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition); | |
| } | |
| header.scrolled { | |
| padding: 0.7rem 5%; | |
| box-shadow: var(--shadow); | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| color: var(--dark); | |
| position: relative; | |
| padding: 0.5rem 0; | |
| transition: var(--transition); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| gap: 5px; | |
| cursor: pointer; | |
| padding: 5px; | |
| } | |
| .menu-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--dark); | |
| border-radius: 3px; | |
| transition: var(--transition); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 6rem 5% 4rem; | |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 80%; | |
| height: 150%; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-30px) rotate(5deg); } | |
| } | |
| .hero-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .hero-text h3 { | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| } | |
| .hero-text h1 { | |
| font-size: 3.5rem; | |
| font-weight: 800; | |
| line-height: 1.2; | |
| margin-bottom: 1.5rem; | |
| color: var(--dark); | |
| } | |
| .hero-text h1 span { | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-text p { | |
| font-size: 1.1rem; | |
| color: var(--gray); | |
| margin-bottom: 2rem; | |
| max-width: 500px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--dark); | |
| border: 2px solid var(--dark); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--dark); | |
| color: white; | |
| } | |
| .hero-image { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-image-wrapper { | |
| width: 400px; | |
| height: 400px; | |
| position: relative; | |
| } | |
| .hero-image-wrapper::before { | |
| content: ''; | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| right: 20px; | |
| bottom: 20px; | |
| border: 3px solid var(--primary); | |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| @keyframes morph { | |
| 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } | |
| 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } | |
| 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } | |
| 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } | |
| } | |
| .hero-image-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| background: var(--gradient); | |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 8rem; | |
| color: white; | |
| animation: morph 8s ease-in-out infinite; | |
| box-shadow: var(--shadow); | |
| } | |
| .floating-cards { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .floating-card { | |
| position: absolute; | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| animation: floatCard 4s ease-in-out infinite; | |
| } | |
| .floating-card:nth-child(1) { | |
| top: 10%; | |
| right: -10%; | |
| animation-delay: 0s; | |
| } | |
| .floating-card:nth-child(2) { | |
| bottom: 20%; | |
| left: -10%; | |
| animation-delay: 1s; | |
| } | |
| .floating-card:nth-child(3) { | |
| bottom: 5%; | |
| right: 5%; | |
| animation-delay: 2s; | |
| } | |
| @keyframes floatCard { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-15px); } | |
| } | |
| .floating-card i { | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .floating-card span { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| display: flex; | |
| gap: 3rem; | |
| margin-top: 3rem; | |
| } | |
| .stat { | |
| text-align: left; | |
| } | |
| .stat h3 { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| color: var(--dark); | |
| } | |
| .stat p { | |
| font-size: 0.9rem; | |
| color: var(--gray); | |
| margin: 0; | |
| } | |
| /* About Section */ | |
| .about { | |
| padding: 6rem 5%; | |
| background: white; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .section-header span { | |
| color: var(--primary); | |
| font-weight: 600; | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .section-header h2 { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-top: 0.5rem; | |
| color: var(--dark); | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .about-image { | |
| position: relative; | |
| } | |
| .about-image img { | |
| width: 100%; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20px; | |
| left: -20px; | |
| right: 20px; | |
| bottom: 20px; | |
| border: 3px solid var(--secondary); | |
| border-radius: var(--radius); | |
| z-index: -1; | |
| } | |
| .about-text h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .about-text p { | |
| color: var(--gray); | |
| margin-bottom: 1.5rem; | |
| } | |
| .skills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.8rem; | |
| margin-top: 1.5rem; | |
| } | |
| .skill-tag { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); | |
| color: var(--primary); | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .skill-tag:hover { | |
| transform: scale(1.05); | |
| background: var(--primary); | |
| color: white; | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 6rem 5%; | |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .service-card { | |
| background: white; | |
| padding: 2.5rem; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--gradient); | |
| transform: scaleX(0); | |
| transition: var(--transition); | |
| } | |
| .service-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .service-icon { | |
| width: 70px; | |
| height: 70px; | |
| background: var(--gradient); | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .service-icon i { | |
| font-size: 1.8rem; | |
| color: white; | |
| } | |
| .service-card h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .service-card p { | |
| color: var(--gray); | |
| font-size: 0.95rem; | |
| } | |
| /* Portfolio Section */ | |
| .portfolio { | |
| padding: 6rem 5%; | |
| background: white; | |
| } | |
| .portfolio-filters { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| padding: 0.7rem 1.5rem; | |
| border: none; | |
| background: var(--light); | |
| color: var(--dark); | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .filter-btn.active, .filter-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .portfolio-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .portfolio-item { | |
| position: relative; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| cursor: pointer; | |
| aspect-ratio: 4/3; | |
| } | |
| .portfolio-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .portfolio-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(236, 72, 153, 0.9) 100%); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: var(--transition); | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .portfolio-item:hover img { | |
| transform: scale(1.1); | |
| } | |
| .portfolio-item:hover .portfolio-overlay { | |
| opacity: 1; | |
| } | |
| .portfolio-overlay h3 { | |
| color: white; | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| transform: translateY(20px); | |
| transition: var(--transition); | |
| } | |
| .portfolio-overlay p { | |
| color: rgba(255, 255, 255, 0.9); | |
| transform: translateY(20px); | |
| transition: var(--transition); | |
| transition-delay: 0.1s; | |
| } | |
| .portfolio-item:hover .portfolio-overlay h3, | |
| .portfolio-item:hover .portfolio-overlay p { | |
| transform: translateY(0); | |
| } | |
| .portfolio-link { | |
| margin-top: 1rem; | |
| width: 50px; | |
| height: 50px; | |
| background: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| transform: translateY(20px); | |
| transition: var(--transition); | |
| transition-delay: 0.2s; | |
| } | |
| .portfolio-item:hover .portfolio-link { | |
| transform: translateY(0); | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 6rem 5%; | |
| background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%); | |
| } | |
| .testimonials .section-header span { | |
| color: var(--secondary); | |
| } | |
| .testimonials .section-header h2 { | |
| color: white; | |
| } | |
| .testimonials-slider { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| padding: 3rem; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .testimonial-content { | |
| text-align: center; | |
| } | |
| .testimonial-content i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| opacity: 0.5; | |
| } | |
| .testimonial-content p { | |
| font-size: 1.2rem; | |
| color: rgba(255, 255, 255, 0.9); | |
| font-style: italic; | |
| line-height: 1.8; | |
| margin-bottom: 2rem; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .testimonial-author img { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid var(--primary); | |
| } | |
| .testimonial-author-info h4 { | |
| color: white; | |
| font-size: 1.1rem; | |
| } | |
| .testimonial-author-info span { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 6rem 5%; | |
| background: white; | |
| } | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .contact-info h3 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .contact-info p { | |
| color: var(--gray); | |
| margin-bottom: 2rem; | |
| } | |
| .contact-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .contact-item-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--gradient); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .contact-item-icon i { | |
| color: white; | |
| font-size: 1.2rem; | |
| } | |
| .contact-item-text h4 { | |
| font-size: 1rem; | |
| color: var(--dark); | |
| } | |
| .contact-item-text p { | |
| color: var(--gray); | |
| margin: 0; | |
| font-size: 0.95rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .social-link { | |
| width: 45px; | |
| height: 45px; | |
| background: var(--light); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--dark); | |
| transition: var(--transition); | |
| } | |
| .social-link:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-5px); | |
| } | |
| .contact-form { | |
| background: var(--light); | |
| padding: 2.5rem; | |
| border-radius: var(--radius); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--dark); | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 2px solid transparent; | |
| background: white; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 4rem 5% 2rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 3rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding-bottom: 3rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .footer-brand .logo { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| display: inline-block; | |
| } | |
| .footer-brand p { | |
| color: var(--gray); | |
| margin-bottom: 1.5rem; | |
| } | |
| .footer-links h4 { | |
| font-size: 1.2rem; | |
| margin-bottom: 1.5rem; | |
| color: white; | |
| } | |
| .footer-links ul { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.8rem; | |
| } | |
| .footer-links a { | |
| color: var(--gray); | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| } | |
| .footer-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .footer-bottom p { | |
| color: var(--gray); | |
| } | |
| .footer-bottom-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .footer-bottom-links a { | |
| color: var(--gray); | |
| transition: var(--transition); | |
| } | |
| .footer-bottom-links a:hover { | |
| color: var(--primary); | |
| } | |
| /* Built with Anylabel */ | |
| .built-with { | |
| text-align: center; | |
| padding: 1rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| margin-top: 2rem; | |
| } | |
| .built-with a { | |
| color: var(--primary); | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .built-with a:hover { | |
| color: var(--secondary); | |
| } | |
| /* Scroll to top */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 50px; | |
| height: 50px; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| cursor: pointer; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4); | |
| } | |
| .scroll-top.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .scroll-top:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .hero-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .hero-text p { | |
| margin: 0 auto 2rem; | |
| } | |
| .hero-buttons { | |
| justify-content: center; | |
| } | |
| .stats { | |
| justify-content: center; | |
| } | |
| .hero-image { | |
| order: -1; | |
| } | |
| .hero-image-wrapper { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| left: 0; | |
| right: 0; | |
| background: white; | |
| flex-direction: column; | |
| padding: 2rem; | |
| gap: 1.5rem; | |
| box-shadow: var(--shadow); | |
| transform: translateY(-150%); | |
| transition: var(--transition); | |
| } | |
| .nav-links.active { | |
| transform: translateY(0); | |
| } | |
| .menu-toggle { | |
| display: flex; | |
| } | |
| .menu-toggle.active span:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .menu-toggle.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .menu-toggle.active span:nth-child(3) { | |
| transform: rotate(-45deg) translate(5px, -5px); | |
| } | |
| .hero-text h1 { | |
| font-size: 2.5rem; | |
| } | |
| .stats { | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| align-items: center; | |
| } | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .footer-bottom { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .portfolio-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Animations */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.6s ease-out; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="header"> | |
| <a href="#" class="logo">Portfolio.</a> | |
| <nav class="nav-links" id="navLinks"> | |
| <a href="#home">Home</a> | |
| <a href="#about">Sobre</a> | |
| <a href="#services">Serviços</a> | |
| <a href="#portfolio">Portfolio</a> | |
| <a href="#testimonials">Depoimentos</a> | |
| <a href="#contact">Contato</a> | |
| </nav> | |
| <div class="menu-toggle" id="menuToggle"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h3>Olá, seja bem-vindo!</h3> | |
| <h1>Eu sou <span>João Silva</span></h1> | |
| <h1>Desenvolvedor Web & Designer</h1> | |
| <p>Crio experiências digitais inovadoras que transformam ideias em realidade. Especializado em desenvolvimento web moderno e design de interfaces.</p> | |
| <div class="hero-buttons"> | |
| <a href="#contact" class="btn btn-primary"> | |
| <i class="fas fa-paper-plane"></i> | |
| Vamos Trabalhar Juntos | |
| </a> | |
| <a href="#portfolio" class="btn btn-secondary"> | |
| <i class="fas fa-eye"></i> | |
| Ver Projetos | |
| </a> | |
| </div> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <h3>5+</h3> | |
| <p>Anos de Experiência</p> | |
| </div> | |
| <div class="stat"> | |
| <h3>150+</h3> | |
| <p>Projetos Completos</p> | |
| </div> | |
| <div class="stat"> | |
| <h3>50+</h3> | |
| <p>Clientes Satisfeitos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <div class="hero-image-wrapper"> | |
| <div class="hero-image-placeholder"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div class="floating-cards"> | |
| <div class="floating-card"> | |
| <i class="fab fa-react"></i> | |
| <span>React Developer</span> | |
| </div> | |
| <div class="floating-card"> | |
| <i class="fas fa-paint-brush"></i> | |
| <span>UI/UX Design</span> | |
| </div> | |
| <div class="floating-card"> | |
| <i class="fas fa-mobile-alt"></i> | |
| <span>Mobile First</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="about" id="about"> | |
| <div class="section-header fade-in"> | |
| <span>Sobre Mim</span> | |
| <h2>Quem Sou Eu</h2> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-image fade-in"> | |
| <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" style="width: 100%; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);"> | |
| <defs> | |
| <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#6366f1"/> | |
| <stop offset="100%" style="stop-color:#ec4899"/> | |
| </linearGradient> | |
| </defs> | |
| <rect width="400" height="400" fill="#f1f5f9"/> | |
| <circle cx="200" cy="150" r="80" fill="url(#grad1)"/> | |
| <ellipse cx="200" cy="320" rx="120" ry="80" fill="url(#grad1)"/> | |
| <text x="200" y="165" font-family="Arial" font-size="50" fill="white" text-anchor="middle">👨💻</text> | |
| </svg> | |
| </div> | |
| <div class="about-text fade-in"> | |
| <h3>Desenvolvedor Criativo com Paixão por Tecnologia</h3> | |
| <p>Sou um desenvolvedor web apaixonado por criar soluções digitais inovadoras. Com mais de 5 anos de experiência, tenho trabalhado com empresas de diversos setores para entregar projetos que superam expectativas.</p> | |
| <p>Minha abordagem combina design thinking com as mais modernas tecnologias web, garantindo que cada projeto não apenas funcione perfeitamente, mas também proporcione uma experiência memorável aos usuários.</p> | |
| <div class="skills"> | |
| <span class="skill-tag">HTML5</span> | |
| <span class="skill-tag">CSS3</span> | |
| <span class="skill-tag">JavaScript</span> | |
| <span class="skill-tag">React</span> | |
| <span class="skill-tag">Vue.js</span> | |
| <span class="skill-tag">Node.js</span> | |
| <span class="skill-tag">Python</span> | |
| <span class="skill-tag">UI/UX</span> | |
| <span class="skill-tag">Figma</span> | |
| <span class="skill-tag">Git</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="section-header fade-in"> | |
| <span>Serviços</span> | |
| <h2>O Que Eu Ofereço</h2> | |
| </div> | |
| <div class="services-grid"> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3>Desenvolvimento Web</h3> | |
| <p>Criação de sites e aplicações web modernos, responsivos e otimizados para performance e SEO.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Design Responsivo</h3> | |
| <p>Interfaces que se adaptam perfeitamente a todos os dispositivos, do desktop ao mobile.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3>UI/UX Design</h3> | |
| <p>Design de interfaces intuitivas e experiências de usuário que encantam e convertem.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3>Otimização SEO</h3> | |
| <p>Melhoria da visibilidade do seu site nos mecanismos de busca com técnicas modernas.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| <h3>E-commerce</h3> | |
| <p>Lojas virtuais completas com integração de pagamentos e gestão de produtos.</p> | |
| </div> | |
| <div class="service-card fade-in"> | |
| <div class="service-icon"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3>Backend & APIs</h3> | |
| <p>Desenvolvimento de APIs robustas e sistemas backend escaláveis para suas aplicações.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section class="portfolio" id="portfolio"> | |
| <div class="section-header fade-in"> | |
| <span>Portfolio</span> | |
| <h2>Meus Projetos Recentes</h2> | |
| </div> | |
| <div class="portfolio-filters fade-in"> | |
| <button class="filter-btn active" data-filter="all">Todos</button> | |
| <button class="filter-btn" data-filter="web">Web</button> | |
| <button class="filter-btn" data-filter="app">Apps</button> | |
| <button class="filter-btn" data-filter="design">Design</button> | |
| </div> | |
| <div class="portfolio-grid"> | |
| <div class="portfolio-item fade-in" data-category="web"> | |
| <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="400" height="300" fill="#1e293b"/> | |
| <rect x="20" y="20" width="360" height="260" rx="10" fill="#334155"/> | |
| <rect x="30" y="30" width="200" height="20" rx="5" fill="#6366f1"/> | |
| <rect x="30" y="60" width="150" height="15" rx="3" fill="#64748b"/> | |
| <rect x="30" y="85" width="180" height="15" rx="3" fill="#64748b"/> | |
| <rect x="30" y="110" width="120" height="15" rx="3" fill="#64748b"/> | |
| <rect x="250" y="60" width="120" height="150" rx="8" fill="#6366f1"/> | |
| <text x="200" y="155" font-family="Arial" font-size="40" fill="white" text-anchor="middle">🌐</text> | |
| </svg> | |
| <div class="portfolio-overlay"> | |
| <h3>E-commerce Moderno</h3> | |
| <p>Loja virtual completa com React e Node.js</p> | |
| <a href="#" class="portfolio-link"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in" data-category="app"> | |
| <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="400" height="300" fill="#0f172a"/> | |
| <rect x="130" y="40" width="140" height="220" rx="20" fill="#1e293b"/> | |
| <rect x="140" y="50" width="120" height="15" rx="3" fill="#6366f1"/> | |
| <rect x="140" y="75" width="120" height="80" rx="8" fill="#334155"/> | |
| <circle cx="200" cy="115" r="20" fill="#ec4899"/> | |
| <text x="200" y="122" font-family="Arial" font-size="20" fill="white" text-anchor="middle">📱</text> | |
| <rect x="140" y="165" width="120" height="25" rx="5" fill="#6366f1"/> | |
| <rect x="140" y="200" width="120" height="25" rx="5" fill="#475569"/> | |
| <rect x="140" y="235" width="120" height="15" rx="3" fill="#475569"/> | |
| </svg> | |
| <div class="portfolio-overlay"> | |
| <h3>App de Delivery</h3> | |
| <p>Aplicativo móvel com React Native</p> | |
| <a href="#" class="portfolio-link"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in" data-category="design"> | |
| <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="400" height="300" fill="#f8fafc"/> | |
| <rect x="30" y="30" width="340" height="240" rx="5" fill="white" stroke="#e2e8f0"/> | |
| <rect x="50" y="50" width="80" height="80" rx="8" fill="#6366f1"/> | |
| <rect x="140" y="50" width="220" height="15" rx="3" fill="#e2e8f0"/> | |
| <rect x="140" y="75" width="180" height="15" rx="3" fill="#e2e8f0"/> | |
| <rect x="140" y="100" width="150" height="15" rx="3" fill="#e2e8f0"/> | |
| <rect x="50" y="140" width="310" height="100" rx="8" fill="#f1f5f9"/> | |
| <text x="200" y="195" font-family="Arial" font-size="30" fill="#6366f1" text-anchor="middle">🎨</text> | |
| </svg> | |
| <div class="portfolio-overlay"> | |
| <h3>Sistema Dashboard</h3> | |
| <p>Design de interface para SaaS</p> | |
| <a href="#" class="portfolio-link"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in" data-category="web"> | |
| <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="400" height="300" fill="#ec4899"/> | |
| <rect x="50" y="100" width="300" height="150" rx="10" fill="white"/> | |
| <rect x="70" y="120" width="260" height="80" rx="5" fill="#fce7f3"/> | |
| <text x="200" y="165" font-family="Arial" font-size="35" fill="#ec4899" text-anchor="middle">💬</text> | |
| <rect x="70" y="215" width="180" height="20" rx="5" fill="#fce7f3"/> | |
| <rect x="260" y="215" width="60" height="20" rx="5" fill="#ec4899"/> | |
| </svg> | |
| <div class="portfolio-overlay"> | |
| <h3>Chat App</h3> | |
| <p>Aplicação de mensagens em tempo real</p> | |
| <a href="#" class="portfolio-link"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="portfolio-item fade-in" data-category="app"> | |
| <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="400" height="300" fill="#10b981"/> | |
| <rect x="80" y="50" width="240" height="200" rx="15" fill="white"/> | |
| <rect x="100" y="70" width="200" height="30" rx="5" fill="#10b981"/> | |
| <rect x="100" y="110" width="200" height="100" rx="8" fill="#d1fae5"/> | |
| <text x="200" y="165" font-family="Arial" font-size="35" fill="#10b981" text-anchor="middle">📊</text> | |
| <rect x="100" y="220" width="90" height="20" rx="5" fill="#10b981"/> | |
| <rect x="210" y |