NOrtmann1
111 lines
4.3 KiB
PHP
111 lines
4.3 KiB
PHP
<!--
|
|
Seite: Suchergebnisse
|
|
Inhalt: Zeigt die Ergebnisse einer Suche an
|
|
-->
|
|
<div class="s-res-layout-grid">
|
|
|
|
<!-- Links: Seitenleiste für Filter und Suche -->
|
|
<aside class="s-res-sidebar">
|
|
|
|
<!-- Suchleiste Box -->
|
|
<div class="s-res-sidebar-box">
|
|
<h3 class="s-res-sidebar-title">Suche anpassen</h3>
|
|
<form action="#" method="GET" class="s-res-search-form">
|
|
<!-- Deine Suchleiste -->
|
|
<input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search">
|
|
<button type="submit" class="nav__search-button">Suchen</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Sortierfuntion Box -->
|
|
<div class="s-res-sidebar-box">
|
|
<h3 class="s-res-sidebar-title">Sortierung</h3>
|
|
<div class="s-res-filter-group">
|
|
<label class="s-res-filter-option">
|
|
<input type="radio" name="sort" value="alphabet" checked>
|
|
<span>Alphabetisch</span>
|
|
</label>
|
|
<label class="s-res-filter-option">
|
|
<input type="radio" name="sort" value="likes">
|
|
<span>Beliebtheit (Likes)</span>
|
|
</label>
|
|
<label class="s-res-filter-option">
|
|
<input type="radio" name="sort" value="newest">
|
|
<span>Neueste Beiträge</span>
|
|
</label>
|
|
<label class="s-res-filter-option">
|
|
<input type="radio" name="sort" value="oldest">
|
|
<span>Älteste Beiträge</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<main class="s-res-main-content">
|
|
|
|
<div class="s-res-header">
|
|
<h1 class="s-res-main-title">Suchergebnisse</h1>
|
|
<p class="s-res-meta">3 Treffer für Ihre Suchanfrage</p>
|
|
</div>
|
|
|
|
<!-- Ergebnisliste -->
|
|
<div class="s-res-list">
|
|
|
|
<!-- Beitrag A -->
|
|
<div class="s-res-item">
|
|
<div class="s-res-content">
|
|
<h2 class="s-res-item-title">
|
|
<a href="#" class="s-res-link">Anleitung zur Webentwicklung</a>
|
|
</h2>
|
|
<p class="s-res-author">Von: <span class="s-res-author-name">Max Mustermann</span></p>
|
|
</div>
|
|
<div class="s-res-arrow">→</div>
|
|
</div>
|
|
|
|
<!-- Beitrag B -->
|
|
<div class="s-res-item">
|
|
<div class="s-res-content">
|
|
<h2 class="s-res-item-title">
|
|
<a href="#" class="s-res-link">CSS Flexbox verständlich erklärt</a>
|
|
</h2>
|
|
<p class="s-res-author">Von: <span class="s-res-author-name">Anna Schmidt</span></p>
|
|
</div>
|
|
<div class="s-res-arrow">→</div>
|
|
</div>
|
|
|
|
<!-- Beitrag C -->
|
|
<div class="s-res-item">
|
|
<div class="s-res-content">
|
|
<h2 class="s-res-item-title">
|
|
<a href="#" class="s-res-link">HTML5-Grundlagen für Einsteiger</a>
|
|
</h2>
|
|
<p class="s-res-author">Von: <span class="s-res-author-name">Lisa Meier</span></p>
|
|
</div>
|
|
<div class="s-res-arrow">→</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="s-res-pagination-footer">
|
|
|
|
<!-- Auswahl der Ergebnisse pro Seite -->
|
|
<div class="s-res-limit-selector">
|
|
<label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
|
|
<select id="s-res-per-page" name="limit" class="s-res-limit-select">
|
|
<option value="10" selected>10</option>
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="s-res-page-navigation">
|
|
<button type="button" class="s-res-page-btn" disabled>«</button>
|
|
<button type="button" class="s-res-page-btn s-res-page-btn-active">1</button>
|
|
<button type="button" class="s-res-page-btn">»</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div> |