test

by mtenschert

HTML

<body>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&display=swap" rel="stylesheet">
  <div class="nav">
    <h1>ALPINGUARANTY</h1>
  </div>
  <div class="conten-container">
    <div class="flex-wrapper">
      <div class="flexbox-left">
        <h1>ALPINGUARANTY – DER SCHUTZ GEGEN BRUCH UND DIEBSTAHL</h1>
        <div>Garantiert kostenlose Umbuchung und Stornierung
          ALPINRESORTS bietet eine einfache und unbürokratische Regelung bei Umbuchungen und Stornierungen an. Der Ihnen zustehende Betrag wird im Fall einer Umbuchung oder Stornierung umgehend Ihrem Kreditkarten- oder Bankkonto gutgeschrieben. Garantiert kostenlose Umbuchung und Stornierung
          ALPINRESORTS bietet eine einfache und unbürokratische Regelung bei Umbuchungen und Stornierungen an. Der Ihnen zustehende Betrag wird im Fall einer Umbuchung oder Stornierung umgehend Ihrem Kreditkarten- oder Bankkonto gutgeschrieben. Garantiert kostenlose Umbuchung und Stornierung
          ALPINRESORTS bietet eine einfache und unbürokratische Regelung bei Umbuchungen und Stornierungen an. Der Ihnen zustehende Betrag wird im Fall einer Umbuchung oder Stornierung umgehend Ihrem Kreditkarten- oder Bankkonto gutgeschrieben.
        </div>
      </div>
      <div class="flexbox-right">
        <h2>ALPINGUARANTY</h2>
        <div>Garantiert kostenlose Umbuchung und Stornierung
          ALPINRESORTS bietet eine einfache und unbürokratische Regelung bei Umbuchungen und Stornierungen an.
        </div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

CSS

body {
  padding-top: 70px;
  background: #2c2c2c;
  color: #cacaca;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  line-height: 110%;
  letter-spacing: 3.5px;
}

div {
  font-family: 'Lato', sans-serif;
  line-height: 150%;
}

.flex-wrapper {
  display: flex;
  /* or inline-flex */
}

.flexbox-left {
  flex: 0 0 65%;
  width: 65%;
}

.flexbox-right {
  flex: 0 0 32%;
  width: 32%;
  padding-left: 3%;
}

.nav {
  background: #6e1717;
  background-image: radial-gradient(circle, #ae3f3f 0%, #6e1717 100%);
  width: 1100px;
  height: 200px;
  text-align: center;
  margin: auto;
  overflow: hidden;
}

.nav h1 {
  color: #ff6e6e;
  background-image: linear-gradient(90deg, #e0e0e0, #d03434);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 3%;
  font-size: 55px;
}

.conten-container {
  max-width: 1100px;
  margin: auto;
}