PBT3H24AKA/Projekt-Car_wash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chihaja jdida

Browse Source
This commit is contained in:
Amine El Hajami
2025-09-17 02:11:37 +02:00
parent 71c32ec35c
commit 8d561b8727
3 changed files with 193 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
CSS.css
View File

@@ -1,42 +1,132 @@
:root { :root {
--color-bg: #0a0a0a; /* dark background */ --color-bg: #0a0a0a;
--color-primary: #003366; /* dark blue accent (changed) */ --color-primary: #c77dff;
--color-text: #f5f5f5; /* near-white text */ --color-text: #f5f5f5;
--color-muted: #9a9a9a; /* muted gray */ --color-muted: #9a9a9a;
} }
* {
/* keep header fixed at top while scrolling and avoid content overlap */ margin:0;
header { padding:0;
position: fixed; box-sizing:border-box;
top: 0; }
left: 0; body {
right: 0;
height: 64px; /* consistent header height */
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent; /* transparent so video shows through */
z-index: 1000;
}
/* ensure page content begins below the fixed header */
body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
padding-top: 64px; /* same as header height */ line-height:1.6;
}
a {
text-decoration:none;
color:inherit;
}
header {
position:fixed;
top:0; left:0; right:0;
background:rgba(10,10,10,.9);
backdrop-filter:blur(10px);
padding:1rem 2rem;
display:flex; align-items:center;
justify-content:space-between;
z-index:50;
}
nav ul {
display:flex;
gap:2rem;
list-style:none;
}
.btn {
padding:.75rem 1.25rem;
border-radius:.5rem;
font-weight:600;
transition:.3s;
}
.btn-primary {
background:var(--color-primary);
color:#000;
}
.btn-outline {
border:1px solid var(--color-primary);
color:var(--color-primary);
}
section {
padding:6rem 2rem;
max-width:1200px;
margin:auto;
}
.hero {
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center; text-align:center;
}
.hero h1 {
font-size:3rem;
font-weight:700;
margin-bottom:1rem;
}
.hero p {
max-width:600px;
margin-bottom:2rem;
color:var(--color-muted);
}
.features {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem; margin-top:3rem;
}
.card {
padding:2rem;
background:#111;
border-radius:1rem; text-align:center;
}
.steps {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1rem; margin-top:3rem;
}
.step {
padding:1.5rem;
border:1px solid #222; border-radius:.75rem;
}
footer {
background:#111;
padding:3rem 2rem;
text-align:center;
font-size:.875rem;
color:var(--color-muted);
}
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
color: var(--color-text);
} }
/* keep video behind everything */ .hero-video {
.background-video { position: absolute;
position: fixed; top: 0; left: 0;
top: 0; width: 100%;
left: 0; height: 100%;
width: 100vw; object-fit: cover; /* keeps aspect ratio, fills screen */
height: 100vh; z-index: -2; /* send video to back */
object-fit: cover; }
z-index: 0;
opacity: 0.7; .hero::after {
pointer-events: none; content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(10,10,10,0.6); /* dark overlay for readability */
z-index: -1; /* above video, below text */
}
.hero-overlay {
position: relative;
max-width: 800px;
padding: 2rem;
} }

149
HTML.html
View File

@@ -1,8 +1,3 @@
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 800, once: true });
</script>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -10,123 +5,56 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Brand</title> <title>Your Brand</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="CSS.css"> <!-- added: project CSS --> <link rel="stylesheet" href="CSS.css">
<style>
:root {
--color-bg: #0a0a0a;
--color-primary: #003366; /* changed to dark blue */
--color-text: #f5f5f5;
--color-muted: #9a9a9a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: var(--color-text); line-height:1.6; }
a { text-decoration:none; color:inherit; }
header {
position: fixed;
top: 0; left: 0; right: 0;
background: transparent; /* transparent header */
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 50;
}
nav ul { display:flex; gap:2rem; list-style:none; }
.btn { padding:.75rem 1.25rem; border-radius:.5rem; font-weight:600; transition:.3s; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-outline { border:1px solid var(--color-primary); color:var(--color-primary); }
section { padding:6rem 2rem; max-width:1200px; margin:auto; }
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hero-video {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.7;
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero h1 { font-size:3rem; font-weight:700; margin-bottom:1rem; }
.hero p { max-width:600px; margin-bottom:2rem; color:var(--color-muted); }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:3rem; }
.card { padding:2rem; background:#111; border-radius:1rem; text-align:center; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-top:3rem; }
.step { padding:1.5rem; border:1px solid #222; border-radius:.75rem; }
footer { background:#111; padding:3rem 2rem; text-align:center; font-size:.875rem; color:var(--color-muted); }
.background-video {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
object-fit: cover;
z-index: 0;
opacity: 0.7;
pointer-events: none;
}
header, .hero-content, section, footer {
position: relative;
z-index: 2;
}
</style> </style>
</head> </head>
<body> <body>
<video autoplay muted loop playsinline class="background-video">
<source src="0916.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<header> <header>
<div class="logo"> <div class="logo">YourBrand</div>
<img src="logo 1.png" alt="YourBrand Logo" style="height:40px; vertical-align:middle;">
</div></div>
<nav> <nav>
<ul> <ul>
<li><a href="#">Kundenliste</a></li> <li><a href="#">Home</a></li>
<li><a href="#">Kundenprofil</a></li> <li><a href="#">Features</a></li>
<li><a href="#">Kunden bearbeiten</a></li> <li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Preisverwaltung</a></li>
<li><a href="#">Status</a></li>
</ul> </ul>
</nav> </nav>
<div> <div>
<a href="#" class="btn btn-outline">Login</a> <a href="#" class="btn btn-outline">Login</a>
<a href="#" class="btn btn-primary">Sign Up</a> <a href="#" class="btn btn-primary">Sign Up</a>
</div> </div>
</header> </header>
<section class="hero" data-aos="fade-up"> <section class="hero" data-aos="fade-up">
<div class="hero-content"> <video autoplay muted loop playsinline class="hero-video">
<source src="0916.mp4" type="video/mp4">
<!-- Optional fallback image if video fails -->
Your browser does not support the video tag.
</video>
<div class="hero-overlay">
<h1>All-in-One Platform</h1>
<p>Manage your money, payments, and lifestyle in one place.</p>
<a href="#" class="btn btn-primary">Get Started</a>
</div>
</section>
<h1>All-in-One Platform</h1> <h1>All-in-One Platform</h1>
<p>Manage your money, payments, and lifestyle in one place. Dummy text for now.</p> <p>Manage your money, payments, and lifestyle in one place. Dummy text for now.</p>
<div>
<a href="#" class="btn btn-primary">Get Started</a>
</div> </div>
</section> </section>
<section data-aos="fade-up"> <section data-aos="fade-up">
<h2>Our Features</h2> <h2>Our Features</h2>
<div class="features"> <div class="features">
<div class="card">Feature One</div> <div class="card">Feature One</div>
<div class="card">Feature Two</div> <div class="card">Feature Two</div>
<div class="card">Feature Three</div> <div class="card">Feature Three</div>
</div> </div>
</section> </section>
<section data-aos="fade-up"> <section data-aos="fade-up">
<h2>How It Works</h2> <h2>How It Works</h2>
<div class="steps"> <div class="steps">
<div class="step">01. Sign Up</div> <div class="step">01. Sign Up</div>
@@ -135,22 +63,27 @@
<div class="step">04. Review</div> <div class="step">04. Review</div>
<div class="step">05. Done</div> <div class="step">05. Done</div>
</div> </div>
</section> </section>
<section data-aos="fade-up"> <section data-aos="fade-up">
<h2>What People Say</h2> <h2>What People Say</h2>
<div class="features"> <div class="features">
<div class="card">"Great app!" – User A</div> <div class="card">"Great app!"User A</div>
<div class="card">"Fast and simple." – User B</div> <div class="card">"Fast and simple." User B</div>
<div class="card">"Love the design." – User C</div> <div class="card">"Love the design." User C</div>
</div> </div>
</section> </section>
<footer> <footer>
© 2025 YourBrand – All rights reserved. © 2025 YourBrand – All rights reserved.
</footer> </footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init({ duration:800, once:true });</script> <script>AOS.init({ duration:800, once:true });</script>
</body> </body>
</html> </html>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 800, once: true });
</script>

0
script.js Normal file
View File