main padding

wciecie listy
u
2025-09-04 13:12:02 +02:00 · 2025-09-04 13:09:35 +02:00 · 2025-09-04 13:08:20 +02:00 · 2025-09-04 13:07:01 +02:00 · 2025-09-04 13:06:05 +02:00 · 2025-09-04 13:00:25 +02:00
3 changed files with 42 additions and 1 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;
@ -41,17 +63,29 @@ nav a {
    text-decoration: none;
 }

+/* Efekt po najechaniu myszą:
+Tło staje się ciemne, tekst jasny → efekt "przełączania"
+border: 1px solid – dodaje obramowanie */
+
 nav a:hover {
    background-color: #625B5B;
    color: #EAEAEA;
    border: 1px solid #EAEAEA;
 }

+/* margin-left: 40px – wcięcie listy
+list-style-type: circle – kropki jako kółka */
+
 ul {
    margin-left: 40px;
    list-style-type: circle;
 }

+/* border: 1px dashed – przerywana linia wokół tabeli
+width: 60% – tabela zajmuje 60% szerokości kontenera
+margin-left: 40px – wcięcie od lewej
+text-align: center – tekst w tabeli jest wyśrodkowany */
+
 table {
    border: 1px dashed #625B5B;
    width: 60%;
@ -59,10 +93,13 @@ table {
    text-align: center;
 }

+/* Klasa .kontrolki – np. dla przycisków, daje mały margines. */
 .kontrolki {
    margin: 5px;
 }

+/* main – główna treść strony ma wewnętrzny odstęp 20px od brzegów. */
+
 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	86863e1fd9	main padding	2025-09-04 13:12:02 +02:00
baiobelfer	db80169e66	wciecie listy	2025-09-04 13:09:35 +02:00
baiobelfer	d850ff8029	u	2025-09-04 13:08:20 +02:00
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