diff --git a/01/index.html b/01/index.html index 84dbc861..0dcec4da 100644 --- a/01/index.html +++ b/01/index.html @@ -1,16 +1,22 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #01 - - - + + +
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita provident ipsam qui vitae blanditiis ratione illo. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, + voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore + obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi atque cum + eveniet, voluptas adipisci fugit esse. Lorem ipsum dolor sit amet consectetur adipisicing + elit. Adipisci dolorem assumenda, laboriosam suscipit ad eligendi rerum fuga esse dignissimos. + Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque necessitatibus + perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, + expedita provident ipsam qui vitae blanditiis ratione illo.
- - \ No newline at end of file + + diff --git a/01/style.css b/01/style.css index faa3160d..2a60097e 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,24 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } .content { - background-color: #fff; - min-height: 320px; - min-width: 320px; - max-width: 600px; - text-align: justify; + background-color: #fff; + min-height: 320px; + min-width: 320px; + max-width: 600px; + text-align: justify; } .content::before { - float: left; - display: block; - content: ''; - height: 0; - border: 150px solid #dcdcdc; - border-right-color: transparent; - border-bottom-color: transparent; -} \ No newline at end of file + float: left; + shape-outside: polygon(100% 3%, 0% 100%, 1% 100%); + display: block; + content: ''; + height: 0; + border: 150px solid #dcdcdc; + border-right-color: transparent; + border-bottom-color: transparent; +} diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..827c644d 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,61 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; +body { + display: grid; + max-width: 1200px; + margin: 0 auto; +} - display: flex; - justify-content: center; - align-items: center; +.a, +.b, +.c { + border: 3px solid transparent; + height: 50vh; + + display: flex; + justify-content: center; + align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; } .b { - border-color: #ffdfba; + border-color: #ffdfba; } .c { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + order: 1; +} + +/* Media queries */ + +@media only screen and (min-width: 600px) { + html { + justify-content: center; + } + + body { + grid-template-columns: 1fr 1fr; + max-width: 1200px; + } + + .a { + grid-column: span 2; + } + + .b, + .c { + grid-row: 2; + } + + .b { + order: 1; + } +} diff --git a/03/assets/cat-desktop.jpg b/03/assets/cat-desktop.jpg new file mode 100644 index 00000000..dc2b47c8 Binary files /dev/null and b/03/assets/cat-desktop.jpg differ diff --git a/03/assets/cat-mobile.jpg b/03/assets/cat-mobile.jpg new file mode 100644 index 00000000..2965f96c Binary files /dev/null and b/03/assets/cat-mobile.jpg differ diff --git a/03/assets/cat-tablet.jpg b/03/assets/cat-tablet.jpg new file mode 100644 index 00000000..96815ac1 Binary files /dev/null and b/03/assets/cat-tablet.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..bfdfee71 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,50 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + + + + + +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum officia repudiandae fugit + voluptatem, labore assumenda quasi eius porro illo nulla exercitationem unde in adipisci + quisquam omnis quas nam animi suscipit. Laborum harum ullam officia, ex sed laboriosam + porro dolorum illum alias. Dolorem ab iste sunt debitis laborum, harum consequuntur magnam + animi illum, eius nobis eligendi inventore id modi natus alias? Possimus voluptate + excepturi dolor deleniti ipsa placeat odio mollitia sed ea nulla voluptas ratione nihil + autem expedita suscipit cumque error nisi, quam quos accusantium. +

+
+
+ + + + Cat + +
+ + + +
+ + diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..d5e95b3c --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,19 @@ +.grid-container { + max-width: 1400px; + margin: 0 auto; + grid-template-columns: repeat(2, 1fr); +} + +.p { + grid-column: 1 / 2; + grid-row: 1; +} + +.v { + grid-column: 2; +} + +.t { + grid-column: span 2; + grid-row: 2; +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..9148061d 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,47 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -.p, .t, .v { - border: 3px solid transparent; - min-height: 50px; +.grid-container { + display: grid; +} + +.p, +.t, +.v { + border: 3px solid transparent; + min-height: 50px; - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .p { - border-color: #ffffba + border-color: #ffffba; } .t { - border-color: #ffdfba; + border-color: #ffdfba; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + height: 0; + position: relative; + padding-bottom: calc(4 / 6 * 100%); +} + +img { + max-width: 100%; +} + +iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..e800ffdc --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,4 @@ +.t, +.v { + order: 1; +} diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..d00aea6e --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,19 @@ +.grid-container { + display: grid; + grid-template-columns: minmax(200px, 50%) 1fr; +} + +.p { + grid-column: span 1; + grid-row: 1; +} + +.v { + grid-column: 1; + grid-row: 2; +} + +.t { + grid-column: 2; + grid-row: 1 / span 2; +} diff --git a/04/index.html b/04/index.html index e3ca9540..51fa8421 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,40 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - - + + + diff --git a/04/styles/desktop.css b/04/styles/desktop.css new file mode 100644 index 00000000..0c1bdd0a --- /dev/null +++ b/04/styles/desktop.css @@ -0,0 +1,84 @@ +.container { + background-color: #ffffff; + margin: 30px 20px; +} + +.nav { + display: flex; + gap: 30px; +} + +.logo { + display: none; +} + +.nav__item { + position: relative; + color: #333333; + padding: 30px; + font-weight: 500; +} + +.nav__item:first-child, +.nav__item:nth-child(2) { + color: #029ae1; +} + +.nav__item--hover:hover { + border-top: 3px solid #029ae1; +} + +.nav__item--hover::after, +.first-level__item-two::after { + content: '>'; + position: absolute; + right: 5px; + transform: rotate(90deg); +} + +.nav__first-level, +.nav__second-level { + position: absolute; + display: flex; + flex-direction: column; + gap: 20px; + bottom: -97px; + left: 0; + padding: 20px 30px; + background-color: #333333; + width: 253px; + display: none; +} + +header .container ul li:focus-within > ul, +header .container ul li:hover > ul { + display: initial; +} + +.first-level__item-one, +.second-level__item-one { + padding-bottom: 20px; + color: #dadada; +} + +.first-level__item-two, +.second-level__item-two { + color: #ffffff; +} + +.first-level__item-two::after { + transform: rotate(0deg); + right: 10px; + color: #dadada; +} + +.nav__second-level { + left: 253px; + top: 55px; + bottom: auto; +} + +.hamburger, +.container__mobile { + display: none; +} diff --git a/04/styles/global.css b/04/styles/global.css new file mode 100644 index 00000000..1a3cfa06 --- /dev/null +++ b/04/styles/global.css @@ -0,0 +1,3 @@ +:root { + background-color: #f5f5f5; +} diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..bc8b569d --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,118 @@ +header { + display: flex; + justify-content: space-between; + padding: 20px; + position: relative; +} + +.logo { + font-weight: 700; + font-size: 25px; + color: #029ae1; + text-decoration: none; +} + +#hamburger { + width: 35px; + height: 20px; + border: 0; + border-top: 3px solid #3e3e3e; + background: transparent; + position: relative; + transition: 0.3s transform linear; + cursor: pointer; +} + +#hamburger::before, +#hamburger::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 3px solid #3e3e3e; + transform: translateY(10px); +} + +header input { + appearance: none; +} + +#hamburger::after { + transform: translateY(25px); + transition: 0.3s transform linear; +} + +#hamburger:focus { + transform: rotate(45deg) translateY(5px); + border: none; +} + +#hamburger:focus::after { + transform: rotate(-90deg) translateX(-10px); +} + +.nav { + flex-direction: column; + gap: 20px; + padding: 20px; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #fff; + border-top: 1px solid rgb(0, 0, 0, 0.1); + display: none; +} + +.nav__item, +.nav__first-level, +.nav__second-level, +.first-level__item-two, +.first-level__item-first { + display: flex; + flex-direction: column; + gap: 20px; +} + +.nav__item:hover { + color: #029ae1; + font-weight: 800; +} + +.nav__first-level, +.nav__second-level { + display: none; +} + +header input:checked + ul { + display: flex; + gap: 20px; +} + +header input:checked + ul li:focus-within > ul, +header input:checked + ul li:hover > ul { + display: initial; +} + +.first-level__item-one, +.first-level__item-two, +.second-level__item-one, +.second-level__item-two { + padding: 20px; + background-color: #f5f5f5; + border-top: 1px solid lightgrey; +} + +.first-level__item-one:hover, +.first-level__item-two:hover, +.second-level__item-one:hover, +.second-level__item-two:hover { + color: #029ae1; + font-weight: 800; +} + +header .nav ul li ul { + position: relative; + width: 100%; +} diff --git a/04/styles/reset.css b/04/styles/reset.css new file mode 100644 index 00000000..80eeb069 --- /dev/null +++ b/04/styles/reset.css @@ -0,0 +1,293 @@ +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} /* we'll restore bullets as needed for content */ + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} + +small { + font-size: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.8rem; + line-height: 0; + position: relative; +} +sup { + top: -0.5rem; +} +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ''; + display: table; + clear: both; +} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} +a:hover { + color: var(--featured-color-hover); +} + +@media screen and (max-width: 480px) { +} + +@media print { +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..9d4d326d --- /dev/null +++ b/05/index.html @@ -0,0 +1,60 @@ + + + + + + + devmentor.pl - HTML & CSS: RWD - #05 + + + + +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + diff --git a/05/styles/reset.css b/05/styles/reset.css new file mode 100644 index 00000000..80eeb069 --- /dev/null +++ b/05/styles/reset.css @@ -0,0 +1,293 @@ +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} /* we'll restore bullets as needed for content */ + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} + +small { + font-size: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.8rem; + line-height: 0; + position: relative; +} +sup { + top: -0.5rem; +} +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ''; + display: table; + clear: both; +} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} +a:hover { + color: var(--featured-color-hover); +} + +@media screen and (max-width: 480px) { +} + +@media print { +} diff --git a/05/styles/styles.css b/05/styles/styles.css new file mode 100644 index 00000000..589800a8 --- /dev/null +++ b/05/styles/styles.css @@ -0,0 +1,225 @@ +body { + display: flex; + flex-direction: column; +} + +/* Navigation */ + +.container__green { + display: grid; + justify-content: center; + align-items: center; + width: 100%; + border: 3px solid #0ed145; + margin: auto; +} + +.container__blue { + display: grid; + grid: auto-flow / repeat(5, 20%); + justify-items: end; + width: 100vw; + max-width: 1000px; + border: 3px solid #05a8f3; + margin: 1px; + padding: 5px 5px 10px 5px; +} + +.rectangle__orange { + height: 30px; + width: -webkit-fill-available; + background-color: #ffca19; + grid-column: 2 / span 2; +} + +.rectangle___desktop { + display: none; +} + +#hamburger { + width: 35px; + height: 20px; + border: 0; + margin-right: 10px; + border-top: 3px solid #3e3e3e; + background: transparent; + position: relative; + transition: 0.3s transform linear; + cursor: pointer; + grid-column: 5 / span 1; + grid-row: 1; +} + +#hamburger::before, +#hamburger::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 3px solid #3e3e3e; + transform: translateY(10px); +} + +#hamburger::after { + transform: translateY(25px); + transition: 0.3s transform linear; +} + +#hamburger:focus { + transform: rotate(45deg) translateY(5px); + border: none; +} + +#hamburger:focus::after { + transform: rotate(-90deg) translateX(-10px); +} + +#hamburger__hide-siebar { + border-top: none; + transform: rotate(-90deg) translateX(-10px); +} + +#hamburger__hide-siebar::after { + transform: translateY(10px) rotate(45deg); +} + +#hamburger__hide-siebar::before { + transform: translateY(10px) rotate(-45deg); +} + +.nav { + flex-direction: column; + gap: 20px; + padding: 20px; + position: absolute; + top: 6%; + left: 0; + right: 0; + background: #fff; + border-top: 1px solid rgb(0, 0, 0, 0.1); + display: none; +} + +.nav__item { + display: flex; + justify-content: flex-end; + gap: 20px; +} + +.nav__item:hover { + color: #ffca19; + font-weight: 800; + cursor: pointer; +} + +header input { + appearance: none; +} + +header input:checked + ul { + display: flex; + gap: 20px; +} + +header input:checked + ul li:focus-within > ul, +header input:checked + ul li:hover > ul { + display: initial; +} + +/* Media Queries Nav*/ + +@media (min-width: 865px) { + body { + gap: 10px; + } + .container__blue { + padding: 2px 0 4px 0; + } + + #hamburger { + display: none; + } + + .rectangle__desktop { + display: initial; + grid-column: 4 / span 2; + height: 30px; + background-color: #ffca19; + width: -webkit-fill-available; + } + + .rectangle__orange { + grid-column: 1 / span 1; + } +} + +/* Section - main */ + +.container__main, +.container__second { + display: grid; + gap: 10px; + grid-template-columns: repeat(4, minmax(200px, 500px)); + padding: 0; +} + +.rectangle__first-main, +.rectangle__second-main, +.rectangle__third-main, +.rectangle__fourth-main, +.rectangle__fifth-main { + grid-column: 1 / span 4; + height: 200px; +} + +/* Media Queries Main */ + +@media (min-width: 865px) { + .main__section { + padding: 10px; + } + + .container__main { + padding: 10px 0; + gap: 5px; + } + + .container__second { + padding: 10px; + } + + .rectangle__first-main { + grid-column: 1 / span 2; + } + + .rectangle__second-main { + grid-column: 3 / span 2; + } + + .rectangle__third-main { + grid-column: 1 / span 1; + } + + .rectangle__fourth-main { + grid-column: 2 / span 2; + } + + .rectangle__fifth-main { + grid-column: 4 / span 1; + } +} + +/* Footer */ + +.rectangle__footer { + grid-column: 3 / span 2; +} + +/* Media Queries Footer */ + +@media (min-width: 865px) { + .rectangle__footer { + grid-column: 3 / span 1; + } +}