diff --git a/01/index.html b/01/index.html index 194076af..38791c18 100644 --- a/01/index.html +++ b/01/index.html @@ -7,6 +7,76 @@ devmentor.pl - HTML & CSS BASICS - #01 - +
+
Logo
+
Menu +
  • +
      +
    • Start
      • +
    • Tytuł
      • +
    • Autor
      • +
    • Data
      • +
    +
    • +
    +
    +
    +
    +
    +

    Tytuł

    + Autor + Data publikacji +
    +

    Treść

    + + + + + + + + + + + + + + + + + + + + + + +
    AnimalPaws
    Dog4
    Chicken2
    Snake0
    Spider8
    +
    +
    +
    + + + +
    +
    +
    +
    + Autor + Data +

    Treść komentarza

    +
    +
    + Autor + Data +

    Treść komentarza

    +
    +
    + Autor + Data +

    Treść komentarza

    +
    +
    +
    + \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..095128dc 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 label:hover, +.ac-container label:active { 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:active label:hover { 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:active 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..b997f409 100644 --- a/03/index.html +++ b/03/index.html @@ -5,6 +5,7 @@ devmentor.pl - HTML & CSS BASICS - #03 + diff --git a/03/styles/index.css b/03/styles/index.css new file mode 100644 index 00000000..0637660f --- /dev/null +++ b/03/styles/index.css @@ -0,0 +1,62 @@ +@font-face { + font-family: 'Source Sans PRO'; + src: url(source-sans-pro/SourceSansPro-Bold.otf) format('opentype'); + font-style: normal; + font-weight: normal; +} + +.parent { + width: 600px; + padding: 20px; +} + +.child { + box-sizing: border-box; + display: inline-block; + vertical-align: top; +} + +.child--first, +.child--middle { + width: calc(30% - 10px); + margin-right: 10px; +} + +.child--first { + font-family: 'Source Sans PRO'; + font-weight: normal; +} + +.child--middle { + font-family: 'Source Sans PRO'; + font-weight: bold; +} + +.child--last { + width: 40%; + font-family: 'Source Sans PRO'; + font-style: italic; +} + +.parent--flexbox { + display: flex; + gap: 10px; +} + +.parent--inline-block { + font-size: 0; +} + +.parent--inline-block .child { + font-size: 16px; +} + +.parent--float::after { + content: ''; + display: block; + clear: both; +} + +.parent--float .child { + float: left; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..67563a49 --- /dev/null +++ b/04/index.html @@ -0,0 +1,31 @@ + + + + + + Document + + + +
    + +
    + + \ No newline at end of file diff --git a/04/styles/styles.css b/04/styles/styles.css new file mode 100644 index 00000000..a12287ff --- /dev/null +++ b/04/styles/styles.css @@ -0,0 +1,91 @@ +body { + background-color: #f6f6f6; +} + +.header { + width: auto; + background-color: white; + border: none; +} + +.menu-list { + display: flex; + justify-content: flex-start; + gap: 2rem; + font-family: Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 1rem; +} + +.menu-li { + padding: 1rem; + cursor: pointer; + position: relative; + list-style: none; +} + +.rotate { + display: inline-block; + background-color: transparent; + transform: rotate(90deg); + margin-left: 0.5rem; +} + +.rotate-submenu { + display: inline-block; + margin-left: 5rem; +} + + +.menu-li:hover { + color: #54BBEA; +} + +.menu-li::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background-color: #54BBEA; + opacity: 0; + transition: opacity 0.2s ease; +} + +.menu-li:hover::before { + opacity: 1; +} + + +.submenu { + display: none; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + list-style: none; + color: white; + background-color:#222; + min-width: 10rem; + gap: 1rem; +} +.submenu-li { + position: relative; + padding: 0.5rem; +} + +.has-submenu { + position: relative; +} + +.menu-li:hover > .submenu, +.has-submenu:hover > .submenu { + display: flex; +} + +.has-submenu .submenu { + top: 0; + left: 100%; +} + diff --git a/05/assets/logo.png b/05/assets/logo.png new file mode 100644 index 00000000..3cafec9a Binary files /dev/null and b/05/assets/logo.png differ diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..d5e793bf --- /dev/null +++ b/05/index.html @@ -0,0 +1,57 @@ + + + + + + Document + + + +
    +
    + + +
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
    +
    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. +
    +
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
    +
    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
    +
    +
    + + + \ No newline at end of file diff --git a/05/styles/styles.css b/05/styles/styles.css new file mode 100644 index 00000000..24d59e28 --- /dev/null +++ b/05/styles/styles.css @@ -0,0 +1,47 @@ +.container { + width: 100%; + + display: flex; + justify-content: center; + margin-bottom: 2rem; +} + +.header, +.section-1 { + display: flex; + justify-content: space-between; + width: 1000px; + padding: 1rem; +} + +.section-1, +.section-2 { + gap: 1rem; +} + +.section-2 { + display: flex; + justify-content: space-around; + width: 1000px; + margin: 1rem; +} + + +.footer { + display: flex; + justify-content: center; + align-items: center; + gap: 3rem; + min-width: 100px; + background-color: lightslategray; +} + +.logo { + width: 2rem; + height: 2rem; +} + +.menu { + display: flex; + gap: 1rem; +} \ No newline at end of file