diff --git a/01/style.css b/01/style.css index faa3160d..9403da0f 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,26 @@ * { - 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); + margin-right: 20px; +} 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..4825e8ea 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,48 @@ * { - 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"; +} +@media (min-width: 600px) { + body { + grid-template-areas: + "a a" + "c b"; + } } -.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: 50svh; + max-width: 1200px; } .a { - border-color: #ffffba + border-color: #ffffba; + grid-area: a; + /* justify-self: center; */ } .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; +} diff --git a/03/img/img-1200.jpg b/03/img/img-1200.jpg new file mode 100644 index 00000000..6bc55ac8 Binary files /dev/null and b/03/img/img-1200.jpg differ diff --git a/03/img/img-1900.jpg b/03/img/img-1900.jpg new file mode 100644 index 00000000..be141d55 Binary files /dev/null and b/03/img/img-1900.jpg differ diff --git a/03/img/img-600.jpg b/03/img/img-600.jpg new file mode 100644 index 00000000..62869c8c Binary files /dev/null and b/03/img/img-600.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..3d15cb6a 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,54 @@ - - - - + + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur sapiente + fugit ipsum nulla autem exercitationem quas sed doloremque quibusdam iste + porro eos, repellat sequi quae expedita voluptatum ut facilis deserunt nam + quo rem? Quibusdam maiores consequatur tempora asperiores voluptas, ex + eligendi ullam totam nostrum ipsum voluptate deleniti ipsam doloribus sed. + Placeat recusandae iure, ullam iste beatae eveniet suscipit impedit, hic + perferendis sunt nulla quibusdam dolor maiores exercitationem quisquam + voluptates? Amet modi doloribus reiciendis. Libero assumenda, ea nemo, + tempore eum debitis sit omnis explicabo provident, perspiciatis dolores + similique! Voluptate porro ex quasi ab, iure et accusantium minima + adipisci commodi, omnis explicabo! Dignissimos ab, recusandae maiores + dolorem minus consectetur repellendus, tenetur deleniti corrupti nostrum + accusantium beatae repellat quas maxime voluptates! Qui, ipsum maxime. + Suscipit laboriosam repellat esse officiis aut at totam maiores doloremque + recusandae quae commodi nam deserunt, aliquid veritatis dolore blanditiis + error et sit unde, ea neque quod eveniet corrupti quaerat? Hic quaerat + deleniti inventore sint eum ipsa illo nesciunt soluta ut possimus, neque + accusamus doloremque cupiditate adipisci, ullam nobis animi voluptatibus + saepe libero beatae voluptate quam. Ducimus cumque fugiat qui similique + animi rerum sequi itaque! Assumenda quis veniam quibusdam aut. Laudantium, + quas qui. Totam, illo ipsam aperiam consequatur in obcaecati! +
+
+ + + + + lake in the mountains + +
+
+ +
+ + diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..bca35c24 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,62 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: grid; + grid-template-areas: + "p" + "t" + "v"; } -.p, .t, .v { - border: 3px solid transparent; - min-height: 50px; +@media (min-width: 600px) { + body { + grid-template-areas: + "p t" + "v t"; + } +} +@media (min-width: 1200px) { + body { + display: grid; + grid-template-areas: + "p v" + "t t"; + } +} +.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; + grid-area: p; +} +img { + max-width: 100%; + height: auto; } +iframe { + width: 100%; + min-width: 200px; + aspect-ratio: 16/8; +} .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; +} diff --git a/04/assets/logo.PNG b/04/assets/logo.PNG new file mode 100644 index 00000000..2f60b231 Binary files /dev/null and b/04/assets/logo.PNG differ diff --git a/04/index.html b/04/index.html index e3ca9540..2957479f 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,60 @@ - - - - + + + + + + + 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..82af478f --- /dev/null +++ b/04/styles/desktop.css @@ -0,0 +1,37 @@ +.navbar { + align-items: center; + justify-content: start; + gap: 25px; +} +.navbar__list { + display: flex; +} +.navbar__list-item { + display: flex; + padding: 15px; +} + +.navbar__list-item:hover { + background-color: rgb(71, 69, 71); +} + +.navbar__list-item--sublist { + position: relative; +} + +.navbar__list--sublist { + display: none; + position: absolute; + left: 0; + top: 100%; + background-color: #000000; +} +.navbar__list-item--sublist:hover .navbar__list--sublist { + display: block; +} + +.navbar__link { + color: #ffffff; + text-decoration: none; + white-space: nowrap; +} diff --git a/04/styles/global.css b/04/styles/global.css new file mode 100644 index 00000000..64fbf560 --- /dev/null +++ b/04/styles/global.css @@ -0,0 +1,36 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + +.navbar { + display: flex; + background-color: #000000; + height: 50px; + justify-content: space-between; + align-items: center; + padding: 5px 10px; + position: relative; +} + +.navbar__logo, +.navbar__logo-img { + height: 100%; +} + +#navbar__hamburger-toggle { + display: none; +} +.navbar__hamburger { + display: none; + font-size: 2rem; + color: #ffffff; + align-self: center; +} +.navbar__list { + list-style: none; + padding: 0; + margin: 0; +} diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..ed75e9bc --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,41 @@ +.navbar__hamburger { + display: block; +} +.navbar__list { + display: none; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + width: 100%; +} + +.navbar__list-item { + display: block; + font-size: 1.5rem; + padding: 10px; + background-color: #272727; + text-decoration: none; + padding: 0; + margin: 0; +} +.navbar__list-item::before { + content: ""; + display: block; + height: 2px; + background-color: #ffffff; + margin-bottom: 0; + top: 100%; +} +.navbar__link { + text-decoration: none; + color: #ffffff; + padding-left: 20px; +} + +.navbar__link--sublink { + padding-left: 30px; +} +#navbar__hamburger-toggle:checked ~ .navbar__list { + display: flex; +} diff --git a/05/assets/img/menu-logo.PNG b/05/assets/img/menu-logo.PNG new file mode 100644 index 00000000..b300ee5b Binary files /dev/null and b/05/assets/img/menu-logo.PNG differ diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..0c87bcf2 --- /dev/null +++ b/05/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + Document + + +
+
+ +
+
+
+
+
+ burrito +
+
+ Taco +
+
+
+
+
+
+

Mexican Food

+

+ Mexican food is a vibrant cuisine known for its bold flavors and + rich cultural heritage. Key ingredients include corn, beans, chili + peppers, avocados, and various meats. Iconic dishes like tacos, + filled with diverse ingredients, and mole, a complex sauce often + served with meat, highlight this cuisine's diversity. Regional + specialties, such as Oaxacan mole and Yucatán achiote dishes, + showcase unique flavors. Street food, including elote (grilled corn) + and quesadillas, is integral to the culture. Overall, Mexican + cuisine combines indigenous traditions with Spanish and other + influences, making it beloved worldwide for its deliciousness and + communal dining experiences. +

+
+
+

Burrito

+

+ Burritos are a popular Mexican dish consisting of a flour tortilla + wrapped around various fillings. Originating in northern Mexico, + they typically include ingredients like rice, beans, meat (such as + beef, chicken, or pork), cheese, and fresh vegetables. Burritos can + be customized to suit individual tastes, with options for salsas, + guacamole, and sour cream as toppings. Often enjoyed as a convenient + and hearty meal, burritos are commonly found in taquerías and + fast-casual restaurants. They can be served wet, smothered in sauce, + or dry, making them versatile for different dining experiences. + Burritos reflect the rich flavors of Mexican cuisine and have become + a beloved dish in many countries, celebrated for their convenience + and satisfying combinations of flavors. +

+
+
+

Taco

+

+ Tacos are a quintessential Mexican dish made from a folded or rolled + tortilla filled with a variety of ingredients. Traditionally, corn + tortillas are used, though flour tortillas have become popular in + many regions. Tacos can be filled with an array of options, + including seasoned meats like beef, chicken, pork, or fish, as well + as beans, cheese, and fresh vegetables. Tacos are often garnished + with toppings such as salsa, guacamole, cilantro, and onions, + allowing for endless customization. They can be served in various + styles, including street tacos, which are simple and flavorful, or + more elaborate versions with multiple ingredients. Widely enjoyed + for their portability and versatility, tacos are a staple of Mexican + street food culture and have gained immense popularity worldwide. + Their combination of flavors and textures makes them a favorite for + casual dining and gatherings. +

+
+
+
+
+
+ © 2025 NG MEX FOOD. All rights reserved. + +
+
+ + diff --git a/05/styles/desktop.css b/05/styles/desktop.css new file mode 100644 index 00000000..1ad00d77 --- /dev/null +++ b/05/styles/desktop.css @@ -0,0 +1,30 @@ +.navbar__hamburger { + display: none; +} + +.navbar__list { + display: flex; + align-items: center; + gap: 10px; + margin-left: 40px; +} + +.navbar__list-item { + padding: 0 5px; +} +.navbar__list-link:hover { + color: #ffc900; +} + +.container__section-1, +.container__section-2 { + display: flex; +} + +.container__section-2 { + display: flex; + gap: 20px; +} +section .section-2__text { + text-align: justify; +} diff --git a/05/styles/global.css b/05/styles/global.css new file mode 100644 index 00000000..146f6155 --- /dev/null +++ b/05/styles/global.css @@ -0,0 +1,104 @@ +@font-face { + font-family: burrito; + src: url("../assets/fonts/burrito/burrito.TTF") format("truetype"); + font-weight: normal; + font-style: normal; +} +#navbar__hamburger--toggle { + display: none; +} +body { + display: grid; + grid-template-areas: + "section-navbar" + "section-1" + "section-2" + "section-footer"; +} +.section__navbar { + grid-area: section-navbar; +} +.section__1 { + grid-area: section-1; +} +.section__2 { + grid-area: section-2; +} +.section__footer { + grid-area: section-footer; +} + +.section { + display: flex; + flex-direction: column; + align-items: center; + border: solid 1px #10d146; + + margin-bottom: 5px; + width: 100vw; +} + +.container { + border: solid 1px #00a8f3; + height: 100%; + margin: 1px; + width: 100%; + max-width: 1000px; +} + +.navbar { + display: flex; + height: 60px; + background-color: #c32c1f; +} + +.navbar__list-link { + font-weight: 700; +} + +.section-2__container { + padding: 10px; +} + +.section-2__title { + text-align: center; + font-size: 2em; + font-weight: 700; + text-decoration: underline; + padding-bottom: 15px; +} + +.section-2__text { + text-align: center; + line-height: 1.5; + font-weight: 400; +} + +.container__footer { + display: flex; + justify-content: center; + align-content: center; + padding: 10px; +} +.footer__text { + display: inline-block; + font-size: 0.7em; + font-weight: 600; + text-align: center; +} + +.navbar__list-item { + border: solid #ffc900 1px; + border-radius: 5px; +} +.navbar__list-link { + color: black; + text-decoration: none; + font-size: 2em; + height: 60px; +} +.section-1__img { + height: 100%; + padding: 10px; + border-radius: 50px; +} diff --git a/05/styles/mobile.css b/05/styles/mobile.css new file mode 100644 index 00000000..6adf097a --- /dev/null +++ b/05/styles/mobile.css @@ -0,0 +1,43 @@ +.navbar { + justify-content: center; + align-items: center; + position: relative; + height: 60px; +} + +.navbar__logo { + height: 100%; +} +.navbar__hamburger { + font-size: 2.5em; + position: absolute; + right: 15px; + color: #ffc900; +} + +.navbar__list { + display: none; + position: absolute; + flex-direction: column; + color: black; + top: 100%; + right: 0; + width: 200px; +} +#navbar__hamburger--toggle:checked ~ .navbar__list { + display: flex; +} + +.navbar__list-item { + display: flex; + width: 100%; + height: 60px; + align-items: center; + justify-content: center; + margin-top: 5px; + background-color: #c32c1f; +} + +.navbar__list-link { + font-size: 2em; +} diff --git a/05/styles/reset.css b/05/styles/reset.css new file mode 100644 index 00000000..ca67d254 --- /dev/null +++ b/05/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