diff --git a/01/JA b/01/JA new file mode 100644 index 00000000..c7eddfb3 Binary files /dev/null and b/01/JA differ diff --git a/01/README.md b/01/README.md deleted file mode 100644 index 1d5c62c6..00000000 --- a/01/README.md +++ /dev/null @@ -1,31 +0,0 @@ -> :white_check_mark: *Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj. `s1e02-html-and-css-basics` (dotyczy [mentee](https://devmentor.pl/mentoring-javascript/)) lub na ogólnodostępnej i bezpłatnej [społeczności na Discordzie](https://devmentor.pl/discord). Pamiętaj, aby treść Twojego wpisu spełniała [odpowiednie kryteria](https://devmentor.pl/jak-prosic-o-pomoc/).* - - -  - -# `#01` HTML i CSS: Podstawy - -W pliku `index.html` utwórz strukturę HTML, która będzie poprawna semantycznie i będzie posiadała poniższe elementy: - -- Nagłówek, tj. `
`, który będzie zawierał: - - logo, - - menu wielopoziomowe. -- Treść główną, np. `
`, którą będzie: - - artykuł, tj. `
`, który posiada: - - tytuł, - - treść, - - datę publikacji, - - autora, - - ilustrację, - - tabelę. - - formularz do komentowania, - - kilka przykładowych komentarzy, które zawierają: - - treść komentarza, - - autora komentarza, - - datę utworzenia. -- Stopkę z informacją o prawach autorskich. - -  -> :no_entry: *Jeśli nie posiadasz materiałów do tego zadania tj. **PDF + wideo, projekt + Code Review**, znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/workshop-html-and-css-basics/)* - -> :arrow_left: ~~*poprzednie zadanie*~~ | [*następne zadanie*](./../02) :arrow_right: diff --git a/01/index.html b/01/index.html index 194076af..c6a013d0 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,112 @@ - + - devmentor.pl - HTML & CSS BASICS - #01 + Kurs maturalny z matematyki - + + +
+
+

O mnie

+ 200 +

Nauczaniem matematyki zajmuje się 8 lat. W tym czasie udało mi się skutecznie pomóc kilkuset uczniom w zdaniu egzaminów – głównie szkoły średniej, a także ósmoklasistom (kiedyś absolwentom gimnazjów). Mam kilka autorskich planów przygotowania do matury podstawowej i rozszerzonej (w zależności od czasu i zaangażowania ucznia). Pomagam również w zrozumieniu bieżącego materiału z lekcji lub wykładu.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Cennik
Rodzaj lekcjiCzas trwaniaCena
Online50 minut75 zł
Stacjonarna50 minut75 zł
+
+
+ +

Autor: Piotr Palka

+
+
+
+
+
+

Formularz kontaktowy

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+

Komentarze uczniów

+

+ + Bardzo polecam korepetycje. Konkretna pomoc i miłe podejście. Wynik z matury bardzo satysfakcjonujący! + +

+

Wiktor

+ +
+

+ + Świetne podejście do ucznia, oraz ogromne umiejętności przekazywania wiedzy. Korepetycje zawsze przebiegały w miłej atmosferze, bez presji i stresu. Z czystym sumieniem mogę polecić Pana Piotra, dzięki jego korepetycjom wynik matury przeszedł moje najśmielsze oczekiwania! + +

+

Jagoda

+ +
+
+
+
+

© Matematyka Twoja Przyszłość. Wszelkie prawa zastrzeżone

+
\ No newline at end of file diff --git a/01/logo.jpg b/01/logo.jpg new file mode 100644 index 00000000..44d1f215 Binary files /dev/null and b/01/logo.jpg differ diff --git a/02/index.html b/02/index.html index 89650fad..61507003 100644 --- a/02/index.html +++ b/02/index.html @@ -5,7 +5,6 @@ devmentor.pl - HTML & CSS BASICS - #02 - diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..4cd4cd08 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; } @@ -60,9 +60,10 @@ i ten brat musi posiadać przodka o klasie .ac-container 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); @@ -89,7 +90,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 +127,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..0c2820dd 100644 --- a/03/index.html +++ b/03/index.html @@ -5,6 +5,7 @@ devmentor.pl - HTML & CSS BASICS - #03 + diff --git a/03/style/style.css b/03/style/style.css new file mode 100644 index 00000000..4d7dfa65 --- /dev/null +++ b/03/style/style.css @@ -0,0 +1,63 @@ +@font-face { + font-family: 'Source Sans Pro'; + src: url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700;italic&display=swap'); + font-style: normal; + font-weight: 400; +} + +/* Podstawowy styl dla .parent */ +.parent { + width: 600px; + padding: 20px; + margin: 20px auto; + border: 1px solid #ccc; + box-sizing: border-box; +} + +/* Podstawowe style dla .child */ +.child { + padding: 10px; + background-color: #f0f0f0; + box-sizing: border-box; +} + +/* Szerokości dla .child */ +.child--first { + width: 30%; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 400; /* Regular */ +} + +.child--middle { + width: 30%; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; /* Bold */ +} + +.child--last { + width: 40%; + font-family: 'Source Sans Pro', sans-serif; + font-style: italic; /* Italic */ +} + +/* Odstęp między elementami */ +.child:not(:last-child) { + margin-right: 10px; +} + +/* Pozycjonowanie za pomocą inline-block */ +.parent--inline-block .child { + display: inline-block; + vertical-align: top; +} + +/* Pozycjonowanie za pomocą float */ +.parent--float .child { + float: left; +} + +/* Pozycjonowanie za pomocą flexbox */ +.parent--flexbox { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/04/assets/index.html b/04/assets/index.html new file mode 100644 index 00000000..684b0e6c --- /dev/null +++ b/04/assets/index.html @@ -0,0 +1,35 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..e69de29b diff --git a/04/style/style.css b/04/style/style.css new file mode 100644 index 00000000..28ad0582 --- /dev/null +++ b/04/style/style.css @@ -0,0 +1,64 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: Arial, sans-serif; + background-color: whitesmoke; +} +nav { + background-color: white; + padding: 10px; +} +.menu { + list-style: none; + display: flex; + justify-content: flex-start; +} +.menu > li { + position: relative; + margin-right: 20px; +} + +.menu li a { + text-decoration: none; + color: #333; + padding: 10px 15px; + display: block; +} +.menu li a:hover { + color: rgb(66, 98, 202); +} +.submenu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #333; + list-style: none; + padding: 0; +} +.submenu li a { + padding: 10px 15px; + color: white; + text-decoration: none; + display: block; + background-color: #262626; +} +.submenu li a:hover { + color: wheat; + background-color: #383737; +} +.submenu .submenu { + top: 0; + left: 100%; +} +.menu li:hover > .submenu { + display: block; +} +.rotated { + position: relative; + transform: rotate(90deg); + float: right; +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..6459b44a --- /dev/null +++ b/05/index.html @@ -0,0 +1,32 @@ + + + + + + Document + + + +
+ + +
+ +
+
+
+
+
+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/05/style/style.css b/05/style/style.css new file mode 100644 index 00000000..9b66ef50 --- /dev/null +++ b/05/style/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + max-width: 1000px; + margin: 10px 0; +} +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; +} +.logo { + width: 100px; + height: 50px; + position: absolute; + left: 0; +} +.menu { + width: 200px; + height: 50px; + position: absolute; + right: 0; +} + +.dwie-kolumny { + display: flex; + justify-content: space-between; + margin: 10px 0; + padding: 0; +} +.dwie-kolumny .kolumna { + width: 49%; + height: 200px; +} + +.trzy-kolumny { + display: flex; + justify-content: space-between; + margin: 20px 0; + padding: 0 10px; +} +.trzy-kolumny .kolumna { + width: 32%; + height: 200px; +} + +footer { + padding: 10px; + min-height: 100px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} \ No newline at end of file