Computadores, Laptops e Acessórios | Loja PowerPC

Abrir no Editor Video Publique Seu Código

Recomendado

16 September 2024

Um código por alexandrestelmaszyk

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PowerPC | Premium Computers & Accessories</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #8b5cf6;
            --accent: #06b6d4;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Roboto', sans-serif;
            color: var(--dark);
            background-color: var(--light);
            line-height: 1.6;
        }

h1, h2, h3, h4, h5 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.btn {
            display: inline-block;
            padding: 12px 28px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            font-size: 16px;
        }

.btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

.btn-secondary {
            background: var(--secondary);
        }

.btn-secondary:hover {
            background: #7c3aed;
        }

/* Top Bar */
        .top-bar {
            background: var(--dark);
            color: white;
            padding: 8px 0;
            font-size: 14px;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
        }

.top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.top-info {
            display: flex;
            gap: 30px;
        }

.top-info i {
            margin-right: 8px;
            color: var(--accent);
        }

.top-links a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            transition: var(--transition);
        }

.top-links a:hover {
            color: var(--accent);
        }

/* Navigation */
        .navbar {
            background: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 40px;
            z-index: 999;
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

.logo span {
            color: var(--secondary);
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }

.nav-links a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
        }

.nav-links a:hover:after {
            width: 100%;
        }

.nav-actions {
            display: flex;
            gap: 15px;
        }

.nav-actions i {
            font-size: 20px;
            color: var(--dark);
            cursor: pointer;
            transition: var(--transition);
        }

.nav-actions i:hover {
            color: var(--primary);
        }

/* Hero Section */
        .hero {
            height: 600px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            position: relative;
            overflow: hidden;
            margin-bottom: 80px;
        }

.hero-content {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            padding: 0 20px;
            z-index: 2;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.hero p {
            font-size: 20px;
            max-width: 600px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.hero-btns {
            display: flex;
            gap: 15px;
        }

.hero-image {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            width: 50%;
            max-width: 700px;
            animation: float 6s ease-in-out infinite;
            z-index: 1;
        }

/* Category Grid */
        .section {
            padding: 80px 0;
        }

.section-header {
            text-align: center;
            margin-bottom: 50px;
        }

.section-title {
            font-size: 36px;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

.section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

.section-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }

.zengin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
        }

.zengin-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            height: 200px;
        }

.zengin-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
        }

.zengin-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.zengin-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
        }

.zengin-content h3 {
            margin-bottom: 5px;
        }

/* Video Module */
        .video-module {
            height: 500px;
            position: relative;
            margin: 80px 0;
            overflow: hidden;
            border-radius: 10px;
        }

.video-module video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            padding: 20px;
        }

.video-overlay h2 {
            font-size: 42px;
            margin-bottom: 20px;
        }

.video-overlay p {
            max-width: 700px;
            font-size: 18px;
            margin-bottom: 30px;
        }

/* New Arrivals */
        .sutun-slider {
            position: relative;
            overflow: hidden;
            padding: 20px 0;
        }

.sutun-container {
            display: flex;
            transition: transform 0.5s ease;
            padding: 10px;
        }

.sutun-item {
            flex: 0 0 calc(25% - 20px);
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin: 0 10px;
            transition: var(--transition);
        }

.sutun-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }

.sutun-img {
            height: 200px;
            overflow: hidden;
        }

.sutun-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.sutun-item:hover .sutun-img img {
            transform: scale(1.05);
        }

.sutun-content {
            padding: 20px;
        }

.sutun-content h3 {
            margin-bottom: 10px;
            font-size: 18px;
        }

.sutun-price {
            color: var(--primary);
            font-weight: 700;
            font-size: 22px;
            margin: 10px 0;
        }

.sutun-desc {
            color: var(--gray);
            font-size: 14px;
            margin-bottom: 15px;
            height: 60px;
            overflow: hidden;
        }

.sutun-buy {
            display: block;
            text-align: center;
            background: var(--success);
            color: white;
            padding: 10px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

.sutun-buy:hover {
            background: #0da271;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

.slider-btn {
            background: var(--light-gray);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition);
        }

.slider-btn:hover {
            background: var(--primary);
            color: white;
        }

/* Features */
        .features {
            background: var(--light);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.feature-item {
            text-align: center;
            padding: 30px 20px;
            background: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

.feature-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.feature-icon {
            width: 80px;
            height: 80px;
            background: rgba(37, 99, 235, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 20px;
            font-size: 30px;
            color: var(--primary);
        }

.feature-item h3 {
            margin-bottom: 15px;
        }

/* Brand Showcase */
        .brands {
            background: white;
        }

.brands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 30px;
            align-items: center;
        }

.brand-item {
            background: white;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.brand-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.brand-item img {
            max-width: 100%;
            max-height: 60px;
            filter: grayscale(100%);
            opacity: 0.7;
            transition: var(--transition);
        }

.brand-item:hover img {
            filter: grayscale(0);
            opacity: 1;
        }

/* Testimonials */
        .testimonials {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
        }

.testimonial-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            text-align: center;
        }

.testimonial-content {
            font-size: 20px;
            font-style: italic;
            margin-bottom: 30px;
            line-height: 1.8;
        }

.testimonial-author {
            font-weight: 600;
            font-size: 18px;
        }

.testimonial-role {
            color: var(--light-gray);
        }

/* Blog */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.blog-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.blog-img {
            height: 200px;
            overflow: hidden;
        }

.blog-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.blog-card:hover .blog-img img {
            transform: scale(1.05);
        }

.blog-content {
            padding: 25px;
        }

.blog-date {
            color: var(--gray);
            font-size: 14px;
            margin-bottom: 10px;
        }

.blog-title {
            font-size: 20px;
            margin-bottom: 15px;
        }

.blog-excerpt {
            color: var(--gray);
            margin-bottom: 20px;
        }

.blog-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

.blog-link i {
            margin-left: 5px;
            transition: var(--transition);
        }

.blog-link:hover i {
            transform: translateX(5px);
        }

/* Contact Form */
        .contact {
            background: var(--light);
        }

.modul-form {
            background: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            padding: 40px;
            max-width: 900px;
            margin: 0 auto;
        }

.form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

.form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--light-gray);
            border-radius: 4px;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            transition: var(--transition);
        }

.form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
        }

/* Footer */
        .footer {
            background: var(--dark);
            color: white;
            padding: 60px 0 30px;
        }

.footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

.footer-col h3 {
            font-size: 20px;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--accent);
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: var(--light-gray);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }

.footer-links a:hover {
            color: var(--accent);
            transform: translateX(5px);
        }

.footer-links a i {
            margin-right: 10px;
            width: 20px;
        }

.social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: white;
            transition: var(--transition);
        }

.social-links a:hover {
            background: var(--accent);
            transform: translateY(-5px);
        }

.newsletter-form {
            display: flex;
            margin-top: 20px;
        }

.newsletter-form input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 4px 0 0 4px;
        }

.newsletter-form button {
            background: var(--accent);
            color: white;
            border: none;
            padding: 0 20px;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: var(--transition);
        }

.newsletter-form button:hover {
            background: #0891b2;
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--light-gray);
            font-size: 14px;
        }

/* Animations */
        @keyframes float {
            0% {
                transform: translateY(-50%) translateX(0);
            }
            50% {
                transform: translateY(-55%) translateX(10px);
            }
            100% {
                transform: translateY(-50%) translateX(0);
            }
        }

.oated {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

.oated.show {
            opacity: 1;
            transform: translateY(0);
        }

.zemin-show {
            opacity: 0;
            transform: scale(0.95);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

.zemin-show.show {
            opacity: 1;
            transform: scale(1);
        }

.oa {
            transition: all 0.4s ease;
        }

.oa:hover {
            transform: scale(1.05);
        }

/* Responsive Design */
        @media (max-width: 992px) {
            .hero {
                height: 500px;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .sutun-item {
                flex: 0 0 calc(33.333% - 20px);
            }
        }

@media (max-width: 768px) {
            .top-bar-content {
                flex-direction: column;
                gap: 10px;
            }
            
            .nav-container {
                flex-direction: column;
                gap: 20px;
            }
            
            .nav-links {
                gap: 15px;
            }
            
            .hero {
                height: 400px;
            }
            
            .hero-image {
                display: none;
            }
            
            .hero-content {
                text-align: center;
            }
            
            .hero-btns {
                justify-content: center;
            }
            
            .sutun-item {
                flex: 0 0 calc(50% - 20px);
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 576px) {
            .sutun-item {
                flex: 0 0 calc(100% - 20px);
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    
    <div class="top-bar">
        <div class="container top-bar-content">
            <div class="top-info">
                <div><i class="fas fa-phone"></i> Support: 1-800-POWERPC</div>
                <div><i class="fas fa-shipping-fast"></i> Free Shipping on Orders Over $499</div>
            </div>
            <div class="top-links">
                <a href="#"><i class="fas fa-sign-in-alt"></i> Login</a>
                <a href="#"><i class="fas fa-user-plus"></i> Register</a>
            </div>
        </div>
    </div>

<nav class="navbar">
        <div class="container nav-container">
            <a href="#" class="logo">Power<span>PC</span></a>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Categories</a></li>
                <li><a href="#">Deals</a></li>
                <li><a href="#">Business Solutions</a></li>
                <li><a href="#">Support</a></li>
            </ul>
            <div class="nav-actions">
                <i class="fas fa-search"></i>
                <i class="fas fa-shopping-cart"></i>
                <i class="fas fa-user"></i>
            </div>
        </div>
    </nav>

<section class="hero">
        <div class="hero-content container">
            <h1>Power Your Digital World</h1>
            <p>Premium computers, laptops, and accessories for gamers, professionals, and businesses. Experience cutting-edge performance.</p>
            <div class="hero-btns">
                <a href="#" class="btn">Shop Now</a>
                <a href="#" class="btn btn-secondary">Latest Deals</a>
            </div>
        </div>
        <div class="hero-image">
            <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Premium Laptop">
        </div>
    </section>

<section class="section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Shop By Category</h2>
                <p class="section-subtitle">Discover the perfect tech solution for your needs</p>
            </div>
            <div class="zengin-grid">
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Laptops">
                    <div class="zengin-content">
                        <h3>Laptops</h3>
                        <p>Ultrabooks, Gaming, Business</p>
                    </div>
                </div>
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1593640408182-31c70c8268f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Gaming PCs">
                    <div class="zengin-content">
                        <h3>Gaming PCs</h3>
                        <p>High-performance machines</p>
                    </div>
                </div>
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1551645120-d70bfe84c826?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Workstations">
                    <div class="zengin-content">
                        <h3>Workstations</h3>
                        <p>Professional powerhouses</p>
                    </div>
                </div>
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Accessories">
                    <div class="zengin-content">
                        <h3>Accessories</h3>
                        <p>Enhance your setup</p>
                    </div>
                </div>
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1587202372775-e229f172b9d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Monitors">
                    <div class="zengin-content">
                        <h3>Monitors</h3>
                        <p>Crystal-clear displays</p>
                    </div>
                </div>
                <div class="zengin-item oa">
                    <img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Components">
                    <div class="zengin-content">
                        <h3>Components</h3>
                        <p>Build your own PC</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section">
        <div class="container">
            <div class="video-module">
                <video autoplay muted loop>
                    <source src="https://assets.mixkit.co/videos/preview/mixkit-close-up-of-computer-circuit-board-12255-large.mp4" type="video/mp4">
                </video>
                <div class="video-overlay">
                    <h2>Premium Hardware Assembly</h2>
                    <p>Our expert technicians build each system with care, using only the highest quality components for maximum performance and reliability.</p>
                    <a href="#" class="btn">See Our Process</a>
                </div>
            </div>
        </div>
    </section>

<section class="section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">New Arrivals</h2>
                <p class="section-subtitle">Check out our latest products</p>
            </div>
            <div class="sutun-slider">
                <div class="sutun-container" id="slider">
                    <div class="sutun-item zemin-show">
                        <div class="sutun-img">
                            <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Gaming Laptop">
                        </div>
                        <div class="sutun-content">
                            <h3>ROG Strix G15 Gaming Laptop</h3>
                            <div class="sutun-price">$1,799.99</div>
                            <p class="sutun-desc">AMD Ryzen 9, RTX 3070, 16GB RAM, 1TB SSD, 300Hz Display</p>
                            <a href="#" class="sutun-buy">Quick Buy</a>
                        </div>
                    </div>
                    <div class="sutun-item zemin-show">
                        <div class="sutun-img">
                            <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Ultrabook">
                        </div>
                        <div class="sutun-content">
                            <h3>Dell XPS 13 Ultrabook</h3>
                            <div class="sutun-price">$1,299.99</div>
                            <p class="sutun-desc">Intel i7, 16GB RAM, 512GB SSD, 13.4" 4K Touch Display</p>
                            <a href="#" class="sutun-buy">Quick Buy</a>
                        </div>
                    </div>
                    <div class="sutun-item zemin-show">
                        <div class="sutun-img">
                            <img src="https://images.unsplash.com/photo-1551645120-d70bfe84c826?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Workstation">
                        </div>
                        <div class="sutun-content">
                            <h3>HP Z8 G4 Workstation</h3>
                            <div class="sutun-price">$3,499.99</div>
                            <p class="sutun-desc">Dual Xeon, 64GB RAM, Quadro RTX 5000, 2TB SSD</p>
                            <a href="#" class="sutun-buy">Quick Buy</a>
                        </div>
                    </div>
                    <div class="sutun-item zemin-show">
                        <div class="sutun-img">
                            <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Gaming PC">
                        </div>
                        <div class="sutun-content">
                            <h3>Alienware Aurora R13</h3>
                            <div class="sutun-price">$2,399.99</div>
                            <p class="sutun-desc">Intel i9, RTX 3080 Ti, 32GB RAM, 1TB SSD + 2TB HDD</p>
                            <a href="#" class="sutun-buy">Quick Buy</a>
                        </div>
                    </div>
                </div>
                <div class="slider-nav">
                    <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
                    <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </section>

<section class="section features">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Why Choose Us</h2>
                <p class="section-subtitle">We provide exceptional service and premium products</p>
            </div>
            <div class="features-grid">
                <div class="feature-item oated">
                    <div class="feature-icon">
                        <i class="fas fa-shipping-fast"></i>
                    </div>
                    <h3>Free Delivery</h3>
                    <p>Free shipping on all orders over $499 with expedited options available.</p>
                </div>
                <div class="feature-item oated">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>2-Year Warranty</h3>
                    <p>All systems come with comprehensive 2-year warranty coverage.</p>
                </div>
                <div class="feature-item oated">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Our expert support team is available around the clock to assist you.</p>
                </div>
                <div class="feature-item oated">
                    <div class="feature-icon">
                        <i class="fas fa-undo"></i>
                    </div>
                    <h3>30-Day Returns</h3>
                    <p>Not satisfied? Return within 30 days for a full refund.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section brands">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Trusted Brands</h2>
                <p class="section-subtitle">We partner with industry-leading manufacturers</p>
            </div>
            <div class="brands-grid">
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/800px-Apple_logo_black.svg.png" alt="Apple">
                </div>
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/ASUS_Logo.svg/2560px-ASUS_Logo.svg.png" alt="ASUS">
                </div>
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Lenovo_logo_2015.svg/2560px-Lenovo_logo_2015.svg.png" alt="Lenovo">
                </div>
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Dell_logo_2016.svg/1280px-Dell_logo_2016.svg.png" alt="Dell">
                </div>
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/HP_New_Logo_2D.svg/1024px-HP_New_Logo_2D.svg.png" alt="HP">
                </div>
                <div class="brand-item oa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/MSI_Logo.svg/2560px-MSI_Logo.svg.png" alt="MSI">
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Customer Testimonials</h2>
                <p class="section-subtitle">What our customers say about us</p>
            </div>
            <div class="testimonial-container">
                <p class="testimonial-content">"PowerPC helped me build the perfect gaming setup. Their expertise and customer service are unmatched. The system runs flawlessly and exceeded my expectations!"</p>
                <div class="testimonial-author">Michael Johnson</div>
                <div class="testimonial-role">Professional Gamer</div>
            </div>
        </div>
    </section>

<section class="section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Tech Insights</h2>
                <p class="section-subtitle">Latest news and expert advice</p>
            </div>
            <div class="blog-grid">
                <div class="blog-card oated">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Gaming Laptop Guide">
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">June 15, 2023</div>
                        <h3 class="blog-title">How to Choose the Right Laptop for Gaming</h3>
                        <p class="blog-excerpt">Discover the key factors to consider when selecting a gaming laptop that meets your performance needs and budget.</p>
                        <a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="blog-card oated">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Desktop vs Laptop">
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">June 8, 2023</div>
                        <h3 class="blog-title">Desktop vs. Laptop - What's Best for You?</h3>
                        <p class="blog-excerpt">We compare the pros and cons of desktop computers and laptops to help you make the right choice for your needs.</p>
                        <a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="blog-card oated">
                    <div class="blog-img">
                        <img src="https://images.unsplash.com/photo-1551645120-d70bfe84c826?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Workstation Setup">
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">June 1, 2023</div>
                        <h3 class="blog-title">Optimizing Your Workstation for Productivity</h3>
                        <p class="blog-excerpt">Learn how to configure your professional workstation for maximum efficiency and performance.</p>
                        <a href="#" class="blog-link">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section contact">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Contact Us</h2>
                <p class="section-subtitle">Have questions? Our experts are ready to help</p>
            </div>
            <div class="modul-form zemin-show">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" placeholder="John Smith">
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" placeholder="john@example.com">
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" placeholder="(123) 456-7890">
                    </div>
                    <div class="form-group">
                        <label for="brand">Brand Interest</label>
                        <select id="brand">
                            <option value="">Select a brand</option>
                            <option value="apple">Apple</option>
                            <option value="asus">ASUS</option>
                            <option value="dell">Dell</option>
                            <option value="hp">HP</option>
                            <option value="lenovo">Lenovo</option>
                            <option value="msi">MSI</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="model">Model Interest</label>
                    <select id="model">
                        <option value="">Select a model (choose brand first)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="message">Your Message</label>
                    <input id="message" rows="5" placeholder="How can we help you?"/>
                </div>
                <button type="submit" class="btn">Send Message</button>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>PowerPC</h3>
                    <p>Premium computer solutions for gamers, professionals, and businesses since 2010.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Home</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Shop</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Deals & Promotions</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> New Arrivals</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Custom Builds</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Support</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> FAQ</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Return Policy</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Warranty Information</a></li>
                        <li><a href="#"><i class="fas fa-chevron-right"></i> Shipping Information</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to get special offers, free giveaways, and new product alerts.</p>
                    <div class="newsletter-form">
                        <input type="email" placeholder="Your email address">
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2023 PowerPC. All rights reserved. | Designed with <i class="fas fa-heart"></i> for tech enthusiasts</p>
            </div>
        </div>
    </footer>

Computadores, Laptops e Acessórios | Loja PowerPC

Recomendado

Construindo um horizonte

Invasores do Espaço

Um código por alexandrestelmaszyk

HTML

CSS

JS

Recomendado

Construindo um horizonte

Invasores do Espaço

Um código por alexandrestelmaszyk

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS