search

SamaraFellaDina / pleasurable-ui

Ontwerp en maak voor een opdrachtgever een interface waar gebruikers blij van worden
MIT License
1 stars 0 forks source link

Footer ontwerpen #4

Open SamaraFellaDina opened 5 months ago

SamaraFellaDina commented 5 months ago

Ik heb bij de vorige sprint een footer ontworpen met een summary. Mocht je het leuk vinden, heb ik hieronder de code staan.

https://github.com/SamaraFellaDina/pleasurable-ui/blob/aa446bc587a74a980597f6a8e4e31df33eb120ef/views/partials/foot.ejs#L13-L25

css

Ik heb toen deze css gebruikt:

footer {
    background-color: var(--primary-color-1);
    color: var(--primary-color-4);
    width: 100%;
    height: auto;
}

footer div {
    padding: 1em 0;
}

footer div details{
    border-top: var(--border-style-white);
}

footer div details[open],
footer div details {
    padding: 1em 0;
}

footer div details:last-child {
    border-bottom: var(--border-style-white);
}

footer div details summary {
    font-size: 1.2em;
    text-transform: uppercase;
}

footer div details summary:hover {
    color: var(--active-color-1);
    transition: var(--transition-flow);

}