diff --git a/12_grid/index.html b/12_grid/index.html new file mode 100644 index 0000000..0f47ea3 --- /dev/null +++ b/12_grid/index.html @@ -0,0 +1,65 @@ + + + + + + Document + + + +

Galerie přes Grid

+ + +
+
+

Položka 1

+

Obsah položky na webu

+
+
+

Položka 2

+

Obsah položky na webu

+
+
+

Položka 3

+

Obsah položky na webu

+
+
+

Položka 4

+

Obsah položky na webu

+
+
+

Položka 5

+

Obsah položky na webu

+
+
+

Položka 6

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+

Položka

+

Obsah položky na webu

+
+
+ + + \ No newline at end of file diff --git a/12_grid/style.css b/12_grid/style.css new file mode 100644 index 0000000..2c532af --- /dev/null +++ b/12_grid/style.css @@ -0,0 +1,103 @@ +body { + margin: 0; + padding: 20px; + background-color: #f0f0f0; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 30px; +} + +.grid-container { + display:grid; + /* vytvoříme 3 sloupce se stejnou říkou -> 1fr - 1fraction(část) */ + grid-template-columns: 1fr 1fr 1fr; + gap: 20px; + + max-width: 1200px; + margin: 0 auto; +} + +.grid-item{ + background-color: bisque; + padding: 20px; + border-radius: 15px; + text-align: center; + + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: traform 0.3s ease, box-shadow 0.3s ease; +} + +.grid-item h3{ + margin-top: 0; + color: #444; +} + +.grid-item p { + color: #777; + margin-bottom: 0; +} + +.grid-item:hover{ + transform: scale(1.05); + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + cursor: pointer; +} + +/* odd - liché položky */ +.grid-item:nth-child(odd){ + background-color: aqua; +} +/* even - sudé položky */ +.grid-item:nth-child(even){ + background-color: aquamarine; +} +.grid-item:first-child { + background-color: indianred; + grid-column: span 2; +} +.grid-item:last-child { + background-color: rosybrown; +} +/* 768px max šířka pro tablety */ +@media only screen and (max-width: 768px) { + .grid-container { + grid-template-columns: 1fr 1fr; + } + .grid-item:first-child { + grid-column: span 1; + } +} + +/* 480px max šířka pro telefony */ +@media only screen and (max-width: 480px) { + body { + padding: 10px; + } + .grid-container { + grid-template-columns: 1fr; + gap: 10px; + } + .grid-item { + padding: 20px; + } + h1 { + font-size: 24px; + } +} +/* pro každý 3. potomek (3,6,9,12...*/ +.grid-item:nth-child(3n) { + border: 3px solid #ff6b6b; +} + +/* pro všechny kromě(not) první */ +.grid-item:not(:first-child){ + opacity: 0.5; +} + +/*první 3 položky*/ +.grid-item:nth-child(-n+3) { + font-weight: bold; +} \ No newline at end of file