joostadrian/lorem_ipsum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spielen und Ausprobieren mit Responsive Design Teil 2

Browse Source
This commit is contained in:
DST81 2026-02-26 14:17:48 +01:00
parent bf40ba91e9
commit 669090e0cd
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/custom.css
View File

@ -7,6 +7,21 @@ body {
p.image {
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: dodgerblue;
}
.container div {
background-color:#f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
color: black;
flex: 1 1 100%;
text-align: center;
}
@media (min-width: 768px) {
@ -15,6 +30,9 @@ p.image {
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.container div {
flex: 1 1 calc(50% - 40px);
}
}
@media (min-width: 1200px) {
body {
@ -31,5 +49,9 @@ p.image {
column-rule: 5px dotted black;
outline-style: dotted;
}
.container div {
flex: 1 1 calc(25% - 20px);
}
}

25
index.html
View File

@ -1,6 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<style>
.container {
display: flex;
background-color: dodgerblue;
}
.container div {
background-color:#f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
color: black;
align-items: center;
align-self: center;
}
</style>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
@ -9,9 +24,13 @@
<body class="p-4">
<h1 class="text-primary">Hello From Main Page</h1>
<p class="dotted" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 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>
<p class="image"><img src="https://cdn.pixabay.com/photo/2020/04/05/13/22/lorem-5006124_1280.jpg" alt="Lorem ipsum Blumen" width="200px">
</p>
<p class="image"><img src="https://cdn.pixabay.com/photo/2020/04/05/13/22/lorem-5006124_1280.jpg" alt="Lorem ipsum Blumen" width="200px"></p>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<a href="index.html">Go to Main Page</a>
<a href="secondSite.html">Go to Second Page</a>
<br />