├── .gitignore ├── 05-row-column ├── index.html └── styles.css ├── 06-grid-lines ├── index.html └── styles.css ├── 07-grid-areas ├── index.html └── styles.css ├── 09-grid-gap ├── index.html └── styles.css ├── 11-fr ├── index.html └── styles.css ├── 12-dynamic-sizes ├── index.html └── styles.css ├── 13-responsive-design ├── index.html └── styles.css ├── 14-auto-row-columns ├── index.html └── styles.css ├── 15-auto-flow ├── index.html └── styles.css ├── 16-aligning ├── index.html └── styles.css ├── README.md ├── calendar ├── css │ ├── button.css │ ├── calendar-day.css │ ├── calendar-status.css │ ├── calendar.css │ ├── create-task.css │ ├── current-time.css │ ├── global.css │ ├── header.css │ ├── hour-cell.css │ ├── icons.css │ ├── index.css │ ├── input.css │ ├── mini-calendar.css │ ├── modal.css │ ├── page.css │ ├── select.css │ ├── sidebar.css │ ├── task-cell.css │ ├── task.css │ └── timezone-cell.css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── icons │ ├── calendar.svg │ ├── check-square.svg │ ├── check.svg │ ├── chevron-down.svg │ ├── chevron-left.svg │ ├── chevron-right.svg │ ├── chevron-up.svg │ ├── clock.svg │ ├── close.svg │ ├── gps.svg │ ├── hamburguer-button.svg │ ├── help-circle.svg │ ├── plus.svg │ ├── search.svg │ ├── settings.svg │ ├── text.svg │ ├── users.svg │ └── video.svg ├── image │ ├── logo.png │ └── user.png ├── index.html └── js │ ├── app.js │ ├── current-time.js │ └── task.js ├── css-grd-layout.png ├── layouts ├── 17-aprender │ ├── index.html │ └── styles.css ├── 18-figma │ ├── index.html │ └── styles.css ├── 20-homer-website │ ├── images.zip │ ├── images │ │ ├── boca.gif │ │ ├── campana.gif │ │ ├── dios.gif │ │ ├── gusano.gif │ │ ├── reloj.gif │ │ └── tostadora.gif │ ├── index.html │ └── styles.css ├── 21-instagram │ ├── index.html │ └── styles.css ├── 22-mercado-libre │ ├── index.html │ └── styles.css ├── 23-pinterest │ ├── index.html │ └── styles.css └── 24-faster │ ├── index.html │ └── styles.css └── spotifu ├── .DS_Store ├── README.md ├── css ├── body.css ├── button-icon.css ├── ellipsis.css ├── flexbox │ ├── align-items.css │ ├── display-flex.css │ ├── flex-direction.css │ ├── flex-order.css │ ├── flex-wrap.css │ ├── flex.css │ ├── index.css │ └── justify-content.css ├── fonts.css ├── header.css ├── icons.css ├── index.css ├── layout.css ├── link.css ├── list.css ├── logo.css ├── menu-item.css ├── menu.css ├── navigation.css ├── now-playing.css ├── page.css ├── player-controls.css ├── player-playback.css ├── player-volume.css ├── player.css ├── playlist-a.css ├── playlist-b.css ├── playlist-list.css ├── scrollbar.css ├── search.css ├── sidebar.css ├── slider.css └── sticky.css ├── flexbox.html ├── fonts ├── AvenirLTStd-Black.otf ├── AvenirLTStd-Book.otf ├── AvenirLTStd-Roman.otf ├── icomoon.eot ├── icomoon.svg ├── icomoon.ttf └── icomoon.woff ├── icons ├── Play.svg ├── add-plus.svg ├── arrow-left.svg ├── arrow-right.svg ├── calendar.svg ├── clock.svg ├── close.svg ├── credit-card.svg ├── download.svg ├── heart.svg ├── home-active.svg ├── home.svg ├── library-active.svg ├── library.svg ├── music.svg ├── next.svg ├── pause.svg ├── prev.svg ├── round.svg ├── search-active.svg ├── search.svg ├── volume-down.svg ├── volume-off.svg └── volume-up.svg ├── images ├── anime-hits.png ├── grand-escape.jpg ├── grand-scape.png └── spotifu-logo.png └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | preview/ 3 | -------------------------------------------------------------------------------- /05-row-column/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Column and Rows 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /05-row-column/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: 200px 100px 300px 200px 200px; 4 | grid-template-rows: 200px 100px; 5 | } 6 | 7 | .item { 8 | border: 5px solid red; 9 | counter-increment: item; 10 | } 11 | 12 | .item::before { 13 | content: counter(item); 14 | } 15 | -------------------------------------------------------------------------------- /06-grid-lines/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Lines 9 | 10 | 11 |
12 |
header
13 |
sidebar
14 |
main
15 |
16 | 17 | -------------------------------------------------------------------------------- /06-grid-lines/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: [inline-start] 200px [inline-2] 500px [inline-end]; 4 | grid-template-rows: 100px 600px; 5 | } 6 | 7 | .item { 8 | border: 5px solid red; 9 | counter-increment: item; 10 | } 11 | 12 | .item::before { 13 | content: counter(item); 14 | } 15 | 16 | .item:nth-of-type(4) { 17 | border-color: blue; 18 | /* grid-column: 1 / 1; */ 19 | grid-column-start: 1; 20 | grid-column-start: inline-start; 21 | grid-column-end: inline-end; 22 | grid-column-end: -1; 23 | 24 | grid-row-start: 1; 25 | grid-row-end: 6; 26 | } 27 | 28 | 29 | .item:nth-of-type(1) { 30 | grid-column-start: 1; 31 | grid-column-end: -1; 32 | grid-column: 1 / inline-end; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /07-grid-areas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid áreas 9 | 10 | 11 |
12 |
header
13 |
sidebar
14 |
main
15 |
16 | 17 | -------------------------------------------------------------------------------- /07-grid-areas/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: [inline-start] 200px [inline-2] 700px [inline-end]; 4 | grid-template-rows: [block-start] 100px [block-2] 600px [block-end]; 5 | grid-template-areas: "header header" "sidebar main"; 6 | } 7 | 8 | .item { 9 | border: 5px solid red; 10 | counter-increment: item; 11 | } 12 | 13 | .item::before { 14 | content: counter(item); 15 | } 16 | 17 | 18 | 19 | .item:nth-of-type(1) { 20 | grid-area: header; 21 | /* grid-column-start: 1; 22 | grid-column-end: -1; 23 | grid-column: 1 / inline-end; */ 24 | } 25 | 26 | .item:nth-of-type(2) { 27 | grid-area: sidebar; 28 | 29 | border-color: blue; 30 | } 31 | .item:nth-of-type(3) { 32 | grid-area: main; 33 | 34 | border-color: green; 35 | } 36 | 37 | -------------------------------------------------------------------------------- /09-grid-gap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid áreas 9 | 10 | 11 |
12 |
header
13 |
sidebar
14 |
main
15 |
footer
16 |
17 | 18 | -------------------------------------------------------------------------------- /09-grid-gap/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: [inline-start] 200px [inline-2] 700px [inline-end]; 4 | grid-template-rows: [block-start] 100px [block-2] 600px 200px [block-end]; 5 | grid-template-areas: "header header" "sidebar main" "footer footer"; 6 | gap: 40px; 7 | row-gap: 10px; 8 | column-gap: 5px; 9 | grid-column-gap: 0px; 10 | } 11 | 12 | .item { 13 | border: 5px solid red; 14 | counter-increment: item; 15 | } 16 | 17 | .item::before { 18 | content: counter(item); 19 | } 20 | 21 | 22 | 23 | .item:nth-of-type(1) { 24 | grid-area: header; 25 | margin-block-end: 10px; 26 | /* grid-column-start: 1; 27 | grid-column-end: -1; 28 | grid-column: 1 / inline-end; */ 29 | } 30 | 31 | .item:nth-of-type(2) { 32 | grid-area: sidebar; 33 | 34 | border-color: blue; 35 | } 36 | .item:nth-of-type(3) { 37 | grid-area: main; 38 | 39 | border-color: green; 40 | } 41 | 42 | 43 | .item:nth-of-type(4) { 44 | grid-area: footer; 45 | margin-block-start: 50px; 46 | } 47 | -------------------------------------------------------------------------------- /11-fr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fracciones 9 | 10 | 11 |
12 |
header
13 |
sidebar
14 |
main
15 |
footer
16 |
17 | 18 | -------------------------------------------------------------------------------- /11-fr/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 10px solid black; 3 | display: grid; 4 | grid-template-columns: [inline-start] 1fr [inline-2] 3fr [inline-end]; 5 | grid-template-rows: [block-start] 1fr [block-2] 200px 100px [block-end]; 6 | grid-template-areas: "header header" "sidebar main" "footer footer"; 7 | gap: 40px; 8 | row-gap: 10px; 9 | column-gap: 5px; 10 | grid-column-gap: 0px; 11 | block-size: 100vh; 12 | } 13 | 14 | .item { 15 | border: 5px solid red; 16 | counter-increment: item; 17 | } 18 | 19 | .item::before { 20 | content: counter(item); 21 | } 22 | 23 | 24 | 25 | .item:nth-of-type(1) { 26 | grid-area: header; 27 | margin-block-end: 10px; 28 | /* grid-column-start: 1; 29 | grid-column-end: -1; 30 | grid-column: 1 / inline-end; */ 31 | } 32 | 33 | .item:nth-of-type(2) { 34 | grid-area: sidebar; 35 | 36 | border-color: blue; 37 | } 38 | .item:nth-of-type(3) { 39 | grid-area: main; 40 | 41 | border-color: green; 42 | } 43 | 44 | 45 | .item:nth-of-type(4) { 46 | grid-area: footer; 47 | margin-block-start: 50px; 48 | } 49 | -------------------------------------------------------------------------------- /12-dynamic-sizes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tamaños dinamicos 9 | 10 | 11 |
12 |
bonito header
13 |
lindo sidebar
14 |
main sabdjash sadas asdas
15 |
16 | 17 | -------------------------------------------------------------------------------- /12-dynamic-sizes/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | border: 10px solid black; 3 | display: grid; 4 | grid-template-columns: 1fr 1fr 1fr; 5 | grid-template-rows: [block-start] 1fr [block-2] 200px 100px [block-end]; 6 | gap: 2rem; 7 | } 8 | 9 | .item { 10 | border: 5px solid red; 11 | counter-increment: item; 12 | } 13 | 14 | .item::before { 15 | content: counter(item); 16 | } 17 | 18 | 19 | 20 | .item:nth-of-type(1) { 21 | 22 | } 23 | 24 | .item:nth-of-type(2) { 25 | padding: 2rem; 26 | margin: 20px; 27 | /* padding: 1rem; 28 | margin: 1rem; */ 29 | } 30 | .item:nth-of-type(3) { 31 | 32 | } 33 | 34 | 35 | .item:nth-of-type(4) { 36 | 37 | } 38 | -------------------------------------------------------------------------------- /13-responsive-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responsive Design 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /13-responsive-design/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 4 | grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)); 5 | gap: 2rem; 6 | block-size: 100vh; 7 | max-inline-size: 1024px; 8 | margin: auto; 9 | } 10 | 11 | .item { 12 | border: 5px solid red; 13 | counter-increment: item; 14 | } 15 | 16 | .item::before { 17 | content: counter(item); 18 | } 19 | 20 | 21 | -------------------------------------------------------------------------------- /14-auto-row-columns/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid auto rows/columns 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /14-auto-row-columns/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | /* grid-auto-columns: minmax(200px, 1fr); */ 4 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 5 | /* grid-template-rows: repeat(auto-fill, 200px); */ 6 | grid-auto-rows: 200px; 7 | gap: 2rem; 8 | block-size: 100vh; 9 | max-inline-size: 1024px; 10 | margin: auto; 11 | } 12 | 13 | .item { 14 | border: 5px solid red; 15 | counter-increment: item; 16 | } 17 | 18 | .item::before { 19 | content: counter(item); 20 | } 21 | 22 | 23 | -------------------------------------------------------------------------------- /15-auto-flow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid auto flow 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /15-auto-flow/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | /* grid-auto-columns: minmax(200px, 1fr); */ 4 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 5 | grid-template-rows: repeat(auto-fill, 200px); 6 | /* grid-auto-rows: 200px; */ 7 | gap: 2rem; 8 | block-size: 100vh; 9 | max-inline-size: 1024px; 10 | margin: auto; 11 | grid-auto-flow: row; 12 | /* grid-auto-flow: column dense; */ 13 | } 14 | 15 | .item { 16 | border: 5px solid red; 17 | counter-increment: item; 18 | font-size: 3rem; 19 | font-family: arial; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .item::before { 26 | content: counter(item); 27 | } 28 | 29 | .item:nth-child(4) { 30 | border-color: purple; 31 | grid-row-start: 1; 32 | grid-column-start: 2; 33 | /* grid-column-end: span 2; */ 34 | grid-row-end: span 2; 35 | } 36 | 37 | 38 | .item:nth-child(3) { 39 | border-color: green; 40 | grid-row-start: 2; 41 | grid-row-end: 4; 42 | grid-column-end: span 2; 43 | /* grid-column-start: 1; */ 44 | } 45 | 46 | -------------------------------------------------------------------------------- /16-aligning/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Alinging 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /16-aligning/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: grid; 3 | /* grid-auto-columns: minmax(200px, 1fr); */ 4 | /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */ 5 | /* grid-auto-columns: 200px; */ 6 | grid-template-columns: repeat(6, 200px); 7 | grid-auto-rows: 200px; 8 | /* gap: 2rem; */ 9 | block-size: 100vh; 10 | /* max-inline-size: 1024px; */ 11 | margin: auto; 12 | /* grid-auto-flow: column; */ 13 | border: 10px solid brown; 14 | /* grid-auto-flow: column dense; */ 15 | /* writing-mode: vertical-lr; */ 16 | /* align-items: center; */ 17 | /* align-content: center; */ 18 | 19 | /* justify-items: center; */ 20 | /* justify-content: space-evenly; */ 21 | 22 | /* place-items: center; */ 23 | place-content: center space-evenly; 24 | } 25 | 26 | .item { 27 | border: 5px solid red; 28 | counter-increment: item; 29 | font-size: 3rem; 30 | font-family: arial; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | /* align-self: ; */ 35 | /* justify-self: ; */ 36 | /* place-self: ; */ 37 | } 38 | 39 | .item::before { 40 | content: counter(item); 41 | } 42 | 43 | .item:nth-child(4) { 44 | border-color: purple; 45 | /* grid-row-start: 1; 46 | grid-column-start: 2; */ 47 | /* grid-column-end: span 2; */ 48 | /* grid-row-end: span 2; */ 49 | } 50 | 51 | 52 | .item:nth-child(3) { 53 | /* align-self: center; 54 | justify-self: center; */ 55 | place-self: center; 56 | border-color: green; 57 | /* grid-row-start: 2; 58 | grid-row-end: 4; 59 | grid-column-end: span 2; */ 60 | /* grid-column-start: 1; */ 61 | } 62 | 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Curso de CSS Grid Layout e Interfaces 2 | 3 | Crea la interfaz de Google Calendar usando CSS Grid Layout 4 |

5 | 6 | Ir al curso 7 | 8 |

9 | 10 | 11 | Curso de CSS Grid Layout e Interfaces 12 | 13 | -------------------------------------------------------------------------------- /calendar/css/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | border: 1px solid transparent; 3 | padding-inline: 1rem; 4 | padding-block: .5rem; 5 | display: inline-block; 6 | font: var(--button-button); 7 | text-decoration: none; 8 | cursor: pointer; 9 | color: currentColor; 10 | background: transparent; 11 | border-radius: .25rem; 12 | outline: none; 13 | } 14 | 15 | .button:active { 16 | transform: scale(.9); 17 | } 18 | 19 | .button.is-primary { 20 | background: var(--blue10); 21 | color: var(--white); 22 | } 23 | 24 | .button.is-secondary { 25 | border: 1px solid var(--gray20); 26 | } 27 | 28 | .button.is-primary:hover, 29 | .button.is-primary:focus { 30 | background: var(--blue30); 31 | } 32 | .button:hover, 33 | .button:focus, 34 | .button.is-secondary:hover, 35 | .button.is-secondary:focus, 36 | .button.is-rounded:focus, 37 | .button.is-secondary:hover, 38 | .button.is-compact:hover, 39 | .button.is-compact:focus { 40 | background: var(--gray10); 41 | } 42 | 43 | 44 | 45 | .button.is-rounded { 46 | border-radius: 1.25rem; 47 | color: var(--blue10); 48 | } 49 | 50 | .button.is-compact { 51 | border-radius: 50%; 52 | padding: .5rem; 53 | } 54 | 55 | .button i { 56 | font-size: 1.5rem; 57 | color: var(--gray50); 58 | } 59 | .button i, .button span { 60 | vertical-align: middle; 61 | } 62 | 63 | .button.is-shadowed { 64 | box-shadow: 1.0719px 30.9815px 92px rgba(0, 0, 0, 0.0274815), 0.412881px 11.9336px 29.3037px rgba(0, 0, 0, 0.0425185), 0.0873403px 2.52442px 7.4963px rgba(0, 0, 0, 0.07); 65 | } 66 | -------------------------------------------------------------------------------- /calendar/css/calendar-day.css: -------------------------------------------------------------------------------- 1 | .calendarDay { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | text-align: center; 6 | margin: 0; 7 | position: sticky; 8 | inset-block-start: 0; 9 | background: var(--white); 10 | border-block-end: 1px solid currentColor; 11 | } 12 | 13 | .calendarDay a { 14 | text-decoration: none; 15 | color: currentColor; 16 | outline: none; 17 | } 18 | 19 | .calendarDay a:hover span:nth-of-type(2), 20 | .calendarDay a:focus span:nth-of-type(2) { 21 | background: var(--gray10); 22 | } 23 | 24 | .calendarDay.is-selected a:hover span:nth-of-type(2), 25 | .calendarDay.is-selected a:focus span:nth-of-type(2) { 26 | background: var(--blue30); 27 | } 28 | 29 | 30 | .calendarDay span:nth-of-type(1) { 31 | font: var(--body1-regular); 32 | } 33 | 34 | .calendarDay span:nth-of-type(2) { 35 | font: var(--subtitle-subtitle1); 36 | line-height: 2.75rem; 37 | inline-size: 2.75rem; 38 | display: inline-block; 39 | border-radius: 50%; 40 | } 41 | 42 | .calendarDay::before { 43 | content: ''; 44 | inline-size: 1px; 45 | block-size: 2rem; 46 | background: currentColor; 47 | position: absolute; 48 | inset-block-end: 0; 49 | inset-inline-start: 0; 50 | } 51 | 52 | .calendarDay.is-selected span:nth-of-type(1) { 53 | color: var(--blue10); 54 | } 55 | .calendarDay.is-selected span:nth-of-type(2) { 56 | background: var(--blue10); 57 | color: var(--white); 58 | } -------------------------------------------------------------------------------- /calendar/css/calendar-status.css: -------------------------------------------------------------------------------- 1 | .calendarStatus { 2 | display: inline-flex; 3 | gap: 1.5rem; 4 | align-items: center; 5 | } 6 | 7 | .calendarStatus-date { 8 | font: var(--subtitle-subtitle1); 9 | } -------------------------------------------------------------------------------- /calendar/css/calendar.css: -------------------------------------------------------------------------------- 1 | @import './task.css'; 2 | @import './task-cell.css'; 3 | @import './calendar-day.css'; 4 | @import './timezone-cell.css'; 5 | @import './hour-cell.css'; 6 | @import './current-time.css'; 7 | 8 | .calendar { 9 | color: var(--gray20); 10 | padding-inline: 1.5rem; 11 | --minBlockSize: 4rem; 12 | --maxBlockSize: auto; 13 | --minInlineSize: 5rem; 14 | --maxInlineSize: 1fr; 15 | position: relative; 16 | } 17 | 18 | .calendar-week { 19 | display: grid; 20 | grid-template-columns: auto repeat(7, minmax(var(--minInlineSize), var(--maxInlineSize))); 21 | grid-template-rows: 7rem repeat(24, minmax(var(--minBlockSize), var(--maxBlockSize))); 22 | min-block-size: 700px; 23 | } 24 | 25 | .calendar-day { 26 | 27 | } -------------------------------------------------------------------------------- /calendar/css/create-task.css: -------------------------------------------------------------------------------- 1 | .createTask { 2 | display: flex; 3 | flex-direction: column; 4 | gap: 1.5rem; 5 | } -------------------------------------------------------------------------------- /calendar/css/current-time.css: -------------------------------------------------------------------------------- 1 | .currentTime { 2 | block-size: 2px; 3 | background: var(--red10); 4 | inline-size: 5rem; 5 | position: absolute; 6 | inset-inline-start: 160px; 7 | inset-block-start: 190px; 8 | z-index: 2; 9 | } 10 | 11 | .currentTime::before { 12 | content: ""; 13 | display: block; 14 | inline-size: 1rem; 15 | block-size: 1rem; 16 | background: var(--red10); 17 | border-radius: 50%; 18 | transform: translateY(-50%); 19 | } -------------------------------------------------------------------------------- /calendar/css/global.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --white: #fffffe; 4 | --gray50: #222222; 5 | --gray20: #70757a; 6 | --gray10: #f1f3f4; 7 | --gray30: #3c4043; 8 | --blue10: #1a73e8; 9 | --blue20: #039be5; 10 | --red10: #e8453c; 11 | --green10: #33b679; 12 | --blue30: #1967d2; 13 | --body1-regular: 400 0.875rem/1.25rem Roboto; 14 | --body1-medium: 500 0.875rem/1.25rem Roboto; 15 | --body3-medium: 500 0.625rem/0.5rem Roboto; 16 | --body3-regular: 400 0.625rem/0.5rem Roboto; 17 | --body2-regular: 400 0.75rem/1rem Roboto; 18 | --body2-medium: 500 0.75rem/1rem Roboto; 19 | --button-button: 500 0.875rem/1rem Roboto; 20 | --subtitle-subtitle1: 400 1.375rem/1.75rem Roboto; 21 | } 22 | 23 | body { 24 | font: var(--body1-regular); 25 | margin: 0; 26 | color: var(--gray50); 27 | background: var(--white); 28 | } 29 | @media screen and (prefers-color-scheme: dark) { 30 | :root { 31 | --gray50: #fffffe; 32 | --gray20: #c1c1c1; 33 | --white: #222222; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /calendar/css/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding-inline: 1.5rem; 6 | border-block-end: 1px solid var(--gray10); 7 | } 8 | .header-logo { 9 | display: flex; 10 | align-items: center; 11 | gap: .5rem; 12 | } 13 | .header-primary { 14 | display: flex; 15 | align-items: center; 16 | gap: 3rem; 17 | } 18 | 19 | .header-secondary { 20 | display: flex; 21 | align-items: center; 22 | gap: 3rem; 23 | } -------------------------------------------------------------------------------- /calendar/css/hour-cell.css: -------------------------------------------------------------------------------- 1 | .hourCell { 2 | /* border: 1px solid red; */ 3 | /* position: relative; 4 | top: -10px; */ 5 | place-self: start end; 6 | /* justify-self: end; 7 | align-self: start; */ 8 | font: var(--body3-regular); 9 | transform: translateY(-50%); 10 | padding-inline-end: 1rem; 11 | position: relative; 12 | } 13 | 14 | .hourCell::before { 15 | content: ""; 16 | inline-size: .5rem; 17 | block-size: 1px; 18 | background: currentColor; 19 | position: absolute; 20 | inset-inline-end: 0; 21 | inset-block-end: 50%; 22 | } -------------------------------------------------------------------------------- /calendar/css/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('../fonts/icomoon.eot?uavful'); 4 | src: url('../fonts/icomoon.eot?uavful#iefix') format('embedded-opentype'), 5 | url('../fonts/icomoon.ttf?uavful') format('truetype'), 6 | url('../fonts/icomoon.woff?uavful') format('woff'), 7 | url('../fonts/icomoon.svg?uavful#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | font-display: block; 11 | } 12 | 13 | [class^="icon-"], [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: 'icomoon' !important; 16 | speak: never; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-calendar:before { 29 | content: "\e900"; 30 | } 31 | .icon-checkSquare:before { 32 | content: "\e901"; 33 | } 34 | .icon-check:before { 35 | content: "\e902"; 36 | } 37 | .icon-chevronDown:before { 38 | content: "\e903"; 39 | } 40 | .icon-chevronLeft:before { 41 | content: "\e904"; 42 | } 43 | .icon-chevronRight:before { 44 | content: "\e905"; 45 | } 46 | .icon-chevronUp:before { 47 | content: "\e906"; 48 | } 49 | .icon-clock:before { 50 | content: "\e907"; 51 | } 52 | .icon-close:before { 53 | content: "\e908"; 54 | } 55 | .icon-gps:before { 56 | content: "\e909"; 57 | } 58 | .icon-hamburguerButton:before { 59 | content: "\e90a"; 60 | } 61 | .icon-helpCircle:before { 62 | content: "\e90b"; 63 | } 64 | .icon-plus:before { 65 | content: "\e90c"; 66 | } 67 | .icon-search:before { 68 | content: "\e90d"; 69 | } 70 | .icon-settings:before { 71 | content: "\e90e"; 72 | } 73 | .icon-text:before { 74 | content: "\e90f"; 75 | } 76 | .icon-users:before { 77 | content: "\e910"; 78 | } 79 | .icon-video:before { 80 | content: "\e911"; 81 | } 82 | -------------------------------------------------------------------------------- /calendar/css/index.css: -------------------------------------------------------------------------------- 1 | @import './global.css'; 2 | @import "./icons.css"; 3 | @import "./page.css"; 4 | @import "./calendar.css"; 5 | @import './button.css'; 6 | @import './select.css'; 7 | @import './calendar-status.css'; 8 | @import './header.css'; 9 | @import './mini-calendar.css'; 10 | @import './sidebar.css'; 11 | @import './modal.css'; 12 | @import './input.css'; 13 | @import './create-task.css'; -------------------------------------------------------------------------------- /calendar/css/input.css: -------------------------------------------------------------------------------- 1 | .input { 2 | display: flex; 3 | gap: 1rem; 4 | align-items: center; 5 | } 6 | 7 | .input i { 8 | font-size: 1.5rem; 9 | } 10 | 11 | .input.is-outstanding input { 12 | font: var(--subtitle-subtitle1) 13 | } 14 | .input-body { 15 | flex: 1; 16 | display: flex; 17 | } 18 | 19 | .input input, 20 | .input textarea { 21 | flex: 1; 22 | font: var(--body1-regular); 23 | padding-block: .625rem; 24 | padding-inline: .75rem; 25 | border: none; 26 | outline: none; 27 | border-radius: .25rem; 28 | } 29 | 30 | .input input:focus, 31 | .input input:hover, 32 | .input textarea:focus, 33 | .input textarea:hover { 34 | background-color: var(--gray10); 35 | } 36 | 37 | .input input:focus, .input textarea:focus { 38 | box-shadow: 0 2px 0 var(--blue10); 39 | } -------------------------------------------------------------------------------- /calendar/css/mini-calendar.css: -------------------------------------------------------------------------------- 1 | .miniCalendar { 2 | --cellSize: 1.75rem; 3 | max-inline-size: 12.25rem; 4 | } 5 | .miniCalendar-date { 6 | font: var(--body1-medium); 7 | } 8 | .miniCalendar-header { 9 | display: grid; 10 | grid-template-columns: repeat(7, var(--cellSize)); 11 | grid-template-rows: var(--cellSize); 12 | text-align: center; 13 | font: var(--body3-regular); 14 | line-height: var(--cellSize); 15 | margin-block-end: .5rem; 16 | 17 | } 18 | .miniCalendar-status { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | padding-inline-start: .25rem; 23 | } 24 | .miniCalendar-month { 25 | font: var(--body3-regular); 26 | display: grid; 27 | text-align: center; 28 | grid-template-columns: repeat(7, var(--cellSize)); 29 | grid-template-rows: repeat(6, var(--cellSize)); 30 | } 31 | 32 | .miniCalendar-monthDay { 33 | line-height: var(--cellSize); 34 | } 35 | .miniCalendar-monthDay.is-selected { 36 | background: var(--blue10); 37 | color: var(--white); 38 | border-radius: 50%; 39 | } 40 | .miniCalendar-monthDay.is-inactive { 41 | color: var(--gray20); 42 | } -------------------------------------------------------------------------------- /calendar/css/modal.css: -------------------------------------------------------------------------------- 1 | .modal { 2 | 3 | flex-direction: column; 4 | gap: 1.5rem; 5 | position: absolute; 6 | top: 200px; 7 | left: 200px; 8 | padding-inline: 3rem; 9 | padding-block: 1.5rem; 10 | margin: initial; 11 | max-inline-size: 28rem; 12 | inline-size: 100%; 13 | border-radius: .25rem; 14 | border: none; 15 | box-shadow: 1.0719px 30.9815px 92px rgba(0, 0, 0, 0.0274815), 0.412881px 11.9336px 29.3037px rgba(0, 0, 0, 0.0425185), 0.0873403px 2.52442px 7.4963px rgba(0, 0, 0, 0.07); 16 | } 17 | .modal[open] { 18 | display: flex; 19 | } 20 | 21 | .modal::backdrop { 22 | background: rgb(0,0,0,.3); 23 | } 24 | 25 | .modal-actions { 26 | display: flex; 27 | justify-content: flex-end; 28 | } -------------------------------------------------------------------------------- /calendar/css/page.css: -------------------------------------------------------------------------------- 1 | .page { 2 | display: grid; 3 | grid-template-columns: 16.25rem 1fr; 4 | grid-template-rows: 6rem 1fr; 5 | block-size: 100vh; 6 | grid-template-areas: "header header" "sidebar calendar"; 7 | } 8 | 9 | .page .header { 10 | grid-area: header; 11 | } 12 | 13 | .page .sidebar { 14 | grid-area: sidebar; 15 | } 16 | 17 | .page .calendar { 18 | grid-area: calendar; 19 | 20 | } -------------------------------------------------------------------------------- /calendar/css/select.css: -------------------------------------------------------------------------------- 1 | .select { 2 | border: 1px solid var(--gray20); 3 | padding-inline: .75rem; 4 | padding-block: .5rem; 5 | padding-inline-end: 2rem; 6 | border-radius: .25rem; 7 | font: var(--button-button); 8 | 9 | appearance: none; 10 | background-image: url("../icons/chevron-down.svg"); 11 | background-repeat: no-repeat; 12 | background-position: right .5rem center; 13 | } -------------------------------------------------------------------------------- /calendar/css/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | display: flex; 3 | flex-direction: column; 4 | gap: 1.5rem; 5 | align-items: flex-start; 6 | padding: 1.5rem 7 | } -------------------------------------------------------------------------------- /calendar/css/task-cell.css: -------------------------------------------------------------------------------- 1 | .taskCell { 2 | border-inline-start: 1px solid currentColor; 3 | border-block-end: 1px solid currentColor; 4 | padding: .25rem; 5 | } 6 | 7 | .taskCell:nth-child(8n) { 8 | /* border-inline-end: 1px solid currentColor; */ 9 | } 10 | 11 | .taskCell.is-active::before { 12 | content: '(Sin Título)'; 13 | font-size: small; 14 | background: #c6dafc; 15 | padding: .25rem; 16 | display: block; 17 | border-radius: .25rem; 18 | box-shadow: 0 0 10px rgba(0,0,0,.3); 19 | } -------------------------------------------------------------------------------- /calendar/css/task.css: -------------------------------------------------------------------------------- 1 | .task { 2 | background: var(--blue10); 3 | color: var(--white); 4 | border-radius: .25rem; 5 | padding-inline: 1rem; 6 | padding-block: .625rem; 7 | overflow: hidden; 8 | font: var(--body2-medium); 9 | display: flex; 10 | flex-direction: column; 11 | gap: .25rem; 12 | } 13 | 14 | .task p { 15 | margin: 0; 16 | white-space: nowrap; 17 | } -------------------------------------------------------------------------------- /calendar/css/timezone-cell.css: -------------------------------------------------------------------------------- 1 | .timezoneCell { 2 | font: var(--body3-regular); 3 | position: sticky; 4 | inset-block-start: 0; 5 | display: flex; 6 | justify-content: flex-end; 7 | align-items: flex-end; 8 | padding-inline-end: 1rem; 9 | white-space: nowrap; 10 | background: var(--white); 11 | z-index: 2; 12 | } 13 | 14 | .timezoneCell::before { 15 | content: ''; 16 | inline-size: .5rem; 17 | block-size: 1px; 18 | background: var(--gray20); 19 | position: absolute; 20 | inset-inline-end: 0; 21 | inset-block-end: 0; 22 | } -------------------------------------------------------------------------------- /calendar/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/calendar/fonts/icomoon.eot -------------------------------------------------------------------------------- /calendar/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /calendar/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/calendar/fonts/icomoon.ttf -------------------------------------------------------------------------------- /calendar/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/calendar/fonts/icomoon.woff -------------------------------------------------------------------------------- /calendar/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/check-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/gps.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/hamburguer-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/help-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/users.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/icons/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /calendar/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/calendar/image/logo.png -------------------------------------------------------------------------------- /calendar/image/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/calendar/image/user.png -------------------------------------------------------------------------------- /calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Google Calendar 12 | 13 | 14 |
15 |
16 |
17 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 | 43 | 44 | 45 | 46 |
47 | 48 | 49 |
50 |
51 | 55 |
56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 |
68 | D 69 | L 70 | M 71 | M 72 | J 73 | V 74 | S 75 |
76 |
77 |
30
78 |
1
79 |
2
80 |
3
81 |
4
82 |
5
83 |
6
84 |
7
85 |
8
86 |
9
87 |
10
88 |
11
89 |
12
90 |
13
91 |
14
92 |
15
93 |
16
94 |
17
95 |
18
96 |
19
97 |
20
98 |
21
99 |
22
100 |
23
101 |
24
102 |
25
103 |
26
104 |
27
105 |
28
106 |
29
107 |
30
108 |
1
109 |
2
110 |
3
111 |
4
112 |
5
113 |
6
114 |
7
115 |
8
116 |
9
117 |
10
118 |
11
119 |
120 |
121 | 122 |
123 |
124 |
125 |
126 |
GMT-5
127 |

128 | 129 | 133 | 134 |

135 |

136 | 137 | 141 | 142 |

143 |

144 | 145 | 149 | 150 |

151 |

152 | 153 | 157 | 158 |

159 |

160 | 161 | 165 | 166 |

167 |

168 | 169 | 173 | 174 |

175 |

176 | 177 | 181 | 182 |

183 | 184 |
185 |
186 |

Hacer ejercicio

187 |

188 | - 189 |

190 |
191 |
192 |
193 |
194 |

Hacer ejercicio

195 |

196 | - 197 |

198 |
199 |
200 |
201 |
202 |

Hacer ejercicio

203 |

204 | - 205 |

206 |
207 |
208 |
209 |
210 |
211 |
212 | 1AM 213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | 2 AM 224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 | 3 AM 235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 | 4 AM 246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 | 5 AM 257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 | 6 AM 268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 | 7 AM 279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 | 8 AM 290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 | 9 AM 301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 | 10 AM 312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 | 11 AM 323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 | 12 AM 334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 | 1 PM 345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 | 2 PM 356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 | 3 PM 367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 | 4 PM 378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 | 5 PM 389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 | 6 PM 400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 | 7 PM 411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 | 8 PM 422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 | 9 PM 433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 | 10 PM 444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 | 11 PM 455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 | 469 |
470 |
471 |
472 | 473 |
474 |
475 |
476 | 477 |
478 | 479 | 480 | 481 |
482 |
483 | 484 |
485 | 486 | 487 |
488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 |
497 |
498 |
499 | 500 | 501 |
502 | 503 |
504 |
505 |
506 | 507 |
508 | 509 |
510 |
511 |
512 | 513 |
514 | 515 |
516 |
517 |
518 |
519 | 522 | 525 |
526 | 527 | 528 | 529 | -------------------------------------------------------------------------------- /calendar/js/app.js: -------------------------------------------------------------------------------- 1 | import { intervalCurrentTimePosition } from './current-time.js'; 2 | import './task.js'; 3 | intervalCurrentTimePosition(5000) 4 | -------------------------------------------------------------------------------- /calendar/js/current-time.js: -------------------------------------------------------------------------------- 1 | function setCurrentTimePosition() { 2 | const currentDate = new Date(); 3 | const currentDay = currentDate.getDay() 4 | const currentHour = currentDate.getHours() 5 | const currentMin = currentDate.getMinutes() 6 | 7 | // console.log({ currentDay }, { currentHour }) 8 | const $currentTime = document.querySelector('.currentTime') 9 | 10 | const $calendar = document.querySelector('.calendar-week') 11 | let calendarBlockSize = $calendar.clientHeight 12 | let calendarInlineSize = $calendar.clientWidth 13 | 14 | const calendarTimezoneCellInlineSize = document.querySelector('.timezoneCell').clientWidth; 15 | calendarInlineSize = calendarInlineSize - calendarTimezoneCellInlineSize 16 | 17 | const cellInlineSize = calendarInlineSize / 7 18 | 19 | 20 | // console.log({ calendarBlockSize }, { calendarInlineSize }) 21 | const calendarDayBlockSize = document.querySelector('.calendarDay').clientHeight 22 | calendarBlockSize = calendarBlockSize - calendarDayBlockSize 23 | // console.log({ calendarBlockSize }) 24 | const cellBlockSize = calendarBlockSize / 24 25 | // console.log({ cellBlockSize }, { cellInlineSize }) 26 | 27 | $currentTime.style.top = `${cellBlockSize * (currentHour) + calendarDayBlockSize + (cellBlockSize / 60) * currentMin}px` 28 | $currentTime.style.left = `${cellInlineSize * (currentDay) + calendarTimezoneCellInlineSize + 24}px` 29 | } 30 | 31 | window.intervalCurrentTimePosition = null 32 | 33 | 34 | function intervalCurrentTimePosition(interval = 1000) { 35 | clearInterval(window.intervalCurrentTimePosition) 36 | setCurrentTimePosition() 37 | window.intervalCurrentTimePosition = setInterval(setCurrentTimePosition, interval) 38 | } 39 | 40 | export { 41 | setCurrentTimePosition, 42 | intervalCurrentTimePosition 43 | } -------------------------------------------------------------------------------- /calendar/js/task.js: -------------------------------------------------------------------------------- 1 | 2 | const $taskCellList = document.querySelectorAll('.taskCell') 3 | 4 | const $modal = document.querySelector('.modal') 5 | const $closeModalButton = $modal.querySelector('#close-modal') 6 | $modal.addEventListener('click', event => event.stopPropagation()) 7 | $closeModalButton.addEventListener('click', closeModal) 8 | 9 | function openModal(x, y) { 10 | $modal.style.left = `${x}px` 11 | $modal.style.top = `${y}px` 12 | $modal.showModal() 13 | } 14 | 15 | function closeModal(event) { 16 | event.stopPropagation() 17 | $modal.close() 18 | removeActiveTaskCell() 19 | } 20 | 21 | function handleCreateTaskClick(event) { 22 | console.log(event) 23 | const x = event.pageX 24 | const y = event.pageY 25 | setActiveTaskCell(event.clientX, event.clientY) 26 | openModal(x, y) 27 | } 28 | 29 | let $selectedCell = null 30 | 31 | 32 | function removeActiveTaskCell() { 33 | $selectedCell.classList.remove('is-active') 34 | } 35 | 36 | function setActiveTaskCell(x, y) { 37 | console.log({x}, {y}) 38 | $selectedCell = document.elementFromPoint(x, y) 39 | $selectedCell.classList.add('is-active') 40 | } 41 | 42 | $taskCellList.forEach($taskCell => $taskCell.addEventListener('click', handleCreateTaskClick)) -------------------------------------------------------------------------------- /css-grd-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/css-grd-layout.png -------------------------------------------------------------------------------- /layouts/17-aprender/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Aprender 9 | 10 | 11 |
12 |
13 | Placeholder Puppy 14 |
15 |

16 | El título de la clase 17 |

18 |

19 | Esta clase es importante por las cosas que te cuento en este parrafo :) 20 |

21 |
22 | 23 | -------------------------------------------------------------------------------- /layouts/17-aprender/styles.css: -------------------------------------------------------------------------------- 1 | .lesson { 2 | font-family: Arial; 3 | border: 5px solid red; 4 | 5 | display: grid; 6 | grid-template-columns: 8.75rem 1fr; 7 | grid-template-areas: "thumb title" "description description"; 8 | } 9 | 10 | .lesson-thumb { 11 | grid-area: thumb; 12 | border: 5px solid black; 13 | } 14 | 15 | .lesson-thumb img { 16 | width: 100%; 17 | vertical-align: middle; 18 | aspect-ratio: 16 / 9; 19 | object-fit: cover; 20 | } 21 | 22 | .lesson-title { 23 | grid-area: title; 24 | border: 5px solid orange; 25 | margin: 0; 26 | } 27 | 28 | .lesson-description { 29 | grid-area: description; 30 | border: 5px solid green; 31 | margin: 0; 32 | } 33 | 34 | @media (min-width: 768px) { 35 | .lesson { 36 | grid-template-columns: 300px 1fr; 37 | grid-template-rows: auto 1fr; 38 | grid-template-areas: "thumb title" "thumb description"; 39 | } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /layouts/18-figma/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Figma 9 | 10 | 11 |

Figma

12 |
13 | 14 | 15 |
16 | 19 | 22 |
23 |
24 |
25 | Placeholder Puppy 26 |

Name

27 | 28 | 29 |
30 |
31 | Placeholder Puppy 32 |

Name

33 | 34 | 35 |
36 |
37 | Placeholder Puppy 38 |

Name

39 | 40 | 41 |
42 |
43 | Placeholder Puppy 44 |

Name

45 | 46 | 47 |
48 |
49 | Placeholder Puppy 50 |

Name

51 | 52 | 53 |
54 |
55 | Placeholder Puppy 56 |

Name

57 | 58 | 59 |
60 |
61 | Placeholder Puppy 62 |

Name

63 | 64 | 65 |
66 |
67 | Placeholder Puppy 68 |

Name

69 | 70 | 71 |
72 |
73 |
74 | 75 | -------------------------------------------------------------------------------- /layouts/18-figma/styles.css: -------------------------------------------------------------------------------- 1 | input[id="list"]:checked ~ .project-list{ 2 | border: 10px solid green; 3 | } 4 | 5 | input[id="list"]:checked ~ .project-list .project{ 6 | border: 1px solid red; 7 | display: grid; 8 | padding: 1rem; 9 | gap: 1rem; 10 | align-items: center; 11 | grid-template-columns: 50px 1fr 100px 100px; 12 | } 13 | 14 | 15 | input[id="list"]:checked ~ .project-list .project img { 16 | inline-size: 50px; 17 | aspect-ratio: 1 / 1; 18 | object-fit: cover; 19 | } 20 | 21 | 22 | 23 | 24 | 25 | input[id="grid"]:checked ~ .project-list{ 26 | border: 10px solid blue; 27 | 28 | display: grid; 29 | gap: 1rem; 30 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 31 | } 32 | 33 | 34 | input[id="grid"]:checked ~ .project-list .project{ 35 | border: 5px solid green; 36 | display: grid; 37 | grid-template-columns: 100px 1fr; 38 | grid-template-rows: 200px auto auto; 39 | align-items: center; 40 | border-radius: 1rem; 41 | overflow: hidden; 42 | } 43 | 44 | input[id="grid"]:checked ~ .project-list .project img { 45 | inline-size: 100%; 46 | block-size: 100%; 47 | object-fit: cover; 48 | grid-area: 1 / 1/ 1 / -1; 49 | } 50 | 51 | input[id="grid"]:checked ~ .project-list .project time:nth-of-type(1) { 52 | /* background-color: sred; */ 53 | grid-column-start: 2; 54 | } 55 | input[id="grid"]:checked ~ .project-list .project time:nth-of-type(2) { 56 | /* background-color: blue; */ 57 | grid-column-start: 2; 58 | } 59 | 60 | 61 | input[id="grid"]:checked ~ .project-list .project-name { 62 | /* background-color: orange; */ 63 | grid-row: 2 / 4; 64 | } 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | .project-list { 74 | padding: 1rem; 75 | } 76 | 77 | .project-actions { 78 | display: flex; 79 | justify-content: flex-end; 80 | } 81 | 82 | input { 83 | display: none; 84 | } 85 | 86 | label { 87 | border: 1px solid red; 88 | cursor: pointer; 89 | user-select: none; 90 | padding: 1rem; 91 | } 92 | 93 | body { 94 | font-family: sans-serif; 95 | } 96 | 97 | input[id="list"]:checked ~ .project-actions [for="list"], 98 | input[id="grid"]:checked ~ .project-actions [for="grid"] { 99 | background-color: red; 100 | } 101 | -------------------------------------------------------------------------------- /layouts/20-homer-website/images.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images.zip -------------------------------------------------------------------------------- /layouts/20-homer-website/images/boca.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/boca.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/images/campana.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/campana.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/images/dios.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/dios.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/images/gusano.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/gusano.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/images/reloj.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/reloj.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/images/tostadora.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/layouts/20-homer-website/images/tostadora.gif -------------------------------------------------------------------------------- /layouts/20-homer-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Homer Website 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /layouts/20-homer-website/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #78bbcb; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | block-size: 100vh; 8 | } 9 | 10 | .grid { 11 | display: grid; 12 | grid-template-columns: repeat(6, 100px); 13 | grid-template-rows: repeat(6, 100px); 14 | border: 10px solid black; 15 | /* justify-content: center; */ 16 | } 17 | 18 | .grid img { 19 | max-inline-size: 100%; 20 | box-sizing: border-box; 21 | } 22 | 23 | .god { 24 | border: 10px solid green; 25 | grid-row-start: 2; 26 | /* grid-column-start: 3; 27 | grid-column-end: 5; */ 28 | grid-column: 3 / 5; 29 | 30 | } 31 | 32 | .mouth { 33 | border: 10px solid blue; 34 | grid-column-start: 5; 35 | grid-row-start: 4; 36 | } 37 | 38 | 39 | .bell { 40 | border: 10px solid black; 41 | grid-row-start: 4; 42 | } 43 | .clock { 44 | border: 10px solid yellow; 45 | grid-row-start: 4; 46 | grid-column-start: 2; 47 | } 48 | 49 | 50 | .toaster { 51 | border: 10px solid purple; 52 | grid-column-start: 1; 53 | grid-row-start: 2; 54 | } 55 | 56 | .worm { 57 | border: 10px solid brown; 58 | grid-row-start: 2; 59 | grid-column-start: 6; 60 | } -------------------------------------------------------------------------------- /layouts/21-instagram/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Instagram 9 | 10 | 11 |
12 |
13 |
14 | Placeholder Puppy 15 |
16 |
17 | Placeholder Puppy 18 |
19 |
20 | Placeholder Puppy 21 |
22 |
23 | Placeholder Puppy 24 |
25 |
26 | Placeholder Puppy 27 |
28 |
29 | Placeholder Puppy 30 |
31 |
32 | Placeholder Puppy 33 |
34 |
35 | Placeholder Puppy 36 |
37 |
38 | Placeholder Puppy 39 |
40 |
41 |
42 | 43 | -------------------------------------------------------------------------------- /layouts/21-instagram/styles.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | margin: auto; 3 | max-inline-size: 935px; 4 | border: 1px solid purple; 5 | } 6 | 7 | .grid { 8 | display: grid; 9 | grid-template-columns: 1fr 1fr 1fr; 10 | gap: 1.75rem; 11 | } 12 | 13 | .post { 14 | border: 1px solid blue; 15 | aspect-ratio: 1 / 1; 16 | overflow: hidden; 17 | } 18 | 19 | .post img { 20 | inline-size: 100%; 21 | block-size: 100%; 22 | object-fit: cover; 23 | 24 | } 25 | 26 | @media (max-width: 735px) { 27 | .grid { 28 | gap: 3px; 29 | } 30 | } -------------------------------------------------------------------------------- /layouts/22-mercado-libre/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mercado Libre 9 | 10 | 11 |
12 |
13 | Placeholder Puppy 14 |
15 |
16 | Placeholder Puppy 17 |
18 |
19 | Placeholder Puppy 20 |
21 |
22 | Placeholder Puppy 23 |
24 |
25 | Placeholder Puppy 26 |
27 |
28 | Placeholder Puppy 29 |
30 |
31 | Placeholder Puppy 32 |
33 |
34 | Placeholder Puppy 35 |
36 |
37 | Placeholder Puppy 38 |
39 |
40 | Placeholder Puppy 41 |
42 |
43 | Placeholder Puppy 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /layouts/22-mercado-libre/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | color: white; 4 | } 5 | 6 | .grid { 7 | display: grid; 8 | grid-template-columns: repeat(12, 1fr); 9 | grid-auto-rows: 250px; 10 | gap: .5rem; 11 | max-inline-size: 1024px; 12 | margin: auto; 13 | } 14 | 15 | .item { 16 | display: flex; 17 | flex-direction: column; 18 | gap: 1rem; 19 | padding: .5rem; 20 | } 21 | 22 | img { 23 | inline-size: 100%; 24 | flex: 1; 25 | overflow: hidden; 26 | object-fit: cover; 27 | } 28 | 29 | .item.small { 30 | background-color: purple; 31 | grid-column-end: span 2; 32 | } 33 | .item.small:after { 34 | content: 'small'; 35 | } 36 | .item.medium { 37 | grid-column-end: span 4; 38 | background-color: green; 39 | } 40 | .item.medium:after { 41 | content: 'medium'; 42 | } 43 | .item.large { 44 | grid-column-end: span 6; 45 | background-color: royalblue; 46 | } 47 | .item.large:after { 48 | content: 'large'; 49 | } -------------------------------------------------------------------------------- /layouts/23-pinterest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pinterest 9 | 10 | 11 |
12 |
13 | Placeholder Puppy 14 |
15 |
16 | Placeholder Puppy 17 |
18 |
19 | Placeholder Puppy 20 |
21 |
22 | Placeholder Puppy 23 |
24 |
25 | Placeholder Puppy 26 |
27 |
28 | Placeholder Puppy 29 |
30 |
31 | Placeholder Puppy 32 |
33 |
34 | Placeholder Puppy 35 |
36 |
37 | Placeholder Puppy 38 |
39 |
40 | Placeholder Puppy 41 |
42 |
43 | Placeholder Puppy 44 |
45 |
46 | Placeholder Puppy 47 |
48 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /layouts/23-pinterest/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | color: white; 4 | } 5 | 6 | .grid { 7 | display: grid; 8 | grid-template-columns: repeat(4, 1fr); 9 | grid-auto-rows: 100px; 10 | gap: .5rem; 11 | max-inline-size: 1024px; 12 | margin: auto; 13 | } 14 | 15 | .item { 16 | display: flex; 17 | flex-direction: column; 18 | gap: 1rem; 19 | padding: .5rem; 20 | } 21 | 22 | img { 23 | inline-size: 100%; 24 | flex: 1; 25 | overflow: hidden; 26 | object-fit: cover; 27 | } 28 | 29 | .item.small { 30 | background-color: purple; 31 | grid-row-end: span 2; 32 | } 33 | .item.small:after { 34 | content: 'small'; 35 | } 36 | .item.medium { 37 | grid-row-end: span 4; 38 | background-color: green; 39 | } 40 | .item.medium:after { 41 | content: 'medium'; 42 | } 43 | .item.large { 44 | grid-row-end: span 6; 45 | background-color: royalblue; 46 | } 47 | .item.large:after { 48 | content: 'large'; 49 | } -------------------------------------------------------------------------------- /layouts/24-faster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Faster 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis veniam possimus fugiat? Magni ex necessitatibus est eius ratione non velit repudiandae rem nulla! Ipsa itaque, autem quaerat ratione animi corrupti!

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /layouts/24-faster/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Arial, Helvetica, sans-serif; 4 | } 5 | 6 | :root { 7 | --phoneInlineSize: 300px; 8 | --gridColumns: 1fr var(--phoneInlineSize) 1080px 1fr; 9 | } 10 | 11 | header { 12 | background-color: blue; 13 | /* grid-column-start: 2; */ 14 | grid-area: header; 15 | } 16 | 17 | .grid { 18 | display: grid; 19 | grid-template-columns: var(--gridColumns); 20 | grid-template-rows: 200px; 21 | grid-template-areas: "wrapper-start header header wrapper-end" "wrapper-start phone content wrapper-end"; 22 | } 23 | 24 | 25 | .hero { 26 | background-color: aquamarine; 27 | grid-column: 1 / -1; 28 | grid-row-start: 2; 29 | display: grid; 30 | grid-template-columns: subgrid; 31 | grid-template-areas: ". . content ."; 32 | } 33 | 34 | .hero-content { 35 | /* grid-row-start: 1; 36 | grid-column-start: 3; */ 37 | grid-area: content; 38 | } 39 | 40 | 41 | 42 | .phone { 43 | grid-area: phone; 44 | background-color: red; 45 | aspect-ratio: 9/16; 46 | inline-size: var(--phoneInlineSize); 47 | position: sticky; 48 | inset-block-start:0; 49 | /* top: 0; */ 50 | } 51 | 52 | section { 53 | grid-column: 1 / -1; 54 | min-block-size: 400px; 55 | border: 1px solid red; 56 | counter-increment: section; 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | font-size: 3rem; 61 | } 62 | 63 | section::after { 64 | content: counter(section) 65 | } -------------------------------------------------------------------------------- /spotifu/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/.DS_Store -------------------------------------------------------------------------------- /spotifu/README.md: -------------------------------------------------------------------------------- 1 | # Curso de Flexbox Layout y componentes 2 | 3 | ## En este curso aprenderás 4 | - **Flex Layout Box**: desde su teoría, estructura casos de uso y puesta en práctica real. 5 | - **Arquitectura**: establecemos convenciones para estructurar el código y proyecto. 6 | - **a11y**: Todo el código generado el 100% accesible. 7 | - **Figma** para Frontends. 8 | - **Modelo lógico**: el proyecto es 100% realizado con las técnicas de maquetación modernas. 9 | - **Unidades relativas**: el proyecto completo se adaptará solo cambiando un tamaño de fuente. 10 | - **Flujo diseñador / programador**: evaluamos las circunstancias de intercambio de ideas en tu equipo. 11 | - **Diseño a código**: el proyecto cuenta con diseño en Figma que podrás descargar y modificar. 12 | - **Proyecto**: Spotifu es un clon exacto de la interfaz web de Spotify. 13 | 14 | Ver todo el temario: https://leonidasesteban.com/cursos/flexbox-componentes 15 | 16 | ## Mira el proyecto en vivo 17 | https://leonidasesteban.github.io/curso-flexbox-layout-componentes/ 18 | 19 | 20 | -------------------------------------------------------------------------------- /spotifu/css/body.css: -------------------------------------------------------------------------------- 1 | .body { 2 | background: var(--gray50); 3 | color: var(--gray10); 4 | font: var(--baseFont); 5 | margin: 0; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /spotifu/css/button-icon.css: -------------------------------------------------------------------------------- 1 | .buttonIcon { 2 | inline-size: 2.5rem; 3 | block-size: 2.5rem; 4 | background: transparent; 5 | border-radius: 50%; 6 | border: none; 7 | cursor: pointer; 8 | color: var(--gray10); 9 | } 10 | 11 | .buttonIcon.is-white { 12 | background: var(--white); 13 | color: var(--gray50); 14 | } 15 | 16 | .buttonIcon.is-primary { 17 | background: var(--primary); 18 | color: var(--white); 19 | } 20 | 21 | .buttonIcon .icon-play { 22 | position: relative; 23 | left: 1px; 24 | top: 1px; 25 | } 26 | .buttonIcon:active { 27 | transform: scale(.95); 28 | } 29 | 30 | .buttonIcon:hover:is([class*='is-']) { 31 | box-shadow: 0 8px 8px rgba(0,0,0,.3); 32 | } 33 | 34 | -------------------------------------------------------------------------------- /spotifu/css/ellipsis.css: -------------------------------------------------------------------------------- 1 | .ellipsis { 2 | overflow: hidden; 3 | } 4 | 5 | .ellipsis > * { 6 | display: block; 7 | white-space: nowrap; 8 | overflow: hidden; 9 | text-overflow: ellipsis; 10 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/align-items.css: -------------------------------------------------------------------------------- 1 | .alignItems { 2 | max-inline-size: 200px; 3 | border: 1px solid red; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: flex-start; 7 | } 8 | 9 | .alignItems img { 10 | inline-size: 100px; 11 | } 12 | 13 | .alignItems img:nth-child(odd) { 14 | align-self: flex-end; 15 | } 16 | 17 | .alignItems img:nth-of-type(1) { 18 | align-self: center; 19 | border-radius: 50%; 20 | margin-block-end: 2rem; 21 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/display-flex.css: -------------------------------------------------------------------------------- 1 | .displayFlex { 2 | display: flex; 3 | } 4 | 5 | .displayFlex .box + .box { 6 | margin-inline-start: 1rem; 7 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/flex-direction.css: -------------------------------------------------------------------------------- 1 | .flexDirection { 2 | display: flex; 3 | flex-direction: column-reverse; 4 | max-block-size: 200px; 5 | overflow: auto; 6 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/flex-order.css: -------------------------------------------------------------------------------- 1 | .flexOrder { 2 | display: flex; 3 | gap: 5em; 4 | } 5 | 6 | .flexOrder img { 7 | border-radius: 50%; 8 | } 9 | 10 | .flexOrder:nth-child(even) p{ 11 | border: 1px solid red; 12 | /* order: 1; */ 13 | order: -1; 14 | } 15 | 16 | /* .flexOrder:nth-child(odd) img{ 17 | order: 2; 18 | } */ -------------------------------------------------------------------------------- /spotifu/css/flexbox/flex-wrap.css: -------------------------------------------------------------------------------- 1 | .flexWrap { 2 | display: flex; 3 | overflow: auto; 4 | /* flex-wrap: nowrap; 5 | flex-wrap: wrap; 6 | flex-direction: row-reverse; 7 | flex-wrap: wrap-reverse; */ 8 | flex-flow: row-reverse wrap-reverse; 9 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/flex.css: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: flex; 3 | background: lightgray; 4 | } 5 | 6 | .flex > * { 7 | /* border: 1px solid red !important; 8 | flex-grow: 2; */ 9 | /* flex-shrink: 0; */ 10 | /* flex-basis: 100px; 11 | padding: 1rem !important; */ 12 | } 13 | .flex > div { 14 | border: 1px solid red; 15 | /* flex-grow: 1; */ 16 | /* flex-basis: 100%; */ 17 | flex: 1; 18 | /* flex-grow: 1; 19 | flex-shrink: 1; 20 | flex-basis: 0%; */ 21 | } 22 | .flex > img { 23 | inline-size: 400px; 24 | flex-shrink: 0; 25 | } 26 | /* .flex > p { 27 | flex-grow: 1; 28 | border: 1px solid green !important; 29 | flex-basis: 50px; 30 | } */ -------------------------------------------------------------------------------- /spotifu/css/flexbox/index.css: -------------------------------------------------------------------------------- 1 | @import './display-flex.css'; 2 | @import './flex-order.css'; 3 | @import './flex-direction.css'; 4 | @import './flex-wrap.css'; 5 | @import './flex.css'; 6 | @import './justify-content.css'; 7 | @import './align-items.css'; 8 | 9 | :root { 10 | --darkColor: #04001e; 11 | --lightColor: #DFFBFF; 12 | --primaryColor: #DB086F; 13 | } 14 | 15 | body { 16 | background: var(--darkColor); 17 | color: var(--lightColor); 18 | font-family: system-ui; 19 | } 20 | 21 | a { 22 | color: var(--lightColor); 23 | } 24 | 25 | .wrapper { 26 | max-inline-size: 64rem; 27 | margin: auto; 28 | } 29 | 30 | .box { 31 | border: 5px dashed var(--primaryColor); 32 | padding: 1rem; 33 | counter-increment: flex-items; 34 | } 35 | 36 | .box::after { 37 | content: counter(flex-items); 38 | } -------------------------------------------------------------------------------- /spotifu/css/flexbox/justify-content.css: -------------------------------------------------------------------------------- 1 | .justifyContent { 2 | display: flex; 3 | justify-content: space-evenly; 4 | flex-wrap: wrap; 5 | border: 1px solid red; 6 | gap: 2rem; 7 | } 8 | 9 | .spaceBetween { 10 | border: 1px solid red; 11 | display: flex; 12 | justify-content: space-between; 13 | padding: 1rem; 14 | } 15 | 16 | .spaceBetween ul { 17 | display: flex; 18 | gap: 1rem; 19 | list-style: none; 20 | align-items: center; 21 | 22 | } 23 | 24 | .spaceBetween img { 25 | block-size: 100px; 26 | border-radius: 50%; 27 | } 28 | 29 | /* .justifyContent img:nth-of-type(1) { 30 | align-self: flex-end; 31 | } 32 | .justifyContent img:nth-of-type(2) { 33 | align-self: center; 34 | } */ 35 | /* .justifyContent > img { 36 | margin-left: 2rem; 37 | margin-bottom: 2rem; 38 | } */ -------------------------------------------------------------------------------- /spotifu/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Avenir; 3 | src: url('../fonts/AvenirLTStd-Black.otf'); 4 | font-weight: bold; 5 | font-style: normal; 6 | } 7 | 8 | @font-face { 9 | font-family: Avenir; 10 | src: url('../fonts/AvenirLTStd-Roman.otf'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | -------------------------------------------------------------------------------- /spotifu/css/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | gap: 1rem; 4 | padding-inline-start: 1.5rem; 5 | padding-inline-end: 1.5rem; 6 | padding-block-start: 1rem; 7 | padding-block-end: 1rem; 8 | align-items: center; 9 | backdrop-filter: blur(5px); 10 | } 11 | 12 | @supports not(backdrop-filter: blur(5px)) { 13 | .header { 14 | background: var(--gray50); 15 | } 16 | } -------------------------------------------------------------------------------- /spotifu/css/icons.css: -------------------------------------------------------------------------------- 1 | /* [class^='icon-'], [class*=' icon-'] { 2 | inline-size: 50px; 3 | block-size: 50px; 4 | background-size: cover; 5 | display: inline-block; 6 | } 7 | 8 | 9 | .icon-home { 10 | background-image: url('../icons/home.svg'); 11 | } 12 | 13 | .icon-home-active { 14 | inline-size: 80px; 15 | block-size: 80px; 16 | background-image: url('../icons/home-active.svg'); 17 | } */ 18 | 19 | @font-face { 20 | font-family: 'icomoon'; 21 | src: url('../fonts/icomoon.eot?cls2ci'); 22 | src: url('../fonts/icomoon.eot?cls2ci#iefix') format('embedded-opentype'), 23 | url('../fonts/icomoon.ttf?cls2ci') format('truetype'), 24 | url('../fonts/icomoon.woff?cls2ci') format('woff'), 25 | url('../fonts/icomoon.svg?cls2ci#icomoon') format('svg'); 26 | font-weight: normal; 27 | font-style: normal; 28 | font-display: block; 29 | } 30 | 31 | [class^="icon-"], [class*=" icon-"] { 32 | /* use !important to prevent issues with browser extensions that change fonts */ 33 | font-family: 'icomoon' !important; 34 | speak: never; 35 | font-style: normal; 36 | font-weight: normal; 37 | font-variant: normal; 38 | text-transform: none; 39 | line-height: 1; 40 | 41 | /* Better Font Rendering =========== */ 42 | -webkit-font-smoothing: antialiased; 43 | -moz-osx-font-smoothing: grayscale; 44 | } 45 | 46 | .icon-addPlus:before { 47 | content: "\e900"; 48 | } 49 | .icon-arrowLeft:before { 50 | content: "\e901"; 51 | } 52 | .icon-arrowRight:before { 53 | content: "\e902"; 54 | } 55 | .icon-calendar:before { 56 | content: "\e903"; 57 | } 58 | .icon-clock:before { 59 | content: "\e904"; 60 | } 61 | .icon-close:before { 62 | content: "\e905"; 63 | } 64 | .icon-creditCard:before { 65 | content: "\e906"; 66 | } 67 | .icon-download:before { 68 | content: "\e907"; 69 | } 70 | .icon-heart:before { 71 | content: "\e908"; 72 | } 73 | .icon-homeActive:before { 74 | content: "\e909"; 75 | } 76 | .icon-home:before { 77 | content: "\e90a"; 78 | } 79 | .icon-libraryActive:before { 80 | content: "\e90b"; 81 | } 82 | .icon-library:before { 83 | content: "\e90c"; 84 | } 85 | .icon-music:before { 86 | content: "\e90d"; 87 | } 88 | .icon-next:before { 89 | content: "\e90e"; 90 | } 91 | .icon-pause:before { 92 | content: "\e90f"; 93 | } 94 | .icon-play:before { 95 | content: "\e910"; 96 | } 97 | .icon-prev:before { 98 | content: "\e911"; 99 | } 100 | .icon-round:before { 101 | content: "\e912"; 102 | } 103 | .icon-searchActive:before { 104 | content: "\e913"; 105 | } 106 | .icon-search:before { 107 | content: "\e914"; 108 | } 109 | .icon-volumeDown:before { 110 | content: "\e915"; 111 | } 112 | .icon-volumeOff:before { 113 | content: "\e916"; 114 | } 115 | .icon-volumeUp:before { 116 | content: "\e917"; 117 | } 118 | -------------------------------------------------------------------------------- /spotifu/css/index.css: -------------------------------------------------------------------------------- 1 | @import './icons.css'; 2 | @import './fonts.css'; 3 | @import './body.css'; 4 | @import './link.css'; 5 | @import './button-icon.css'; 6 | @import './sidebar.css'; 7 | @import './ellipsis.css'; 8 | @import './player.css'; 9 | @import './page.css'; 10 | @import './layout.css'; 11 | @import './scrollbar.css'; 12 | 13 | :root { 14 | font-size: 14px; 15 | --primary: #00B050; 16 | --white: #ffffff; 17 | --gray10: #B3B3B3; 18 | --gray20: #737373; 19 | --gray30: #282828; 20 | --gray40: #181818; 21 | --gray50: #121212; 22 | --gray60: #000000; 23 | --basefontFamily: Avenir, Helvetica, sans-serif; 24 | --headline1: bold 2rem/normal var(--basefontFamily); 25 | --headline2: bold 1.5rem/1.75rem var(--basefontFamily); 26 | --baseFont: normal .875rem/1.375rem var(--basefontFamily); 27 | --baseFontBold: bold .875rem/1.375rem var(--basefontFamily); 28 | --button: bold .875rem/1rem var(--basefontFamily); 29 | --small: normal .75em/normal var(--basefontFamily); 30 | } 31 | 32 | @media screen and (min-width: 768px) { 33 | :root { 34 | font-size: 16px; 35 | } 36 | } 37 | 38 | @media screen and (min-width: 1367px) { 39 | :root { 40 | font-size: 18px; 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /spotifu/css/layout.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --sidebarInlineSize: 15rem; 3 | --minBlockSize: 37.5rem; 4 | --minInlineSize: 48rem; 5 | --bottomSize: 5.5rem; 6 | } 7 | 8 | .layout { 9 | /* box-shadow: inset 0 0 0 10px red; */ 10 | min-inline-size: var(--minInlineSize); 11 | display: grid; 12 | block-size: 100vh; 13 | grid-template-areas: "sidebar page" "footer footer"; 14 | grid-template-columns: var(--sidebarInlineSize) 1fr; 15 | grid-template-rows: 1fr var(--bottomSize); 16 | } 17 | 18 | .layout .sidebar { 19 | grid-area: sidebar; 20 | } 21 | 22 | .layout .page { 23 | grid-area: page; 24 | } 25 | 26 | .layout footer { 27 | grid-area: footer; 28 | } 29 | -------------------------------------------------------------------------------- /spotifu/css/link.css: -------------------------------------------------------------------------------- 1 | .link { 2 | color: var(--gray10); 3 | text-decoration: none; 4 | } 5 | 6 | .link:hover { 7 | color: var(--white); 8 | text-decoration: underline; 9 | } -------------------------------------------------------------------------------- /spotifu/css/list.css: -------------------------------------------------------------------------------- 1 | .list { 2 | padding-inline-start: 1.5rem; 3 | padding-inline-end: 1.5rem; 4 | } 5 | 6 | .list-title { 7 | font: var(--baseFont); 8 | margin-block-start: 0; 9 | margin-block-end: .5rem; 10 | } 11 | 12 | .list-content { 13 | padding: 0; 14 | margin: 0; 15 | list-style: none; 16 | display: flex; 17 | flex-direction: column; 18 | gap: .5rem; 19 | } 20 | .list-item { 21 | /* background: red; */ 22 | /* margin-block-end: .5rem; */ 23 | } 24 | 25 | /* .list-item:last-child { 26 | margin-block-end: 0; 27 | } */ 28 | 29 | 30 | .list-item a { 31 | font: var(--baseFontBold); 32 | transition: color .2s; 33 | } 34 | 35 | 36 | -------------------------------------------------------------------------------- /spotifu/css/logo.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | padding-inline-start: 1rem; 3 | padding-inline-end: 1rem; 4 | } 5 | 6 | .logo-image { 7 | inline-size: 7rem; 8 | block-size: 2rem; 9 | } -------------------------------------------------------------------------------- /spotifu/css/menu-item.css: -------------------------------------------------------------------------------- 1 | .menuItem { 2 | /* border: 1px solid green; */ 3 | } 4 | 5 | .menuItem a { 6 | /* border: 1px solid red; */ 7 | display: flex; 8 | font: var(--button); 9 | padding-inline-start: 1.5rem; 10 | padding-inline-end: 1.5rem; 11 | /* border-left: 4px solid var(--primary); */ 12 | block-size: 2.5rem; 13 | /* line-height: 2.5rem; */ 14 | align-items: center; 15 | gap: .5rem; 16 | } 17 | 18 | .menuItem a:hover { 19 | text-decoration: none; 20 | } 21 | 22 | .menuItem [class^="icon-"] { 23 | font-size: 1.5rem; 24 | } 25 | 26 | .menuItem.is-active a { 27 | color: var(--white); 28 | box-shadow: inset 4px 0 0 var(--primary); 29 | } 30 | 31 | .menuItem.is-active .icon-home::before { 32 | content: "\e909"; 33 | } 34 | 35 | .menuItem.is-active .icon-search::before { 36 | content: "\e913"; 37 | } 38 | 39 | /* .menuItem.is-active .icon-creditCard::before { 40 | content: "\e909"; 41 | } */ 42 | -------------------------------------------------------------------------------- /spotifu/css/menu.css: -------------------------------------------------------------------------------- 1 | @import './menu-item.css'; 2 | 3 | .menu { 4 | 5 | } 6 | 7 | .menu-list { 8 | padding: 0; 9 | margin: 0; 10 | list-style: none; 11 | } -------------------------------------------------------------------------------- /spotifu/css/navigation.css: -------------------------------------------------------------------------------- 1 | .navigation { 2 | flex-shrink: 0; 3 | } 4 | 5 | .navigation button { 6 | /* border: 1px solid red; */ 7 | background: var(--gray60); 8 | color: var(--gray10); 9 | inline-size: 1.875rem; 10 | block-size: 1.875rem; 11 | border-radius: 50%; 12 | border: none; 13 | } 14 | 15 | .navigation button:disabled { 16 | opacity: .5; 17 | cursor: not-allowed; 18 | } 19 | 20 | .navigation-prev i { 21 | position: relative; 22 | left: -1px; 23 | } 24 | 25 | .navigation-next i { 26 | position: relative; 27 | left: 2px; 28 | } -------------------------------------------------------------------------------- /spotifu/css/now-playing.css: -------------------------------------------------------------------------------- 1 | .nowPlaying { 2 | display: flex; 3 | gap: .5rem; 4 | } 5 | 6 | .nowPlaying-cover img { 7 | inline-size: 3.5rem; 8 | block-size: 3.5rem; 9 | vertical-align: middle; 10 | } 11 | 12 | .nowPlaying-details { 13 | display: flex; 14 | gap: 1.5rem; 15 | align-items: center; 16 | } 17 | 18 | .nowPlaying-title { 19 | color: var(--white); 20 | font: var(--baseFontBold); 21 | text-decoration: none; 22 | display: block; 23 | } 24 | 25 | .nowPlaying-artist { 26 | font: var(--small); 27 | color: var(--gray10); 28 | text-decoration: none; 29 | } -------------------------------------------------------------------------------- /spotifu/css/page.css: -------------------------------------------------------------------------------- 1 | @import './playlist-list.css'; 2 | @import './search.css'; 3 | @import './navigation.css'; 4 | @import './header.css'; 5 | @import './sticky.css'; 6 | 7 | .page { 8 | padding-inline-end: 2em; 9 | padding-inline-start: 2em; 10 | padding-block-end: 2em; 11 | overflow: auto; 12 | } 13 | 14 | .page-block { 15 | display: flex; 16 | flex-direction: column; 17 | gap: 2em; 18 | } 19 | 20 | .page .header { 21 | margin-block-end: 1rem; 22 | margin-inline-end: -1.5rem; 23 | margin-inline-start: -1.5rem; 24 | } -------------------------------------------------------------------------------- /spotifu/css/player-controls.css: -------------------------------------------------------------------------------- 1 | .playerControls { 2 | display: flex; 3 | flex-direction: column; 4 | gap: .25rem; 5 | } 6 | 7 | .playerControls-buttons { 8 | display: flex; 9 | gap: 1rem; 10 | justify-content: center; 11 | } -------------------------------------------------------------------------------- /spotifu/css/player-playback.css: -------------------------------------------------------------------------------- 1 | .playerPlayback { 2 | display: flex; 3 | /* border: 1px solid red; */ 4 | align-items: center; 5 | gap: .5rem; 6 | } 7 | 8 | .playerPlayback-slider { 9 | /* flex: 1; */ 10 | flex-grow:1; 11 | flex-shrink: 1; 12 | flex-basis: 0%; 13 | } 14 | 15 | .playerPlayback-progressTime { 16 | /* border: 1px solid red; */ 17 | font: var(--small); 18 | line-height: 1; 19 | position: relative; 20 | top: 1px; 21 | } -------------------------------------------------------------------------------- /spotifu/css/player-volume.css: -------------------------------------------------------------------------------- 1 | .playerVolume { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .playerVolume-slider { 7 | flex: 1; 8 | inline-size: 6rem; 9 | } -------------------------------------------------------------------------------- /spotifu/css/player.css: -------------------------------------------------------------------------------- 1 | @import './slider.css'; 2 | @import './player-controls.css'; 3 | @import './player-playback.css'; 4 | @import './player-volume.css'; 5 | @import './now-playing.css'; 6 | 7 | .player { 8 | display: flex; 9 | gap: 1.5rem; 10 | padding: 1rem; 11 | /* margin-block-start: 5rem; */ 12 | /* border-top: 1px solid red; */ 13 | box-shadow: inset 0 1px 0 var(--gray30); 14 | } 15 | 16 | .player > * { 17 | flex: 1; 18 | /* border: 1px solid red; */ 19 | } 20 | 21 | .player-control { 22 | border: none; 23 | padding: 0; 24 | background: none; 25 | color: var(--gray10); 26 | font-size: 1rem; 27 | padding: .5rem; 28 | cursor: pointer; 29 | } 30 | 31 | .player-playerVolume { 32 | display: flex; 33 | justify-content: flex-end; 34 | } -------------------------------------------------------------------------------- /spotifu/css/playlist-a.css: -------------------------------------------------------------------------------- 1 | .playlistA { 2 | /* border: 1px solid red; */ 3 | inline-size: 13em; 4 | padding: 1rem; 5 | border-radius: .25rem; 6 | background: var(--gray40); 7 | box-sizing: border-box; 8 | transition: .3s background; 9 | } 10 | 11 | .playlistA:hover, .playlistA:focus-within { 12 | cursor: pointer; 13 | background: var(--gray30); 14 | } 15 | 16 | 17 | .playlistA:hover .playlistA-cover button, 18 | .playlistA:focus-within .playlistA-cover button { 19 | opacity: 1; 20 | transform: translateY(0); 21 | } 22 | 23 | .playlistA-cover img { 24 | vertical-align: middle; 25 | inline-size: 100%; 26 | block-size: auto; 27 | } 28 | 29 | .playlistA-cover { 30 | position: relative; 31 | border-radius: .75rem; 32 | overflow: hidden; 33 | margin-block-end: 1rem; 34 | } 35 | 36 | .playlistA button { 37 | position: absolute; 38 | right: .5rem; 39 | bottom: .5rem; 40 | opacity: 0; 41 | transform: translateY(.5rem); 42 | will-change: opacity, transform; 43 | transition: .3s opacity, .3s transform; 44 | } 45 | 46 | .playlistA-title { 47 | font: var(--baseFontBold); 48 | color: var(--white); 49 | margin: 0; 50 | } 51 | 52 | .playlistA-description { 53 | font: var(--baseFont); 54 | margin: 0; 55 | 56 | } -------------------------------------------------------------------------------- /spotifu/css/playlist-b.css: -------------------------------------------------------------------------------- 1 | 2 | .playlistB { 3 | display: flex; 4 | inline-size: 17.5rem; 5 | border-radius: .5rem; 6 | overflow: hidden; 7 | background: rgba(255,255,255, .1); 8 | transition: .3s background; 9 | /* flex-shrink: 0; */ 10 | /* flex: 1; */ 11 | } 12 | 13 | .playlistB:hover, .playlistB:focus-within { 14 | background: rgba(255,255,255, .2); 15 | } 16 | 17 | .playlistB-details { 18 | display: flex; 19 | padding: 1rem; 20 | gap: .5rem; 21 | align-items: center; 22 | } 23 | 24 | .playlistB-cover img { 25 | vertical-align: middle; 26 | inline-size: 4.75rem; 27 | block-size: 4.75rem; 28 | } 29 | 30 | .playlistB-title { 31 | color: var(--white); 32 | font: var(--baseFontBold); 33 | margin: 0; 34 | } 35 | 36 | .playlistB:hover .playlistB-control, 37 | .playlistB:focus-within .playlistB-control{ 38 | opacity: 1; 39 | } 40 | 41 | .playlistB-control { 42 | opacity: 0; 43 | transition: .3s; 44 | } 45 | -------------------------------------------------------------------------------- /spotifu/css/playlist-list.css: -------------------------------------------------------------------------------- 1 | @import './playlist-a.css'; 2 | @import './playlist-b.css'; 3 | 4 | .playlistList { 5 | /* border: 1px solid red; */ 6 | } 7 | .playlistList-top { 8 | padding-block-end: .5rem; 9 | padding-block-start: .5rem; 10 | margin-block-end: 1rem; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | gap: 1rem; 15 | } 16 | 17 | .playlistList-title { 18 | font: var(--headline2); 19 | color: var(--white); 20 | margin: 0; 21 | } 22 | 23 | .playlistList-container { 24 | display: flex; 25 | overflow-x: auto; 26 | gap: 1rem; 27 | } 28 | 29 | .playlistList-container > * { 30 | flex-shrink: 0; 31 | } -------------------------------------------------------------------------------- /spotifu/css/scrollbar.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | /* background: red; */ 3 | inline-size: .5rem; 4 | block-size: .5rem; 5 | } 6 | 7 | /* ::-webkit-scrollbar-button { 8 | background: blue; 9 | } */ 10 | 11 | ::-webkit-scrollbar-thumb { 12 | background: var(--gray60); 13 | } 14 | 15 | ::-webkit-scrollbar-track { 16 | background: var(--gray50); 17 | } 18 | 19 | /* ::-webkit-scrollbar-thumb:horizontal { 20 | background: pink; 21 | } 22 | 23 | .playlistList-container::-webkit-scrollbar-thumb:horizontal { 24 | background: black; 25 | } 26 | 27 | ::-webkit-scrollbar-thumb:vertical { 28 | background: green; 29 | } */ -------------------------------------------------------------------------------- /spotifu/css/search.css: -------------------------------------------------------------------------------- 1 | .search { 2 | position: relative; 3 | /* flex-shrink: 0; 4 | flex-grow: 1; */ 5 | flex: 1; 6 | } 7 | 8 | .search i { 9 | position: absolute; 10 | font-size: 1rem; 11 | left: .5rem; 12 | /* top: .5rem; */ 13 | top: calc(50% - .5rem); 14 | block-size: 1rem; 15 | color: var(--gray10); 16 | 17 | } 18 | 19 | .search input { 20 | font: var(--baseFont); 21 | color: var(--gray30); 22 | border-radius: 1.25rem; 23 | border: none; 24 | max-inline-size: 22rem; 25 | width: 100%; 26 | padding: .5rem; 27 | padding-inline-start: 2rem; 28 | } 29 | 30 | .search:focus-within i { 31 | color: var(--gray30); 32 | } 33 | 34 | .search input::-webkit-input-placeholder { 35 | color: var(--gray10); 36 | } -------------------------------------------------------------------------------- /spotifu/css/sidebar.css: -------------------------------------------------------------------------------- 1 | @import './logo.css'; 2 | @import './list.css'; 3 | @import './menu.css'; 4 | 5 | .sidebar { 6 | background: var(--gray60); 7 | display: flex; 8 | gap: 1.5rem; 9 | flex-direction: column; 10 | padding-block-end: 1.5rem; 11 | padding-block-start: 1.5rem; 12 | overflow: auto; 13 | } -------------------------------------------------------------------------------- /spotifu/css/slider.css: -------------------------------------------------------------------------------- 1 | .slider { 2 | /* inline-size: 200px; */ 3 | background: rgba(255,255,255,.2); 4 | block-size: .25rem; 5 | border-radius: .25rem; 6 | } 7 | 8 | .slider:hover .slider-progress { 9 | background: var(--primary); 10 | } 11 | 12 | .slider:hover .slider-buttton { 13 | display: block; 14 | } 15 | 16 | .slider-progress { 17 | block-size: inherit; 18 | border-radius: inherit; 19 | background: var(--white); 20 | inline-size: 20%; 21 | position: relative; 22 | } 23 | 24 | .slider-buttton { 25 | background: var(--white); 26 | padding: 0; 27 | border: 0; 28 | 29 | block-size: 200%; 30 | aspect-ratio: 1/1; 31 | border-radius: 50%; 32 | 33 | position: absolute; 34 | left: 100%; 35 | top: 50%; 36 | transform: translate(-50%, -50%); 37 | display: none; 38 | } -------------------------------------------------------------------------------- /spotifu/css/sticky.css: -------------------------------------------------------------------------------- 1 | 2 | .sticky { 3 | position: sticky; 4 | top: 0; 5 | z-index: 1; 6 | } -------------------------------------------------------------------------------- /spotifu/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox Layout 8 | 9 | 10 | 11 |
12 |

Align items

13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |

Justify Content

22 |
23 | 24 | 35 |
36 |
37 |
38 |

Justify Content

39 |
40 | 41 | 42 | 43 |
44 |
45 | 46 |
47 |

Flex

48 |
49 | 50 |
51 | 52 |
53 |
54 |
55 |
56 |

Flex Wrap

57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 |
73 |
74 |
75 |

Flex Direciton

76 |
77 |
primer
78 |
segundo
79 |
tercer
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |

Flex Order

93 |
94 | 95 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt aut dolore sapiente magni saepe officia perspiciatis iure odit iusto? Nulla accusamus earum, commodi voluptatum quaerat reiciendis dolores dignissimos aperiam praesentium.

96 |
97 |
98 | 99 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt aut dolore sapiente magni saepe officia 100 | perspiciatis iure odit iusto? Nulla accusamus earum, commodi voluptatum quaerat reiciendis dolores dignissimos 101 | aperiam praesentium.

102 |
103 |
104 | 105 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt aut dolore sapiente magni saepe officia 106 | perspiciatis iure odit iusto? Nulla accusamus earum, commodi voluptatum quaerat reiciendis dolores dignissimos 107 | aperiam praesentium.

108 |
109 | 110 |
111 |
112 |

Default Flex

113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 | 136 | -------------------------------------------------------------------------------- /spotifu/fonts/AvenirLTStd-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/AvenirLTStd-Black.otf -------------------------------------------------------------------------------- /spotifu/fonts/AvenirLTStd-Book.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/AvenirLTStd-Book.otf -------------------------------------------------------------------------------- /spotifu/fonts/AvenirLTStd-Roman.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/AvenirLTStd-Roman.otf -------------------------------------------------------------------------------- /spotifu/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/icomoon.eot -------------------------------------------------------------------------------- /spotifu/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /spotifu/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/icomoon.ttf -------------------------------------------------------------------------------- /spotifu/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/fonts/icomoon.woff -------------------------------------------------------------------------------- /spotifu/icons/Play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/add-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /spotifu/icons/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /spotifu/icons/credit-card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/home-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/library-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/music.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/prev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/round.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/search-active.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spotifu/icons/volume-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /spotifu/icons/volume-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /spotifu/icons/volume-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /spotifu/images/anime-hits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/images/anime-hits.png -------------------------------------------------------------------------------- /spotifu/images/grand-escape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/images/grand-escape.jpg -------------------------------------------------------------------------------- /spotifu/images/grand-scape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/images/grand-scape.png -------------------------------------------------------------------------------- /spotifu/images/spotifu-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonidasEsteban/curso-css-grid-layout-interfaces/008339d05a7d9930ec559ded16056df7bfb34beb/spotifu/images/spotifu-logo.png --------------------------------------------------------------------------------