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

Spielen und Ausprobieren mit Responsive Design

Browse Source
This commit is contained in:
DST81 2026-02-26 13:27:46 +01:00
parent 0cace24153
commit bf40ba91e9
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/css/custom.css
View File

@ -0,0 +1,35 @@
body {
background: white;
color: black;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p.image {
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;
}
}
@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;
}
}

13
index.html
View File

@ -8,12 +8,23 @@
</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>
<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>