aaaa

Calendar

Wednesday, November 10

SUN

MON

TUE

WED

THU

FRI

SAT

January

08:00

wake up

12:15

meeting with the team, discussing the project requirements

13:00

lunch with Peter

cafe Petit brasserie

14:30

call with Johnathan and Stevie

16:45

project presentation

Head Office

18:00

call with Johnathan and Stevie

19:00

David's birthday party

bar Tailor's John

CSS-only Colorful
Calendar Concept

Dribbble Rework
Original Shot by Ludmila Shevchenko

Click on the arrows (when enabled) and the highlighted date to see the effect.
You can also go back in your browser to navigate between scenes, or click the left arrow in the schedule view.

Works in all modern browsers.

@charset "UTF-8"; :root { --initial-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif; --size-body: 85rem; font-size: max(100%, 16px); --cols: 12; --gutter: 2.375rem; --radius: var(--small-gutter); --font-weight-headers: 400; } :root[class*="contrast"] { --font-weight-headers: 500; } :root:not([class*="dys"]) { --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root.dyslexic { --base-font: 'Accessible DfA', var(--initial-font); --font-family-headers: 'Accessible DfA', var(--initial-font); } :root.dyslexic-comic { --base-font: 'Comic Sans MS', var(--initial-font); --font-family-headers: 'Comic Sans MS', var(--initial-font); } :root.initial-font { --initial-font: ""; --base-font: var(--initial-font); --font-family-headers: var(--initial-font); } :root[class*="dys"] .no-dyslexic, .initial-font { font-family: var(--initial-font); } .font-family-code { font-family: var(--font-family-monospace) !important; } @media (max-width: 19.9375rem) { :root { --gutter: 1.875rem; --font-size: 1.0625rem; } } @media (min-width: 20rem) { :root { --font-size: 1rem; } @media (max-width: 47.9375rem) { :root { --gutter: 1.875rem; } } @media (min-width: 48rem) { @media (min-width: 64rem) { :root { --size-body: 80.625rem; } } } } :root.dyslexic { --font-size: calc(1rem* .9); } :root.dyslexic-comic { --font-size: 1rem; } :root { --lh: 1.55; color-scheme: dark light; --font-family: var(--base-font); --blue: rgb(47, 110, 190); --darkblue: rgb(0, 36, 94); --lightblue: rgb(184, 207, 241); --applegreen: rgb(90, 130, 12); --lightgreen: rgb(212, 249, 201); --limegreen: rgb(210, 225, 0); --green: rgb(42, 129, 62); --orange: rgb(193, 71, 5); --orangered: rgb(255, 69, 0); --raspberry: rgb(205, 0, 55); --red: rgb(213, 43, 30); --yellow: rgb(255, 182, 18); --maroon: rgb(154, 90, 12); --antigua: rgb(130, 196, 206); --lightgray: rgb(211, 211, 211); --whitesmoke: rgb(252, 252, 252); --teal: rgb(0, 122, 124); --carbon: rgb(111, 113, 116); --basic-color: black; --basic-color-reverse: white; --outline-color: var(--link-color, blue); --outline-offset: 0.125rem; --outline-width: 0.125rem; --outline-style: solid; --text-decoration-style: dotted; --text-decoration-color: var(--primary-color); --text-decoration-thickness: 0.0625em; --small-radius: calc(var(--radius) / 2); --font-family-monospace: Consolas, Courier, monospace; --sticky-top: var(--header-outer-height); --negative-gutter: calc(var(--gutter) / 2 * -1); --half-gutter: calc(var(--gutter) / 2); --small-gutter: calc(var(--gutter) / 4); --tiny-gutter: calc(var(--gutter) / 8); --double-gutter: calc(var(--gutter) * 2); --negative-half-gutter: calc(var(--negative-gutter) / 2); --negative-small-gutter: calc(var(--negative-gutter) / 4); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-hero: rgb(212, 207, 205); --background-color-hero-alpha: rgba(0, 0, 0, 0.05); --background-color-menus: rgb(255, 255, 255); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(86, 98, 111); --heading-color: rgb(17, 17, 17); --box-shadow: rgb(219, 219, 219); --box-shadow-light: rgb(219, 219, 219); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.3); --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(39, 124, 58); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-radius: 0.3125rem; --error-color: var(--raspberry); --message-dialog-error: var(--basic-color-reverse); --highlight-sentence: rgb(99, 54, 222); --code-area-background: rgba(73, 29, 29, 0.05); --code-area-foreground: var(--basic-color); --code-area-border: rgb(115, 46, 46); --set-outline-color: var(--green); } :root[class*="contrast"] { filter: contrast(105%); --outline-color: var(--basic-color, blue); --outline-style: solid; --outline-offset: 0.125rem; --outline-width: 0.1875rem; --text-decoration-style: solid; --link-color: rgb(46, 86, 255); --link-color-alternate: rgb(0, 78, 222); --background-color-hero: rgb(239, 239, 241); --background-color-hero-alpha: rgb(236, 238, 241); --text-decoration-color: currentColor; --box-shadow: rgb(186, 186, 186); --primary-color: rgb(50, 50, 50); --heading-color: rgb(0, 0, 0); --background-color-page: rgb(248, 248, 248); --background-color-secondary: rgb(255, 255, 255); --background-color-menus: rgb(255, 255, 255); } :root[class*="contrast"] img { filter: contrast(110%); } :root.prefers-contrast { --primary-color: rgb(16, 16, 16); --heading-color: black; } @media (prefers-color-scheme: dark) { :root { --applegreen: rgb(130, 190, 0); --green: yellowgreen; --blue: rgb(138, 180, 249); --limegreen: rgb(255, 253, 0); --carbon: rgb(137, 139, 143); --basic-color: white; --basic-color-reverse: black; --background-color-page: rgb(17, 23, 39); --background-color-secondary: rgb(29, 36, 63); --background-color-hero: rgb(8, 15, 19); --background-color-hero-alpha: rgba(0, 0, 0, 0.15); --background-color-menus: rgb(15, 14, 38); --background-error-color: rgb(246, 197, 237); --primary-color: rgb(175, 191, 209); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(34, 32, 68); --box-shadow-light: rgb(49, 54, 65); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.5); --link-color: rgb(114, 149, 255); --link-color-alternate: var(--yellow); --button-primary-background: rgb(7, 102, 255); --button-primary-foreground: rgb(255, 255, 255); --button-secondary-background: rgb(17, 17, 17); --button-secondary-foreground: rgb(218, 218, 218); --error-color: rgb(255, 169, 174); --highlight-sentence: var(--antigua); --code-area-background: rgb(21, 13, 31); --code-area-border: rgb(104, 68, 148); --set-outline-color: var(--antigua); } :root[class*="contrast"] { --primary-color: rgb(238, 238, 238); --heading-color: rgb(255, 255, 255); --box-shadow: rgb(136, 136, 136); --box-shadow-light: var(--box-shadow); --under-box-shadow: 0 0.4375rem 0.3125rem -0.3125rem rgba(0, 0, 0, 1); --background-color-page: rgb(17, 21, 25); --background-color-secondary: rgb(17, 21, 25); --background-color-hero: rgb(0, 0, 0); --background-color-hero-alpha: rgb(0, 0, 0); --background-color-menus: var(--background-color-secondary); --link-color: var(--applegreen); --link-color-alternate: rgb(255, 204, 2); --button-secondary-background: rgb(0, 0, 0); } } @media (max-width: 47.9375rem) { :root { --header-outer-height: 3.125rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-width: 48rem) and (max-width: 85.3125rem) { :root { --header-outer-height: 3.75rem; --size-icon-header: calc(var(--header-outer-height) * .4); } } @media (min-width: 85.375rem) { @media (max-height: 85.3125rem) { :root { --header-outer-height: 4.0625rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } @media (min-height: 85.375rem) { :root { --header-outer-height: 4.375rem; --size-icon-header: calc(var(--header-outer-height) * .35); } } }

ABC du WEB

Month view for

Événement de seul-jour

Événement de seul-jour