eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Task4

Browse Source
This commit is contained in:
RobinB27
2025-10-07 17:49:43 +02:00
parent dda35eb377
commit 24258962c4
2 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
task_1_html_css/src/card.css
View File

@@ -22,12 +22,20 @@ article:has(header) {
} }
} }
article:has(.card-check:checked) {
#special {
opacity: 0%;
max-height: 0;
transition: opacity 0.2s, max-height 0.2s ease 0.2s;
}
}
article { article {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
width: 350px; width: 350px;
line-height: 1.5rem; line-height: 1.5rem;
/* new */
height: min-content; height: min-content;
& header { & header {
@@ -50,6 +58,10 @@ article {
padding: var(--space); padding: var(--space);
width: inherit; 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 */ /* new */
&:has(img) { &:has(img) {
padding: 0; padding: 0;

3
task_1_html_css/src/index.html
View File

@@ -48,8 +48,9 @@
<header> <header>
<h1>How to start?</h1> <h1>How to start?</h1>
<a href="#"><i class="fa fa-solid fa-edit"></i> Edit</a> <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> </header>
<main> <main id="special">
<h1>Here are some tips</h1> <h1>Here are some tips</h1>
<p>First think about where to you need some flexbox layout.</p> <p>First think about where to you need some flexbox layout.</p>
<ol> <ol>