niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Napassung von home.php und der main.css fuer responsive design

Browse Source
This commit is contained in:
rirat-0
2026-05-12 14:19:57 +02:00
parent c8e15eab6d
commit 43f0c78b3d
2 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/home.php
+23 -17
View File
@@ -13,22 +13,28 @@
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div>
<a href = "content/informatik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Informatik</b></a> <br>
<div>
<a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
</div>
</div>
<div>
<a href = "content/mathe.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Mathe</b></a> <br>
<div>
<a href="articles/pythagoras.php">Satz des Pythagoras</a>
</div>
</div>
<div>
<a href = "content/physik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Physik</b></a>
<div>
<a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</div>
<!-- Flexbox -->
<div class="flexbox">
<div class="container">
<a href="content/informatik.php" class="category-link">Informatik</a>
<div class="article-link">
<a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
</div>
</div>
<div class="container">
<a href="content/mathe.php" class="category-link">Mathe</a>
<div class="article-link">
<a href="articles/pythagoras.php">Satz des Pythagoras</a>
</div>
</div>
<div class="container">
<a href="content/physik.php" class="category-link">Physik</a>
<div class="aritcles-link">
<a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</div>
</div>
</div>
</main>
css/main.css
+47
View File
@@ -1,3 +1,50 @@
/** Standard Layout */
main {
max-width:1200px;
margin: 0 auto;
padding: 20px;
font-family: Arial;
}
.flexbox {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
.container {
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
background-color: #f9f9f9;
transition: transform 0.2s;
}
.category-link {
display: block;
text-align: center;
text-decoration: none;
font-weight: none;
padding: 10px;
background-color: #007bff;
color: white;
border-radius: 4px;
margin-bottom: 10px;
}
.article-link a {
color: orange;
text-decoration: none;
}
/** Anpassung fuer grosse Monitore */
@media (min-width: 1024px) {
.container {
padding 25px
}
}
body {
background-color: coral;
}