Skip to content
Snippets Groups Projects
Commit 388a8c3f authored by Richard Taesler's avatar Richard Taesler
Browse files

auslagerung des style abschnitts in eine zentrale style.css datei

parent d84601ea
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
source/Homepage.html
+ 1
− 103
View file @ 388a8c3f
......@@ -4,109 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.account-btn {
padding: 0.5rem 1rem;
border: 1px solid #ddd;
border-radius: 20px;
text-decoration: none;
color: #000;
}
/* Main Content */
.main-content {
display: grid;
grid-template-columns: 1fr 1px 1fr; /* Drei Spalten: links, Trennlinie, rechts */
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Vertikale Trennlinie */
.divider {
background-color: #2b2b2b; /* Dunklere Farbe für bessere Sichtbarkeit */
width: 4px; /* Etwas breiter */
height: 100%;
margin: 0; /* Entfernt die seitlichen Abstände */
}
/* Linke Spalte */
.left-column {
display: flex;
width: 350px;
height: 100%;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background-color: #f8f9fa; /* Leicht grauer Hintergrund */
}
/* Rechte Spalte */
.right-column {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
gap: 2rem;
background-color: #f8f9fa;
}
.box {
border: 1px solid #ddd;
padding: 1.5rem;
border-radius: 5px;
text-align: center;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
}
/* Responsive Design */
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.divider {
display: none;
}
.left-column, .right-column {
padding: 0;
}
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar">
......
source/style.css 0 → 100644
+ 101
− 0
View file @ 388a8c3f
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.account-btn {
padding: 0.5rem 1rem;
border: 1px solid #ddd;
border-radius: 20px;
text-decoration: none;
color: #000;
}
/* Main Content */
.main-content {
display: grid;
grid-template-columns: 1fr 1px 1fr; /* Drei Spalten: links, Trennlinie, rechts */
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Vertikale Trennlinie */
.divider {
background-color: #2b2b2b; /* Dunklere Farbe für bessere Sichtbarkeit */
width: 4px; /* Etwas breiter */
height: 100%;
margin: 0; /* Entfernt die seitlichen Abstände */
}
/* Linke Spalte */
.left-column {
display: flex;
width: 350px;
height: 100%;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background-color: #f8f9fa; /* Leicht grauer Hintergrund */
}
/* Rechte Spalte */
.right-column {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
gap: 2rem;
background-color: #f8f9fa;
}
.box {
border: 1px solid #ddd;
padding: 1.5rem;
border-radius: 5px;
text-align: center;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
}
/* Responsive Design */
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.divider {
display: none;
}
.left-column, .right-column {
padding: 0;
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment