diff --git a/01/style.css b/01/style.css index faa3160d..7500a94c 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; + display: block; + content: ''; + height: 0; + border: 150px solid #dcdcdc; + border-right-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 0% 100%, 100% 0); +} diff --git a/02/index.html b/02/index.html index 1e60de72..ea5acdbd 100644 --- a/02/index.html +++ b/02/index.html @@ -1,16 +1,16 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #02 - - - + + +
A
C
B
- - \ No newline at end of file + + diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..61ce3945 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,57 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } +body { + display: flex; + flex-direction: column; +} +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; + display: flex; + justify-content: center; + align-items: center; - display: flex; - justify-content: center; - align-items: center; + height: 50vh; } .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 screen and (min-width: 600px) { + body { + display: grid; + + grid-template-areas: + 'area-a area-a' + 'area-c area-b'; + grid-template-columns: minmax(auto, 600px) minmax(auto, 600px); + justify-content: center; + } + .a { + grid-area: area-a; + } + + .b { + grid-area: area-b; + } + + .c { + grid-area: area-c; + } +} diff --git a/03/index.html b/03/index.html index 4a2e35c2..4bd15b2b 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,59 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + + + + + + +
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium + beatae maxime minus nulla ullam atque sint! Vero, officia ex soluta + maiores illo eveniet nesciunt labore neque repudiandae, ut necessitatibus + quo. +
+
+ + + + + + +
+ + + diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..0a4413fa --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,9 @@ +body { + display: grid; + grid-template-areas: + 'area-p area-v' + 'area-t area-t'; + + max-width: 1400px; + margin: 0 auto; +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..299bdda8 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,42 @@ * { - 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; +.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 + line-height: 0; + + border-color: #ffffba; + grid-area: area-p; } .t { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: area-t; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + position: relative; + height: 0; + padding-bottom: calc(100% * 315 / 560); + grid-area: area-v; +} +.v iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/03/styles/images/bird1280.jpg b/03/styles/images/bird1280.jpg new file mode 100644 index 00000000..5d38625b Binary files /dev/null and b/03/styles/images/bird1280.jpg differ diff --git a/03/styles/images/bird1920.jpg b/03/styles/images/bird1920.jpg new file mode 100644 index 00000000..74385749 Binary files /dev/null and b/03/styles/images/bird1920.jpg differ diff --git a/03/styles/images/bird640.jpg b/03/styles/images/bird640.jpg new file mode 100644 index 00000000..78224ec4 Binary files /dev/null and b/03/styles/images/bird640.jpg differ diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..9eea64a3 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,7 @@ +body { + display: grid; + grid-template-areas: + 'area-p' + 'area-t' + 'area-v'; +} diff --git a/03/styles/reset.css b/03/styles/reset.css new file mode 100644 index 00000000..9943a66c --- /dev/null +++ b/03/styles/reset.css @@ -0,0 +1,89 @@ +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: .8rem;} + +strong {font-weight: bold;} + +sub, sup {font-size: .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 { + +} \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..f43b9fcd --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,8 @@ +body { + display: grid; + grid-template-areas: + 'area-p area-t' + 'area-v area-t'; + + grid-template-columns: minmax(200px, 50vw) auto; +} diff --git a/04/css/desktop.css b/04/css/desktop.css new file mode 100644 index 00000000..1302dfe1 --- /dev/null +++ b/04/css/desktop.css @@ -0,0 +1,29 @@ +.nav__hamburger { + display: none; +} +.nav__list { + display: flex; +} +.nav__item--menu { + position: relative; +} +.nav__list--dropdown { + display: block; + position: absolute; + background-color: gray; + left: -60px; + right: -180px; + top: 100%; + display: none; +} +.nav__link { + color: white; + border: 1px solid black; + padding: 5px 20px; +} +.nav__link--dropdown { + border: none; +} +.nav__item:hover > .nav__list--dropdown { + display: block; +} diff --git a/04/css/global.css b/04/css/global.css new file mode 100644 index 00000000..f7aa038d --- /dev/null +++ b/04/css/global.css @@ -0,0 +1,10 @@ +:root { + --main: #3674b5; +} + +html{ + font-size: 10px; +} +body { + font-size: 2rem; +} diff --git a/04/css/mobile.css b/04/css/mobile.css new file mode 100644 index 00000000..f2182046 --- /dev/null +++ b/04/css/mobile.css @@ -0,0 +1,34 @@ +.nav { + background-color: var(--main); + padding: 20px 40px; +} +.nav__toggler { + display: none; +} +.nav__hamburger { + display: block; + float: right; +} +.nav__list{ + display: none; +} +.nav__list--dropdown{ + display: block; +} + +.nav__toggler:checked + .nav__list { + display: block; +} +.nav__list--dropdown { + padding-left: 3rem; +} +.nav__item { + padding: 5px; +} +.nav__link { + text-decoration: none; + color: black; +} +.nav__link:hover { + text-decoration: underline; +} diff --git a/04/css/reset.css b/04/css/reset.css new file mode 100644 index 00000000..d633db98 --- /dev/null +++ b/04/css/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/04/index.html b/04/index.html index e3ca9540..b4c4270b 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,53 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - - - - - \ No newline at end of file + + diff --git a/05/css/desktop.css b/05/css/desktop.css new file mode 100644 index 00000000..78a35bfb --- /dev/null +++ b/05/css/desktop.css @@ -0,0 +1,33 @@ +.blue--header { + display: flex; + justify-content:space-between; + position: relative; +} +.orange--logo { + width: 200px; margin: 0; +} +.orange--menu { + position: absolute; + width: 400px; + background-color: var(--item); + right: 0;} + +.menu__hamburger { + display: none; +} +.blue--main { + display: flex; +} +.orange--main { + width: 50%; +} +.blue--section { + display: flex; + justify-content: space-around; +} +.orange--section{ + width: 30%; +} +.orange--section + .orange--section { + margin: 0; + } \ No newline at end of file diff --git a/05/css/global.css b/05/css/global.css new file mode 100644 index 00000000..5162ef79 --- /dev/null +++ b/05/css/global.css @@ -0,0 +1,18 @@ +:root { + --wrapper: green; + --container: blue; + --item: orange; +} + +.green { + border: 3px solid var(--wrapper); + padding: 3px; +} + +.blue { + border: 3px solid var(--container); +} +.orange { + min-height: 50px; + background-color: var(--item); +} diff --git a/05/css/mobile.css b/05/css/mobile.css new file mode 100644 index 00000000..7db47e6c --- /dev/null +++ b/05/css/mobile.css @@ -0,0 +1,59 @@ +.orange--logo { + width: 100px; + margin: 0 auto; +} +.orange--menu { + background-color: transparent; +} +.blue--header { + display: flex; + padding: 10px; +} + +.menu__toggler { + position: relative; + width: 40px; + height: 40px; + cursor: pointer; + opacity: 0; +} + +.menu__hamburger { + position: absolute; + width: 40px; + height: 40px; + top: 10px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 24px; +} +.orange--main { + min-height: 300px; +} + +.orange--main + .orange--main { + margin-top: 10px; +} + +.orange--section { + min-height: 300px; +} + +.orange--section + .orange--section { + margin-top: 10px; +} + +.orange--footer { + margin: 10px auto; + width: 200px; + max-width: 100%; +} +.orange--main + .orange--main { + margin: 0 0 0 10px; +} +.blue{ + padding: 5px 0; +} \ No newline at end of file diff --git a/05/css/reset.css b/05/css/reset.css new file mode 100644 index 00000000..d633db98 --- /dev/null +++ b/05/css/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..1e17ecf2 --- /dev/null +++ b/05/index.html @@ -0,0 +1,53 @@ + + + + + + Document + + + + + + + + +
+
+

+ + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +