Soluções de tecnologia: Web, aplicativos, nuvem, IA e segurança cibernética

Abrir no Editor Publique Seu Código

Recomendado

14 September 2024

Estrutura HTML de animação de cubo CSS

19 March 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Power Solutions | Modern Technology Services</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Base Styles and Reset */
        :root {
            --dark-blue: #001F3F;
            --electric-yellow: #FFE600;
            --white: #FFFFFF;
            --light-gray: #F5F7FA;
            --dark-gray: #333333;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark-gray);
            background-color: var(--white);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1rem;
            color: var(--dark-blue);
        }
        
        p {
            margin-bottom: 1.5rem;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }
        
        img {
            max-width: 100%;
            height: auto;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--electric-yellow);
            color: var(--dark-blue);
            border: none;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
        }
        
        .btn:hover {
            background-color: var(--dark-blue);
            color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 2px solid var(--electric-yellow);
            color: var(--electric-yellow);
        }
        
        .btn-outline:hover {
            background-color: var(--electric-yellow);
            color: var(--dark-blue);
        }
        
        .section {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--electric-yellow);
        }
        
        /* Header and Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(0, 31, 63, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }
        
        header.scrolled {
            background-color: var(--dark-blue);
            padding: 10px 0;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--white);
            display: flex;
            align-items: center;
        }
        
        .logo span {
            color: var(--electric-yellow);
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
        }
        
        .nav-menu li {
            margin-left: 30px;
        }
        
        .nav-menu a {
            color: var(--white);
            font-weight: 500;
            position: relative;
        }
        
        .nav-menu a:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--electric-yellow);
            transition: var(--transition);
        }
        
        .nav-menu a:hover:after {
            width: 100%;
        }
        
        .nav-toggle {
            display: none;
            font-size: 24px;
            color: var(--white);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0, 31, 63, 0.8), rgba(0, 31, 63, 0.8)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') no-repeat center center/cover;
            min-height: 100vh;
            display: flex;
            align-items: center;
            color: var(--white);
            padding: 100px 0 80px;
        }
        
        .hero-content {
            max-width: 800px;
        }
        
        .hero-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: var(--white);
            animation: fadeInUp 1s ease;
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            margin-bottom: 30px;
            font-weight: 300;
            animation: fadeInUp 1s ease 0.2s forwards;
            opacity: 0;
        }
        
        .hero-buttons {
            display: flex;
            gap: 15px;
            animation: fadeInUp 1s ease 0.4s forwards;
            opacity: 0;
        }
        
        /* About Section */
        .about {
            background-color: var(--white);
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* Services Section */
        .services {
            background-color: var(--light-gray);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background-color: var(--white);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            text-align: center;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            font-size: 40px;
            color: var(--electric-yellow);
            margin-bottom: 20px;
        }
        
        .service-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        
        /* Portfolio Section */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .portfolio-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 300px;
        }
        
        .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 31, 63, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
            padding: 20px;
            text-align: center;
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-item:hover .portfolio-image {
            transform: scale(1.1);
        }
        
        .portfolio-title {
            color: var(--white);
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        
        .portfolio-desc {
            color: var(--white);
            margin-bottom: 20px;
        }
        
        /* Blog Section */
        .blog {
            background-color: var(--light-gray);
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .blog-card {
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }
        
        .blog-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .blog-content {
            padding: 25px;
        }
        
        .blog-meta {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 14px;
            color: #777;
        }
        
        .blog-date {
            margin-right: 20px;
        }
        
        /* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .contact-icon {
            font-size: 24px;
            color: var(--electric-yellow);
        }
        
        .contact-form {
            background-color: var(--white);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-input {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
            font-size: 16px;
            transition: var(--transition);
        }
        
        .form-input:focus {
            border-color: var(--electric-yellow);
            outline: none;
        }
        
        textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-blue);
            color: var(--white);
            padding: 60px 0 30px;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-logo {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--white);
        }
        
        .footer-logo span {
            color: var(--electric-yellow);
        }
        
        .footer-desc {
            margin-bottom: 20px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--white);
            transition: var(--transition);
        }
        
        .social-link:hover {
            background-color: var(--electric-yellow);
            color: var(--dark-blue);
        }
        
        .footer-title {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: var(--electric-yellow);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ccc;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--electric-yellow);
            padding-left: 5px;
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            font-size: 14px;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .animate.animated {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .hero-title {
                font-size: 2.8rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 80px;
                left: -100%;
                flex-direction: column;
                background-color: var(--dark-blue);
                width: 100%;
                height: calc(100vh - 80px);
                padding: 40px;
                transition: var(--transition);
                z-index: 999;
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .nav-menu li {
                margin: 15px 0;
            }
            
            .nav-toggle {
                display: block;
            }
            
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-buttons {
                flex-direction: column;
            }
            
            .section {
                padding: 60px 0;
            }
        }
        
        @media (max-width: 576px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .portfolio-grid,
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">Power<span>Solutions</span></a>
            
            <div class="nav-toggle" id="navToggle">
                <i class="fas fa-bars"></i>
            </div>
            
            <ul class="nav-menu" id="navMenu">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Innovative Technology Solutions for Modern Businesses</h1>
                <p class="hero-subtitle">We deliver cutting-edge technology solutions that empower businesses to thrive in the digital age.</p>
                <div class="hero-buttons">
                    <a href="#services" class="btn">Our Services</a>
                    <a href="#contact" class="btn btn-outline">Contact Us</a>
                </div>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="container">
            <h2 class="section-title animate">About Us</h2>
            <div class="about-content">
                <div class="about-text animate">
                    <h3>We Are Power Solutions</h3>
                    <p>With over 15 years of experience in the technology sector, Power Solutions has established itself as a leader in innovative business solutions. Our team of experts is dedicated to delivering exceptional results for our clients.</p>
                    <p>We believe in the power of technology to transform businesses and create new opportunities for growth and efficiency.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="about-image animate">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80" alt="Our Team">
                </div>
            </div>
        </div>
    </section>

<section class="section services" id="services">
        <div class="container">
            <h2 class="section-title animate">Our Services</h2>
            <div class="services-grid">
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="service-title">Web Development</h3>
                    <p>Custom web applications and websites designed to meet your specific business needs and goals.</p>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="service-title">App Development</h3>
                    <p>Native and cross-platform mobile applications that deliver exceptional user experiences.</p>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3 class="service-title">Cloud Solutions</h3>
                    <p>Secure and scalable cloud infrastructure solutions to power your business operations.</p>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="service-title">Data Analytics</h3>
                    <p>Transform your data into actionable insights with our advanced analytics solutions.</p>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="service-title">Cyber Security</h3>
                    <p>Comprehensive security solutions to protect your business from evolving threats.</p>
                </div>
                
                <div class="service-card animate">
                    <div class="service-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="service-title">AI & Automation</h3>
                    <p>Intelligent automation solutions to streamline processes and increase efficiency.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section portfolio" id="portfolio">
        <div class="container">
            <h2 class="section-title animate">Our Portfolio</h2>
            <div class="portfolio-grid">
                <div class="portfolio-item animate">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Project 1" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Financial Dashboard</h3>
                        <p class="portfolio-desc">A comprehensive financial analytics platform for enterprise clients.</p>
                        <a href="#" class="btn">View Project</a>
                    </div>
                </div>
                
                <div class="portfolio-item animate">
                    <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Project 2" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">E-Commerce Platform</h3>
                        <p class="portfolio-desc">A fully customized online store with advanced features.</p>
                        <a href="#" class="btn">View Project</a>
                    </div>
                </div>
                
                <div class="portfolio-item animate">
                    <img src="https://images.unsplash.com/photo-1543286386-713bdd548da4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Project 3" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <h3 class="portfolio-title">Healthcare App</h3>
                        <p class="portfolio-desc">A patient management system for healthcare providers.</p>
                        <a href="#" class="btn">View Project</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section blog" id="blog">
        <div class="container">
            <h2 class="section-title animate">Latest Insights</h2>
            <div class="blog-grid">
                <div class="blog-card animate">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Blog Post 1" class="blog-image">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span class="blog-date"><i class="far fa-calendar"></i> June 15, 2023</span>
                            <span class="blog-author"><i class="far fa-user"></i> Admin</span>
                        </div>
                        <h3>The Future of AI in Business Operations</h3>
                        <p>Exploring how artificial intelligence is transforming modern business processes and creating new opportunities.</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
                
                <div class="blog-card animate">
                    <img src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Blog Post 2" class="blog-image">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span class="blog-date"><i class="far fa-calendar"></i> June 10, 2023</span>
                            <span class="blog-author"><i class="far fa-user"></i> Admin</span>
                        </div>
                        <h3>Cybersecurity Trends to Watch in 2023</h3>
                        <p>An overview of the emerging cybersecurity threats and the strategies businesses can employ to protect themselves.</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
                
                <div class="blog-card animate">
                    <img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Blog Post 3" class="blog-image">
                    <div class="blog-content">
                        <div class="blog-meta">
                            <span class="blog-date"><i class="far fa-calendar"></i> June 5, 2023</span>
                            <span class="blog-author"><i class="far fa-user"></i> Admin</span>
                        </div>
                        <h3>Cloud Migration Best Practices</h3>
                        <p>Key considerations and strategies for successfully migrating your business operations to the cloud.</p>
                        <a href="#" class="btn">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="container">
            <h2 class="section-title animate">Get In Touch</h2>
            <div class="contact-container">
                <div class="contact-info">
                    <div class="contact-item animate">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h3>Location</h3>
                            <p>123 Tech Street, Innovation District<br>San Francisco, CA 94103</p>
                        </div>
                    </div>
                    
                    <div class="contact-item animate">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div>
                            <h3>Phone</h3>
                            <p>+1 (555) 123-4567</p>
                        </div>
                    </div>
                    
                    <div class="contact-item animate">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h3>Email</h3>
                            <p>info@powersolutions.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item animate">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <h3>Business Hours</h3>
                            <p>Monday - Friday: 9AM - 5PM<br>Saturday & Sunday: Closed</p>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form animate">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-input" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-input" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-input" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <input class="form-input" placeholder="Your Message" required/>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-about">
                    <div class="footer-logo">Power<span>Solutions</span></div>
                    <p class="footer-desc">We provide innovative technology solutions that help businesses transform and thrive in the digital era.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
                <div class="footer-links">
                    <h3 class="footer-title">Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                
                <div class="footer-links">
                    <h3 class="footer-title">Services</h3>
                    <ul>
                        <li><a href="#">Web Development</a></li>
                        <li><a href="#">App Development</a></li>
                        <li><a href="#">Cloud Solutions</a></li>
                        <li><a href="#">Data Analytics</a></li>
                        <li><a href="#">Cyber Security</a></li>
                        <li><a href="#">AI & Automation</a></li>
                    </ul>
                </div>
                
                <div class="footer-newsletter">
                    <h3 class="footer-title">Newsletter</h3>
                    <p>Subscribe to our newsletter to get the latest updates and offers.</p>
                    <form>
                        <div class="form-group">
                            <input type="email" class="form-input" placeholder="Your Email" required>
                        </div>
                        <button type="submit" class="btn">Subscribe</button>
                    </form>
                </div>
            </div>
            
            <div class="copyright">
                <p>© 2023 Power Solutions. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

Soluções de tecnologia: Web, aplicativos, nuvem, IA e segurança cibernética

Recomendado

Interação com Pôster de Filme

Estrutura HTML de animação de cubo CSS

Botão de confete

HTML

CSS

JS

Recomendado

Interação com Pôster de Filme

Estrutura HTML de animação de cubo CSS

Botão de confete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS