Untitled
unknown
plain_text
2 years ago
22 kB
6
Indexable
<!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>Webas Websites</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav class="nav1"> <ul> <h1 class="logo">Webas</h1> <li><a href="#">Home</a></li> <li><a href="#">Preise</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Öffnungszeiten</a></li> </ul> </nav> </header> <div class="banner1"> <img src="web-gfd9afe21a_1920.jpg" alt="" class="background" style="position: fixed;"> <h1 class="content c1" style="position: fixed;">Webas</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> <div class="banner2"> <div class="flex_container"> <div class="box-1"> <h1 class="banner2__header ">Die Lösung für dein <span style="color:rgba(181,78,97,1);">Unternehmen</span></h1> <!-- <h4>Wir erstellen Websites, die Sie beim Entwerfen, Entwickeln und Skalieren Ihres Unternehmens unterstützen.</h4> --> <h3>Webas erstellt beeindruckende Websites für junge, wachsende Startups und Restaurants. Wir helfen beim Entwerfen, Entwickeln und Skalieren deines Unternehmens</h3> </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.</br> Fülle das Kontaktformular aus und wir setzen uns mit dir in Kontakt. </p> </div> </li> <li> <div class="timeline-content"> <h3 class="date">Schritt 2</h3> <h1>Gewünschte Extras wählen</h1> <p>Egal ob du deine Website in 7 Tagen erstellt, spezielle Werbetexte oder ein ganz eigenes Logo haben möchtest, wir machen das möglich. Wähle deine gewünschten Extras aus und verfeinere deine persönliche Website.</p> </div> </li> <li> <div class="timeline-content"> <h3 class="date">Schritt 3</h3> <h1>Design</h1> <p>Nachdem wir das passende Angebot gefunden haben, erarbeiten wir gemeinsam das Design, die Texte und Bilder deiner persönlichen Website. </p> </div> </li> <li> <div class="timeline-content"> <h3 class="date">Schritt 4</h3> <h1>Domain & Hosting</h1> <p>Zufrieden mit deiner Seite?</br> Dann gehts weiter zum nächsten Schritt. Eine passende Domain wird rausgesucht und deine eigene Website wird online gestellt. </p> </div> </li> <li> <div class="timeline-content"> <h3 class="date">Schritt 5</h3> <h1>SEO Pflege</h1> <p>Hast du das Platin Paket und trotzdem bist du auf Google nicht findbar?</br> Wir sorgen dafür, dass deine eigene Website immer und überall findbar ist. </p> </div> </li> </ul> </div> </div> <div class="banner2"> <h1 class="container-header">Preise</h1> <div class="pricing-plan__wraper"> <section class="pricing-plan"> <div class="pricing-plan__header"> <h1 class="pricing-plan__title">Basis Paket</h1> <h2 class="pricing-plan__summary">Gut geeignet für Web Visitenkarten</h2> </div> <div class="pricing-plan__description"> <ul class="pricing-plan__list"> <li class="pricing-plan__feature">Bis zu 2 Unterseiten</li> <li class="pricing-plan__feature">Anpassung auf alle Endgeräte</li> <li class="pricing-plan__feature">Hosting</li> </ul> </div> <div class="pricing-plan__actions"> <p class="pricing-plan__cost">499€</p> <p class="pricing-plan__text">Einmalig</p> <p class="pricing-plan__text">+ 10€ mtl. Hostinggebühren</p> <a href="#" class="pricing-plan__button">Jetzt Anfragen</a> </div> </section> <section class="pricing-plan pricing-plan__highlight"> <div class="pricing-plan__special-text">Empfohlen</div> <div class="pricing-plan__header"> <h1 class="pricing-plan__title">Pro Paket</h1> <h2 class="pricing-plan__summary">Perfekt geeignet für dein <br>Restaurant</h2> </div> <div class="pricing-plan__description"> <ul class="pricing-plan__list"> <li class="pricing-plan__feature">Bis zu 5 Unterseiten</li> <li class="pricing-plan__feature">Anpassung auf alle Endgeräte</li> <li class="pricing-plan__feature">Hosting</li> <li class="pricing-plan__feature">Animationen</li> </ul> </div> <div class="pricing-plan__actions"> <p class="pricing-plan__cost">799€</p> <p class="pricing-plan__text">Einmalig</p> <p class="pricing-plan__text">+ 10€ mtl. Hostinggebühren</p> <a href="#" class="pricing-plan__button">Jetzt Anfragen</a> </div> </section> <section class="pricing-plan"> <div class="pricing-plan__header"> <h1 class="pricing-plan__title">Platin Paket</h1> <h2 class="pricing-plan__summary">Jedes Start-up braucht eine passende Website</h2> </div> <div class="pricing-plan__description"> <ul class="pricing-plan__list"> <li class="pricing-plan__feature">Unbegrenzte Unterseiten</li> <li class="pricing-plan__feature">Anpassung auf alle Endgeräte</li> <li class="pricing-plan__feature">Hosting</li> <li class="pricing-plan__feature">Animationen</li> <li class="pricing-plan__feature">SEO Optimierung</li> </ul> </div> <div class="pricing-plan__actions"> <p class="pricing-plan__cost">1199€</p> <p class="pricing-plan__text">Einmalig</p> <p class="pricing-plan__text">+ 10€ mtl. Hostinggebühren</p> <a href="#" class="pricing-plan__button">Jetzt Anfragen</a> </div> </section> </div> </div> </div> <div class="banner4"> <h1 class="container-header">Extras</h1> <div class="containerfeature"> <div class="features"> <div class="feature"> <span class="material-symbols-outlined">calendar_month</span> <h3>Express</h3> <p class="feature-description">149€</p> </div> <div class="feature"> <span class="material-symbols-outlined">analytics</span> <h3>Google Analytics</h3> <p class="feature-description">49€</p> </div> <div class="feature"> <span class="material-symbols-outlined">edit_note</span> <h3>Werbetexte</h3> <p class="feature-description">79€</p> </div> <div class="feature"> <span class="material-symbols-outlined">query_stats</span> <h3>SEO Optimierung</h3> <p class="feature-description">199€</p> </div> <div class="feature"> <span class="material-symbols-outlined">design_services</span> <h3>Logo Design</h3> <p class="feature-description">99€</p> </div> <div class="feature"> <span class="material-symbols-outlined">support_agent</span> <h3>Wartung & Support</h3> <p class="feature-description">119€</p> </div> </div> </div> </div> <script src="main.js"></script> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&display=swap'); *, *::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; } header{ position: relative; text-align: center; width: 100%; z-index: 999; position: fixed; color: black; } .logo{ all: unset; padding-right: 2rem; font-size: 2rem; font-family: cursive; text-transform: uppercase; color: black; } header a{ text-transform: unset ; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.2rem; text-decoration: none; transition: all 1s ease; cursor: pointer; color: black; } .nav1{ opacity: 0; background-color:rgb(247, 247, 247); padding: 1rem 0; } .nav1 ul{ margin: 0; padding: 0; list-style: none; } .nav1 li{ margin-bottom: 1em; margin-left: 1em; display: inline-block; padding-right: 2rem; } .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; overflow: auto; padding: 3rem 0; } .banner4{ background-color: rgb(247, 247, 247); min-height: 60vh; overflow: auto; padding: 3rem 0; } .banner3{ background-color: rgb(247, 247, 247); min-height: 100vh; padding-top: 3rem; overflow: auto; } .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: relative; 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: 3rem; /* Default Schriftgröße für größere Bildschirme */ text-align: center; padding-top: 5vh; padding: 0 2rem; padding-bottom: 4vh; } @media (max-width: 768px) { .container-header { font-size: 3rem; /* Kleinere Schriftgröße für kleinere Bildschirme */ padding: 0 0.5rem; } } @media (max-width: 480px) { .container-header { font-size: 2rem; /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */ } } .container { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding-bottom: 3vh; } .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: 850px) { .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: 1; } .box-2{ order: 2; } .banner2{ min-height: 80vh; } .box-2-img{ width: 100%; height: 100%; } } .pricing-plan__wraper{ display: flex; align-items: center; justify-content: center; padding: 10px; padding-top: 0rem; position: relative; } .img-pricing{ position: absolute; height: 100%; width: 100%; object-fit: cover; background-image: url(Squares2.jpg); } .pricing-plan{ width: 300px; border-radius: 25px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); overflow: hidden; font-family: sans-serif; font-size: 16px; line-height: 1.5; color: #555555; margin: 15px; } .pricing-plan__special-text{ padding: 10px; text-align: center; font-weight: bold; color: white; background-color: rgba(122,4,139,1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset; } .pricing-plan__higlight{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); transform: scale(1.05); } .pricing-plan__header{ padding: 25px; background: rgb(181,78,97); background: linear-gradient(347deg, rgba(181,78,97,1) 0%, rgba(132,7,169,1) 77%); color: white; } .pricing-plan__title, .pricing-plan__summary{ margin: 0; text-align: center; } .pricing-plan__title{ font-size: 1.5em; font-weight: 400; } .pricing-plan__summary{ font-size: 1em; font-weight: 300; } .pricing-plan__description{ padding: 25px; } .pricing-plan__list{ padding: 0; margin: 0; } .pricing-plan__feature{ list-style: none; margin: 0; padding-left: 25px; position: relative; font-size: 0.9em; } .pricing-plan__feature:not(:last-child){ margin-bottom: 0.5em; } .pricing-plan__feature::before{ content: "\2714"; color: rgb(181,78,97); position: absolute; left: 0; } .pricing-plan__actions{ padding: 25px; border-top: 1px solid #eeeeee; display: flex; flex-direction: column; } .pricing-plan__button{ display: inline-block; margin: 15px auto; padding: 8px 20px; text-decoration: none; color: rgb(181,78,97); background: white; border-radius: 5px; border: 1px solid rgb(181,78,97); text-transform: uppercase; letter-spacing: 0.02em; font-weight: bold; } .pricing-plan__button:hover{ background: rgb(181,78,97); background: linear-gradient(347deg, rgba(181,78,97,1) 0%, rgba(132,7,169,1) 77%); color: white; } .pricing-plan__cost{ margin: 0; text-align: center; font-size: 2em; color: black; } .pricing-plan__text{ font-size: 0.9em; text-align: center; margin: 0 0 10px 0; } .containerfeature { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .features { display: flex; flex-wrap: wrap; justify-content: space-between; } .feature { flex-basis: calc(33.33% - 20px); margin-bottom: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 40px; text-align: center; background: linear-gradient(347deg, rgba(181,78,97,0.95) 0%, rgba(132,7,169,0.95) 77%); font-family: sans-serif; } .feature i { font-size: 36px; margin-bottom: 20px; color: #fd0c84; } .feature h3 { font-size: 24px; margin-bottom: 20px; color: white; } .feature p { font-size: 18px; line-height: 1.5; color: white; margin-bottom: 0; } @media only screen and (max-width: 1024px) { .features { justify-content: space-evenly; } .feature { flex-basis: calc(50% - 20px); } } @media only screen and (max-width: 767px) { .feature { flex-basis: 75%; } } @media only screen and (max-width: 480px) { .features { justify-content: center; } .feature { flex-basis: 75%; } } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .material-symbols-outlined{ display: inline-block; text-align: center; vertical-align: middle; color: #fff; font-size: 2.5rem; cursor: default; } .feature:hover .material-symbols-outlined { animation: rotate 1s forwards; } @keyframes rotate { 0% { transform: translateY(0) ; } 50% { transform: translateY(-10px); } 100% { transform: translateY(0) ; } } document.addEventListener("DOMContentLoaded", function(event) { const html = document.documentElement; window.addEventListener("scroll", function(){ const content = document.querySelector(".c1"); const content2 = document.querySelector(".c2"); const content3 = document.querySelector(".c3"); const content4 = document.querySelector(".c4"); const background = document.querySelector(".background"); const header = document.querySelector(".nav1"); let scrollPosition = window.pageYOffset; let banner1 = document.querySelector(".banner1") const scrollTop = html.scrollTop; const maxScrollTop = banner1.scrollHeight - window.innerHeight; const scrollFraction = scrollTop/maxScrollTop; const halfwayCounted = 1-(scrollFraction*8) content.style.opacity = halfwayCounted; console.log(halfwayCounted) content2.style.transition = 1.5 + "s"; content3.style.transition = 1 + "s"; content4.style.transition = 1 + "s"; if(halfwayCounted <= -1){ content2.style.top = "40%"; content3.style.top = "55%"; content3.style.opacity = "1"; } else{ content2.style.removeProperty("top"); content3.style.opacity = "0"; content3.style.removeProperty("top"); } if(halfwayCounted <= -3){ content2.style.transition = 1.5 + "s"; content2.style.top = "25%"; content2.style.opacity = "0"; } if(halfwayCounted <= -4){ content3.style.top = "40%"; content3.style.transition = 2 + "s"; content4.style.top = "55%"; content4.style.opacity = "1"; } else if(halfwayCounted <= -1){ content2.style.top = "40%"; content2.style.opacity = "1"; content3.style.top = "55%"; content4.style.opacity = "0"; content4.style.top = "75%" } if(halfwayCounted <= -5){ content3.style.opacity = 7 + halfwayCounted; content3.style.transition = 0 + "s"; content4.style.transition = 0 + "s"; content4.style.opacity = 7 + halfwayCounted; } if(halfwayCounted <= -8){ header.style.opacity = .95; header.style.transition = 2 + "s"; }else{ header.style.opacity = 0; header.style.transition = .5 + "s"; } }) });
Editor is loading...