1
resposta

projeto final

import styled from "styled-components"; import lupa from './search.png';

const CampoEstilizado = styled.div` border-radius: 10px; background: linear-gradient(to right, #3498db, #2980b9); /* Tons de azul */ display: flex; padding: 2px; position: relative; height: 4rem;

input {
    background-color: #2c3e50; /* Azul escuro para o input */
    border-radius: 10px;
    color: white;
    padding: 0.75rem 1rem;
    width: 35rem;
    line-height: 1;
    border: none; /* Removendo a borda para um visual mais limpo */
    outline: none; /* Removendo a borda de foco */
}

`;

const LupaEstilizada = styled.img position: absolute; top: 0.75rem; right: 1rem; --tamanho: 2.2rem; width: var(--tamanho); height: var(--tamanho);;

export default function CampoTexto() { return ( ); }

1 resposta

Olá, Terraquea.

Como vai?

Muito obrigado por compartilhar o seu projeto aqui com a gente. Isso mostra que você está de fato praticando e evoluindo. 

O seu código parece estar correto e funconal. Parabéns :)

Se precisar de ajuda, manda aqui. Bons estudos!