Antwort
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<head>
<div class="banner1">
<img src="webgfd9afe21a_1920.jpg" alt="" class="background" style="position: fixed;">
<h1 class="content c1" style="position: fixed;">Meine Website</h1>
<h2 class="content c2" style="position: fixed;">Websites</h2>
<h2 class="content c3" style="position: fixed; opacity: 0;">professionell, personalisiert</h2>
<h2 class="content c4" style="position: fixed; opacity: 0;">kostengünstig und einfach</h2>
</div>
</head>
<div class="banner2">
<div class="flex_container">
<div class="box-1">
<h1 class="banner2__header ">Die Lösung für Ihr <span style="color:rgba(181,78,97,1);">Unternehmen</span></h1>
<h4>Meine Website erstellt beeindruckende Lösungen für wachsende Startups und Restaurants.
Wir helfen beim Entwerfen, Entwickeln und Skalieren Ihres Unternehmens</h4>
</div>
<div class="box-2">
<img class="box-2-img" src="PeopleWebsite.jpg"></img>
</div>
</div>
</div>
<div class="banner3">
<h1 class="container-header">Die Roadmap zu deiner Website</h1>
<div class="container">
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h3 class="date">Schritt 1</h3>
<h1>Passendes Angebot finden</h1>
<p>Gemeinsam finden wir das passende Angebot für dein Unternehmen. Einfach
kontaktieren!
</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">Schritt 2</h3>
<h1>Design</h1>
<p>Nachdem wir das passende Angebot gefunden haben, erarbeiten wir gemeinsam die Texte und Bilder deiner persönlichen Lösung.
</p>
</div>
</li>
<li>
<div class="timeline-content">
<h3 class="date">Schritt 3</h3>
<h1>XXXX</h1>
<p>Zufrieden mit deiner Lösung? Dann gehts weiter zum nächsten Schritt.
</p>
</div>
</li>
</ul>
</div>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
background-color: black;
font-family: 'Libre Bodoni', serif;
}
body{
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.banner1{
height: 600vh;
width: 100vw;
color: white;
}
.background{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(60%);
z-index: -1;
top: 0;
left: 0;
}
.content{
color: white;
transform: translate(-50%, -50%);
z-index: -1;
font-family: 'Libre Bodoni', serif;
left: 50%;
}
.c1{
font-size: 9vw;
top: 30vh;
}
.c2{
font-size: 4vw;
top: 55vh;
}
.c3{
font-size: 3vw;
top: 75%;
}
.c4{
font-size: 3vw;
top: 95%;
}
.banner2{
background-color: white;
min-height: 60vh;
}
.banner3{
background-color: white;
min-height: 100vh;
padding-top: 3rem;
}
.banner2__header{
color: black;
font-size: calc(12px + 2vw);
position: relative;
z-index: 2;
}
.flex_container{
display: flex;
min-height: 50vh;
width: 90%;
align-items: center;
justify-content: space-between;
flex-direction: grid;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.box-1{
flex-basis: 40%;
margin: 2rem 0;
}
.box-2{
flex-basis: 50%;
font-size: 1.2rem;
}
.box-2-img{
background-image: url(PeopleWebsite.jpg);
z-index: 3;
width: 80%;
height: 80%;
}
.container-header{
font-size: 1.5rem;
padding: 5vh 40px -30px 40px;
text-align: center;
z-index: 2;
border: 3px red solid;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
}
.timeline {
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
position: relative;
left: -5%;
}
.timeline ul {
list-style: none;
}
.timeline ul li {
padding: 20px;
background: rgb(181,78,97);
background: linear-gradient(347deg, rgba(181,78,97,1) 0%, rgba(132,7,169,1) 77%);
color: white;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}
.timeline ul li:last-child {
margin-bottom: 0;
}
.timeline-content h1 {
font-weight: 500;
font-size: 25px;
line-height: 30px;
margin-bottom: 10px;
}
.timeline-content p {
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
.timeline-content .date {
font-size: 12px;
font-weight: 300;
margin-bottom: 10px;
letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
.timeline:before {
content: "";
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: rgb(181,78,97);
}
.timeline ul li {
width: 50%;
position: relative;
margin-bottom: 50px;
}
.timeline ul li:nth-child(odd) {
float: left;
clear: right;
transform: translateX(-50px);
border-radius: 20px 0px 20px 20px;
}
.timeline ul li:nth-child(even) {
float: right;
clear: left;
transform: translateX(30px);
border-radius: 0px 20px 20px 20px;
}
.timeline ul li::before {
content: "";
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background: rgb(181,78,97);
top: 0px;
}
.timeline ul li:nth-child(odd)::before {
transform: translate(50%, -50%);
right: -30px;
}
.timeline ul li:nth-child(even)::before {
transform: translate(-50%, -50%);
left: -50px;
}
.timeline-content .date {
position: absolute;
top: -30px;
color: black;
}
.timeline ul li:hover::before {
background: rgb(181,78,97);
background: linear-gradient(347deg, rgba(181,78,97,1) 0%, rgba(132,7,169,1) 77%);
}
}
@media (max-width: 45rem) {
.c1{
font-size: 5rem;
}
.c2{
font-size: 2.5rem;
}
.c3{
font-size: 2rem;
text-align: center;
width: 100%;
padding: 0 20px;
}
.c4{
font-size: 2rem;
text-align: center;
width: 100%;
padding: 0 50px;
}
.pricing-plan__wraper{
flex-direction: column;
}
.banner2__header{
font-size: calc(10px + 4vw);
}
.img-pricing{
all: unset;
left: 0;
align-items: center;
justify-content: center;
background-image: url(Squares2.jpg);
background-repeat: repeat-x;
}
.flex_container{
flex-direction: column;
}
.box-1{
order: 2;
}
.banner2{
min-height: 80vh;
}
.box-2-img{
width: 60%;
height: 60%;
transform: translateX(35%);
}
}