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

Compare commits

merge into: joostadrian:main
Branches Tags
joostadrian:main
joostadrian:daniela
joostadrian:early-documentation
...
pull from: joostadrian:daniela
Branches Tags
joostadrian:daniela
joostadrian:main
joostadrian:early-documentation

3 Commits
main ... daniela

Author SHA1 Message Date
DST81
38dfa6d981 Spielen und Ausprobieren mit Responsive Design Teil 2 2026-02-26 14:19:21 +01:00
DST81
669090e0cd Spielen und Ausprobieren mit Responsive Design Teil 2 2026-02-26 14:17:48 +01:00
DST81
bf40ba91e9 Spielen und Ausprobieren mit Responsive Design 2026-02-26 13:27:46 +01:00
2 changed files with 74 additions and 1 deletions
Show Stats Expand all files Collapse all files

57
assets/css/custom.css
View File

@ -0,0 +1,57 @@
body {
background: white;
color: black;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
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) {
body {
background-color: steelblue;
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 {
background-color: darkblue;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p {
column-count: 2;
column-gap: 2rem;
}
p.dotted {
column-gap: 2rem;
column-rule: 5px dotted black;
outline-style: dotted;
}
.container div {
flex: 1 1 calc(25% - 20px);
}
}

18
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
@ -8,12 +9,27 @@
</head>
<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>
<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 />
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
<button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-link">Link Button</button>
<script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/src/example.js"></script>