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

Compare commits

base: joostadrian:daniela
Branches Tags
joostadrian:main
joostadrian:daniela
joostadrian:early-documentation
..
compare: joostadrian:main
Branches Tags
joostadrian:daniela
joostadrian:main
joostadrian:early-documentation

No commits in common. "daniela" and "main" have entirely different histories.
daniela ... main

2 changed files with 1 additions and 74 deletions
Show Stats Expand all files Collapse all files

57
assets/css/custom.css
View File

@ -1,57 +0,0 @@
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);
}
}

16
index.html
View File

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<title>My Web Page</title> <title>My Web Page</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
@ -9,27 +8,12 @@
</head> </head>
<body class="p-4"> <body class="p-4">
<h1 class="text-primary">Hello From Main Page</h1> <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="index.html">Go to Main Page</a>
<a href="secondSite.html">Go to Second Page</a> <a href="secondSite.html">Go to Second Page</a>
<br /> <br />
<button class="btn btn-primary">Primary Button</button> <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/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/src/example.js"></script> <script src="assets/src/example.js"></script>