Jordi/FH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Jordi
2025-02-13 18:50:22 +01:00
parent 5c211013b5
commit 4cae4e9e28
803 changed files with 107055 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
WS24_25/WebTech/web-pruefung-projekt2/aufgabe3/computer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

44
WS24_25/WebTech/web-pruefung-projekt2/aufgabe3/flex.css Normal file
View File

@@ -0,0 +1,44 @@
main > section {
border: 1px solid grey;
height: 150px;
padding: 5px;
margin: 5px;
overflow: scroll;
flex: 0 0 45%;
}
main > section > h4 {
margin-top: 0;
}
.newscontent,
p {
margin-left: 0;
margin-right: 0;
padding: 5px;
}
.newscontent {
display: flex;
}
.newscontent p {
flex: 1 1 auto;
}
main {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
main > section {
flex: 1 1 auto;
}
}
@media screen and (max-width: 450px) {
img {
display: none;
}
}

42
WS24_25/WebTech/web-pruefung-projekt2/aufgabe3/grid.css Normal file
View File

@@ -0,0 +1,42 @@
main > section {
border: 1px solid grey;
height: 150px;
padding: 5px;
margin: 5px;
overflow: scroll;
}
main > section > h4 {
margin-top: 0;
}
.newscontent,
p {
margin-left: 0;
margin-right: 0;
padding: 5px;
}
/* Hier Code ergaenzen! */
main {
display: grid;
grid-template-columns: auto auto;
}
.newscontent{
display: grid;
grid-template-columns: auto auto;
}
@media screen and (max-width: 750px){
main{
grid-template-columns: auto;
}
}
@media screen and (max-width: 450px){
img {
display: none;
}
}

53
WS24_25/WebTech/web-pruefung-projekt2/aufgabe3/news-flex.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-News</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<header>
<h1>Web-News</h1>
</header>
<main>
<section>
<h4>Neues JavaScript-Framework veröffentlicht</h4>
<div class="newscontent">
<p>Ein führendes Entwicklerteam hat ein neues JavaScript-Framework auf den Markt gebracht, das die
Arbeit
von
Webentwickler*innen revolutionieren soll. Es bietet Funktionen wie...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Web-Security-Konferenz zeigt neue Trends</h4>
<div class="newscontent">
<p>Auf der jährlichen Web-Security-Konferenz wurden die neuesten Trends und Techniken zur Sicherung von
Webanwendungen vorgestellt. Ein besonderer Fokus lag auf...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Neue Kurse für Webentwickler</h4>
<div class="newscontent">
<p>Eine führende Online-Bildungsplattform hat neue Kurse für angehende Webentwickler gestartet. Die
Kurse decken Themen wie ...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Großes Update für React angekündigt</h4>
<div class="newscontent">
<p>Die Entwickler von React haben ein großes Update für das populäre Framework angekündigt. Die neue
Version verspricht Verbesserungen in der Performance und...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
</main>
</body>
</html>

53
WS24_25/WebTech/web-pruefung-projekt2/aufgabe3/news-grid.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-News</title>
<link rel="stylesheet" href="grid.css">
</head>
<body>
<header>
<h1>Web-News</h1>
</header>
<main>
<section>
<h4>Neues JavaScript-Framework veröffentlicht</h4>
<div class="newscontent">
<p>Ein führendes Entwicklerteam hat ein neues JavaScript-Framework auf den Markt gebracht, das die
Arbeit
von
Webentwickler*innen revolutionieren soll. Es bietet Funktionen wie...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Web-Security-Konferenz zeigt neue Trends</h4>
<div class="newscontent">
<p>Auf der jährlichen Web-Security-Konferenz wurden die neuesten Trends und Techniken zur Sicherung von
Webanwendungen vorgestellt. Ein besonderer Fokus lag auf...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Neue Kurse für Webentwickler</h4>
<div class="newscontent">
<p>Eine führende Online-Bildungsplattform hat neue Kurse für angehende Webentwickler gestartet. Die
Kurse decken Themen wie ...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
<section>
<h4>Großes Update für React angekündigt</h4>
<div class="newscontent">
<p>Die Entwickler von React haben ein großes Update für das populäre Framework angekündigt. Die neue
Version verspricht Verbesserungen in der Performance und...</p>
<img src="computer.png" alt="Computer" width="100" height="100">
</div>
</section>
</main>
</body>
</html>