Flexbox-Übung

dabblet.css

/**
 * Flexbox-Übung
 */

dabblet.html

<!--
  DIESES HTML NICHT BEARBEITEN!
  Du schaffst die Übung locker auch so
-->

<div id="wrapper">
  <header>
    <h1>ACME Inc.</h1>
    <div id="login">
      <p><label for="user">Username: </label> <input type="text" id="user"></p>
      <p><label for="pw">Passwort: </label> <input type="text" id="pw"></p>
    </div>
    <nav>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
      <a href="#">Link 7</a>
    </nav>
  </header>
  <main>
    <section id="content">
      <h2>Willkommen beim globalen Marktführer</h2>
      <p>
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
      </p>
    </section>
    <aside>
      <section><p>Widget A</p></section>
      <section><p>Widget B</p></section>
      <section><p>Widget C</p></section>
      <section><p>Suchwidget</p></section>
    </aside>
  </main>
  <footer>
    <section><p>Über uns</p></section>
    <section><p>Support</p></section>
    <section><p>International</p></section>
    <section><p>Investor Relations</p></section>
  </footer>
</div>

<style>

/*
  ***************************************************************
  DIESES CSS NICHT BEARBEITEN!
  Baselte dein Flexbox-Layout im Tab "CSS & Result" (oben rechts)
  ***************************************************************
*/

* {
  box-sizing: border-box;
}

html, a {
  font-family: Arial, sans-serif;
  color: #FFF;
  padding: 0.5rem;
}

#content p {
  text-align: left;
}

#wrapper, main, section, aside, header, footer, nav, a, h1, #login {
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
}
h2 {
  margin: 1rem 0.5rem;
}

#login p {
  font-size:0.8rem;
  margin: 0;
}

h1 {
  font-size:4.5rem;
  padding: 0.5rem;
}

p, a {
  text-align: center;
  padding: 0.5rem;
}

</style>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}