* { margin: 0; padding: 0; box-sizing: border-box; } /* CURIOSIDADE: nome da cor - red, blue, orange, green... código hexadecimal - código RGB decimal (10) 0... 9 RED GREEN BLUE hexa(16) 0...9, A,B,C,D,E,F RED GREEN BLUE */ :root { --primary-color: #FF6B35; --secondary-color: #2C3E50; --accent-color: #3498DB; --text-color: #2C3E50; --light-gray: #F8F9FA; --border-color: #E9ECEF; --white-color: #FFFFFF; --hover-btn: rgba(255, 255, 255, 0.1); } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); background-color: var(--light-gray); line-height: 1.6; } /* Medidas: px (pixel) ABSOLUTA x rem (root em) RELATIVA px -> Um pixel é uma unidade fixa, um ponto na tela. O tamanho definido em px não varia com base em outros elementos da página rem -> rem é relativo ao tamanho da fonte do elemento raiz (normalmente ). Um 1rem equivale ao tamanho da fonte definido no elemento raiz. */ /* margin, padding 1 - Se aplicado 1 valor (esse valor é aplicado a todos os lados) 2 - Se aplicado 2 valores (1º valor é aplicado em cima e embaixo e 2º valor para os lados) */ header { background-color: var(--white-color); position: sticky; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-around; } .logo { display: flex; align-items: center; gap: 1rem; cursor: pointer; } .logo i { font-size: 2rem; color: var(--primary-color); } .logo h1 { font-size: 2rem; color: var(--primary-color); font-weight: bold; } .search-container { width: 100%; max-width: 500px; margin: 0 2rem; display: flex; align-items: center; background-color: var(--light-gray); border-radius: 1.5rem; padding: 0.5rem 1rem; gap: 0.5rem; } .search-container input { width: 100%; border: none; background-color: none; outline: none; padding: 0.5rem; font-size: 1rem; } .search-container i { color: var(--primary-color); } .categories-container { background-color: var(--secondary-color); display: flex; justify-content: center; } .categories-bar { display: flex; justify-content: center; align-items: center; padding: 0.5rem 2rem; gap: 1rem; width: 100%; max-width: 1200px; } .category-btn { display: flex; gap: 0.5rem; align-items: center; border: none; color: var(--white-color); border-radius: 1.5rem; padding: 0.75rem 1.5rem; cursor: pointer; background: none; } .category-btn:hover { background-color: var(--hover-btn); } .category-btn i { font-size: 1.2rem; } .category-btn.active { background-color: var(--primary-color); } .hero-section { background: #FF6B35; background: linear-gradient(130deg, rgba(255, 107, 53, 1) 0%, rgba(20, 116, 184, 1) 77%); color: var(--white-color); text-align: center; padding: 3rem 2rem; } /* margin & padding: margin-top -> cima margin-bottom -> embaixo margin-right -> direita margin-left -> esquerda */ .hero-section h2 { font-size: 2.5rem; margin-bottom: 0.5rem; } .hero-section p { font-size: 1.2rem; } footer { background-color: var(--secondary-color); color: var(--white-color); text-align: center; padding: 2rem; } .products { width: 100%; max-width: 1200px; padding: 2rem; margin: 0 auto; } .products-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; /* tamanho e quantas colunas vamos ter */ } .product-card { background-color: var(--white-color); border-radius: 1rem; overflow: hidden; cursor: pointer; transition: 0.5s; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } .product-card:hover { transform: translateY(-1rem); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .product-img { width: 100%; height: 250px; object-fit: cover; } .product-info { padding: 0.5rem; } .product-name { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; color: var(--text-color); } .product-description { font-size: 0.9rem; margin-bottom: 1rem; } .product-price { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 1rem; font-weight: bold; } .product-button { width: 100%; background-color: var(--accent-color); color: var(--white-color); border: none; padding: 0.7rem; font-size: 1rem; font-weight: 600; border-radius: 0.3rem; cursor: pointer; transition: 0.3s; } .product-button:hover { background-color: #3db1ff; }