diff --git a/01/index.html b/01/index.html index 194076af..a281561b 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,112 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #01 - - - - + + +
+
+ logo +
+ +
+
+
+

Resturant

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe illum, + eaque voluptates fugiat nulla dolor aspernatur rem. Nulla, beatae + doloribus. +

+ + + + + + + + + + + + + + + + + + + + +
SmallMediumLarge
Hot dog SHot dog MHot dog L
Pepsi SPepsi MPepsi L
+
+

Author of article is June Doe

+

Data of published

+
+ Food +
+
June Doe
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..3df2a835 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -7,7 +7,7 @@ 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; @@ -47,7 +47,7 @@ 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) */ -?? { +.ac-container label:hover { background: #fff; } @@ -61,8 +61,8 @@ 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) */ -??, -?? { +.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); @@ -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); } @@ -126,7 +126,7 @@ 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) */ -?? { +.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; diff --git a/03/index.html b/03/index.html index 0c018343..1626101d 100644 --- a/03/index.html +++ b/03/index.html @@ -3,36 +3,104 @@ - - devmentor.pl - HTML & CSS BASICS - #03 + Layout Zadanie + -
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ 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. Nobis praesentium in possimus! +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+ 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. Nemo, asperiores. +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
+ 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. Delectus, iure? +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ 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. Nobis praesentium in possimus! +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? +
\ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..c5381816 --- /dev/null +++ b/04/index.html @@ -0,0 +1,37 @@ + + + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/04/style.css b/04/style.css new file mode 100644 index 00000000..624e8aaf --- /dev/null +++ b/04/style.css @@ -0,0 +1,82 @@ +body, +html { + background-color: #f4f4f4; + font-family: sans-serif; +} +.nav__list { + background-color: #fff; + display: flex; + margin: 20px; +} +.nav__item { + padding: 20px 40px; + color: #5ab1e7; + + border-top: 2px solid #fff; + transition: all 0.4s ease-in-out; +} + +.nav__link { + text-transform: uppercase; + text-decoration: none; + color: #000000; +} +.submenu__link, +.sub-submenu__link { + text-decoration: none; + color: #000000; +} + +.nav__item:hover { + border-top: 2px solid #5ab1e7; +} +.submenu { + position: relative; +} +.submenu::after { + content: '>'; + position: absolute; + right: 10px; + top: 20px; + transform: rotate(90deg); +} +.submenu:hover > .submenu__list { + display: block; +} +.submenu__list { + position: absolute; + background-color: #333333; + top: 100%; + left: 0; + min-width: 200px; + display: none; +} +.submenu__item, +.sub-submenu__item { + padding: 10px 20px; +} +.submenu__link, +.sub-submenu__link { + color: #ffffff; +} +.submenu__item--sub { + position: relative; +} +.submenu__item--sub::after { + content: '>'; + position: absolute; + right: 10px; + top: 10px; + color: #fff; +} +.sub-submenu__list { + position: absolute; + top: 0; + left: 100%; + background-color: #333333; + min-width: 200px; + display: none; +} +.submenu__item--sub:hover > .sub-submenu__list { + display: block; +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..3fb623b2 --- /dev/null +++ b/05/index.html @@ -0,0 +1,44 @@ + + + + + + + + Document + + + + +
+
+ + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..76abda0c --- /dev/null +++ b/05/style.css @@ -0,0 +1,57 @@ +body { + background-color: antiquewhite; +} +.green { + border: 5px solid green; + margin: 10px; + padding: 5px 0; +} +.blue { + border: 5px solid blue; + max-width: 1000px; + margin: 5px auto; + padding: 10px 0; +} + +.orange { + min-height: 50px; + background-color: orange; +} +.header .blue { + display: flex; + justify-content: space-between; +} + +.logo { + width: 100px; +} +.nav { + width: 400px; +} + +.container .blue { + display: flex; + justify-content: space-between; +} +.article { + min-height: 250px; + width: 48%; +} +.container .second-section { + display: flex; + justify-content: space-evenly; +} +.item { + min-height: 250px; + width: 31%; +} +.footer { + display: flex; + justify-content: center; + align-items: center; +} +.footer-content { + min-height: 100px; + margin: 10px; + width: 30%; +} \ No newline at end of file