diff --git a/01/index.html b/01/index.html index 194076af..df0f2b24 100644 --- a/01/index.html +++ b/01/index.html @@ -7,6 +7,157 @@ devmentor.pl - HTML & CSS BASICS - #01 + +
+ +
+ logotype + +
+ +
+ + +
+ +
+

Article title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In ratione expedita voluptas nisi debitis, architecto exercitationem, quos magni consectetur temporibus + ab non ipsam laborum possimus, nostrum ad dolorum? Error aspernatur necessitatibus consequuntur facilis, atque sed quidem est facere nobis perferendis sequi repellat expedita + consectetur eos amet omnis labore soluta itaque aliquid? Eius assumenda, officia deserunt sed suscipit nesciunt ut aliquid et quibusdam a. Enim, distinctio fugit esse ex veritatis + pariatur dolor. Error quam rerum dolorum placeat sequi excepturi deserunt? Aliquid illum suscipit veritatis esse numquam dolorum ipsum sequi commodi laboriosam, delectus temporibus + rem vero quam quod repudiandae dolor aliquam explicabo. +

+

18.09.24

+

Anonymous

+ article image + + + + + + + + + + + + + + + + + + + + + +
XYZ
123
456
+ +
+ +
+
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ + +
+ +
+ +
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, velit!

+

Janusz Kowalski

+

20.08.24

+
+
+ +
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, doloribus.

+

John Doe

+

29.08.24

+
+
+ +
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos, quidem.

+

Adam Wolny

+

11.09.24

+
+ + + + +
+ + + + \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..0efc88ea 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/fonts/sourcesanspro-regular-webfont.woff b/03/fonts/sourcesanspro-regular-webfont.woff new file mode 100644 index 00000000..3931618e Binary files /dev/null and b/03/fonts/sourcesanspro-regular-webfont.woff differ diff --git a/03/fonts/sourcesanspro-regular-webfont.woff2 b/03/fonts/sourcesanspro-regular-webfont.woff2 new file mode 100644 index 00000000..d0a16b70 Binary files /dev/null and b/03/fonts/sourcesanspro-regular-webfont.woff2 differ diff --git a/03/index.html b/03/index.html index 0c018343..a6cc4e75 100644 --- a/03/index.html +++ b/03/index.html @@ -5,16 +5,13 @@ 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?
diff --git a/03/styles/style.css b/03/styles/style.css new file mode 100644 index 00000000..7d543824 --- /dev/null +++ b/03/styles/style.css @@ -0,0 +1,68 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +@font-face { + font-family: 'Source Sans Pro'; + src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'), + url('fonts/sourcesanspro-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; + +} + + + +.parent { + width: 600px; + padding: 20px; + +} + +.parent--inline-block div { + display: inline-block; + +} + +.parent--float div { + float: left; +} + +.parent--float::after { + content: ''; + display: block; + clear: both; +} + +.parent--flexbox { + display: flex; +} + +.child { + + margin-right: 10px; + font-family: 'Source Sans Pro'; +} + +.child--first, .child--middle { + max-width: calc(30% - 10px); +} + +.child--first { + font-style: normal; +} + +.child--middle { + font-weight: bold; +} + +.child--last { + /* max-width: calc(40% - 10px); */ + max-width: 40%; + margin-right: 0; + font-style: italic; +} + diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..8ce11776 --- /dev/null +++ b/04/index.html @@ -0,0 +1,55 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/04/style.css b/04/style.css new file mode 100644 index 00000000..58ed9795 --- /dev/null +++ b/04/style.css @@ -0,0 +1,156 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #F5F5F5; +} + + +.navbar__list { + + align-items: center; + background-color: #FFFFFF; + color: #333333; + display: flex; + /* height: 70px; */ + justify-content: flex-start; + list-style: none; + margin: 20px 10px 0 10px; + max-width: 100%; + font-family: Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + /* line-height: 20px; */ +} + +.navbar__element { + margin: 0 25px; + position: relative; +} + +.navbar__link { + color: #333333; + text-decoration: none; + cursor: pointer; + position: relative; + padding: 30px 0; + display: block; +} + +.navbar__link:hover { + color: #009AE1; +} + +.navbar__link::after { + content: ''; + position: absolute; + left: -25px; + top: -26px; + width: calc(100% + 50px); + height: 3px; + background-color: transparent; +} + +.navbar__link:hover::after { + background-color: #009AE1; +} + +.navbar__dropdown { + position: absolute; + top: 120px; +} + +/* .navbar__dropdown:last-child { + position: absolute; +} */ + +/* .navbar__element:nth-child(2) > .navbar__link { + position: relative; +} */ + +.navbar__element--dropdown > .navbar__link::before { + position: absolute; + content: '>'; + color: transparent; + right: -20px; + transform: rotate(90deg); + +} + +/* .navbar__element:nth-child(2) > .navbar__link:active::before { + transform: rotate(90deg); +} */ + + +.navbar__element:hover .dropdown { + display: block; +} + + +.navbar__element:nth-child(2) > .navbar__link:hover::before { + color: #009AE1; +} + + +/* .navbar__element:nth-child(2) { + position: relative; +} */ + +.dropdown, .dropdown2 { + display: none; + background-color: #333333; + width: 204px; + list-style: none; + +} + +.dropdown { + position: absolute; + top: 100%; + left: -25px; +} + +.dropdown__item, .dropdown2__item { + padding: 10px 0 10px 25px; +} + +.dropdown__link, .dropdown2__link { + color: #F5F5F5; + text-decoration: none; + cursor: pointer; + font-family: Arial, Helvetica, sans-serif; + font-weight: 100; + font-size: 14px; + +} + +.dropdown__item--children { + position: relative; +} + + +.dropdown__item--children::after { + position: absolute; + content: '>'; + right: 10px; + color: #F5F5F5; +} + +.dropdown2 { + position: absolute; + left: 100%; + top: 0; + +} + +.dropdown__item--children:hover .dropdown2 { + display: block; +} + +/* .navbar__element:nth-child(2):active > .dropdown, +.dropdown > .dropdown__item:nth-child(2):active > .dropdown2 { + display: block; +} */ diff --git a/05/assets/style.css b/05/assets/style.css new file mode 100644 index 00000000..61297a40 --- /dev/null +++ b/05/assets/style.css @@ -0,0 +1,103 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, Helvetica, sans-serif; +} + +.navbar, .hero, .features, .footer { + max-width: 100%; +} + +.navbar { + background-color: #F5F5F5; + margin-bottom: 40px; +} + +.navbar__container, .hero__container, .features__container, .footer__container { + max-width: 1000px; + margin: 0 auto; + display: flex; +} + +.navbar__container { + justify-content: space-between; + align-items: center; + height: 80px; + width: 100%; + +} + +.navbar__list { + display: flex; + list-style: none; +} + +.navbar__link { + text-decoration: none; + cursor: pointer; + color: #333; + padding: 30px 0; +} + +.navbar__element { + margin-right: 30px; + +} + +.navbar__element:hover .navbar__link { + color: #009AE1; +} + +.navbar__element:last-child { + margin-right: 0px; +} + +.hero__container { + justify-content: space-between; + +} + +.hero__title { + font-size: 24px; + padding-bottom: 15px; +} + +.hero__element:first-child { + margin-right: 20px; +} + +.hero__element { + width: 50%; +} + +.features { + margin: 40px 0; +} + +.features__container { + justify-content: space-evenly; +} + +.features__title { + font-size: 18px; + padding-bottom: 15px; +} + +.features__element { + width: 25%; +} + +.footer { + background-color: #F5F5F5; +} + +.footer__container { + justify-content: center; + align-items: center; + min-height: 100px; + width: 100%; +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..6d8a6018 --- /dev/null +++ b/05/index.html @@ -0,0 +1,85 @@ + + + + + + Document + + + + + + +
+
+ +
+

Lorem ipsum dolor sit amet.

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus accusamus voluptas sequi libero cum, nulla et id laudantium odit? Voluptas unde fugit quis commodi eligendi nihil libero, at repellat porro adipisci ad corporis consequatur praesentium ipsa maiores minus sint totam sunt similique voluptates dolore a in! Harum deserunt illum voluptate repudiandae repellendus, incidunt facere enim fugit cupiditate optio ipsa perferendis impedit omnis quisquam quia officiis ratione veritatis doloremque nisi recusandae eos corporis. Eligendi, molestias ipsum inventore nostrum sint impedit ut iure at, quia dignissimos, qui sapiente tempore in aliquid voluptates nobis vero cum temporibus maiores beatae animi! Doloremque odit quos delectus adipisci impedit aliquid asperiores tempora ex, nesciunt incidunt doloribus ipsa autem necessitatibus et optio totam repudiandae quasi praesentium. Delectus quae quasi amet, sint a ducimus voluptate similique, deleniti voluptatem itaque corrupti quisquam dolorum doloribus, nam omnis non! Illo ipsa mollitia ut quisquam ullam modi numquam voluptatum quos dolores nulla? +

+
+ +
+

Lorem ipsum dolor sit amet consectetur.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit earum quam eligendi dolorem nemo vel! Eveniet reprehenderit repellendus ut aliquid perferendis ullam labore totam distinctio at pariatur voluptatibus nemo soluta, maxime ipsam sint et optio, nesciunt corrupti. Iusto corporis inventore placeat culpa sit quasi atque necessitatibus dignissimos cumque voluptates perferendis, eum maiores est aspernatur, at asperiores impedit quia doloremque nihil? Voluptas odit enim vitae totam nostrum architecto provident consectetur hic! Minima unde nobis, consequatur libero laudantium natus beatae eveniet quisquam consequuntur odio fugit vel. Sunt eos reprehenderit laborum quisquam laboriosam et. Ut, iure hic! Iusto perferendis delectus laudantium officiis similique voluptatibus quas, dolorem quaerat, reprehenderit enim cum laboriosam magni accusamus. Assumenda quas culpa vero ad at nesciunt. Expedita architecto recusandae veniam dolore repellendus voluptatem itaque rem similique harum exercitationem nihil saepe perspiciatis eum soluta nobis ab debitis dolor dolores asperiores, consequatur ullam vero quo! Sunt esse quibusdam aut repudiandae enim. +

+
+ +
+
+ +
+
+
+

Lorem, ipsum dolor.

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores ab ratione quisquam? Voluptate, commodi porro quisquam iusto deleniti accusantium assumenda. Odio necessitatibus corporis aperiam a, molestias rerum deserunt aspernatur explicabo quas vel fugiat dicta quos totam sint rem saepe veritatis maxime eligendi soluta velit qui alias eaque provident magnam! Ducimus. +

+
+
+

Lorem, ipsum dolor.

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae accusamus fugiat quam doloribus corrupti, iusto incidunt exercitationem sunt itaque ea sit quidem laborum aut eligendi error ipsum nostrum quisquam. Ullam unde vero aspernatur error corporis suscipit esse dolorum quae, facere veritatis alias consectetur labore, quaerat eaque aperiam! Consequatur, sit dignissimos? +

+
+
+

Lorem, ipsum dolor.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed officia labore architecto iusto nesciunt odio distinctio et, cum adipisci, iure ipsum pariatur animi eaque esse, nulla provident cupiditate asperiores natus exercitationem quidem molestias fuga est. Veritatis, aspernatur. Iusto pariatur voluptas eius odit sed ipsa eum, labore accusamus, expedita eos exercitationem. +

+
+
+
+ + + + + + + \ No newline at end of file