diff --git a/01/style.css b/01/style.css index faa3160d..2524f27e 100644 --- a/01/style.css +++ b/01/style.css @@ -19,5 +19,8 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + + shape-outside: polygon(0 0, 0% 100%, 100% 0); + margin-right: 10px; } \ No newline at end of file diff --git a/02/index.html b/02/index.html index 1e60de72..811890f3 100644 --- a/02/index.html +++ b/02/index.html @@ -1,16 +1,33 @@ + - - + + 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..38f5a79f 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,9 +4,17 @@ box-sizing: border-box; } +body { + display: grid; + grid-template-areas: + "a-item" + "b-item" + "c-item"; +} + .a, .b, .c { border: 3px solid transparent; - min-height: 50px; + min-height: 50vh; display: flex; justify-content: center; @@ -14,13 +22,16 @@ } .a { + grid-area: a-item; border-color: #ffffba } .b { + grid-area: b-item; border-color: #ffdfba; } .c { + grid-area: c-item; border-color: #baffc9; } \ No newline at end of file diff --git a/02/styles/tablet.css b/02/styles/tablet.css new file mode 100644 index 00000000..4649f140 --- /dev/null +++ b/02/styles/tablet.css @@ -0,0 +1,8 @@ +body { + margin: 0 auto; + max-width: 1200px; + display: grid; + grid-template-areas: + "a-item a-item" + "c-item b-item"; +} \ No newline at end of file diff --git a/03/img/hero-desktop.jpg b/03/img/hero-desktop.jpg new file mode 100644 index 00000000..265555f1 Binary files /dev/null and b/03/img/hero-desktop.jpg differ diff --git a/03/img/hero-mobile.jpg b/03/img/hero-mobile.jpg new file mode 100644 index 00000000..62098510 Binary files /dev/null and b/03/img/hero-mobile.jpg differ diff --git a/03/img/hero-tablet.jpg b/03/img/hero-tablet.jpg new file mode 100644 index 00000000..75ec656a Binary files /dev/null and b/03/img/hero-tablet.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..0280d085 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,73 @@ + - - + + + + + + devmentor.pl - HTML & CSS: RWD - #03 + - -
T
-
P
- V + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate nisi quidem, cum officia + doloremque provident consectetur beatae aut praesentium quasi eaque laborum ut soluta sint nihil itaque + reprehenderit labore. Cumque, quod assumenda! Modi sit repudiandae error pariatur quibusdam non expedita. + reprehenderit labore. Cumque, quod assumenda! Modi sit repudiandae error pariatur quibusdam non expedita. +
+
+ + + + + hero-image + +
+ + + + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..72bc6a88 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,22 @@ +body { + display: grid; + max-width: 1400px; + margin: 0 auto; + grid-template-areas: + "p-picture v-video" + "t-text t-text"; +} + + .v { + width: 100%; + min-height: 100%; +} +.p { + width: 100%; +} +img { + width: 100%; +} +picture { + min-width: 100%; +} \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..25c9cf2b 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -23,4 +23,8 @@ .v { border-color: #baffc9; +} +img { + max-width: 100%; + height: auto; } \ No newline at end of file diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..8ec30332 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,35 @@ +body { + display: grid; + grid-template-areas: + "p-picture" + "t-text" + "v-video"; +} + +.t { +grid-area: t-text; +} +.p { +grid-area: p-picture; +} +.v { +grid-area: v-video; +} + +.v { + height: 0; + padding-bottom: calc(315 / 560 * 100%); + position: relative; + +} +iframe { + border: 5px solid red; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + +} + + diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..2094c8b5 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,11 @@ +body { + /* display: grid; */ + grid-template-areas: + "p-picture t-text" + "v-video t-text"; +} + +.p, .v { + width: 50vw; + min-width: 200px; +} \ No newline at end of file diff --git a/04/assets/211607_right_arrow_icon.png b/04/assets/211607_right_arrow_icon.png new file mode 100644 index 00000000..5620f8af Binary files /dev/null and b/04/assets/211607_right_arrow_icon.png differ diff --git a/04/assets/211607_right_arrow_icon.svg b/04/assets/211607_right_arrow_icon.svg new file mode 100644 index 00000000..42db626f --- /dev/null +++ b/04/assets/211607_right_arrow_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/04/assets/211687_down_arrow_icon.png b/04/assets/211687_down_arrow_icon.png new file mode 100644 index 00000000..aa07270c Binary files /dev/null and b/04/assets/211687_down_arrow_icon.png differ diff --git a/04/assets/211687_down_arrow_icon.svg b/04/assets/211687_down_arrow_icon.svg new file mode 100644 index 00000000..37813543 --- /dev/null +++ b/04/assets/211687_down_arrow_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/04/css/desktop.css b/04/css/desktop.css new file mode 100644 index 00000000..278a61e8 --- /dev/null +++ b/04/css/desktop.css @@ -0,0 +1,33 @@ +.nav__container { + /* padding: 20px 0 20px 0; */ +} +.nav { + display: flex; + height: 80px; +} +.nav__item { + padding: 20px 40px 20px 20px; + margin-left: 10px; +} +.arrow-down { + rotate: 0deg; + padding: 5px 0 0 10px; +} +.nav__dropdown { + left: 0; + top: 100%; +} +.dropdown__item { + position: relative; + padding: 10px 20px; + min-width: 180px; +} +.nav__dropdown-second { + left: 180px; +} +.switcher { + display: none; +} +.input { + display: none; +} diff --git a/04/css/main.css b/04/css/main.css new file mode 100644 index 00000000..26b0b501 --- /dev/null +++ b/04/css/main.css @@ -0,0 +1,120 @@ +:root { + --color-alfa: rgb(143, 143, 143); + --color-beta: rgb(64, 66, 67); + --color-nav-item: rgb(245, 240, 240); + --color-gold: rgb(255, 215, 0); + --color-black: rgb(51, 51, 51); +} + +.nav__container { + /* padding: 0 0 20px 0; */ +} +.nav__container input:checked + .nav { + display: block; + align-content: center; + height: 100vh; +} +.nav__container input { + display: none; +} +.switcher { +position: absolute; +top: 15px; +right: 20px; +padding: 10px; +font-size: 30px; +z-index: 10; +} +.nav { + background: var(--color-nav-item); + text-align: start; + display: none; +} +.nav__item { + background-color: var(--color-nav-item); + padding: 40px 15px; + position: relative; + cursor: pointer; + transition: background-color .3s; + text-transform: uppercase; + font-size: 1.3rem; + font-weight: bold; + letter-spacing: 1px; +} +.nav__item > a { + text-decoration: none; + color: var(--color-black); +} +.nav__item:hover > a { + color: var(--color-gold); +} +.dropdown__item > a { + text-decoration: none; + color: var(--color-alfa); +} +.dropdown__item:hover > a { + color: var(--color-gold); +} +.arrow-down { + position: absolute; + rotate: -90deg; + font-size: 0.9rem; + padding: 10px 0 0 0; +} +.nav__item::before { + content: ''; + width: 100%; + height: 4px; + color: var(--color-gold); + background-color: var(--color-gold); + position: absolute; + left: 0; + top: 0; + transform: scaleX(0); + transition: transform .4s ease-in-out; +} +.nav__item:hover { + background-color: var( --color-alfa); + color: var(--color-gold); +} +.nav__item:hover::before { + transform: scaleX(1); +} +.dropdown { + color: var(--color-alfa); + /* z-index: 10; */ +} +.nav__dropdown { + display: none; + position: absolute; + bottom: 0; + left: 120px; + font-size: 1rem; + +} +.arrow-right { + /* position: absolute; */ + /* right: 5px; */ + /* bottom: 10px; */ + font-size: 0.9rem; +} +.dropdown__item { + background: var(--color-beta); + padding: 10px; + min-width: 100px; +} +.dropdown__item:hover { + color: var(--color-gold); +} +.nav__item:hover > .nav__dropdown { + display: block; +} +.nav__dropdown-second { + display: none; + position: absolute; + top: 0; + left: 100px; +} +.dropdown__item:hover > .nav__dropdown-second { + display: block; +} diff --git a/04/css/reset.css b/04/css/reset.css new file mode 100644 index 00000000..9943a66c --- /dev/null +++ b/04/css/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/04/index.html b/04/index.html index e3ca9540..b8ad29b6 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,75 @@ + - - + + + + + + devmentor.pl - HTML & CSS: RWD - #04 + - -