diff --git a/01/style.css b/01/style.css index faa3160d..d02f2834 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/styles/global.css b/02/styles/global.css index a1c785e8..4ea2148e 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,49 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: grid; + grid-template-areas: + "a" + "b" + "c"; } -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; + height: 50vh; - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; + grid-area: a; } .b { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: b; } .c { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + grid-area: c; +} + +@media screen and (min-width: 600px) { + body { + grid-template-areas: + "a a" + "c b"; + grid-template-columns: repeat(2, minmax(auto, 600px)); + justify-content: center; + } +} diff --git a/03/images/img-large.jpg b/03/images/img-large.jpg new file mode 100644 index 00000000..64e4d667 Binary files /dev/null and b/03/images/img-large.jpg differ diff --git a/03/images/img-medium.jpg b/03/images/img-medium.jpg new file mode 100644 index 00000000..5835bcb5 Binary files /dev/null and b/03/images/img-medium.jpg differ diff --git a/03/images/img-small.jpg b/03/images/img-small.jpg new file mode 100644 index 00000000..ea3a97c5 Binary files /dev/null and b/03/images/img-small.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..7caa164c 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,47 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, natus + dolore. Officiis placeat, saepe vero omnis quibusdam sed? Nemo excepturi + deleniti illo, officia repellendus placeat vero repudiandae omnis quis + odio. Perferendis saepe ullam facere amet accusamus quasi sed nesciunt + deserunt, voluptatem consequatur ex nostrum dolorem asperiores neque + exercitationem. Nulla quia explicabo recusandae tenetur architecto omnis + tempora ratione, reprehenderit officiis molestiae! Dicta tempore omnis + ullam deserunt mollitia doloremque quia modi repudiandae quaerat ipsum, + repellendus, fuga ut impedit magnam dolorum harum nemo optio porro quis + consectetur et odio! Deserunt nobis magnam nihil! Officiis quas obcaecati + excepturi alias ipsa eveniet quisquam quo sequi sunt cumque laudantium + totam dolor corporis quod dolore, vel consequuntur cum porro illo tempora. + Voluptatem nostrum in sequi vero iusto. Autem sequi, consectetur porro + incidunt totam et dicta facere perspiciatis explicabo veniam, rem + laudantium. Molestiae sequi vero optio excepturi illum numquam in + blanditiis reprehenderit, tenetur vitae ducimus illo unde corporis. +
+
+ + + + + picture + +
+ + + diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..6185221d 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,75 @@ * { - 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; +body { + display: grid; + grid-template-areas: + "p" + "t" + "v"; + /* overflow: hidden; */ +} + +.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: #1f1f1b; + grid-area: p; + line-height: 0; + object-fit: cover; + object-position: center; } .t { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: t; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + grid-area: v; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + position: relative; +} + +.p img { + max-width: 100%; +} +iframe { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +@media screen and (min-width: 600px) { + body { + grid-template-areas: + "p t" + "v t"; + grid-template-columns: minmax(200px, 50vw); + } +} +@media screen and (min-width: 1200px) { + body { + grid-template-areas: + "p v" + "t t"; + max-width: 1400px; + margin: 0 auto; + } +} diff --git a/04/index.html b/04/index.html index e3ca9540..7db9c502 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,36 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - - - - - \ No newline at end of file + + diff --git a/04/styles/desktop.css b/04/styles/desktop.css new file mode 100644 index 00000000..87c9a1b8 --- /dev/null +++ b/04/styles/desktop.css @@ -0,0 +1,58 @@ +.menu { + width: 100%; +} + +.menu-list { + list-style: none; + display: flex; + justify-content: space-between; +} + +.menu-list > li { + position: relative; +} + +.menu-list a { + display: block; + padding: 10px 15px; + text-decoration: none; + color: #333; +} + +.submenu { + list-style: none; + display: none; + position: absolute; + left: 0; + top: 100%; + background-color: #fff; + padding: 10px 0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.submenu li { + position: relative; +} + +.submenu li a { + padding: 10px 15px; + white-space: nowrap; +} + +.menu-list > li:hover > .submenu, +.submenu li:hover > .submenu { + display: block; +} + +.toggle-menu { + display: none; +} + +.hamburger { + display: none; + cursor: pointer; + font-size: 24px; + padding: 10px; + background: #333; + color: #fff; +} diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..27549b6e --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,30 @@ +@media screen and (max-width: 760px) { + .hamburger { + display: block; + } + + .menu-list { + display: none; + flex-direction: column; + width: 100%; + background: #f5f5f5; + } + + .toggle-menu:checked + .hamburger + .menu .menu-list { + display: flex; + } + + .menu-list > li a { + padding: 15px; + border-bottom: 1px solid #ddd; + } + + .submenu { + position: static; + padding-left: 20px; + } + + .submenu li a { + padding-left: 20px; + } +} diff --git a/04/styles/reset.css b/04/styles/reset.css new file mode 100644 index 00000000..45a05ecf --- /dev/null +++ b/04/styles/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..81612455 --- /dev/null +++ b/05/index.html @@ -0,0 +1,42 @@ + + + + + + Mobile first + + + + + + +
+
+

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/05/styles/desktop.css b/05/styles/desktop.css new file mode 100644 index 00000000..f47ed3e6 --- /dev/null +++ b/05/styles/desktop.css @@ -0,0 +1,36 @@ +.blue--header { + justify-content: space-between; +} +.orange--logo { + margin: 0; +} +.orange--menu { + position: static; + width: 40%; + transform: none; + border: 0; + background-color: var(--item-color); +} +.orange--menu::before, +.orange--menu::after { + display: none; +} + +.blue--main, +.blue--section { + height: 30vh; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.blue--section { + justify-content: space-evenly; +} +.orange--main, +.orange--section { + margin: 10px 0; +} + +.blue--footer { + padding: 10px; +} diff --git a/05/styles/global.css b/05/styles/global.css new file mode 100644 index 00000000..41fc8c03 --- /dev/null +++ b/05/styles/global.css @@ -0,0 +1,19 @@ +:root { + --wrapper-color: green; + --container-color: blue; + --item-color: orange; +} +body { + min-height: 100vh; +} +.green { + border: 3px solid green; + padding: 3px; +} +.blue { + border: 3px solid blue; +} +.orange { + min-height: 50px; + background-color: var(--item-color); +} diff --git a/05/styles/mobile.css b/05/styles/mobile.css new file mode 100644 index 00000000..090c6635 --- /dev/null +++ b/05/styles/mobile.css @@ -0,0 +1,65 @@ +.blue--header { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.orange--menu { + position: absolute; + top: 10px; + left: 95%; + transform: translate(-95%, -10%); + border-top: 3px solid black; + background-color: transparent; + padding: 0; + /* margin-top: 10px; */ +} + +.orange--menu::before { + content: ""; + width: 30px; + height: 20px; + display: block; + border-top: 3px solid black; + background-color: transparent; + transform: translate(0, 9px); +} +.orange--menu::after { + content: ""; + width: 30px; + height: 3px; + display: block; + /* border-top: 3px solid black; */ + background-color: black; + transform: translate(); +} + +.orange--logo { + height: 50px; + width: 100px; + margin: 10px 0; +} + +.blue--main, +.blue--section { + height: 30vh; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.orange--main { + flex-basis: 49%; +} + +.orange--section { + flex-basis: 32%; +} + +.blue--footer { + padding: 10px; +} + +.orange--footer { + width: 5rem; + margin: 0 auto; +} diff --git a/05/styles/reset.css b/05/styles/reset.css new file mode 100644 index 00000000..69e48f23 --- /dev/null +++ b/05/styles/reset.css @@ -0,0 +1,74 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role="list"], +ol[role="list"] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +}