devmentor-pl · LenartDominik · Jul 24, 2024 · Jul 24, 2024 · Aug 12, 2024 · Aug 12, 2024
diff --git 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,9 @@ 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);
@@ -72,8 +73,8 @@ to samo co w 1) ale z efektem najechania kursorem na label
     font-size: 13px;
 }
 
-.ac-container label:hover:after,
-.ac-container input:checked + label:hover:after {
+.ac-container label:hover::after,
+.ac-container input:checked + label:hover::after {
     content: '';
     position: absolute;
     width: 24px;
@@ -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
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>devmentor.pl - HTML & CSS BASICS - #03</title>
+    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
 

diff --git a/03/style.css b/03/style.css
@@ -0,0 +1,54 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('source-sans-pro/SourceSansPro-Bold.otf') format('opentype');
+    font-style: normal;
+    font-weight: bold;
+}
+
+div {
+    font-family: 'Source Sans Pro';
+    font-weight: bold;
+}
+
+
+.parent {
+    width: 600px;
+    padding: 20px;
+}
+
+.parent {
+    display: flex;
+    gap: 10px;
+}
+
+
+parent--inline-block {
+    display: inline-block;
+}
+
+
+.parent--float {
+    float: inline-end;
+}
+
+.parent--flexbox {
+    display: flex;
+}
+
+.child--first
+.child--middle {
+    width: 30%;
+}
+
+.child--first {
+    font-style: normal;
+}
+
+.child--middle {
+    font-style: bold;
+}
+.child--last {
+width: 40%;
+font-style: italic;
+}
+
diff --git a/04/assets/index.html b/04/assets/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <nav>
+        <ul class="nav-links">
+            <li class="nav-item"><a href="#">HOME</a></li>
+            <li class="nav-item dropdown">
+             <a href="#">ITEMS</a>
+
+                <ul class="dropdown-content">
+                    <li><a href="#">Item 1</a></li>
+
+                    <li class="dropdown-submenu">
+                        <a href="#">Item 2</a>
+                        <ul class="submenu-content">
+                            <li><a href="#">Item 2.1</a></li>
+                            <li><a href="#">Item 2.2</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li class="nav-item"><a href="#">SETTINGS</a></li>
+            <li class="nav-item"><a href="#">CONTACT</a></li>
+        </ul>
+    </nav>
+</body>
+</html>
diff --git a/04/assets/style.css b/04/assets/style.css
@@ -0,0 +1,100 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: f5f5f5;
+}
+
+nav {
+    background-color: #f8f8f8;
+    padding: 10px;
+}
+
+.nav-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+.nav-item {
+    position: relative;
+    margin-right: 20px;
+    padding: 10px;
+}
+
+.nav-item:first-child a {
+    color: #4db8ff;
+}
+
+.nav-item a {
+    text-decoration: none;
+    padding: 10px;
+    display: block;
+    color: #333;
+}
+
+.nav-item.dropdown>a::after,
+.nav-item.dropdown-submenu>a::after {
+    content: '>';
+        position: absolute;
+        right: 0;
+        transform: rotate(90deg);
+        font-size: 15px;
+        vertical-align: top;
+}
+
+.dropdown-submenu>a::after,
+.dropdown-submenu>a::after {
+    content: '>';
+        position: absolute;
+        right: 0;
+        transform: rotate(0deg);
+        font-size: 15px;
+       margin: 0 10px;
+}
+
+a:hover {
+    color: #4db8ff;
+}
+
+.dropdown-content,
+.submenu-content {
+    display: none;
+    position: absolute;
+    background-color: #333;
+    min-width: 150px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropdown-content li,
+.submenu-content li {
+    position: relative;
+}
+
+.dropdown-content a,
+.submenu-content a {
+    color: #fff;
+    padding: 10px;
+    display: block;
+}
+
+.nav-item:hover>.dropdown-content,
+.dropdown-submenu:hover>.submenu-content {
+    display: block;
+}
+
+.dropdown-content {
+    top: 100%;
+    left: 0;
+}
+
+.submenu-content {
+    top: 0;
+    left: 100%;
+}
+
+.arrow-up {
+    display: inline-block;
+    transform: rotate(-90deg);
+    font-size: 24px;
+}
diff --git a/05/index.html b/05/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+    <div class="header">
+<div class="logo"></div>
+<div class="menu"></div>
+
+    </div>
+    </div>
+
+<div class="container">
+    <div class="grid">
+        <div class="grid-item"></div>
+        <div class="grid-item"></div>
+    </div>
+    </div>
+
+    <div class="container">
+        <div class="grid-column">
+            <div class="grid-item-column"></div>
+            <div class="grid-item-column"></div>
+            <div class="grid-item-column"></div>
+        </div>
+        </div>
+        <div class="container container1">
+            <div class="footer"></div>
+        </div>
+</body>
+</html>
diff --git a/05/style.css b/05/style.css
@@ -0,0 +1,79 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+}
+
+.container {
+    width: 100%;
+    max-width: 1000px;
+    border: 5px solid green;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 2px solid blue;
+    margin: 20px 0;
+}
+
+.logo,
+.menu {
+    width: 200px;
+    height: 40px;
+    background-color: #ffca18;
+}
+
+.menu {
+    width: 400px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5em;
+    border: 3px solid blue;
+
+}
+
+.grid-item {
+    background-color: #ffca18;
+    height: 250px;
+    margin: 20px 0;
+}
+
+.grid-column {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5em;
+    border: 3px solid blue;
+}
+
+.grid-item-column {
+    background-color: #ffca18;
+    height: 250px;
+    margin: 20px 0;
+}
+
+.container1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 3px solid blue;
+}
+
+.footer {
+    height: 100vh;
+    height: 100px;
+    width: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffca18;
+
+}