diff --git a/01/img/portfolio2.jpg b/01/img/portfolio2.jpg new file mode 100644 index 00000000..8472d220 Binary files /dev/null and b/01/img/portfolio2.jpg differ diff --git a/01/index.html b/01/index.html index 194076af..dbedab66 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,154 @@ - - - - - devmentor.pl - HTML & CSS BASICS - #01 - - - - - \ No newline at end of file + + + + + devmentor.pl - HTML & CSS BASICS - #01 + + +
+
+

logo

+
+
+ +
+
+ +
+
+
+

tytul jakiegos podania

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus + porro quisquam soluta perspiciatis, et maxime! Explicabo qui odio in + saepe. Lorem ipsum dolor sit amet consectetur adipisicing elit. + Laborum non numquam neque, voluptates illo praesentium at reiciendis + nobis ducimus minima? +

+ +

data publikacji

+ Sebastian Pietrzykowski +
+ +
+ komputer na biurku +
+ + +
+ + + Naglowek tabeli + + + + + + + + + + + + + +
NazwaIloscCena
ABC1100 pln
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse + reprehenderit expedita rerum, voluptatum non quidem aliquam eaque + hic amet quam? +

+
+
+

Sylvester Stallone

+

data utworzenia

+
+ +
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse + reprehenderit expedita rerum, voluptatum non quidem aliquam eaque + hic amet quam? +

+
+
+

Jason Statham

+

data utworzenia

+
+ +
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse + reprehenderit expedita rerum, voluptatum non quidem aliquam eaque + hic amet quam? +

+
+
+

Denzel Washington

+

data utworzenia

+
+
+
+ + + + diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..5d00b322 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 label:hover:after + input:checked { + 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/index.html b/03/index.html index 0c018343..8156e308 100644 --- a/03/index.html +++ b/03/index.html @@ -1,38 +1,54 @@ - - - - - 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?
-
+ + + + + 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?
-
- - \ No newline at end of file +
+
+ 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? +
+
+ + diff --git a/03/style.css b/03/style.css new file mode 100644 index 00000000..af1e6156 --- /dev/null +++ b/03/style.css @@ -0,0 +1,42 @@ +/* * { + margin: 0; + padding: 0; + box-sizing: border-box; +} */ + +body { + background-color: #333; + font-family: "Roboto", sans-serif; +} +.parent { + width: 600px; + padding: 20px; +} +.parent--inline-block .child { + display: inline-block; +} +.parent--float .child { + float: left; +} +.parent--flexbox { + display: flex; +} +.child { + display: inline-block; +} +.child--first, +.child--middle { + width: calc(30% - 10px); + margin-right: 10px; +} +.child--first { + font-weight: normal; + +} +.child--middle { + font-weight: bold; +} +.child--last { + width: 40%; + font-style: italic; +} diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..d2065f8c --- /dev/null +++ b/04/index.html @@ -0,0 +1,33 @@ + + + + + + Menu wielopoziomowe + + + + + + + diff --git a/04/reset.css b/04/reset.css new file mode 100644 index 00000000..425486b6 --- /dev/null +++ b/04/reset.css @@ -0,0 +1,109 @@ +/*** + The new CSS reset - version 1.11.2 (last updated 15.11.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) + */ + *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Fix mobile Safari increase font-size on landscape mode */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu, summary { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; + box-sizing: border-box; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; + box-sizing: border-box; +} + +/* Remove details summary webkit styles */ +::-webkit-details-marker { + display: none; +} \ No newline at end of file diff --git a/04/style.css b/04/style.css new file mode 100644 index 00000000..8101ba35 --- /dev/null +++ b/04/style.css @@ -0,0 +1,86 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + background-color: #534a4a; +} +.nav { + padding: 10px 0; +} +.nav__list { + position: relative; + display: flex; +} +.nav__list--item { + padding: 10px 20px; + margin: 0 20px; + font-size: 1.5rem; + border-top: 3px solid transparent; + /* transition: 0.3s ease; */ + cursor: pointer; + text-transform: uppercase; +} +.nav__list--item:hover { + border-top: 3px solid rgb(14, 144, 180); + color: rgb(14, 144, 180); +} +.menu__display:hover > .nav__under { + display: block; +} +.menu__display--right:hover > .nav__side { + display: block; +} +.nav__under { + display: none; + position: relative; + position: absolute; + top: 100%; + left: 170px; + width: 300px; +} +.nav__under--list { + width: 300px; + color: white; + background-color: #333; + padding: 10px 20px; + font-size: 1.2rem; + text-align: left; + text-transform: capitalize; +} + +.nav__under--list a:hover { + color: rgb(14, 144, 180); +} +.arrow-down { + position: absolute; + top: 17px; + left: 270px; + font-size: 1rem; +} +.arrow-down:hover { + color: rgb(14, 144, 180); +} +.arrow-right { + position: absolute; + right: 5%; + top: 65%; + font-size: 0.8rem; +} +.nav__side { + position: absolute; + top: 50%; + left: 100%; + width: 300px; + background-color: #333; + display: none; +} +.nav__side--list { + padding: 10px 20px; + font-size: 1.2rem; + text-transform: capitalize; +} +.nav__side--list:hover { + color: rgb(14, 144, 180); +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..76215f1a --- /dev/null +++ b/05/index.html @@ -0,0 +1,49 @@ + + + + + + Project website + + + + +
+ +
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + + + diff --git a/05/reset.css b/05/reset.css new file mode 100644 index 00000000..425486b6 --- /dev/null +++ b/05/reset.css @@ -0,0 +1,109 @@ +/*** + The new CSS reset - version 1.11.2 (last updated 15.11.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) + */ + *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Fix mobile Safari increase font-size on landscape mode */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu, summary { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; + box-sizing: border-box; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; + box-sizing: border-box; +} + +/* Remove details summary webkit styles */ +::-webkit-details-marker { + display: none; +} \ No newline at end of file diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..951e95a5 --- /dev/null +++ b/05/style.css @@ -0,0 +1,109 @@ +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} +body { + background-color: #333; +} +.header { + width: 100%; + height: 100px; + border: 2px solid green; +} +.header__nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 80px; + border: 2px solid royalblue; + margin-top: 8px; +} +.header__nav--logo { + min-width: 200px; + height: 50px; + background-color: gold; +} +.header__nav--menu { + width: 500px; + height: 50px; + background-color: gold; +} +.section { + width: 100%; + height: 50vh; + border: 2px solid green; + margin-top: 20px; +} +.section__about-us { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 45vh; + border: 2px solid royalblue; + margin-top: 18px; +} +.section__about-us--one { + width: 50%; + height: 40vh; + background-color: gold; + margin-right: 5px; +} +.section__about-us--two { + width: 50%; + height: 40vh; + background-color: gold; + margin-left: 5px; +} +.products { + width: 100%; + height: 50vh; + border: 2px solid green; + margin-top: 20px; +} +.products__menu { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 45vh; + border: 2px solid royalblue; + margin-top: 18px; +} +.products__menu--one { + width: 30%; + height: 40vh; + background-color: gold; +} +.products__menu--two { + width: 30%; + height: 40vh; + background-color: gold; +} +.products__menu--three { + width: 30%; + height: 40vh; + background-color: gold; +} +.contact { + width: 100%; + height: 15vh; + border: 2px solid green; + margin-top: 20px; +} +.contact__info { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 10vh; + border: 2px solid royalblue; + margin-top: 18px; +} +.contact__info--address { + width: 20%; + height: 5vh; + background-color: gold; +}