/* Reset e Estilos Gerais */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } h1, h2, h3, h4 { color: #2a2a2a; margin-bottom: 20px; } h2 { font-size: 2.5rem; text-align: center; margin-bottom: 50px; position: relative; } h2:after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(to right, #D4A574, #8B5A2B); } p { margin-bottom: 15px; font-size: 1.1rem; } .btn { display: inline-block; background: linear-gradient(to right, #D4A574, #8B5A2B); color: white; padding: 14px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 165, 116, 0.3); } /* Cabeçalho */ header { background-color: rgba(255, 255, 255, 0.98); position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; } .logo { font-size: 1.8rem; font-weight: 700; color: #8B5A2B; text-decoration: none; display: flex; align-items: center; } .logo span { color: #D4A574; } .logo-icon { margin-right: 10px; font-size: 1.5rem; color: #D4A574; } nav ul { display: flex; list-style: none; } nav li { margin-left: 30px; } nav a { text-decoration: none; color: #2a2a2a; font-weight: 500; transition: color 0.3s; position: relative; } nav a:hover { color: #8B5A2B; } nav a:after { content: ''; position: absolute; width: 0; height: 2px; background: #D4A574; left: 0; bottom: -5px; transition: width 0.3s; } nav a:hover:after { width: 100%; } .mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; color: #8B5A2B; cursor: pointer; } /* Hero Section */ .hero { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; color: white; text-align: center; padding: 200px 0 150px; margin-top: 70px; } .hero h1 { font-size: 3.5rem; color: white; margin-bottom: 20px; } .hero p { font-size: 1.3rem; max-width: 700px; margin: 0 auto 40px; color: #f0f0f0; } /* Serviços */ .services { background-color: #fefaf7; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .service-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } .service-card:hover { transform: translateY(-10px); } .service-img { height: 200px; width: 100%; object-fit: cover; } .service-content { padding: 25px; } .service-content h3 { color: #8B5A2B; margin-bottom: 15px; } /* Cursos */ .courses { background-color: white; } .course-highlight { display: flex; align-items: center; background: linear-gradient(to right, #fdf8f3, #faf2e9); border-radius: 15px; overflow: hidden; margin-bottom: 60px; border-left: 5px solid #D4A574; } .course-info { padding: 40px; flex: 1; } .course-image { flex: 1; height: 400px; background: url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover; } /* Produtos */ .products { background-color: #fefaf7; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .product-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .product-img { height: 200px; width: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-img { transform: scale(1.05); } .product-content { padding: 20px; } .product-content h3 { margin-bottom: 10px; } .price { color: #8B5A2B; font-weight: 700; font-size: 1.2rem; margin-bottom: 15px; } /* Equipe */ .team { background-color: white; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .team-member { text-align: center; padding: 25px; border-radius: 10px; transition: all 0.3s ease; } .team-member:hover { background-color: #fefaf7; } .team-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 5px solid #faf2e9; } /* Contato */ .contact { background: linear-gradient(to right, #8B5A2B, #D4A574); color: white; text-align: center; } .contact h2 { color: white; } .contact h2:after { background: white; } .contact-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 40px; } .contact-item { display: flex; flex-direction: column; align-items: center; max-width: 300px; } .contact-icon { font-size: 2rem; margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.1); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Rodapé */ footer { background-color: #2a2a2a; color: #ccc; padding: 50px 0 20px; } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; } .footer-column { flex: 1; min-width: 250px; margin-bottom: 30px; } .footer-column h3 { color: white; margin-bottom: 20px; font-size: 1.3rem; } .social-icons { display: flex; gap: 15px; margin-top: 20px; } .social-icons a { color: white; background-color: #444; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; } .social-icons a:hover { background-color: #D4A574; transform: translateY(-3px); } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid #444; font-size: 0.9rem; } /* Responsividade */ @media (max-width: 992px) { h2 { font-size: 2.2rem; } .hero h1 { font-size: 2.8rem; } .course-highlight { flex-direction: column; } .course-image { width: 100%; height: 300px; } } @media (max-width: 768px) { nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } nav.active { display: block; } nav ul { flex-direction: column; padding: 20px; } nav li { margin: 10px 0; } .mobile-menu-btn { display: block; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1.1rem; } .header-container { padding: 10px 20px; } }

ronegracamake

Hello world!

Escrito por

ronegraca79

em

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Comentários

Uma resposta para “Hello world!”

  1. Avatar de A WordPress Commenter
    A WordPress Commenter

    Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Mais posts