diff --git a/01/index.html b/01/index.html index 194076af..fc08c03c 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,210 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #01 - - - - - \ No newline at end of file + + + +
+

Website Name

+ +
+ +
+
+

Articles

+ + +
+

HTML

+ +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero animi + voluptas quo quisquam laboriosam suscipit qui esse omnis, rem + doloribus! +

+ +
+ Posted on + +
by Bartosz Dudziak
+
+ +
+ HTML Logo +
HTML Logo
+
+
+ + +
+

CSS

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio odit + quisquam nihil non ut nobis, quae cupiditate necessitatibus + voluptatum cum commodi ipsam amet sapiente magnam, nulla + exercitationem quod earum facilis? +

+ +
+ Posted on + + +
by Bartosz Dudziak
+
+ +
+ CSS Logo +
CSS Logo
+
+
+ + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate + soluta ad harum dolor alias deserunt vel, ipsa a quae quidem + recusandae? Quam, ullam sit corporis, commodi distinctio iure + nesciunt eveniet, laboriosam modi numquam porro voluptate maiores + minus delectus labore cumque cupiditate? Saepe, amet totam nisi + neque, ut officiis ratione voluptate fugiat tenetur veniam omnis + laborum accusamus, soluta odio. Deleniti, nihil +

+ +
+ Posted on + +
by Bartosz Dudziak
+
+ +
+ JavaScript Logo +
JavaScript Logo
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Top 3 JavaScript Frameworks +
NamePopularityCreated by
React39.5%Meta
Angular17.1%Google
Vue15.4%Evan You
+
+
+ +
+

Comments

+
+ + +
+ +
+
    +
  • +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Accusamus, temporibus. +

    +
    +
    Harry Potter
    + +
    +
    • + +
  • +

    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Recusandae, sapiente odit doloribus illo in quam nisi ipsum + fugit eligendi repellat? +

    +
    +
    Ron Weasley
    + +
    +
    • + +
  • +

    Lorem ipsum dolor sit amet.

    +
    +
    Hermione Granger
    + +
    +
    • +
+
+
+
+ + + + diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..6778927d 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -1,45 +1,52 @@ /*Acco*/ .ac-container { - max-width: 400px; + max-width: 400px; } /* Znacznik label, którego przodkiem jest klasa .ac-container (0, 1, 1) */ -?? { - height: 30px !important; - line-height: 21px !important; - font-size: 12px !important; - font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; - padding: 5px 20px; - position: relative; - z-index: 20; - display: block; - height: 30px; - cursor: pointer; - color: #777; - 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); - font-size: 12px; - height: 30px; - line-height: 20px; +.ac-container label { + height: 30px !important; + line-height: 21px !important; + font-size: 12px !important; + font-family: "Open Sans", "Arial Narrow", Arial, sans-serif !important; + padding: 5px 20px; + position: relative; + z-index: 20; + display: block; + height: 30px; + cursor: pointer; + color: #777; + 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); + font-size: 12px; + height: 30px; + line-height: 20px; } .ac-container { - width: 100%; - margin: 10px auto 30px auto; - text-align: left; + width: 100%; + margin: 10px auto 30px auto; + text-align: left; } /* @@ -47,8 +54,8 @@ Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, który znajduje się wewnątrze elementu o klasie .ac-container (0, 2, 1) */ -?? { - background: #fff; +.ac-container label:hover { + background: #fff; } /* @@ -61,26 +68,26 @@ i ten brat musi posiadać przodka o klasie .ac-container to samo co w 1) ale z efektem najechania kursorem na label (0, 3, 2) */ -??, -?? { - 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); - height: 30px; - line-height: 21px; - font-size: 13px; +.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); + height: 30px; + line-height: 21px; + font-size: 13px; } .ac-container label:hover:after, .ac-container input:checked + label:hover:after { - content: ''; - position: absolute; - width: 24px; - height: 24px; - right: 13px; - top: 7px; - background: transparent url(../images/arrow_down.png) no-repeat center center; + content: ""; + position: absolute; + width: 24px; + height: 24px; + right: 13px; + top: 7px; + background: transparent url(../images/arrow_down.png) no-repeat center center; } /* @@ -89,36 +96,36 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), którego przodek to element o klasie .ac-container (0, 3, 3) */ -?? { - background-image: url(../images/arrow_up.png); +.ac-container input:checked + label:hover::after { + background-image: url(../images/arrow_up.png); } .ac-container input { - display: none; + display: none; } .ac-container article { - 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; + 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; } .ac-container article p { - font-style: normal; - color: #777; - line-height: 23px; - font-size: 10px; - padding: 20px; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); - font: normal normal 12px 'Open Sans'; + font-style: normal; + color: #777; + line-height: 23px; + font-size: 10px; + padding: 20px; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); + font: normal normal 12px "Open Sans"; } /* @@ -126,23 +133,23 @@ 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 { - height: 140px; + height: 140px; } .ac-container input:checked ~ article.ac-medium { - height: 180px; + height: 180px; } .ac-container input:checked ~ article.ac-large { - height: 230px; -} \ No newline at end of file + height: 230px; +} diff --git a/03/fonts/SourceSansPro-Bold.otf b/03/fonts/SourceSansPro-Bold.otf new file mode 100644 index 00000000..98dbee74 Binary files /dev/null and b/03/fonts/SourceSansPro-Bold.otf differ diff --git a/03/fonts/SourceSansPro-It.otf b/03/fonts/SourceSansPro-It.otf new file mode 100644 index 00000000..2d627d9c Binary files /dev/null and b/03/fonts/SourceSansPro-It.otf differ diff --git a/03/fonts/SourceSansPro-Regular.otf b/03/fonts/SourceSansPro-Regular.otf new file mode 100644 index 00000000..bdcfb27a Binary files /dev/null and b/03/fonts/SourceSansPro-Regular.otf differ diff --git a/03/index.html b/03/index.html index 0c018343..b1c6ff1f 100644 --- a/03/index.html +++ b/03/index.html @@ -1,38 +1,53 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #03 - - - + + +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, + asperiores. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis + praesentium in possimus! +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
- - \ No newline at end of file + + diff --git a/03/styles/index.css b/03/styles/index.css new file mode 100644 index 00000000..6930eac0 --- /dev/null +++ b/03/styles/index.css @@ -0,0 +1,85 @@ +@font-face { + font-family: "Source Sans PRO"; + src: url("../fonts/SourceSansPro-Bold.otf") format("opentype"); + font-style: normal; + font-weight: bold; +} + +@font-face { + font-family: "Source Sans PRO"; + src: url("../fonts/SourceSansPro-Regular.otf") format("opentype"); + font-style: normal; + font-weight: normal; +} + +@font-face { + font-family: "Source Sans PRO"; + src: url("../fonts/SourceSansPro-It.otf") format("opentype"); + font-style: italic; + font-weight: normal; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.parent { + width: 600px; + padding: 20px; +} + +/* Common child elements */ +.child { + font-family: "Source Sans PRO"; +} +.child--first { + width: 30%; +} +.child--middle { + width: 30%; + font-weight: bold; +} +.child--last { + width: 40%; + font-style: italic; +} + +/* Inline Block Method */ +.parent--inline-block { + font-size: 0; +} +.parent--inline-block > .child { + font-size: 16px; + display: inline-block; + vertical-align: top; +} + +/* Float Method */ +.parent--float > .child { + float: left; +} + +/* Children of Inline Block and Float Methods */ +.parent--inline-block > .child--first, +.parent--float > .child--first { + width: calc(30% - 5px); + margin-inline-end: 5px; +} +.parent--inline-block > .child--middle, +.parent--float > .child--middle { + width: calc(30% - 10px); + margin-inline: 5px; +} +.parent--inline-block > .child--last, +.parent--float > .child--last { + width: calc(40% - 5px); + margin-inline-start: 5px; +} + +/* Flexbox Method */ +.parent--flexbox { + display: flex; + gap: 10px; +} diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..5bb5e4f8 --- /dev/null +++ b/04/index.html @@ -0,0 +1,49 @@ + + + + + + MultiLevel Dropdown Menu + + + + +
+ +
+ + diff --git a/04/styles/index.css b/04/styles/index.css new file mode 100644 index 00000000..412ac9fe --- /dev/null +++ b/04/styles/index.css @@ -0,0 +1,153 @@ +:root { + --bg-color: #f6f6f6; + + --primary-color: #ffffff; + --secondary-color: #333333; + + --accent-color-primary: #66c2ed; + --accent-color-secondary: #6a6b65; +} + +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +body { + background-color: var(--bg-color); + min-height: 100dvh; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +header { + padding: 1rem 2rem; +} + +/* Multi Level Dropdown Menu */ +.nav { + background-color: var(--primary-color); + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); +} + +.nav__menu { + display: flex; + gap: 0.5rem; +} + +.nav__menu > .nav__item:first-child .nav__link { + color: var(--accent-color-primary); +} + +.nav__item > .nav__link { + text-transform: uppercase; +} + +.nav__link { + color: var(--secondary-color); + padding: 1rem; + display: block; + font-size: 0.75rem; + + transition: color 0.2s ease-out; +} + +.nav__menu > .nav__item:hover > .nav__link { + color: var(--accent-color-primary); +} + +.nav__item--dropdown { + cursor: pointer; + position: relative; +} + +.nav__menu > .nav__item--dropdown::before { + content: ""; + position: absolute; + top: 0; + height: 2px; + width: 100%; + background-color: var(--accent-color-primary); + opacity: 0; + transition: opacity 0.2s ease-out; +} + +.nav__menu > .nav__item--dropdown:hover::before { + opacity: 1; +} + +.nav__submenu { + display: none; + position: absolute; + width: 10rem; + text-transform: none; + background-color: var(--secondary-color); +} + +.nav__submenu--down { + left: 0; + top: 100%; +} + +.nav__submenu--right { + left: 100%; + top: 0; +} + +.nav__submenu .nav__link { + text-transform: none; + color: var(--accent-color-secondary); + padding: 0.5rem 1rem; +} + +.nav__item--dropdown:hover > .nav__submenu { + display: block; +} + +.nav__item--dropdown .nav__item:hover > .nav__link { + color: var(--primary-color); +} + +/* Arrows */ +.arrow { + position: absolute; + width: 0; + height: 0; + transform: translateY(-50%); + transition: border-color 0.2s ease-out; +} + +.arrow-down { + right: 0; + top: 50%; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 6px solid var(--secondary-color); +} + +.arrow-right { + right: 1rem; + top: 50%; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 4px solid var(--accent-color-secondary); +} + +.nav__item--dropdown:hover .arrow-down { + border-top-color: var(--accent-color-primary); +} + +.nav__item--dropdown .nav__submenu > .nav__item:hover .arrow-right { + border-left-color: var(--primary-color); +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..d32e1ca4 --- /dev/null +++ b/05/index.html @@ -0,0 +1,37 @@ + + + + + + Layout + + + +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/05/styles/index.css b/05/styles/index.css new file mode 100644 index 00000000..3dbd6da3 --- /dev/null +++ b/05/styles/index.css @@ -0,0 +1,86 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body, +main { + display: grid; + gap: 10px; +} + +body { + min-height: 100dvh; + grid-template-rows: auto 1fr auto; + grid-template-columns: minmax(0, 1fr); +} + +main { + place-items: center; +} + +.fullWidth { + border: 5px solid green; + width: 100%; + padding: 5px; +} + +.container { + border: 5px solid blue; + width: min(1000px, 100%); + margin-inline: auto; +} + +nav { + padding-block: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.section-1 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + padding-block: 10px; + height: 250px; +} + +.section-2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + height: 250px; + gap: 20px; + padding: 20px; +} + +footer { + min-height: 100px; +} + +.section-3 { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +/* Content */ +.content { + background-color: orange; +} + +.logo { + width: min(200px, 100%); + height: 50px; +} + +.menu { + width: min(400px, 100%); + height: 60px; +} + +.info { + height: 50px; + width: 200px; +}