Webleb - Code-Snippets -

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

24 May 2025

Flugzeugkofferraum

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

<p>
              The smart 365-days-per-year food subscription that will make yoi
              eat healthy again. Tailored to your personal tastes and
              nutritional needs
            </p>

<a href="#" class="btn">Start eating well</a>
          </div>
        </div>
      </div>
    </header>

<section>
      <div class="container">
        <h2>Some random heading</h2>

<p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi itaque
          quisquam excepturi minima nulla eligendi non ea porro magni temporibus
          culpa fugiat laudantium, dolorem, accusantium odit doloremque expedita
          officia deserunt. Nisi iusto blanditiis cupiditate vitae nesciunt
          ratione quaerat labore porro. Ea eos nulla amet, nostrum veritatis
          dignissimos iste ex non pariatur enim accusamus eius perferendis natus
          illo ipsum quasi omnis!
        </p>
      </div>
    </section>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

/* 
MAIN COLOR:#e67e22;
GREY COLOR:#444;
}
*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: Rubik;
  color: #444;
}
.container{
  margin: 0 auto;
  width: 1200px;
  
}
header {
  
  height: 100vh;
  position: relative;
  background-image:linear-gradient(
    rgba(0, 0, 0, 0.548)
    ,rgba(0, 0, 0, 0.541)
    ) ,url(hero.jpg);
   background-size: cover;
   color: #FFF;
}

.header-container {
  width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

#container {
  width: 50%;
}
nav {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
   padding-top: 32px;
}
h1 {
  font-size: 52px;
  margin-bottom: 32px;
  line-height: 1.05;
}

p{
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 48px;
}

.btn:link,
.btn:visited{
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #FFF;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 9px;
  transition: all 0.8s;
}

.btn:hover,
.btn:active{
  font-size: 20px;
  font-weight: 600;
  background-color:#c86d1c;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 20px;
  margin: 0 100px;
}

h2{
  font-size: 42px;
  margin-bottom: 48px;
 }

section{
  padding: 96px 0;
  background-color: rgba(250, 229, 250, 0.467);
  /* height: 100vh; *
}

Windows-Neustart

Flugzeugkofferraum

HTML

CSS

JS

Windows-Neustart

Flugzeugkofferraum

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS