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

daniela #6

Merged
joostadrian merged 8 commits from daniela into main 2026-04-13 08:41:28 +02:00
Conversation 0 Commits 8 Files Changed 14 +44 -3
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 38f2c699b2 - Show all commits

22
assets/css/custom.css
View File

@ -6,6 +6,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;
}
@ -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 />