mirror of
https://github.com/janishutz/fundamentals-of-webengineering.git
synced 2025-11-25 05:44:24 +00:00
198 lines
5.3 KiB
HTML
198 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Document</title>
|
|
<link href="default.css" rel="stylesheet" />
|
|
<link href="layout.css" rel="stylesheet" />
|
|
<link href="card.css" rel="stylesheet" />
|
|
|
|
<script src="./main.ts" type="module"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Open data explorer</h1>
|
|
<i class="fa fa-solid fa-user"></i>
|
|
<i class="fa fa-solid fa-bars"></i>
|
|
</header>
|
|
|
|
<section>
|
|
<ul>
|
|
<li>
|
|
<a href="/" title="Home"
|
|
><i class="fa-solid fa-home"></i> <span>Home</span></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/" title="Dashboard"
|
|
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/" title="Profile"
|
|
><i class="fa-solid fa-user"></i> <span>Profile</span></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="./contact.html" title="Contact"
|
|
><i class="fa-solid fa-message"></i> <span>Contact</span></a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<main>
|
|
<article>
|
|
<header>
|
|
<h1>How to start?</h1>
|
|
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
|
|
</header>
|
|
<main>
|
|
<h1>Here are some tips</h1>
|
|
<p>First think about where to you need some flexbox layout.</p>
|
|
<ol>
|
|
<li>
|
|
Look at the
|
|
<a
|
|
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
|
|
>mdn docs</a
|
|
>
|
|
</li>
|
|
<li>Start with the inner components.</li>
|
|
<li>Do not be afraid to nest flex boxes.</li>
|
|
<li>Start with the header.</li>
|
|
</ol>
|
|
<h2>How to align the images</h2>
|
|
<p>
|
|
We have added some challenge to get the border-radius of the images
|
|
right. Be creative and have a look at the following css selectors
|
|
and use them creatively.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
|
|
><code>:has</code></a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
|
|
><code>:not</code></a
|
|
>
|
|
</li>
|
|
<li>
|
|
Or try another approach, there are many ways in css to achieve the
|
|
desired behaviour.
|
|
</li>
|
|
</ul>
|
|
<h2>The action menu</h2>
|
|
<p>The final challenge.</p>
|
|
<ul>
|
|
<li>Think about how to add the separator with css only.</li>
|
|
<li>
|
|
What pseudo classes can you use to not add the separator to every
|
|
element?
|
|
</li>
|
|
<li>
|
|
You might need to combine multiple pseudo classes to achieve the
|
|
desired behaviour.
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
<footer>
|
|
<ul>
|
|
<li>
|
|
<i class="fa fa-solid fa-user"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-cogs"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-share"></i>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<h1>A card with a table</h1>
|
|
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
|
|
</header>
|
|
<main>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>blub</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>blubber</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</main>
|
|
<footer>
|
|
<ul>
|
|
<li>
|
|
<i class="fa fa-solid fa-user"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-cogs"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-share"></i>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</article>
|
|
|
|
<article>
|
|
<header>
|
|
<h1>Image with head</h1>
|
|
</header>
|
|
<main>
|
|
<img src="https://picsum.photos/250/300" alt="" />
|
|
</main>
|
|
</article>
|
|
|
|
<article>
|
|
<main>
|
|
<img src="https://picsum.photos/250/300" alt="" />
|
|
</main>
|
|
</article>
|
|
|
|
<article>
|
|
<main>
|
|
<img src="https://picsum.photos/250/300" alt="" />
|
|
</main>
|
|
<footer>
|
|
<ul>
|
|
<li>
|
|
<i class="fa fa-solid fa-user"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-cogs"></i>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-solid fa-share"></i>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</article>
|
|
</main>
|
|
|
|
<footer>
|
|
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|