├── .gitignore ├── .prettierrc ├── 01-button ├── index.html └── style.css ├── 02-search-bar ├── index.html └── style.css ├── 03-codepen-tile ├── images │ ├── image-01.jpg │ └── image-02.jpg ├── index.html └── style.css ├── 04-loading-animation ├── index.html └── style.css ├── 05-loading-animation2 ├── index.html └── style.css ├── 06-archery-target ├── index.html └── style.css ├── 07-word-carousel ├── index.html └── style.css ├── 08-flag-of-france ├── index.html └── style.css ├── 09-flag-of-germany ├── index.html └── style.css ├── 10-flag-of-madagascar ├── index.html └── style.css ├── 11-flag-of-switzerland ├── index.html └── style.css ├── 12-flag-of-japan ├── index.html └── style.css ├── 13-flag-of-sweden ├── index.html └── style.css ├── 14-flag-of-niger ├── index.html └── style.css ├── 15-profile-layout ├── images │ └── image.jpg ├── index.html └── style.css ├── 16-toggle-switch ├── index.html └── style.css ├── 17-playing-card ├── index.html └── style.css ├── 18-playing-card2 ├── index.html └── style.css ├── 19-progress-bar ├── index.html └── style.css ├── 20-flashcard ├── index.html └── style.css ├── 21-loading-animation3 ├── index.html └── style.css ├── 22-stories-menu ├── images │ ├── image-01.jpg │ ├── image-02.jpg │ └── image-03.jpg ├── index.html └── style.css ├── 23-progress-bar2 ├── index.html └── style.css ├── 24-github-graph ├── index.html ├── script.js └── style.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac desktop service store files 2 | 3 | .DS_Store 4 | 5 | # Optional npm cache directory 6 | 7 | .npm 8 | 9 | # Optional eslint cache 10 | 11 | .eslintcache 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "arrowParens": "avoid", 11 | "proseWrap": "always" 12 | } 13 | -------------------------------------------------------------------------------- /01-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /01-button/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | background-color: var(--body-bg); 6 | font-family: var(--font-family); 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --body-bg: #1e1f25; 12 | --btn-bg: #000; 13 | --btn-color: #cbcbcb; 14 | --btn-color-hover: #fff; 15 | --grad-color1: #eeaf61; 16 | --grad-color2: #fb9062; 17 | --grad-color3: #ee5d6c; 18 | --grad-color4: #ce4993; 19 | --grad-colorS: #6a0d83; 20 | } 21 | 22 | .container { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | height: 100vh; 27 | } 28 | 29 | .button-border { 30 | background: linear-gradient( 31 | 115deg, 32 | #eeaf61, 33 | #fb9062, 34 | #ee5d6c, 35 | #ce4993, 36 | #6a0d83 37 | ); 38 | padding: 2px; 39 | } 40 | 41 | .button { 42 | cursor: pointer; 43 | border: none; 44 | background: var(--btn-bg); 45 | color: var(--btn-color); 46 | padding: 1em 1.5em; 47 | font-family: inherit; 48 | letter-spacing: 0.1em; 49 | } 50 | 51 | .button-border:hover { 52 | background: linear-gradient( 53 | 230deg, 54 | #eeaf61, 55 | #fb9062, 56 | #ee5d6c, 57 | #ce4993, 58 | #6a0d83 59 | ); 60 | } 61 | 62 | .button-border:hover .button { 63 | color: var(--btn-color-hover); 64 | padding: 1em 1.6em; 65 | } 66 | -------------------------------------------------------------------------------- /02-search-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 19 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /02-search-bar/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --search-border: #bbb; 11 | --search-focus-border: #3a71ca; 12 | } 13 | 14 | .hide { 15 | border: 0; 16 | clip: rect(0 0 0 0); 17 | height: 1px; 18 | margin: -1px; 19 | overflow: hidden; 20 | padding: 0; 21 | position: absolute; 22 | width: 1px; 23 | } 24 | 25 | .container { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | height: 100vh; 30 | padding: 2em; 31 | width: 80%; 32 | margin: auto; 33 | min-width: 320px; 34 | } 35 | 36 | .search-bar { 37 | padding-left: 10px; 38 | width: 30%; 39 | line-height: 2; 40 | border-radius: 4px; 41 | border: 1px solid var(--search-border); 42 | transition: all 0.3s; 43 | } 44 | 45 | .search-bar:focus { 46 | width: 100%; 47 | border-color: var(--search-focus-border); 48 | } 49 | 50 | .search-bar::placeholder { 51 | font-weight: 200; 52 | } 53 | 54 | .search-bar:focus::placeholder { 55 | color: transparent; 56 | } 57 | -------------------------------------------------------------------------------- /03-codepen-tile/images/image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/03-codepen-tile/images/image-01.jpg -------------------------------------------------------------------------------- /03-codepen-tile/images/image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/03-codepen-tile/images/image-02.jpg -------------------------------------------------------------------------------- /03-codepen-tile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 |

Abstract Gradient Project

27 |

Scrimsbee McScrimslee

28 |
29 |
30 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /03-codepen-tile/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --bg-main: #131417; 4 | --bg-card: #1e1f26; 5 | --bg-stats: #131417; 6 | --username: #b7bbc8; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | font-family: var(--font-family); 14 | color: white; 15 | background: var(--bg-main); 16 | } 17 | 18 | p, 19 | h3 { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | ul { 25 | padding-left: 0; 26 | } 27 | 28 | ul li { 29 | list-style-type: none; 30 | } 31 | 32 | .card, 33 | img { 34 | border-radius: 10px; 35 | } 36 | 37 | .card { 38 | max-width: 300px; 39 | background: var(--bg-card); 40 | margin: auto; 41 | padding: 1em; 42 | } 43 | 44 | .card-thumbnail img { 45 | max-width: 100%; 46 | object-fit: cover; 47 | } 48 | 49 | .card-body { 50 | display: flex; 51 | margin-top: 1em; 52 | } 53 | 54 | .card-details { 55 | line-height: 1.5; 56 | } 57 | 58 | .card-avatar img { 59 | height: 50px; 60 | width: 50px; 61 | margin-right: 1em; 62 | } 63 | 64 | .card-details h3 { 65 | font-weight: 900; 66 | font-size: 1rem; 67 | } 68 | 69 | .card-details p { 70 | font-size: 0.85rem; 71 | color: var(--username); 72 | } 73 | 74 | .card-stats { 75 | display: none; 76 | padding-bottom: 0.5em; 77 | } 78 | 79 | .card-stats li { 80 | background: var(--bg-stats); 81 | padding: 0.25em 0.5em; 82 | margin-right: 0.5em; 83 | border-radius: 5px; 84 | } 85 | 86 | .card:hover .card-stats { 87 | display: flex; 88 | } 89 | 90 | .card:hover { 91 | padding-bottom: 0; 92 | } 93 | -------------------------------------------------------------------------------- /04-loading-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /04-loading-animation/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --color-light: lightgray; 11 | --color-dark: darkgray; 12 | } 13 | 14 | .container { 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | height: 100vh; 19 | padding: 2em; 20 | width: 80%; 21 | margin: auto; 22 | min-width: 320px; 23 | } 24 | 25 | .square { 26 | height: 1.5em; 27 | width: 1.5em; 28 | margin: 0.5em; 29 | animation: rotate infinite 1.5s; 30 | } 31 | 32 | .square1 { 33 | background: red; 34 | } 35 | 36 | .square2 { 37 | background: orange; 38 | } 39 | 40 | .square3 { 41 | background: blue; 42 | } 43 | 44 | @keyframes rotate { 45 | from { 46 | transform: rotate(-45deg); 47 | } 48 | 49 | to { 50 | transform: rotate(45deg); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /05-loading-animation2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /05-loading-animation2/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --color-light: lightgray; 11 | --color-dark: darkgray; 12 | } 13 | 14 | .hide { 15 | border: 0; 16 | clip: rect(0 0 0 0); 17 | height: 1px; 18 | margin: -1px; 19 | overflow: hidden; 20 | padding: 0; 21 | position: absolute; 22 | width: 1px; 23 | } 24 | 25 | .container { 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | height: 100vh; 30 | padding: 2em; 31 | width: 80%; 32 | margin: auto; 33 | min-width: 320px; 34 | } 35 | 36 | .circle { 37 | height: 1.5em; 38 | width: 1.5em; 39 | background: #000; 40 | margin: 0.5em; 41 | border-radius: 50%; 42 | animation: pulse infinite 1s; 43 | } 44 | 45 | @keyframes pulse { 46 | from { 47 | background: var(--color-dark); 48 | } 49 | 50 | to { 51 | background: var(--color-light); 52 | height: 1.6em; 53 | width: 1.6em; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /06-archery-target/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /06-archery-target/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --color-light: lightgray; 11 | --color-dark: darkgray; 12 | } 13 | 14 | .container { 15 | } 16 | 17 | .rings, 18 | .ring { 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | height: 100vh; 23 | } 24 | 25 | .ring { 26 | border-radius: 50%; 27 | } 28 | 29 | .ring-1 { 30 | height: 200px; 31 | width: 200px; 32 | background: black; 33 | } 34 | 35 | .ring-2 { 36 | height: 150px; 37 | width: 150px; 38 | background: blue; 39 | } 40 | 41 | .ring-3 { 42 | height: 100px; 43 | width: 100px; 44 | background: red; 45 | } 46 | 47 | .bullseye { 48 | height: 50px; 49 | width: 50px; 50 | background: yellow; 51 | } 52 | -------------------------------------------------------------------------------- /07-word-carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |

I love

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /07-word-carousel/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --bg-word: #5134ff; 11 | } 12 | 13 | .hide { 14 | border: 0; 15 | clip: rect(0 0 0 0); 16 | height: 1px; 17 | margin: -1px; 18 | overflow: hidden; 19 | padding: 0; 20 | position: absolute; 21 | width: 1px; 22 | } 23 | 24 | .container { 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | height: 100vh; 29 | } 30 | 31 | h1::after { 32 | content: ''; 33 | animation: 6s swap infinite; 34 | background: var(--bg-word); 35 | padding: 10px; 36 | color: white; 37 | margin-left: 4px; 38 | } 39 | 40 | @keyframes swap { 41 | 0% { 42 | content: 'singing'; 43 | } 44 | 25% { 45 | content: 'cats'; 46 | } 47 | 50% { 48 | content: 'coding'; 49 | } 50 | 75% { 51 | content: 'Scrimba'; 52 | } 53 | 100% { 54 | content: 'karaoke'; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /08-flag-of-france/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /08-flag-of-france/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --red: #ed2938; 12 | --white: #ffffff; 13 | --blue: #002495; 14 | --flag-height: 150px; 15 | } 16 | 17 | .hide { 18 | border: 0; 19 | clip: rect(0 0 0 0); 20 | height: 1px; 21 | margin: -1px; 22 | overflow: hidden; 23 | padding: 0; 24 | position: absolute; 25 | width: 1px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | .flag-france { 36 | height: var(--flag-height); 37 | width: calc(var(--flag-height) * 3 / 2); 38 | margin: 2em auto; 39 | /* display: flex; */ 40 | display: grid; 41 | /* grid-template-columns: 1fr 1fr 1fr; */ 42 | grid-template-columns: repeat(3, 1fr); 43 | } 44 | 45 | /* .stripe { 46 | flex-grow: 1; 47 | } */ 48 | 49 | .red { 50 | background: var(--red); 51 | } 52 | 53 | .blue { 54 | background: var(--blue); 55 | } 56 | 57 | .white { 58 | background: var(--white); 59 | } 60 | -------------------------------------------------------------------------------- /09-flag-of-germany/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /09-flag-of-germany/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #ffffff; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --black: #000000; 12 | --red: #de0002; 13 | --yellow: #ffce00; 14 | --flag-height: 150px; 15 | } 16 | 17 | .hide { 18 | border: 0; 19 | clip: rect(0 0 0 0); 20 | height: 1px; 21 | margin: -1px; 22 | overflow: hidden; 23 | padding: 0; 24 | position: absolute; 25 | width: 1px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | .flag-germany { 36 | height: var(--flag-height); 37 | width: calc(var(--flag-height) * 5 / 3); 38 | margin: 30px auto; 39 | /* display: flex; 40 | flex-direction: column; */ 41 | display: grid; 42 | } 43 | 44 | /* .stripe { 45 | flex-grow: 1; 46 | } */ 47 | 48 | .black { 49 | background: var(--black); 50 | } 51 | 52 | .red { 53 | background: var(--red); 54 | } 55 | 56 | .yellow { 57 | background: var(--yellow); 58 | } 59 | -------------------------------------------------------------------------------- /10-flag-of-madagascar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /10-flag-of-madagascar/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --white: #ffffff; 12 | --red: #fc3e32; 13 | --green: #007e39; 14 | --flag-height: 300px; 15 | } 16 | 17 | .hide { 18 | border: 0; 19 | clip: rect(0 0 0 0); 20 | height: 1px; 21 | margin: -1px; 22 | overflow: hidden; 23 | padding: 0; 24 | position: absolute; 25 | width: 1px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | .flag-madagascar { 36 | height: var(--flag-height); 37 | width: calc(var(--flag-height) * 1.5); 38 | margin: 2em auto; 39 | display: flex; 40 | } 41 | 42 | .white { 43 | background: var(--white); 44 | width: calc(var(--flag-height) / 2); 45 | } 46 | 47 | .red { 48 | background: var(--red); 49 | height: calc(var(--flag-height) / 2); 50 | width: var(--flag-height); 51 | } 52 | 53 | .green { 54 | background: var(--green); 55 | height: calc(var(--flag-height) / 2); 56 | width: var(--flag-height); 57 | } 58 | -------------------------------------------------------------------------------- /11-flag-of-switzerland/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /11-flag-of-switzerland/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --white: #ffffff; 12 | --red: #ff0002; 13 | --flag-hw: 200px; 14 | } 15 | 16 | .hide { 17 | border: 0; 18 | clip: rect(0 0 0 0); 19 | height: 1px; 20 | margin: -1px; 21 | overflow: hidden; 22 | padding: 0; 23 | position: absolute; 24 | width: 1px; 25 | } 26 | 27 | .container { 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | height: 100vh; 32 | } 33 | 34 | .flag-swiss { 35 | height: var(--flag-hw); 36 | width: var(--flag-hw); 37 | background: var(--red); 38 | margin: 30px auto; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | position: relative; 43 | } 44 | 45 | .cross1 { 46 | height: calc(var(--flag-hw) * 3 / 16); 47 | width: calc(var(--flag-hw) * 5 / 8); 48 | background: var(--white); 49 | } 50 | 51 | .cross2 { 52 | height: calc(var(--flag-hw) * 5 / 8); 53 | width: calc(var(--flag-hw) * 3 / 16); 54 | background: var(--white); 55 | position: absolute; 56 | } 57 | -------------------------------------------------------------------------------- /12-flag-of-japan/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /12-flag-of-japan/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --white: #ffffff; 12 | --red: #bc022c; 13 | --flag-hw: 400px; 14 | } 15 | 16 | .hide { 17 | border: 0; 18 | clip: rect(0 0 0 0); 19 | height: 1px; 20 | margin: -1px; 21 | overflow: hidden; 22 | padding: 0; 23 | position: absolute; 24 | width: 1px; 25 | } 26 | 27 | .container { 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | height: 100vh; 32 | } 33 | 34 | .flag-japan { 35 | height: var(--flag-hw); 36 | width: calc(var(--flag-hw) * 1.5); 37 | background: var(--white); 38 | margin: 30px auto; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | 44 | .circle { 45 | height: calc(var(--flag-hw) * 3 / 5); 46 | width: calc(var(--flag-hw) * 3 / 5); 47 | background: var(--red); 48 | border-radius: 50%; 49 | } 50 | -------------------------------------------------------------------------------- /13-flag-of-sweden/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /13-flag-of-sweden/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --blue: #0269a6; 12 | --yellow: #fecc00; 13 | --flag-height: 300px; 14 | --flag-width: calc(var(--flag-height) * 8 / 5); 15 | } 16 | 17 | .hide { 18 | border: 0; 19 | clip: rect(0 0 0 0); 20 | height: 1px; 21 | margin: -1px; 22 | overflow: hidden; 23 | padding: 0; 24 | position: absolute; 25 | width: 1px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | .flag-sweden { 36 | height: var(--flag-height); 37 | width: var(--flag-width); 38 | background: var(--blue); 39 | display: flex; 40 | margin: 2em auto; 41 | position: relative; 42 | } 43 | 44 | .stripe { 45 | background: var(--yellow); 46 | height: calc(var(--flag-height) * 1 / 5); 47 | } 48 | 49 | .cross1 { 50 | align-self: center; 51 | width: 100%; 52 | } 53 | 54 | .cross2 { 55 | width: var(--flag-height); 56 | position: absolute; 57 | transform: rotate(90deg); 58 | top: calc(var(--flag-height) * 4 / 10); 59 | right: calc(var(--flag-width) * 5 / 16); 60 | } 61 | -------------------------------------------------------------------------------- /14-flag-of-niger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /14-flag-of-niger/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | background: #000000; 7 | } 8 | 9 | :root { 10 | --font-family: 'Karla', sans-serif; 11 | --orange: #e15307; 12 | --white: #ffffff; 13 | --green: #10af2a; 14 | --flag-height: 200px; 15 | } 16 | 17 | .hide { 18 | border: 0; 19 | clip: rect(0 0 0 0); 20 | height: 1px; 21 | margin: -1px; 22 | overflow: hidden; 23 | padding: 0; 24 | position: absolute; 25 | width: 1px; 26 | } 27 | 28 | .container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | height: 100vh; 33 | } 34 | 35 | .flag-niger { 36 | height: var(--flag-height); 37 | width: calc(var(--flag-height) * 7 / 6); 38 | margin: 1em auto; 39 | display: grid; 40 | } 41 | 42 | .orange { 43 | background: var(--orange); 44 | } 45 | 46 | .white { 47 | background: var(--white); 48 | position: relative; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | } 53 | 54 | .green { 55 | background: var(--green); 56 | } 57 | 58 | .circle { 59 | background: var(--orange); 60 | height: calc(var(--flag-height) / 3 * 0.85); 61 | width: calc(var(--flag-height) / 3 * 0.85); 62 | border-radius: 50%; 63 | position: absolute; 64 | } 65 | -------------------------------------------------------------------------------- /15-profile-layout/images/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/15-profile-layout/images/image.jpg -------------------------------------------------------------------------------- /15-profile-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |

Scrimton Scrimsby

22 |

scrimsallday3000

23 |

I'm the world's most prolific Fortran dev.

24 | 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /15-profile-layout/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-main: 'Karla', sans-serif; 3 | --main-bg: #000000; 4 | --profile-bg: #0d1117; 5 | --profile-color: #c9d1d9; 6 | --profile-img-border: #2e343b; 7 | --username-font-color: #8b949e; 8 | --username-font-weight: 400; 9 | --btn-bg: #21262d; 10 | --btn-color: #c9d1d9; 11 | --btn-bg-hover: #30363d; 12 | --btn-border: #373b43; 13 | --btn-border-hover: #8c949e; 14 | } 15 | 16 | html, 17 | body { 18 | margin: 0; 19 | padding: 0; 20 | font-family: var(--font-main); 21 | color: #ffffff; 22 | background: #000000; 23 | } 24 | 25 | button { 26 | cursor: pointer; 27 | } 28 | 29 | .profile-container { 30 | width: 80%; 31 | min-width: 250px; 32 | max-width: 400px; 33 | margin: 1em auto; 34 | background: var(--profile-bg); 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | height: 100vh; 39 | } 40 | 41 | .profile-content { 42 | padding: 1em 2em; 43 | } 44 | 45 | .profile-content img { 46 | max-width: 100%; 47 | border-radius: 50%; 48 | border: 2px solid var(--profile-img-border); 49 | } 50 | 51 | .profile-details { 52 | padding: 1em 0; 53 | } 54 | 55 | .profile-details h2, 56 | .profile-details h3 { 57 | margin: 0; 58 | } 59 | 60 | .profile-details h3 { 61 | font-size: 1em; 62 | color: var(--username-font-color); 63 | font-weight: var(--username-font-weight); 64 | } 65 | 66 | .profile-details button { 67 | width: 100%; 68 | background-color: var(--btn-bg); 69 | color: var(--btn-color); 70 | border-radius: 6px; 71 | border: 1px solid var(--btn-border); 72 | padding: 0.25em 0; 73 | font-family: inherit; 74 | } 75 | 76 | .profile-details button:hover { 77 | background-color: var(--btn-bg-hover); 78 | border: 1px solid var(--btn-border-hover); 79 | } 80 | -------------------------------------------------------------------------------- /16-toggle-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /16-toggle-switch/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --body-bg: #af95d7; 4 | --toggle-switch-bg: #232428; 5 | --toggle-border: #232428; 6 | --toggle-bg: #ffffff; 7 | } 8 | 9 | html, 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | background-color: var(--body-bg); 14 | font-family: var(--font-family); 15 | } 16 | 17 | .toggle-wrap { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | height: 100vh; 22 | } 23 | 24 | .toggle-input { 25 | display: none; 26 | } 27 | 28 | label { 29 | width: 100px; 30 | height: 40px; 31 | border: 3px solid var(--toggle-border); 32 | border-radius: 40px; 33 | padding: 0.25em; 34 | background: var(--toggle-bg); 35 | } 36 | 37 | .toggle-switch { 38 | height: 40px; 39 | width: 40px; 40 | background: var(--toggle-switch-bg); 41 | border-radius: 50%; 42 | transition: all 0.5s; 43 | } 44 | 45 | .toggle-input:checked ~ .toggle-switch { 46 | transform: translateX(calc(100px - 40px)); 47 | } 48 | -------------------------------------------------------------------------------- /17-playing-card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
A
21 |
♠
22 |
23 |
♠
24 |
25 |
A
26 |
♠
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /17-playing-card/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --body-bg: #af95d7; 4 | --toggle-switch-bg: #232428; 5 | --toggle-border: #232428; 6 | --toggle-bg: #ffffff; 7 | --card-height: 200px; 8 | } 9 | 10 | html, 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | background-color: var(--body-bg); 15 | font-family: var(--font-family); 16 | } 17 | 18 | .container { 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | height: 100vh; 23 | } 24 | 25 | .card { 26 | border: 1px solid #000000; 27 | height: var(--card-height); 28 | width: calc(var(--card-height) * 2 / 3); 29 | border-radius: 5px; 30 | display: grid; 31 | background: var(--toggle-bg); 32 | padding: 0.5em; 33 | } 34 | 35 | .top > div:first-child, 36 | .bottom > div:first-child { 37 | padding-left: 2px; 38 | } 39 | 40 | .center { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | font-size: 3em; 45 | } 46 | 47 | .bottom { 48 | transform: rotate(180deg); 49 | } 50 | -------------------------------------------------------------------------------- /18-playing-card2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
4
21 |
♥
22 |
23 |
24 |
♥
25 |
♥
26 |
♥
27 |
♥
28 |
29 |
30 |
4
31 |
♥
32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /18-playing-card2/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --body-bg: #af95d7; 4 | --toggle-switch-bg: #232428; 5 | --toggle-border: #232428; 6 | --toggle-bg: #ffffff; 7 | --card-height: 200px; 8 | } 9 | 10 | html, 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | background-color: var(--body-bg); 15 | font-family: var(--font-family); 16 | } 17 | 18 | .container { 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | height: 100vh; 23 | } 24 | 25 | .card { 26 | border: 1px solid #000000; 27 | height: var(--card-height); 28 | width: calc(var(--card-height) * 2 / 3); 29 | border-radius: 5px; 30 | display: grid; 31 | grid-template-columns: 10% 80% 10%; 32 | color: red; 33 | background: var(--toggle-bg); 34 | padding: 0.25em; 35 | font-size: 1.25em; 36 | } 37 | 38 | .left > div:first-child, 39 | .right > div:first-child { 40 | padding-left: 2px; 41 | } 42 | 43 | .middle { 44 | display: grid; 45 | grid-template-columns: 50% 50%; 46 | align-items: center; 47 | text-align: center; 48 | font-size: 2em; 49 | } 50 | 51 | .right { 52 | transform: rotate(180deg); 53 | } 54 | 55 | .middle :nth-child(3), 56 | .middle :nth-child(4) { 57 | transform: scaleY(-1); 58 | } 59 | -------------------------------------------------------------------------------- /19-progress-bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /19-progress-bar/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --stage-1: 25%; 4 | --stage-2: 50%; 5 | --stage-3: 75%; 6 | --stage-4: 100%; 7 | --progbar-bg: lightgray; 8 | --stage-1-bg: red; 9 | --stage-2-bg: orangered; 10 | --stage-3-bg: greenyellow; 11 | --stage-4-bg: green; 12 | } 13 | 14 | html, 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | font-family: var(--font-family); 19 | } 20 | 21 | .container { 22 | width: 80%; 23 | margin: 60px auto; 24 | } 25 | 26 | .progress-bar { 27 | height: 40px; 28 | background: var(--progbar-bg); 29 | border-radius: 20px; 30 | } 31 | 32 | .prog-status { 33 | height: 40px; 34 | border-radius: 20px; 35 | } 36 | 37 | .stage-1 { 38 | width: var(--stage-1); 39 | background: var(--stage-1-bg); 40 | } 41 | 42 | .stage-2 { 43 | width: var(--stage-2); 44 | background: var(--stage-2-bg); 45 | } 46 | 47 | .stage-3 { 48 | width: var(--stage-3); 49 | background: var(--stage-3-bg); 50 | } 51 | 52 | .stage-4 { 53 | width: var(--stage-4); 54 | background: var(--stage-4-bg); 55 | } 56 | -------------------------------------------------------------------------------- /20-flashcard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |

20 | This now deprecated HTML tag, popular in the early days of the 21 | internet, magically made text scroll across the screen 22 |

23 |
24 |
25 |

What is the marquee tag

26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /20-flashcard/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --jeopardy-blue: #060ce6; 4 | --font-color-main: #ffffff; 5 | } 6 | 7 | html, 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | font-family: var(--font-family); 12 | display: flex; 13 | justify-content: center; 14 | } 15 | 16 | p, 17 | h3 { 18 | margin: 0; 19 | padding: 0; 20 | } 21 | 22 | .card { 23 | height: 200px; 24 | width: 350px; 25 | background: var(--jeopardy-blue); 26 | color: var(--font-color-main); 27 | margin: 2em; 28 | padding: 2em; 29 | border-radius: 10px; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | text-align: center; 34 | text-transform: uppercase; 35 | transition: transform 0.6s; 36 | transform-style: preserve-3d; 37 | } 38 | 39 | .card:hover { 40 | transform: rotateY(180deg); 41 | } 42 | 43 | .card-back { 44 | display: none; 45 | } 46 | 47 | .card:hover .card-front { 48 | display: none; 49 | } 50 | 51 | .card:hover .card-back { 52 | display: block; 53 | transform: rotateY(180deg); 54 | } 55 | 56 | .card-front, 57 | .card-back { 58 | backface-visibility: hidden; 59 | } 60 | -------------------------------------------------------------------------------- /21-loading-animation3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /21-loading-animation3/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: var(--font-family); 6 | } 7 | 8 | :root { 9 | --font-family: 'Karla', sans-serif; 10 | --spinner: #f3f3f3; 11 | --spinner-active: purple; 12 | } 13 | 14 | .hide { 15 | border: 0; 16 | clip: rect(0 0 0 0); 17 | height: 1px; 18 | margin: -1px; 19 | overflow: hidden; 20 | padding: 0; 21 | position: absolute; 22 | width: 1px; 23 | } 24 | 25 | .container { 26 | height: 100vh; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .loader { 33 | height: 100px; 34 | width: 100px; 35 | border: 1em solid var(--spinner); 36 | border-radius: 50%; 37 | border-top: 1em solid var(--spinner-active); 38 | animation: spin 1.5s linear infinite; 39 | } 40 | 41 | @keyframes spin { 42 | 100% { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /22-stories-menu/images/image-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/22-stories-menu/images/image-01.jpg -------------------------------------------------------------------------------- /22-stories-menu/images/image-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/22-stories-menu/images/image-02.jpg -------------------------------------------------------------------------------- /22-stories-menu/images/image-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ViktorSvertoka/24-css-projects/9b79f37dbc52d2bcb7a666cbdd520da48e1d6f60/22-stories-menu/images/image-03.jpg -------------------------------------------------------------------------------- /22-stories-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /22-stories-menu/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --font-color: #ffffff; 4 | --grad1: #feda75; 5 | --grad2: #fa7e1e; 6 | --grad3: #d62976; 7 | --grad4: #962fbf; 8 | --grad5: #4f5bd5; 9 | --viewed: gray; 10 | --bg-main: #000000; 11 | --bg-live: red; 12 | } 13 | 14 | html, 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | font-family: var(--font-family); 19 | background: var(--bg-main); 20 | color: var(--font-color); 21 | } 22 | 23 | p { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | ul { 29 | padding-left: 0; 30 | } 31 | 32 | ul li { 33 | list-style-type: none; 34 | } 35 | 36 | .container { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | height: 100vh; 41 | } 42 | 43 | .stories-menu { 44 | display: flex; 45 | justify-content: space-around; 46 | max-width: 320px; 47 | gap: 30px; 48 | } 49 | 50 | .story { 51 | display: flex; 52 | flex-direction: column; 53 | text-align: center; 54 | position: relative; 55 | } 56 | 57 | .new > .img-wrapper { 58 | background: linear-gradient( 59 | to top right, 60 | var(--grad1), 61 | var(--grad2), 62 | var(--grad3), 63 | var(--grad4), 64 | var(--grad5) 65 | ); 66 | } 67 | 68 | .viewed > .img-wrapper { 69 | background: var(--viewed); 70 | } 71 | 72 | .img-wrapper { 73 | height: 60px; 74 | width: 60px; 75 | padding: 4px; 76 | background: white; 77 | border-radius: 50%; 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | align-self: center; 82 | margin-bottom: 10px; 83 | } 84 | 85 | .img { 86 | height: 100%; 87 | border-radius: 50%; 88 | border: 2px solid black; 89 | } 90 | 91 | .live::after { 92 | content: 'LIVE'; 93 | font-size: 0.5em; 94 | font-weight: bold; 95 | background: var(--bg-live); 96 | border: 2px solid black; 97 | border-radius: 2px; 98 | width: 20px; 99 | padding: 2px 4px; 100 | position: absolute; 101 | top: 60%; 102 | margin: auto; 103 | left: 0; 104 | right: 0; 105 | } 106 | -------------------------------------------------------------------------------- /23-progress-bar2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /23-progress-bar2/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --stage-1: 25%; 4 | --stage-2: 50%; 5 | --stage-3: 75%; 6 | --stage-4: 100%; 7 | --progressbar-bg: lightgray; 8 | --start: red; 9 | --middle: blue; 10 | --finish: green; 11 | } 12 | 13 | html, 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font-family: var(--font-family); 18 | } 19 | 20 | .container { 21 | width: 80%; 22 | margin: 60px auto; 23 | } 24 | 25 | .progress-bar { 26 | height: 40px; 27 | background: var(--progressbar-bg); 28 | border-radius: 20px; 29 | } 30 | 31 | .progress-status { 32 | width: 10%; 33 | height: 40px; 34 | background: var(--start); 35 | animation: 6s showprogress infinite; 36 | } 37 | 38 | @keyframes showprogress { 39 | 50% { 40 | width: 50%; 41 | background: var(--middle); 42 | } 43 | 44 | 100% { 45 | width: 100%; 46 | background: var(--finish); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /24-github-graph/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 CSS Projects 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /24-github-graph/script.js: -------------------------------------------------------------------------------- 1 | function generateRandomContributionStats() { 2 | const contributions = []; 3 | const levels = [0, 3, 5, 10]; 4 | 5 | // For each week of the year (52 weeks) 6 | for (let i = 0; i < 52; i++) { 7 | const week = []; 8 | // Make 7 squares and randomly assign levels 9 | for (let j = 0; j < 7; j++) { 10 | week.push(levels[Math.floor(Math.random() * levels.length)]); 11 | } 12 | contributions.push(week); 13 | } 14 | return contributions; 15 | } 16 | 17 | function makeGraph() { 18 | const graph = document.querySelector('.graph'); 19 | const contributions = generateRandomContributionStats(); 20 | 21 | contributions.forEach((week, weekIndex) => { 22 | // Create a container for each week 23 | const graphWeek = document.createElement('ul'); 24 | graphWeek.classList.add(`week-${weekIndex + 1}`); 25 | 26 | week.forEach(level => { 27 | // Create a square for each contribution level 28 | const square = document.createElement('li'); 29 | square.classList.add('square'); 30 | square.setAttribute('data-value', level); 31 | graphWeek.appendChild(square); 32 | }); 33 | 34 | graph.appendChild(graphWeek); 35 | }); 36 | } 37 | 38 | // Call makeGraph on page load 39 | document.addEventListener('DOMContentLoaded', makeGraph); 40 | -------------------------------------------------------------------------------- /24-github-graph/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family: 'Karla', sans-serif; 3 | --graph-bg: #000000; 4 | --default-square-bg: #161b22; 5 | --level3: darkblue; 6 | --level5: blue; 7 | --level10: lightskyblue; 8 | } 9 | 10 | html, 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | font-family: var(--font-family); 15 | background: #000000; 16 | } 17 | 18 | ul { 19 | padding-left: 0; 20 | list-style-type: none; 21 | } 22 | 23 | .container { 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | height: 100vh; 28 | } 29 | 30 | .graph { 31 | display: grid; 32 | grid-template-columns: repeat(52, 1fr); 33 | background: var(--graph-bg); 34 | padding: 1em; 35 | } 36 | 37 | .square { 38 | height: 10px; 39 | width: 10px; 40 | background: var(--default-square-bg); 41 | margin: 3px; 42 | margin-right: 0; 43 | border-radius: 2px; 44 | } 45 | 46 | [data-value='3'] { 47 | background: var(--level3); 48 | } 49 | 50 | [data-value='5'] { 51 | background: var(--level5); 52 | } 53 | 54 | [data-value='10'] { 55 | background: var(--level10); 56 | } 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 24 CSS Projects: Loading Animations, Progress Bars, Flashcards & More! 2 | --------------------------------------------------------------------------------