diff --git a/01/index.html b/01/index.html index 194076af..04693c99 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,318 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #01 + - + +
+ + + + Logo Uczelni XYZ + + +
+ +
+
+
+

Otwarta Rekrutacja!

+

+ Autor: Rektor Uczelni XYZ + +

+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolores possimus tenetur. Expedita + atque unde explicabo odio, doloremque libero suscipit iure dicta veniam aliquid a consectetur ut + harum assumenda corrupti.lorem Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius + suscipit excepturi aliquam, magni molestias incidunt ipsam ad, odit commodi veritatis debitis, + sapiente natus deserunt temporibus ipsum eveniet sunt nisi hic! Lorem ipsum dolor sit amet + consectetur adipisicing elit. Quo voluptatem laboriosam magnam dolor molestias minus! Nam, odit. + Adipisci reprehenderit totam ad excepturi sint quas quidem, aliquid exercitationem aspernatur + mollitia sit!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, doloremque perspiciatis aliquid + vitae cum nulla error distinctio dicta blanditiis animi possimus totam rem porro praesentium omnis + nam aspernatur necessitatibus culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, + deserunt. Est quam labore dolor hic placeat veritatis nisi. Rerum sint maxime impedit ad, omnis quod + nisi reprehenderit rem dolores! Voluptates? Lorem, ipsum dolor sit amet consectetur adipisicing + elit. Quasi atque repudiandae dicta quas suscipit tenetur iste pariatur eveniet fugiat voluptate + itaque enim nobis ratione, accusantium cumque voluptatum aut fuga non?

+
+ Wykres słupkowy +
Wykres przedstawia liczby przyjmowanych studentów w latach 2020-2026
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabela oplat rekrutacji
Tryb studiówStopień studiówOpłata rektutacyjna
StacjonarneI stopień80zł
StacjonarneII stopień120zł
ZaoczneI stopień100zł
ZaoczneII stopień140zł
+
+
+
Tagi
+
+
+
+
    +
  1. +
    +
    + + + +

    + + Awatar użytkownika + Łukasz + + skomentował + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
  2. +
    +
    + + + +

    + + Awatar użytkownika + Kasia + + skomentowała + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
  3. +
    +
    + + + +

    + + Awatar użytkownika + Bartek + + skomentował + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
    4. +
+
+

+ +

+

+ +

+

+ + +

+

+ +

+
+
+
+ + + + \ No newline at end of file diff --git a/02/index.html b/02/index.html index 89650fad..a6e97968 100644 --- a/02/index.html +++ b/02/index.html @@ -1,43 +1,87 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #02 - + +
- +
-

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

+

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that + show to the people who make shows, and on the strength of that one show they decide if they're going + to make more shows.

- +
-

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

+

Like you, I used to think the world was this great place where everybody lived by the same standards + I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not + order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing + to play by his rules, then you're gonna have to pay the price.

- +
-

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

+

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed + the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, + I don't know exactly when we turned on each other, but I know that seven of us survived the slide... + and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the + snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. +

- +
-

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

+

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell + everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the + future when the spacecraft encounters a black hole does the computer call it an 'unknown entry + event'? Why don't they know? If they don't know, that means we never told anyone. And if we never + told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive + logic.

+ \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..b1c7a241 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -7,11 +7,11 @@ Znacznik label, którego przodkiem jest klasa .ac-container (0, 1, 1) */ -?? { +.ac-container label { height: 30px !important; line-height: 21px !important; font-size: 12px !important; - font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; + font-family: 'Open Sans', 'Arial Narrow', Arial, sans-serif !important; padding: 5px 20px; position: relative; z-index: 20; @@ -19,18 +19,18 @@ Znacznik label, którego przodkiem jest klasa .ac-container height: 30px; cursor: pointer; color: #777; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); line-height: 33px; font-size: 19px; background: #fff; - background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea)); - background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: linear-gradient(top,#fff 1%,#eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1); + background: -moz-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fff), color-stop(100%, #eaeaea)); + background: -webkit-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -o-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -ms-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: linear-gradient(top, #fff 1%, #eaeaea 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#eaeaea', GradientType=0); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1); font-size: 12px; height: 30px; line-height: 20px; @@ -44,29 +44,29 @@ Znacznik label, którego przodkiem jest klasa .ac-container /* Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, -który znajduje się wewnątrze elementu o klasie .ac-container +który znajduje się wewnątrz elementu o klasie .ac-container (0, 2, 1) */ -?? { +.ac-container label:hover { background: #fff; } /* Te same style CSS dla dwóch selektorów: 1) -znacznik label, którego poprzedni brat jest znaznaczonym inputem (użyj pseudoklasy), +znacznik label, którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), i ten brat musi posiadać przodka o klasie .ac-container (0, 2, 2) 2) to samo co w 1) ale z efektem najechania kursorem na label (0, 3, 2) */ -??, -?? { +.ac-container input:checked + label, +.ac-container input:checked + label:hover { background: #f1f2f3; color: #666; - text-shadow: 0 1px 1px rgba(255,255,255,0.6); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1); height: 30px; line-height: 21px; font-size: 13px; @@ -89,7 +89,7 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), którego przodek to element o klasie .ac-container (0, 3, 3) */ -?? { +.ac-container input:checked + label:hover::after { background-image: url(../images/arrow_up.png); } @@ -98,17 +98,17 @@ którego przodek to element o klasie .ac-container } .ac-container article { - background: rgba(255,255,255,0.5); + background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0; position: relative; z-index: 10; - -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - transition: height 0.3s ease-in-out,box-shadow 0.6s linear; + -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container article p { @@ -117,7 +117,7 @@ którego przodek to element o klasie .ac-container line-height: 23px; font-size: 10px; padding: 20px; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); font: normal normal 12px 'Open Sans'; } @@ -126,13 +126,13 @@ Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj p oraz posiada przodka o klasie .ac-container (0, 2, 2) */ -?? { - -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - box-shadow: 0 0 0 1px rgba(155,155,155,0.3); +.ac-container input:checked ~ article { + -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3); } .ac-container input:checked ~ article.ac-small { diff --git a/03/index.html b/03/index.html index 0c018343..dbe81a7e 100644 --- a/03/index.html +++ b/03/index.html @@ -1,13 +1,25 @@ + - - + + + devmentor.pl - HTML & CSS BASICS - #03 + - +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
@@ -35,4 +47,5 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+ \ No newline at end of file diff --git a/03/style/style.css b/03/style/style.css new file mode 100644 index 00000000..87acbf6d --- /dev/null +++ b/03/style/style.css @@ -0,0 +1,81 @@ +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Regular.otf) format('opentype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Bold.otf) format('opentype'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Italic.otf) format('opentype'); + font-weight: normal; + font-style: italic; +} + + +.parent { + box-sizing: border-box; + width: 600px; + margin: 20px; +} + +.child { + font-family: 'Source Sans Pro', sans-serif; +} + + +.child--first { + width: calc(30% - 5px); + font-weight: normal; + font-size: normal; +} + +.child--middle { + width: calc(30% - 10px); + font-weight: bold; +} + +.child--last { + width: calc(40% - 5px); + font-style: italic; +} + + +.parent--inline-block { + font-size: 0; +} + +.parent--inline-block .child { + display: inline-block; + font-size: 16px; + vertical-align: top; +} + +.parent--inline-block .child--first, +.parent--inline-block .child--middle, +.parent--float .child--first, +.parent--float .child--middle { + margin-right: 10px; +} + +.parent--float .child { + float: left; +} + +.parent--float::after { + content: ''; + display: block; + clear: both; +} + +.parent--flexbox { + display: flex; + gap: 10px; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..26a9a967 --- /dev/null +++ b/04/index.html @@ -0,0 +1,46 @@ + + + + + + + + + Menu + + + +
+ +
+ + + \ No newline at end of file diff --git a/04/styles/menu.css b/04/styles/menu.css new file mode 100644 index 00000000..0d02e4e0 --- /dev/null +++ b/04/styles/menu.css @@ -0,0 +1,117 @@ +:root { + --primary-color-light: #F7F7F7; + --primary-color-dark: #333333; + --secondary-color: #009AE1; +} + +body { + background-color: var(--primary-color-light); +} + +a { + text-decoration: none; + color: inherit; +} + +.dropdown-menu__list-item, +.dropdown-menu__sublist-item { + text-transform: capitalize; + text-align: left; + padding: .7rem; + padding-left: 1.7rem; + width: 200px; + background-color: var(--primary-color-dark); + color: var(--primary-color-light); +} + +.dropdown-menu__list, +.dropdown-menu__sublist { + flex-direction: column; + position: absolute; + display: none; + top: 100%; + left: 0; +} + +.nav__list-item:hover { + color: var(--secondary-color); +} + +.dropdown-menu__sublist { + top: 50%; + left: 100%; +} + +.header { + margin-top: 1rem; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: fit-content; + background-color: white; +} + +.nav__list { + display: flex; +} + +.nav__list-item { + text-transform: uppercase; + padding: 1.7rem 1.7rem; + text-align: center; + position: relative; +} + +.nav__list-item::after { + content: ''; + position: absolute; + width: 0; + height: 3px; + background-color: var(--secondary-color); + left: 50%; + top: 0; + transform: translateX(-50%); + transition: width 250ms ease-in-out; +} + +.nav__list-item:hover::after { + width: 100%; +} + +.nav__list-item:hover > .dropdown-menu__list, +.dropdown-menu__list-item:hover > .dropdown-menu__sublist, +.nav__list-item:focus > .dropdown-menu__list, +.dropdown-menu__list-item:focus > .dropdown-menu__sublist { + display: flex; +} + +.nav__list-item:has(.dropdown-menu__list)::before { + content: ">"; + position: absolute; + left: 75%; + top: 37%; + transform: rotateZ(270deg); + transition: all 250ms ease-in-out; +} + +.nav__list-item:has(.dropdown-menu__list):hover::before { + transform: rotateZ(90deg); + left: 78%; +} + +.dropdown-menu__list-item:has(.dropdown-menu__sublist)::after { + content: '>'; + position: absolute; + left: 40%; + transition: left 250ms ease-in-out; +} + +.dropdown-menu__list-item:has(.dropdown-menu__sublist):hover::after { + left: 90% +} + +.dropdown-menu__list-item:hover > a, +.dropdown-menu__sublist-item:hover > a { + color: white; +} \ No newline at end of file diff --git a/04/styles/reset.css b/04/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/04/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file diff --git a/05/Try01/index.html b/05/Try01/index.html new file mode 100644 index 00000000..01e571ac --- /dev/null +++ b/05/Try01/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Layout Task05 + + + +
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/05/Try01/styles/index.css b/05/Try01/styles/index.css new file mode 100644 index 00000000..ef8ea035 --- /dev/null +++ b/05/Try01/styles/index.css @@ -0,0 +1,123 @@ +:root { + --article-color: #FFCA18; + --section-outline-color: #0ED145; + --article-outline-color: #00A8F3; +} + +html { + margin: 3px; + height: calc(100vh - 6px); +} + +body { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 5px; +} + + + +/* MAIN ELEMENTS */ +.header, +.first-section, +.second-section, +.footer { + outline: 3px solid var(--section-outline-color); + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.nav, +.first-section__article, +.second-section__article, +.footer__header { + display: flex; + flex-direction: row; + align-items: center; + outline: 3px solid var(--article-outline-color); + width: 90%; +} + +.nav__element, +.first-section__div, +.second-section__div, +.footer__div { + background-color: var(--article-color); + height: 95%; +} + + +/* Header */ +.header { + height: 10vh; +} + +.nav { + height: 8vh; + justify-content: space-between; +} + +.nav__element { + width: 15%; +} + +.nav__element:last-of-type { + width: 45%; +} + + + +/* Section #1 */ +.first-section { + height: 40vh; + gap: 5px; +} + +.first-section__article { + height: 38vh; + justify-content: space-between; +} + +.first-section__div { + height: 95%; + flex-basis: calc(50% - 5px); +} + + + +/* Section #2 */ +.second-section { + height: 40vh; +} + +.second-section__article { + height: 38vh; + justify-content: space-evenly; +} + +.second-section__div { + flex-basis: calc(33.34% - 40px); +} + + + +/* Footer */ +.footer { + min-height: 100px; + height: 10vh; +} + +.footer__header { + height: 9vh; + min-height: 90px; + justify-content: center; +} + +.footer__div { + height: 90%; + width: 250px; +} \ No newline at end of file diff --git a/05/Try01/styles/reset.css b/05/Try01/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/05/Try01/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file diff --git a/05/Try02/index.html b/05/Try02/index.html new file mode 100644 index 00000000..2f5dd19c --- /dev/null +++ b/05/Try02/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + Task05 | Layout + + + +
+
+

+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/05/Try02/styles/base.css b/05/Try02/styles/base.css new file mode 100644 index 00000000..823fb0d4 --- /dev/null +++ b/05/Try02/styles/base.css @@ -0,0 +1,27 @@ +:root { + --cell-bg-color: #FFCA18; + --row-outline-color: #0ED145; + --container-outline-color: #00A8F3; +} + +.row, +.cell, +.container { + margin: 5px; + padding: 5px; +} + +.row { + outline: 3px solid var(--row-outline-color); +} + +.cell { + background-color: var(--cell-bg-color); + min-height: 50px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + outline: 3px solid var(--container-outline-color); +} \ No newline at end of file diff --git a/05/Try02/styles/first-section.css b/05/Try02/styles/first-section.css new file mode 100644 index 00000000..87822f8f --- /dev/null +++ b/05/Try02/styles/first-section.css @@ -0,0 +1,9 @@ +.first-section__container { + display: flex; + justify-content: space-between; +} + +.first-section__content { + width: 49%; + min-height: 400px; +} \ No newline at end of file diff --git a/05/Try02/styles/footer.css b/05/Try02/styles/footer.css new file mode 100644 index 00000000..ad9c2fc4 --- /dev/null +++ b/05/Try02/styles/footer.css @@ -0,0 +1,10 @@ +.footer__container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100px; +} + +.footer__content { + width: 20%; +} \ No newline at end of file diff --git a/05/Try02/styles/header.css b/05/Try02/styles/header.css new file mode 100644 index 00000000..363ac6f6 --- /dev/null +++ b/05/Try02/styles/header.css @@ -0,0 +1,12 @@ +.header__container { + display: flex; + justify-content: space-between; +} + +.header__logo { + min-width: 150px; +} + +.header__nav { + min-width: 500px; +} \ No newline at end of file diff --git a/05/Try02/styles/reset.css b/05/Try02/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/05/Try02/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file diff --git a/05/Try02/styles/second-section.css b/05/Try02/styles/second-section.css new file mode 100644 index 00000000..4bc532ed --- /dev/null +++ b/05/Try02/styles/second-section.css @@ -0,0 +1,9 @@ +.second-section__container { + display: flex; + justify-content: space-evenly; +} + +.second-section__content { + min-height: 400px; + width: 32%; +} \ No newline at end of file