koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header mit Logo und buttons hinzugefügt

Browse Source
This commit is contained in:
Leah Glück 2026-03-22 19:31:51 +01:00
parent 2acc906140
commit 234f4dd97d
2 changed files with 192 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
kontakt.html
View File

@ -15,10 +15,75 @@
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
/* Header Styles */
.header {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #0084ff;
text-decoration: none;
letter-spacing: 1px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.header-btn-secondary {
background-color: transparent;
color: #0084ff;
border: 2px solid #0084ff;
}
.header-btn-secondary:hover {
background-color: #0084ff;
color: white;
}
.header-btn-primary {
background-color: #0084ff;
color: white;
}
.header-btn-primary:hover {
background-color: #0073e6;
}
/* Main content wrapper */
.main-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex: 1;
padding: 20px;
}
@ -64,6 +129,21 @@
.image-section {
min-height: 300px;
}
.header {
flex-direction: column;
gap: 15px;
}
.header-buttons {
width: 100%;
flex-direction: column;
}
.header-btn {
width: 100%;
text-align: center;
}
}
h1 {
@ -288,10 +368,21 @@
</style>
</head>
<body>
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
<!-- Header -->
<header class="header">
<div class="header-logo">Invité</div>
<div class="header-buttons">
<button class="header-btn header-btn-secondary">Event finden</button>
<a href="login.html" class="header-btn header-btn-primary">Login</a>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section">
<h1>Erstelle deinen Account</h1>
@ -333,6 +424,7 @@
</form>
</div>
</div>
</div> <!-- Schließt main-content -->
<!-- Welcome Modal -->
<div id="welcomeModal" class="modal">

100
login.html
View File

@ -15,10 +15,75 @@
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
/* Header Styles */
.header {
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
font-size: 24px;
font-weight: bold;
color: #0084ff;
text-decoration: none;
letter-spacing: 1px;
}
.header-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.header-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.header-btn-secondary {
background-color: transparent;
color: #0084ff;
border: 2px solid #0084ff;
}
.header-btn-secondary:hover {
background-color: #0084ff;
color: white;
}
.header-btn-primary {
background-color: #0084ff;
color: white;
}
.header-btn-primary:hover {
background-color: #0073e6;
}
/* Main content wrapper */
.main-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex: 1;
padding: 20px;
}
@ -64,6 +129,21 @@
.image-section {
min-height: 300px;
}
.header {
flex-direction: column;
gap: 15px;
}
.header-buttons {
width: 100%;
flex-direction: column;
}
.header-btn {
width: 100%;
text-align: center;
}
}
h1 {
@ -161,10 +241,21 @@
</style>
</head>
<body>
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
<!-- Header -->
<header class="header">
<div class="header-logo">Invité</div>
<div class="header-buttons">
<button class="header-btn header-btn-secondary">Event finden</button>
<a href="kontakt.html" class="header-btn header-btn-primary">Anmeldung</a>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<div class="container">
<div class="image-section">
<img src="cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section">
<h1>Willkommen zurück</h1>
@ -190,6 +281,7 @@
</form>
</div>
</div>
</div> <!-- Schließt main-content -->
<script>
const loginForm = document.getElementById('loginForm');