Scribd Logo
Upload

Welcome to Scribd!

  • Countdown CSS

    Uploaded by

    Ofi Exa
    13 views2 pages
    This CSS document defines styles for a countdown timer component. It styles the countdown container and individual time elements (days, hours, etc.) with font styles and sizes. It also includes media queries to adjust the styles on smaller screens by centering elements and changing font sizes.

    Original Description:

    Original Title

    countdown CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This CSS document defines styles for a countdown timer component. It styles the countdown container and individual time elements (days, hours, etc.) with font styles and sizes. It also includes media queries to adjust the styles on smaller screens by centering elements and changing font sizes.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views2 pages

    Countdown CSS

    Uploaded by

    Ofi Exa
    This CSS document defines styles for a countdown timer component. It styles the countdown container and individual time elements (days, hours, etc.) with font styles and sizes. It also includes media queries to adjust the styles on smaller screens by centering elements and changing font sizes.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    .

    countdown {
    margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    }
    @media only screen and (max-width: 1024px) {
    .countdown {
    justify-content: center;
    }
    }
    .countdown .time {
    display: flex;
    flex-direction: column;
    justify-content: start;
    }
    .countdown .time:not(:last-child) {
    margin-right: 16px;
    }
    .countdown .time #days,
    .countdown .time #hours,
    .countdown .time #minutes,
    .countdown .time #seconds,
    .countdown .time .semicolon {
    font-family: Samsung Sharp Sans;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 0.3px;
    }
    @media only screen and (min-width: 1024px) {
    .countdown .time #days,
    .countdown .time #hours,
    .countdown .time #minutes,
    .countdown .time #seconds,
    .countdown .time .semicolon {
    font-size: 72px;
    line-height: 91px;
    }
    }
    @media only screen and (max-width: 1024px) {
    .countdown .time #days,
    .countdown .time #hours,
    .countdown .time #minutes,
    .countdown .time #seconds,
    .countdown .time .semicolon {
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    }
    }
    .countdown .time span {
    font-family: Samsung Sharp Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.3px;
    align-self: center;
    }
    .countdown .semicolon {
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: Samsung Sharp Sans;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 0.3px;
    }
    @media only screen and (min-width: 1024px) {
    .countdown .semicolon {
    font-size: 72px;
    line-height: 91px;
    }
    }
    @media only screen and (max-width: 1024px) {
    .countdown .semicolon {
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    }
    }

    You might also like