<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>e-commerce</title>
    <link href="/css/ecom.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="hero">
<main class="sidebar-layout content-width">
    <nav class="sidebar-layout">
        <ul  class="secondary">
            <li><a>Aufnahmegeräte</a></li>
            <li><a>Computer</a></li>
            <li><a>Fernseher</a></li>
            <li><a>Handys</a></li>
            <li><a>Unterhaltungselektronik</a></li>
            <li><a>Sonstiges</a></li>
        </ul>
    </nav>

    <div class="content-width">
        <div class='content-width'>
            <h1>Suchergebnisse</h1>
            <div class='grid m base shadow'>

                <section>
                    <img src="img/product-1.jpg">
                    <h2>Tolle Kamera</h2>
                    <p class='price'> 25.14 €</p>
                    <p>
                        Eine TOLLE Kamera <br>
                        Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
                        Aber glaub mir, sie is echt echt TOLL! <br>
                        Indianerehrenwort!
                    </p>
                </section>

                <section>
                    <img src="img/product-2.jpg">
                    <h2>Bluetooth Kopfhörer</h2>
                    <p class='price'> 10.14 €</p>
                    <p>
                        Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
                    </p>
                </section>

                <section>
                    <img src="img/product-3.jpg">
                    <h2>???</h2>
                    <p class='price'> 25.14 €</p>
                    <p>
                        Ich weiß selbst nich was das genau sein soll.<br>
                        Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
                    </p>
                </section>

                <section class="spacer"></section>
                <section class="spacer"></section>
                <section class="spacer"></section>
                <section class="spacer"></section>
            </div>
        </div>
        <div class="vertical-spacer s"></div>
    </div>


</main>
</div>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>