mirror of
https://github.com/janishutz/fundamentals-of-webengineering.git
synced 2025-11-25 05:44:24 +00:00
Format
This commit is contained in:
@@ -1,103 +1,108 @@
|
||||
/* new */
|
||||
.card-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* new */
|
||||
article:has(footer) {
|
||||
& main {
|
||||
& img {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
& main {
|
||||
& img {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* new */
|
||||
article:has(header) {
|
||||
& main {
|
||||
& img {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
& main {
|
||||
& img {
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article:has(.card-check:checked) {
|
||||
#special {
|
||||
opacity: 0%;
|
||||
max-height: 0;
|
||||
#special {
|
||||
opacity: 0%;
|
||||
max-height: 0;
|
||||
transition: opacity 0.2s, max-height 0.2s ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
width: 350px;
|
||||
line-height: 1.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
width: 350px;
|
||||
line-height: 1.5rem;
|
||||
|
||||
height: min-content;
|
||||
height: min-content;
|
||||
|
||||
& header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: var(--space);
|
||||
/* new */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
/* new */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
& main {
|
||||
padding: var(--space);
|
||||
width: inherit;
|
||||
|
||||
/* Need to use max-height. Only works on explicit values */
|
||||
max-height: 2000px;
|
||||
transition: max-height 0.2s ease, opacity 0.2s 0.2s;
|
||||
|
||||
/* new */
|
||||
&:has(img) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: inherit;
|
||||
/* new */
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
& footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
& ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* new */
|
||||
/* I realize how janky this is, but it works. */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& li {
|
||||
& header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: var(--space);
|
||||
/* new */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
& li:not(:has(+ li)) {
|
||||
justify-content: center;
|
||||
}
|
||||
& li:has(+ li)::before {
|
||||
content: "";
|
||||
}
|
||||
& li:has(+ li)::after {
|
||||
content: "|";
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
/* new */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
& main {
|
||||
padding: var(--space);
|
||||
width: inherit;
|
||||
|
||||
/* Need to use max-height. Only works on explicit values */
|
||||
max-height: 2000px;
|
||||
transition: max-height 0.2s ease, opacity 0.2s 0.2s;
|
||||
|
||||
/* new */
|
||||
&:has(img) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: inherit;
|
||||
/* new */
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
& footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
& ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* new */
|
||||
/* I realize how janky this is, but it works. */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& li:not(:has(+ li)) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& li:has(+ li)::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
& li:has(+ li)::after {
|
||||
content: "|";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
@@ -8,139 +9,134 @@
|
||||
<link href="card.css" rel="stylesheet" />
|
||||
|
||||
<script src="./main.ts" type="module"></script>
|
||||
</head>
|
||||
<body class="card-body">
|
||||
</head>
|
||||
|
||||
<body class="card-body">
|
||||
<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>
|
||||
<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 without a footer</h1>
|
||||
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
|
||||
</header>
|
||||
<main>
|
||||
This card has no footer.
|
||||
</main>
|
||||
<header>
|
||||
<h1>A card without a footer</h1>
|
||||
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
|
||||
</header>
|
||||
<main>
|
||||
This card has no footer.
|
||||
</main>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<main>
|
||||
This card has no header.
|
||||
</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>
|
||||
<main>
|
||||
This card has no header.
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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" />
|
||||
@@ -9,90 +10,84 @@
|
||||
<link href="layout.css" rel="stylesheet" />
|
||||
|
||||
<script src="./main.ts" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Contact</h1>
|
||||
<h1>Contact</h1>
|
||||
</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>
|
||||
<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>
|
||||
<form>
|
||||
<ul>
|
||||
<li>
|
||||
<h2>Name</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" placeholder="Jane Doe">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Email address</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="email" placeholder="jane.doe@example.com">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Birthday</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="date" placeholder="">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Do you consent to our terms?</h2>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio">
|
||||
<label>Yes</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio">
|
||||
<label>Yes</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Please provide a joke:</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" placeholder="Go on, get creative.">
|
||||
</li>
|
||||
<li>
|
||||
<form>
|
||||
<ul>
|
||||
<li>
|
||||
<h2>Name</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" placeholder="Jane Doe">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Email address</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="email" placeholder="jane.doe@example.com">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Birthday</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="date" placeholder="">
|
||||
</li>
|
||||
<li>
|
||||
<h2>Do you consent to our terms?</h2>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio">
|
||||
<label>Yes</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio">
|
||||
<label>Yes</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Please provide a joke:</h2>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" placeholder="Go on, get creative.">
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<button class="bluebutton">Submit</button>
|
||||
<button>Reset</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<button class="bluebutton">Submit</button>
|
||||
<button>Reset</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
|
||||
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
|
||||
</footer>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
:root {
|
||||
--border-color: #a0a0a0;
|
||||
--border-radius: 1rem;
|
||||
--space: 1rem;
|
||||
--primary-color: #1677ff;
|
||||
--dark-primary-color: #003eb3;
|
||||
--border-color: #a0a0a0;
|
||||
--border-radius: 1rem;
|
||||
--space: 1rem;
|
||||
--primary-color: #1677ff;
|
||||
--dark-primary-color: #003eb3;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: var(--space);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: var(--space);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin-block: 0.25rem;
|
||||
margin-block: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<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" />
|
||||
@@ -10,189 +11,176 @@
|
||||
<link href="card.css" rel="stylesheet" />
|
||||
|
||||
<script src="./main.ts" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Open data explorer</h1>
|
||||
<i class="fa fa-solid fa-user"></i>
|
||||
<i class="fa fa-solid fa-bars"></i>
|
||||
<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>
|
||||
<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>
|
||||
<a href="#"><input type="checkbox" id="card-check" class="card-check"></a>
|
||||
</header>
|
||||
<main id="special">
|
||||
<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>How to start?</h1>
|
||||
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a>
|
||||
<a href="#"><input type="checkbox" id="card-check" class="card-check"></a>
|
||||
</header>
|
||||
<main id="special">
|
||||
<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>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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
|
||||
</footer>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,169 +1,179 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
/* else defaults to have padding nonzero */
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: black;
|
||||
/* else defaults to have padding nonzero */
|
||||
padding: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr;
|
||||
grid-template-rows: 1fr 8fr 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar main"
|
||||
"footer footer";
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr;
|
||||
grid-template-rows: 1fr 8fr 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar main"
|
||||
"footer footer";
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
/* hide dot on all ul's */
|
||||
list-style-type: none;
|
||||
/* hide dot on all ul's */
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* I only found out using the "large" display as a base is bad while doing this.
|
||||
* So yes, this is very janky.
|
||||
*/
|
||||
@media screen and (width > 1000px) {
|
||||
form {
|
||||
width: 60%
|
||||
}
|
||||
form {
|
||||
width: 60%
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 1000px) {
|
||||
form {
|
||||
width: 80%;
|
||||
}
|
||||
@media screen and (width <=1000px) {
|
||||
form {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
/* new sidebar size for small display */
|
||||
body {
|
||||
grid-template-columns: 12% 1fr;
|
||||
}
|
||||
/* make text in sidebar vanish on small display */
|
||||
body > section > ul > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (width <=700px) {
|
||||
|
||||
/* new sidebar size for small display */
|
||||
body {
|
||||
grid-template-columns: 12% 1fr;
|
||||
}
|
||||
|
||||
/* make text in sidebar vanish on small display */
|
||||
body>section>ul>li>a>span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bluebutton {
|
||||
background-color: rgb(173, 115, 250);
|
||||
color: white;
|
||||
background-color: rgb(173, 115, 250);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bluebutton:hover {
|
||||
background-color: rgb(187, 149, 233)
|
||||
background-color: rgb(187, 149, 233)
|
||||
}
|
||||
|
||||
body > main > form {
|
||||
body>main>form {
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
& li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
& h2 {
|
||||
font-size: large;
|
||||
color: cornflowerblue;
|
||||
font-weight: normal;
|
||||
}
|
||||
& input {
|
||||
padding: 5px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: rgb(219, 207, 207);
|
||||
border-radius: 5px;
|
||||
}
|
||||
& button {
|
||||
width: 10rem;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
& div {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
|
||||
& h2 {
|
||||
font-size: large;
|
||||
color: cornflowerblue;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
& input {
|
||||
padding: 5px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: rgb(219, 207, 207);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& button {
|
||||
width: 10rem;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
& div {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body > section {
|
||||
border-right: 1px solid var(--border-color);
|
||||
grid-area: sidebar;
|
||||
body>section {
|
||||
border-right: 1px solid var(--border-color);
|
||||
grid-area: sidebar;
|
||||
|
||||
& ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
padding: 1rem;
|
||||
& ul {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
padding: 1rem;
|
||||
|
||||
& li {
|
||||
padding: 0.5rem;
|
||||
& li {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
& li>a {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& li>a:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body>header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
grid-area: header;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
& h1 {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& li > a {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
/* icons */
|
||||
& i {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
& li > a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
body>main {
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
/* I'm unsure on how to do this without using margins */
|
||||
& article {
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
height: calc(100vh - 100px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body > header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
body>footer {
|
||||
grid-area: footer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
grid-area: header;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
& h1 {
|
||||
font-size: 1.75rem;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
/* icons */
|
||||
& i {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
body > main {
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
/* I'm unsure on how to do this without using margins */
|
||||
& article {
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
height: calc(100vh - 100px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
grid-area: footer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: #f0f0f0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
1074
task_1_html_css/src/package-lock.json
generated
1074
task_1_html_css/src/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,7 @@
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.1",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.4.9"
|
||||
"vite": "^7.1.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.4.2",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
export default {
|
||||
'server': {
|
||||
'host': '0.0.0.0',
|
||||
'port': 5173,
|
||||
'port': 8080,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user