4tei

konkurs.php

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WOLONTARIAT SZKOLNY</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
    <h1>KONKURS - WOLONTARIAT SZKOLNY</h1>
</header>
<main>
<section class="left">
<h3>Konkursowe nagrody</h3>
<form action="" method="post">
<button type="submit">Losuj nowe nagrody</button>
</form>
<table>
    <tr>
        <th>Nr</th>
        <th>Nazwa</th>
        <th>Opis</th>
        <th>Wartość</th>
    </tr>
    <tr>
        <td>1</td>
        <td>piłka plażowa</td>
        <td>super mięka dmuchana piłka plażowa</td>
        <td>10zł</td>
    </tr>
    <tr>
        <td>2</td>
        <td>miś przytulak</td>
        <td>super mięka duża pluszowa maskotka</td>
        <td>30zł</td>
    </tr>
</table>
</section>
<section class="right">
    <img src="puchar.png" alt="Puchar dla wolontariusza">
    <h4>Polecane linki</h4>
    <ul>
        <li><a href="kw1.png" target="_blank">Kwerenda1</a></li>
        <li><a href="kw2.png" target="_blank">Kwerenda2</a></li>
        <li><a href="kw3.png" target="_blank">Kwerenda3</a></li>
        <li><a href="kw4.png" target="_blank">Kwerenda4</a></li>
    </ul>
</section>
</main>
<footer>
    <p>numer zdającego:<strong>00000</strong></p>
</footer>

</body>
</html>

styles.css

body
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    padding: 0 3%;
}

header
{
    background-color: #FDFAAA;
    color: #5BBB77;
    padding: 10px;
    text-shadow: 5px 5px 10px black;

}

main
{
    display: flex;
    gap: 1%;
}

.left
{
    background-color: #FFA6A6;
    width: 79%;
    height: 600px;
    margin: 15px 0;
    box-shadow: 5px 6px 10px black;
    
}

.right
{
    background: linear-gradient(to bottom, #FDFAAA, #5BBB77);
    width: 20%;
    height: 630px;
}

footer
{
    background-color: #5BBB77;
    color: #FFF555;
    font-size: 120%;
    font-weight: bold;
    padding: 15px;
}

Podobne wpisy

Dodaj komentarz

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