Notepad.txt

Newsletter.jsx

import './Newsletter.css'

export const Newsletter = () => {
    return (
        <div className='newsletter'>
            <h1>Get Exclusive Offers On Your Email</h1>
            <p>Subscribe to opur newletter and stay updated</p>
            <div>
                <input type="email" placeholder='Your Email id' />
                <button>Subscribe</button>
            </div>
        </div>
    )
}

Newsletter.css

.newsletter {
    width: 65%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    padding: 0px 140px;
    margin-bottom: 150px;
    background: linear-gradient(180deg, #fde1ff 0%, #e1ffea22 60%);
    gap: 10px;
}

.newsletter h1 {
    color: #454545;
    font-size: 50px;
    font-weight: 700;
}

.newsletter p {
    color: #454545;
    font-size: 18px;
    font-weight: 600;
}

.newsletter div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    width: 100%;
    max-width: 730px;
    height: 70px;
    border-radius: 80px;
    border: 1px solid #e3e3e3;
    margin-top: 20px;
}

.newsletter input {
    width: 100%;
    max-width: 450px;
    margin-left: 30px;
    border: none;
    outline: none;
    color: #616161;
    font-family: Poppins;
    font-size: 15px;
}

.newsletter div button {
    width: 210px;
    height: 70px;
    border-radius: 80px;
    background: black;
    color: white;
    font-size: 15px;
    cursor: pointer;

}

Actua como un programador de front end profesional y eficiente, y quiero que completes la siguiente tarea, tomando en cuenta la estructura del HTML y del CSS, realiza el codigo para el modo responsive de este componente Newsletter para que se adapte a varios tipos de pantallas y manteniendo como prioridad una buena experiencia de usuario esto quiere decir que todo tiene que mantener un orden al entrar al modo responsive.

Especificacmente lo que se requiere para un buen diseño responsive es lo siguiente:

1. Qudisminuyan su tamaño progresivamente para que se adapte a todo tipo de pantalla

.newsletter {
    width: 65%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    padding: 0px 140px;
    margin-bottom: 150px;
    background: linear-gradient(180deg, #fde1ff 0%, #e1ffea22 60%);
    gap: 10px;
}

.newsletter h1 {
    color: #454545;
    font-size: 50px;
    font-weight: 700;
}

.newsletter p {
    color: #454545;
    font-size: 18px;
    font-weight: 600;
}

.newsletter div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    width: 100%;
    max-width: 730px;
    height: 70px;
    border-radius: 80px;
    border: 1px solid #e3e3e3;
    margin-top: 20px;
}

.newsletter input {
    width: 100%;
    max-width: 450px;
    margin-left: 30px;
    border: none;
    outline: none;
    color: #616161;
    font-family: Poppins;
    font-size: 15px;
}

.newsletter div button {
    width: 210px;
    height: 70px;
    border-radius: 80px;
    background: black;
    color: white;
    font-size: 15px;
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .newsletter {
        width: 75%;
        padding: 0px 70px;
    }

    .newsletter h1 {
        font-size: 40px;
    }

    .newsletter p {
        font-size: 16px;
    }

    .newsletter div {
        height: 60px;
    }

    .newsletter input {
        font-size: 14px;
    }

    .newsletter div button {
        width: 180px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .newsletter {
        width: 85%;
        padding: 0px 50px;
    }

    .newsletter h1 {
        font-size: 35px;
    }

    .newsletter p {
        font-size: 14px;
    }

    .newsletter div {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .newsletter input {
        width: 100%;
        max-width: none;
        margin: 0 0 10px 0;
    }

    .newsletter div button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .newsletter {
        width: 95%;
        padding: 0px 20px;
    }

    .newsletter h1 {
        font-size: 28px;
    }

    .newsletter p {
        font-size: 12px;
    }

    .newsletter div {
        height: auto;
        padding: 10px;
    }

    .newsletter input {
        font-size: 12px;
    }

    .newsletter div button {
        font-size: 12px;
    }
}