diff --git a/01/style.css b/01/style.css index faa3160d..8f08c7b8 100644 --- a/01/style.css +++ b/01/style.css @@ -19,5 +19,6 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 100% 0, 0 100%); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..4bc09dba 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,23 +4,48 @@ box-sizing: border-box; } -.a, .b, .c { +.a, +.b, +.c { border: 3px solid transparent; - min-height: 50px; - + min-height: 50vh; display: flex; justify-content: center; align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; + grid-area: element-a; } .b { border-color: #ffdfba; + grid-area: element-b; } .c { border-color: #baffc9; + grid-area: element-c; +} + +body { + display: grid; + grid-template-areas: + "element-a" + "element-b" + "element-c"; + +} + +@media (min-width: 600px) { + body { + max-width: 1200px; + margin-inline: auto; + grid-template-areas: + "element-a element-a" + "element-c element-b" + ; + + } } \ No newline at end of file diff --git a/03/images/flower-8036709_1280.jpg b/03/images/flower-8036709_1280.jpg new file mode 100644 index 00000000..5be6dd56 Binary files /dev/null and b/03/images/flower-8036709_1280.jpg differ diff --git a/03/images/flower-8036709_1920.jpg b/03/images/flower-8036709_1920.jpg new file mode 100644 index 00000000..f9230ed4 Binary files /dev/null and b/03/images/flower-8036709_1920.jpg differ diff --git a/03/images/flower-8036709_640.jpg b/03/images/flower-8036709_640.jpg new file mode 100644 index 00000000..347d7737 Binary files /dev/null and b/03/images/flower-8036709_640.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..a841cca5 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,53 @@ + + + + + devmentor.pl - HTML & CSS: RWD - #03 + - -
T
-
P
- V +
+
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto porro repellat autem quasi quia + magnam nostrum aperiam impedit quidem quas odit illo incidunt dignissimos id placeat, asperiores libero + ducimus dolore.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis tenetur libero deleniti + sit veritatis voluptatum praesentium expedita, quae ipsum repudiandae dicta quasi ex magnam eius, beatae + id, aliquid assumenda laboriosam!Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem autem + cupiditate sequi, nisi ad harum unde. Odio fugiat itaque voluptate pariatur maiores earum rerum sit + reiciendis, voluptas dicta omnis aperiam.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni + eaque repudiandae deleniti. Tempore sapiente a rem, molestias quibusdam porro beatae mollitia facilis + nam? Enim inventore error velit amet ea obcaecati.Lorem ipsum dolor, sit amet consectetur adipisicing + elit. Eius vero sed totam quo fuga harum fugiat quis cupiditate, cum laborum. Iste, at repellendus porro + laboriosam vel obcaecati quis exercitationem animi!Lorem

+
+
+ + + + + + img-flower + + + +
+ +
+ \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..0e7a178a --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,13 @@ +.container { + max-width: 1400px; + margin-inline: auto; + grid-template-areas: + "picture-element video-element" + "text-element text-element"; + grid-template-columns: + 50vw + auto; + + + +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..ed33ad77 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,7 +4,7 @@ box-sizing: border-box; } -.p, .t, .v { +.picture, .text, .video { border: 3px solid transparent; min-height: 50px; @@ -13,14 +13,51 @@ align-items: center; } -.p { - border-color: #ffffba +.picture { + grid-area: picture-element; + + +} +img { + width: 100%; + height: auto; +} +.text { + grid-area: text-element; +} + +.video { + grid-area: video-element; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + position: relative; + } +iframe { + border: 1px solid red; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + height: 100%; + width: 100%; +} + + -.t { - border-color: #ffdfba; +.container { + display: grid; + grid-template-areas: + "picture-element" + "text-element" + "video-element"; + + + + + } -.v { - border-color: #baffc9; -} \ No newline at end of file + + diff --git a/03/styles/reset.css b/03/styles/reset.css new file mode 100644 index 00000000..39888000 --- /dev/null +++ b/03/styles/reset.css @@ -0,0 +1,46 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; + } + /* + 2. Remove default margin + */ + * { + margin: 0; + } + /* + Typographic tweaks! + 3. Add accessible line-height + 4. Improve text rendering + */ + body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; + } + /* + 5. Improve media defaults + */ + img, picture, video, canvas, svg { + display: block; + + } + /* + 6. Remove built-in form typography styles + */ + input, button, textarea, select { + font: inherit; + } + /* + 7. Avoid text overflows + */ + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } + /* + 8. Create a root stacking context + */ + #root, #__next { + isolation: isolate; + } \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..fa19cc93 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,13 @@ + +.container { + + grid-template-areas: + "picture-element text-element" + "video-element text-element"; + + grid-template-columns: + minmax(200px, calc(100vh - 50%)) + auto; + + +} diff --git a/04/desktop.css b/04/desktop.css new file mode 100644 index 00000000..15121435 --- /dev/null +++ b/04/desktop.css @@ -0,0 +1,36 @@ +button { + display: none; +} + +.navbar { + display: block; + align-items: center; +} + +nav ul { + display: flex; +} + +.navbar__list--bottom { + position: absolute; + display: block; + background-color: #3d3d3d; + z-index: 1; +} + +.first-list { + position: relative; +} + +.navbar__list--align-margin { + margin-left: 0; + padding: 10px; +} + +.second-list:hover .navbar__list--bottom { + display: block; +} + +.navbar__list--bottom { + display: none; +} \ No newline at end of file diff --git a/04/global.css b/04/global.css new file mode 100644 index 00000000..2d98b878 --- /dev/null +++ b/04/global.css @@ -0,0 +1,77 @@ +body { + text-align: center; + font-size: 1.2rem; +} + +.main-nav { + background-color: #3d3d3d; + min-height: 60px; +} + +ul li { + list-style-type: none; +} + +nav ul li { + min-width: 200px; +} + +ul { + margin: 0; + padding: 0; +} + +.navbar a { + text-decoration: none; + color: white; +} + +.navbar { + display: none; + padding: 20px; +} + +.hamburger-menu { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; +} + +.hamburger-menu__element { + width: 30px; + height: 2.5px; + background-color: rgb(248, 247, 247); +} + +button { + border: none; + margin: 0; + padding: 0; + background-color: transparent; + cursor: pointer; +} + +button:focus .first-child { + transform: translateY(6px) rotate(-140deg); +} + +button:focus .last-child { + transform: translateY(-7px) rotate(140deg); +} + +button:focus .middle-child { + transform: rotate(140deg); +} + +button:focus+.navbar { + display: block; +} + +.navbar__list--align-margin { + margin-left: 20px; +} + +.navbar ul li { + text-align: left; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..da56083e 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,50 @@ + + + + devmentor.pl - HTML & CSS: RWD - #04 + - -