Br0ken
Neues Mitglied
Hi Leute!
Ich habe da ein Problemchen. Ich hab in der Schule die Aufgabe bekommen die Startseite einer beliebigen Website nachzubauen. Ich hab mich für die Adidas Startseite entschieden. Jetzt hab ich aber das Problem dass jeder Container in einer neuen Zeile steht. Hab schon so viel probiert und komm da nicht weiter.
So soll es aussehen:
Und so sieht meine aus:
Ich kopiere mal den Code hier rein:
CSS:
Was mache ich falsch? Bzw wie bringe ich die Container alle richtig nebeneinander ohne dass sich alles komplett verschiebt?
Vielleicht kann mir da einer weiterhelfen :)
Ich danke euch!
Ich habe da ein Problemchen. Ich hab in der Schule die Aufgabe bekommen die Startseite einer beliebigen Website nachzubauen. Ich hab mich für die Adidas Startseite entschieden. Jetzt hab ich aber das Problem dass jeder Container in einer neuen Zeile steht. Hab schon so viel probiert und komm da nicht weiter.
So soll es aussehen:
Und so sieht meine aus:
Ich kopiere mal den Code hier rein:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styling/styling.css">
<title>Adidas-Seite von Sarah</title>
<script src="styling/adidas.js"></script>
</head>
<body class="Startseite">
<header>
<div class="header-top" id="headerText">Gratis Rücksendung & Umtausch
</div>
</header>
<div class="container1">
<div class="logo-nav-container">
<div class="logo">
<img src="images/OIP.jpg" alt="Adidas Logo">
</div>
</div>
<div>
<div>
<nav>
<a href="#">Männer</a>
<a href="#">Frauen</a>
<a href="#">Kinder</a>
<a href="#">Neu</a>
<a href="#">Sport</a>
<a href="#">Kollektionen</a>
<a href="#">Outlet</a>
</nav>
</div>
<div class="container2">
<div class="additional-nav">
<a href="#">Hilfe</a>
<a href="#">Bestellungen und Rückgabe</a>
<a href="#">Geschenkkarten</a>
<a href="#">Werde Mitglied</a>
</div>
<div class="search-container">
<input type="text" placeholder="Suchen">
</div>
<div class="icons-container">
<img src="images/meinkonto.png" alt="Mein Konto">
<img src="images/favoriten.png" alt="Meine Favoriten">
<img src="images/warenkorb.jpg" alt="Mein Warenkorb">
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-overlay">
YOU GOT THIS, SASHA
</div>
<div class="text-overlay2">
Jahre voller Druck, Erwartungen und Vorbereitung nähern sich ihrem Höhepunkt. Aber: Es sind nur Erwartungen.
</div>
<div class="button-container">
<a href="#" class="button">Mehr entdecken →</a>
</div>
</div>
<div class="video-container">
<video width="2500" height="1500" controls autoplay loop muted>
<source src="images/kleidung.mp4" type="video/mp4">
</video>
</div>
<footer>
<p>© 2024 Mein Shop. Alle Rechte vorbehalten.</p>
</footer>
</body>
</html>CSS:
CSS:
body {
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #000;
color: #fff;
padding: 20px;
position: relative;
width: 100%;
z-index: 1000;
transition: 0.5s ease;
}
.header-top {
font-size: 18px;
font-weight: bold;
text-align: center;
transition: 0.5s ease;
}
nav {
background-color: #fff;
padding: 10px 0;
text-align: center;
display: flex;
justify-content: center;
}
nav a {
color: #000;
text-decoration: none;
margin-right: 15px;
padding: 10px;
}
nav a:hover {
text-decoration: underline;
}
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 10px 0;
width: 100%;
}
.container {
position: relative;
width: 100%;
height: 100vh;
background-image: url('https://brand.assets.adidas.com/image/upload/f_auto,q_auto,fl_lossy/if_w_gt_1920,w_1920/specialtysports_SS_24_paralympics_preactive_global_launch_HP_banner_hero_sasha_zhoya_d_15342e34f7.jpg');
background-size: cover;
background-position: center;
}
.text-overlay {
position: absolute;
bottom: 100px;
left: 50px;
color: white;
font-size: 3em;
text-align: left;
padding: 10px;
border-radius: 5px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
}
.text-overlay2 {
position: absolute;
bottom: 70px;
left: 50px;
color: white;
font-size: 1.5em;
text-align: left;
padding: 10px;
border-radius: 5px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.button-container {
position: absolute;
bottom: 30px;
left: 50px;
}
.button {
background-color: #ffffff;
color: rgb(0, 0, 0);
border: none;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
text-align: center;
text-decoration: none;
}
.button:hover {
background-color: #b7b7b7;
}
.container1 {
justify-content: space-between;
flex: 1;
}
.logo {
margin-right: 30px;
}
.logo img {
height: 60px;
}
.additional-nav {
display: flex;
gap: 10px;
color: rgb(0, 0, 0);
font-size: small;
align-items: flex-start;
justify-content: right;
}
.additional-nav a {
color: rgb(0, 0, 0);
text-decoration: none;
padding: 5px;
}
.search-container {
display: flex;
align-items: center;
background-color: #e3e3e3;
}
.search-container input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #dfdddd;
width: 200px;
padding-right: 40px;
background: url('../images/Lupe.jpg') no-repeat right 10px center;
background-size: 20px;
}
.container2 {
display: flex;
justify-content: right;
align-items: flex-end;
flex-direction: column;
gap: 10px;
}
.search-container input[type="text"]::placeholder {
color: #8a8a8a;
}
.icons-container {
display: flex;
gap: 15px;
align-items: center;
}
.icons-container img {
height: 20px;
cursor: pointer;
}
.logo-nav-container {
display: flex;
background-color: white;
height: auto;
flex: 1;
}
.video-container {
max-width: 100%;
text-align: center;
height: auto;
}
video {
max-width: 100%;
height: auto;
}Was mache ich falsch? Bzw wie bringe ich die Container alle richtig nebeneinander ohne dass sich alles komplett verschiebt?
Vielleicht kann mir da einer weiterhelfen :)
Ich danke euch!
Jetzt klappt es. Die Mobil-Übersicht ist momentan noch nicht relevant, bin erst seit 2 Monaten in der Schule. Aber das Projekt macht bisher wirklich Spaß.