-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstylesn.css
133 lines (109 loc) · 2.46 KB
/
stylesn.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; /* Rozmiar czcionki */
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
/* Nowoczesny nagłówek */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #007bff;
color: white;
}
a {
text-decoration: none; /*ogólne style dla linków*/
color: blue;
}
a:hover {
text-decoration: underline;
}
header h1 {
margin: 0;
}
header nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
header nav ul li {
margin-left: 20px;
}
header nav ul li a {
color: white;
text-decoration: none;
}
header nav ul li a:hover {
text-decoration: underline;
}
/* Stylizacja tabeli */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
}
table th {
background-color: #007bff;
color: white;
}
table th:hover {
background-color: #f5f5f5; /* Stylizacja wiersza nagłówka i kolumny kup po najechaniu*/
color: black;/* Kolor tekstu wiersza nagłówka i kolumny po najechaniu */
}
table tr:hover {
background-color: #e0e0e0; /* Kolor tła wiersza po najechaniu */
border: solid 2px #5bcd3d; /* Grubość i kolor obramowania wiersza po najechaniu */
}
/* Responsywne obrazy */
img {
max-width: 50%; /* Obrazy nie będą większe niż ich kontener */
height: auto;
}
/* Karty */
.card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin: 20px 0;
}
.card img {
max-width: 100%;
border-radius: 5px 5px 0 0;
}
.card h2 {
margin: 0;
font-size: 1.5em;
}
.card-content {
display: flex /*stylizacja dla interaktywnych card*/
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
line-height: 1.5;
margin-top: 10px;
}
/* Stylizacja dla nagłówka na małych ekranach */
@media (max-width: 767px) {
body {
font-size: 10px; /* Rozmiar czcionki na małych ekranach */
}
header nav ul { /* Zmiana wyglądu menu na małych ekranach */
flex-direction: column;
align-items: flex-start;
}
header nav ul li {
margin: 10px 0;
}
.logo {
max-width: 25%;
}
}