hover

nav a
add comments
2025-09-04 13:07:01 +02:00 · 2025-09-04 13:06:05 +02:00 · 2025-09-04 13:00:25 +02:00 · 2025-09-04 12:54:12 +02:00 · 2025-09-04 12:41:35 +02:00 · 2025-09-04 12:25:24 +02:00
3 changed files with 28 additions and 22 deletions
--- a/css/layout.css
+++ b/css/layout.css
@ -14,6 +14,14 @@ header img {
    width: 100%;
 }

+/* 
+    position: absolute – wyrzuca tekst z normalnego przepływu strony i umieszcza go nad obrazkiem.
+    top: 50%; left: 50% – zaczyna od środka nagłówka.
+    transform: translate(-50%, -50%) – przesuwa tekst o połowę jego szerokości/wysokości, by był idealnie wyśrodkowany.
+    color: white – biały tekst na ciemnym tle obrazka.
+    font-size: 48px – duży tekst. 
+*/
+
 .header-text {
    position: absolute;
    top: 50%;
@ -24,6 +32,10 @@ header img {
    font-weight: bold;
 }

+/* 
+nav (menu) i footer (stopka) mają ciemnoszare tło (#625B5B), biały tekst i padding.
+text-align: center – centruje zawartość. 
+*/
 nav, footer {
    background-color: #625B5B;
    color: white;
@ -31,6 +43,16 @@ nav, footer {
    text-align: center;
 }

+/* 
+a w nav to linki:
+font-weight: bold – pogrubienie
+background-color: #EAEAEA – jasny tło przycisków
+color: #625B5B – ciemny kolor tekstu
+padding: 10px – przestrzeń wewnątrz przycisku
+margin: 50px – duża przestrzeń między linkami
+border-radius: 20px – zaokrąglone rogi
+text-decoration: none – usuwa podkreślenie linków 
+*/
 nav a {
    font-weight: bold;
    background-color: #EAEAEA;
@ -46,23 +68,3 @@ nav a:hover {
    color: #EAEAEA;
    border: 1px solid #EAEAEA;
 }
-
-ul {
-    margin-left: 40px;
-    list-style-type: circle;
-}
-
-table {
-    border: 1px dashed #625B5B;
-    width: 60%;
-    margin-left: 40px;
-    text-align: center;
-}
-
-.kontrolki {
-    margin: 5px;
-}
-
-main {
-    padding: 20px;
-}
--- a/i1.html
+++ b/i1.html
@ -6,15 +6,19 @@
    <link rel="stylesheet" href="css/layout.css">
 </head>
 <body>
+
    <header>
        <img src="imgs/baner.png" alt="kursy komputerowe">
-        <div class="header-text">hello</div>
+        <div class="header-text">Kursy komputerowe</div>
    </header>
+
+
    <nav>
        <a href="i1.html">Strona główna</a>
        <a href="raty.html">Koszt rat</a>
        <a href="https://moje-szkolenia.pl/">Nasz partner</a>
    </nav>
+    
    <main>
        <h3>Kursy komputerowe - programowanie</h3>
        <table>
--- a/imgs/baner.png
+++ b/imgs/baner.png
Author	SHA1	Message	Date
baiobelfer	e717d96683	hover	2025-09-04 13:07:01 +02:00
baiobelfer	10a2452ad3	nav a	2025-09-04 13:06:05 +02:00
baiobelfer	a9e4b4bafb	add comments	2025-09-04 13:00:25 +02:00
baiobelfer	63060a9db8	pozycjonowaanie textu na png@header	2025-09-04 12:54:12 +02:00
baiobelfer	e26fa89233	replace png	2025-09-04 12:41:35 +02:00
baiobelfer	63c9e396b9	style body	2025-09-04 12:25:24 +02:00