You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
1.9 KiB
103 lines
1.9 KiB
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;
|
|
}
|