Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lab3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header id="header" class="header">
            <img src="logo.png" alt="grzyby">
            <h1>Grzybobranie</h1>
            <div id="top-menu">
                <ul>
                    <li><a href="https://pl.wikipedia.org/wiki/Grzyby_truj%C4%85ce">Grzyby trujące</a></li>
                    <li><a href="https://pl.wikipedia.org/wiki/Grzyby_jadalne">Grzyby jadalne</a></li>
                    <li><a href="https://pl.wikipedia.org/wiki/Grzyby_niejadalne">Grzyby niejadalne</a></li>
                </ul>
            </div>
        </header>
        <div class="row">
            <div id="left-menu">
                <ul class="ul-menu">
                    <li class="back-red">
                        <a href="https://pl.wikipedia.org/wiki/Grzyby_truj%C4%85ce">Grzyby trujące</a>
                    </li>
                    <li class="back-green">
                        <a href="https://pl.wikipedia.org/wiki/Grzyby_jadalne">Grzyby jadalne</a>
                    </li>
                    <li class="back-red back-green">
                        <a href="https://pl.wikipedia.org/wiki/Grzyby_niejadalne">Grzyby niejadalne</a>
                    </li>
                </ul>
            </div>
            <div id="center-content">
                <article class="text-article">
                    <h3>Grzybobranie bajka</h3>
                    <p>Kiedy rano do przedszkola przyszła Ola <br> postanowiła podzielić się swoją nową przygodą z koleżankami i kolegami . Spotkała ją ona tego lata. I właśnie dzisiaj sobie ją Ola przypomniała i zaczęła opowiadać zaraz ją koleżankom i kolegom. Posłuchajcie powiedziała. Będąc na wakacjach jednego ranka rodzice ze mną wybrali się do pobliskiego lasu na grzybki, tak zaczęła Ola opowiadać swoją przygodę. Do lasu na grzybki zapytały dzieci. I co? I co się Tobie zdarzyło?
Wzięłam swój ulubiony koszyczek którym to niekiedy się bawiłam w domku i swoje ulubione zabaweczki w nim nosiłam. Nie zauważyłam jednak że z boku koszyczka była dziura. Poszłam więc właśnie z nim do lasu na grzybki by nimi go zapełnić. Co prawda na grzybkach się nie znałam ale za pomocą mamy i taty troszeczkę ich nazbierałam. Pytałam o każdy grzybek, czy nie jest trującym i do koszyczka wtedy dopiero wkładałam. Och Olu! to rodzicom bardzo przeszkadzałaś! No trudno, trudno, ale by grzyby dobre zbierać poznawać je musiałam i dlatego o każdy z nich pytałam.
Zbierałam i zbierałam i do koszyka wkładałam. Nawet wydawało mi się że dużo ich w nim miałam. Zajechaliśmy do domku i kiedy na koszyk spojrzałam to dno ujrzałam, prawie w nim grzybów nie miałam. Wtedy to bardzo się rozpłakałam. Cóż się stało? Cóż się stało? Sama się zastanawiałam? Idąc tak przez las widocznie po drodze grzybki gubiłam. Grzybki gubiłaś? A dlaczego Olu? Bo, bo, zapomniałam o dziurze którą w koszyczku miałam. A tak się cieszyłam, tak się cieszyłam, że tyle grzybków nazbierałam. Nie ciekawa i nie miła ta Twoja przygoda! Koleżanki i koledzy tak stwierdziły. Przykro zapewne Tobie Olu było że się tak Twoje grzybobranie zakończyło. Oczywiście że tak! Tyle się po lesie nachodziłam. Górki i pagórki pokonywać musiałam, fakt że grzybków nazbierałam lecz co z tego, co z tego, że po lesie idąc je rozrzucałam. Przeszkodą tą była dziura, dziura gdzie? W serze? Zapytał dowcipny Jasio. Oj Jasiu, Jasiu dowcipniś z Ciebie, lecz dziura w koszyczku mym była a nie jak pytasz w serze. Przykro Oli było ale wybierając się na następne grzybobrania wiedziała że koszyczek swój sprawdzać będzie zawsze musiała.
</p>
                </article>
                <hr>
                <article>
                    <h2>Zebrane grzyby</h2>
                    <table class="zbiory">
                        <thead>
                            <tr>
                                <th>Gatunek</th>
                                <th>Ilość sztuk</th>
                                <th>Robaczywych</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                            <tr>
                                <td>Prawdziwek</td>
                                <td>15</td>
                                <td><small>2</small></td>
                            </tr>
                        </tbody>
                    </table>
                </article>
            </div>
        </div>
    </div>
    <footer>
        <p>Stworzono przez Krzysztof Adamczyk &     Jarosław Składanowski 20.11.2017</p>
    </footer>
</body>
</html>

body {
    background: #7cd6c1;
    overflow-x: hidden;
}

a:active {
    color: red;
}

a:hover {
    color: green;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.container > header > img {
    width: 50px;
    height: 50px;
    float: left;
}

.container h1:hover {
    color: white;
}

.container > header {
    display: flex;
    flex-direction: row;
}

.container > header > h1 {
    position: relative;
    top: -10px;
    left: 10px;
}

#top-menu > ul {
    list-style: none;
}

#top-menu > ul > li {
    display: inline-block;
    margin: 0 10px;
}

#top-menu li:hover {
    padding: 10px;
    border: 1px solid black;
}

#top-menu a{
    text-decoration: none;
    font-size: 18px;
}

.row {
    display: flex;
    flex-direction: row;
    width: 960px;
}

#center-content {
    margin-left: 20px;
    min-width: 720px;
    padding: 0 10px;
    margin: 0 auto;
    overflow-y: visible;
}

#left-menu {
    min-width: 200px;
}

.ul-menu {
    list-style: none;
}

.ul-menu li{
    padding: 10px;
}

.ul-menu > li:first-child {
    border: 5px solid black;
}

.ul-menu > li > a {
    text-decoration: none;
    color: green;
    background: yellow;
}

footer {
    width: 80%;
    margin-left: 10%;
    border: 1px solid black;
    border-radius: 5px;
	background: yellow;
}

footer > p {
    padding: 10px;
}

.back-red {
    background: red;
}

.back-green {
    background: green;
}

.back-red ~ .back-green {
    font-size: 25px;
}

.back-red + .back-green {
    background: blue;
}

.text-article h3::first-letter {
    font-size: 50px;
}

.text-article h3::before{
	content: "Dawno dawno temu...";
}

.text-article h3{
	text-transform: uppercase;
}

.text-article p{
	line-height: 20px;
}

.text-article p::after{
	 content: " - I to koniec bajki";
}

.text-article p::first-line {
    font-size: 30px;
}

.zbiory > small {
    text: inherit;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Formularze</title>
    <link rel="stylesheet" href="">
</head>
<body style="display: flex; flex-direction: row">
    <form action="results.php" method="post" accept-charset="utf-8">
        POST
        <p>Imie: <input type="text" name="name" value="Janusz" required></p>
        <p>Hasło: <input type="password" name="password" value="12345678" required></p>
        <p>Opis: <textarea name="describe" required>Lorem ipsum</textarea></p>
        <p>Plec <br>
            <input type="radio" name="gender" value="male" required> Mężczyzna <br>
            <input type="radio" name="gender" value="female" required> Kobieta
        </p>
        <p>
            Regulamin: <br>
            <input type="checkbox" name="regulamin" value="true"> Akceptuje regulamin
        </p>
        <p>
		Samochod
             <select name="car">
			  <option value="volvo">Volvo</option>
			  <option value="saab">Saab</option>
			  <option value="mercedes">Mercedes</option>
			  <option value="audi">Audi</option>
			  <option value="alfa" disabled>Alfa Romeo</option>
			</select>
        </p>
        <input type="submit" name="submit" value="Wyslij">
    </form>
    <form action="results.php" method="get" accept-charset="utf-8">
        GET
        <p>Imie: <input type="text" name="name" value="Janusz" required></p>
        <p>Hasło: <input type="password" name="password" value="12345678" required></p>
        <p>Opis: <textarea name="describe" required>Lorem ipsum</textarea></p>
        <p>Plec <br>
            <input type="radio" name="gender" value="male" required> Mężczyzna <br>
            <input type="radio" name="gender" value="female" required> Kobieta
        </p>
        <p>
            Regulamin: <br>
            <input type="checkbox" name="regulamin" value="true"> Akceptuje regulamin
        </p>
        <p>
		Samochod
             <select name="car">
			  <option value="volvo">Volvo</option>
			  <option value="saab">Saab</option>
			  <option value="mercedes">Mercedes</option>
			  <option value="audi">Audi</option>
			  <option value="alfa" disabled>Alfa Romeo</option>
			</select>
        </p>
        <input type="submit" name="submit" value="Wyslij">
    </form>
</body>
</html>

<?php

$data = "";
if ($_POST) {
    $data = $_POST;
} else if($_GET) {
    $data = $_GET;
} else {
    echo 'Formularz pusty';
    die();
}

?>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wyniki</title>
</head>
<body>
    <ul>
        <li>Imie: <?php echo $data["name"]; ?></li>
        <li>Hasło: <?php echo $data["password"]; ?></li>
        <li>Opis: <?php echo $data["describe"]; ?></li>
        <li>Płeć: <?php echo $data["gender"] == "male" ? "M" : "K"; ?></li>
        <li>Regulamin: <?php echo $data["regulamin"] ? "TAK" : "NIE"; ?></li>
        <li>Samochod: <?php echo $data["car"]; ?></li>
    </ul>
</body>
</html>