1ts menu rozwijane

PrzezMateusz Siemież 
*
{
    box-sizing: border-box;
}

body
{
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #0b0b0b;
    color: #f5f5f5;

}

header
{
    background-color: #070707;
    padding: 25px 20px;
    text-align: center;
    border-bottom: 3px solid rgba(255,43,43,0.10);
    box-shadow: 0 2px 8px black;
}

header h1
{
    margin: 0;
    color: #ff2b2b;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
}

.top-nav
{
    background-color: #070707;
    border-top: 1px solid rgba(255,43,43,0.03);
    border-bottom: 1px solid rgba(255,43,43,0.03);
}

.menu
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.menu > li 
{
    display: inline-block;
    position: relative;
}

.menu > li > a 
{
    display: block;
    padding: 12px 18px;
    color: #f5f5f5;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;

}

.menu > li > a:hover, .menu >li > a:focus
{
    background-color: #121212;
    color: #ff2b2b;
    box-shadow: 0 4px 18px rgba(255,43,43,0.12);
    outline: none;
}

.submenu
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #0f0f10;
    border: 1px solid rgba(255,43,43,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    z-index: 50;

}

.menu li:hover > .submenu, .menu li:focus-within > .submenu
{
    display: block;
}
.submenu li a 
{
    display: block;
    padding: 10px 14px;
    color: #e9e9e9;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,43,43,0.03);
    transition: background 0.14s ease, color 0.14s ease;
}

.submenu li a:hover, .submenu li a:focus
{
    background: #1a1a1b;
    color: #ff2b2b;
}

.container 
{
    width: 100%;
    max-width: 1200px;
    margin: 18px auto;
    padding: 0 12px;
}

.side-menu
{
    width: 20%;
    float: left;
    background: #0f0f10;
    padding: 16px;
    margin-right: 2%;
    box-shadow: 0 4px 12px rgba(255,43,43,0.06);
    border-left: 4px solid rgba(255,43,43,0.12);

}

.side-menu h3
{
    margin-top: 0;
    color: #ff2b2b;
}

/* struktura drzewa w menu bocznym */

.side-menu ul 
{
    list-style: none;
    margin: 0;
    padding-left: 25px;
}

.side-menu li 
{
    margin-bottom: 8px;
    color: #ddd;
}

.side-menu a
{
    text-decoration: none;
    color: #f5f5f5;
    transition: color 0.14s ease, text-decoration 0.14s ease;
}
.side-menu a:hover, .side-menu a:focus 
{
    color: #ff2b2b;
    text-decoration: underline;
}

/* treść główna */

main
{
    width: 78%;
    float: left;
    background: #0f0f10;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    min-height: 420px;
    color: #eaeaea;
    border-bottom: 4px solid rgba(255,43,43,0.06);
    
}
main h2
{
    margin-top: 0;
    color: #ff2b2b;
}

footer
{
    clear: both;
    background: #070707;
    color: #f5f5f5;
    text-align: center;
    padding: 14px 10px;
    margin-top: 22px;
    border-top: 3px solid rgba(255,43,43,0.06);
}

a
{
    color: #ff2b2b;
}
a:hover
{
    text-decoration: underline;
}

:focus
{
    outline: 3px solid rgba(255,43,43,0.12);
    outline-offset: 2px;
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FitnesShop - sklep sportowy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>FitnesShop - super sklep sportowy</h1>
    </header>

    <nav class="top-nav">
        <ul class="menu">
            <li>
                <a href="#">Odzież</a>
                <ul class="submenu">
                    <li><a href="#">Koszulki</a></li>
                    <li><a href="#">Bluzy</a></li>
                    <li><a href="#">Spodnie</a></li>
                    <li><a href="#">Buty</a></li>
                    <li><a href="#">Czapki</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Siłownia</a>
                <ul class="submenu">
                    <li><a href="#">Ciężarki</a></li>
                    <li><a href="#">Hantle</a></li>
                    <li><a href="#">Uchwyty treningowe</a></li>
                    <li><a href="#">Ławeczki</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Akcesoria</a>
                <ul class="submenu">
                    <li><a href="#">Torby</a></li>
                    <li><a href="#">Bidony</a></li>
                    <li><a href="#">Ochraniacze</a></li>
                    <li><a href="#">Rękawiczki</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>

    <div class="container">

        <aside class="side-menu">
            <h3>Kategorie</h3>
            <ul>
                <li>Odzież
                    <ul>
                        <li><a href="#">Koszulki</a></li>
                        <li><a href="#">Bluzy</a></li>
                        <li><a href="#">Spodnie</a></li>
                        <li><a href="#">Buty</a></li>
                        <li><a href="#">Czapki</a></li>
                    </ul>
                </li>
                <li>Siłownia
                    <ul>
                        <li><a href="#">Ciężarki</a></li>
                        <li><a href="#">Hantle</a></li>
                        <li><a href="#">Uchwyty treningowe</a></li>
                        <li><a href="#">Ławeczki</a></li>
                    </ul>
                </li>
                <li>Akcesoria
                    <ul>
                        <li><a href="#">Torby</a></li>
                        <li><a href="#">Bidony</a></li>
                        <li><a href="#">Ochraniacze</a></li>
                        <li><a href="#">Rękawiczki</a></li>
                    </ul>
                </li>
                <li><a href="#">Kontakt</a></li>                
            </ul>
        </aside>
        <main>
            <h2>Witamy w FitnesShop</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea id, commodi, voluptatibus accusamus beatae asperiores necessitatibus eveniet mollitia eius iste consectetur placeat, quae assumenda a. Voluptas praesentium ea facilis qui!</p>

        </main>

    </div>
    
    <footer>
        <p>Mateusz Siemież &copy 2025 FitnesShop</p>
    </footer>
    
</body>
</html>

STRONA W STYLU ONE PAGE

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nowoczesna Strona Szkoleniowa - Bazy Danych & SQL</title>
  <style>
    :root {
      --primary: #2563eb;
      --secondary: #1e40af;
      --light: #f8fafc;
      --dark: #0f172a;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    body {
      background: var(--light);
      color: var(--dark);
      line-height: 1.6;
    }
    header {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 70px 20px;
      text-align: center;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    header h1 {
      font-size: 2.8rem;
    }
    nav {
      background: white;
      display: flex;
      justify-content: center;
      gap: 30px;
      padding: 15px;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    nav a {
      text-decoration: none;
      font-weight: 600;
      color: var(--primary);
      transition: 1s;
    }
    nav a:hover {
      color: var(--secondary);
    }
    section {
      padding: 70px 20px;
      max-width: 1000px;
      margin: auto;
    }
    .block {
      background: white;
      padding: 40px;
      border-radius: 20px;
      margin-bottom: 50px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      animation: fadeIn 1s ease;
    }
    h2 {
      color: var(--primary);
      margin-bottom: 15px;
      font-size: 1.9rem;
    }
    footer {
      background: var(--dark);
      color: white;
      text-align: center;
      padding: 30px;
      margin-top: 30px;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <header>
    <h1>Szkolenie z Baz Danych i SQL</h1>
    <p>Nowoczesny przewodnik dla uczniów technikum TEB</p>
  </header>

  <nav>
    <a href="#o_kursie">O kursie</a>
    <a href="#bazy">Podstawy baz danych</a>
    <a href="#sql">SQL w praktyce</a>
    <a href="#zadania">Zadania</a>
    <a href="#kontakt">Kontakt</a>
  </nav>

  <section id="o_kursie" class="block">
    <h2>O kursie</h2>
    <p>Ten kurs został stworzony, aby wprowadzić uczniów technikum w świat baz danych i języka SQL. Jest on fundamentem dla większości zawodów IT — od programistów, przez analityków danych, aż po administratorów systemów.</p>
    <p>W ramach kursu poznasz:</p>
    <ul>
      <li>jak działają relacyjne bazy danych,</li>
      <li>jak planować strukturę danych,</li>
      <li>jak pisać zapytania SQL na poziomie początkującym i średniozaawansowanym,</li>
      <li>jak analizować dane i wyciągać wnioski.</li>
    </ul>
  </section>

  <section id="bazy" class="block">
    <h2>Podstawy relacyjnych baz danych</h2>
    <p>Relacyjne bazy danych to systemy, w których dane przechowywane są w tabelach. Każda tabela składa się z:</p>
    <ul>
      <li><strong>kolumn</strong> — opisujących typ danych (np. imię, nazwisko, wiek),</li>
      <li><strong>wierszy</strong> — pojedynczych rekordów danych.</li>
    </ul>
    <p>Najważniejsze pojęcia:</p>
    <ul>
      <li><strong>Primary Key (Klucz główny)</strong> — unikalny identyfikator rekordu.</li>
      <li><strong>Foreign Key (Klucz obcy)</strong> — połączenie między tabelami.</li>
      <li><strong>Normalizacja danych</strong> — proces eliminacji duplikacji danych.</li>
      <li><strong>Relacje</strong>: 1:1, 1:N, N:M.</li>
    </ul>
    <p>Najpopularniejsze systemy baz danych to: MySQL, PostgreSQL, SQL Server oraz Oracle. W szkolnych warunkach pracujemy najczęściej z <strong>phpMyAdmin</strong> wykorzystującym silnik MySQL.</p>
  </section>

  <section id="sql" class="block">
    <h2>SQL – praktyczne komendy</h2>
    <p>SQL (Structured Query Language) to język służący do komunikacji z bazą danych. Poznasz najważniejsze polecenia:</p>

    <h3>1. Pobieranie danych – SELECT</h3>
    <pre>SELECT imie, nazwisko FROM uczniowie WHERE srednia > 4.0;</pre>

    <h3>2. Dodawanie rekordów – INSERT</h3>
    <pre>INSERT INTO uczniowie (imie, nazwisko, klasa) VALUES ('Jan', 'Kowalski', '2TI');</pre>

    <h3>3. Aktualizowanie danych – UPDATE</h3>
    <pre>UPDATE uczniowie SET nazwisko = 'Nowak' WHERE id = 3;</pre>

    <h3>4. Usuwanie danych – DELETE</h3>
    <pre>DELETE FROM uczniowie WHERE id = 5;</pre>

    <h3>5. Tworzenie tabel – CREATE TABLE</h3>
    <pre>CREATE TABLE przedmioty (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nazwa VARCHAR(50),
  nauczyciel VARCHAR(50)
);</pre>
  </section>

  <section id="zadania" class="block">
    <h2>Zadania praktyczne</h2>
    <ol>
      <li>Stwórz bazę danych <strong>szkola</strong> i zaprojektuj 3 tabele: <em>uczniowie</em>, <em>przedmioty</em>, <em>oceny</em>.</li>
      <li>Dodaj przykładowe rekordy do każdej tabeli (minimum 5 uczniów, 5 przedmiotów i 15 ocen).</li>
      <li>Wyświetl uczniów z najwyższą średnią.</li>
      <li>Połącz tabele za pomocą JOIN, aby wyświetlić listę ocen z nazwą przedmiotu.</li>
      <li>Usuń wszystkie oceny poniżej 2.0.</li>
      <li>Przygotuj raport SQL z liczbą ocen z każdego przedmiotu.</li>
    </ol>
  </section>

  <section id="kontakt" class="block">
    <h2>Kontakt</h2>
    <p>Masz pytania? Skontaktuj się ze swoim nauczycielem poprzez:</p>
    <ul>
      <li>Microsoft Teams</li>
      <li>E-dziennik</li>
      <li>Konsultacje po lekcjach</li>
    </ul>
  </section>

  <footer>
    <p>&copy 2025 Bazy danych dla technikum</p>
  </footer>
</body>
</html>

Podobne wpisy

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *