Introduction#

note chapter 5 of css book, please click here to see demo

ckad question 1

HTML#

<body>
  <div class="container">
    <header>
      <h1>Ink</h1>
    </header>
    <nav>
      <ul class="nav-site">
        <li>Home</li>
        <li>Features</li>
        <li>Pricing</li>
        <li>Support</li>
        <li class="nav-right">About</li>
      </ul>
    </nav>
    <div class="content">
      <div class="main">
        <h1>Lorem ipsum dolor sit amet consectetur</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum
          cum, obcaecati ipsum necessitatibus laboriosam magnam officia
          voluptate, natus ratione aspernatur. Dicta ipsum assumenda atque,
          omnis quos unde in ullam.
        </p>
      </div>
      <div class="sidebar">
        <form class="login-form">
          <h3>Login</h3>
          <p>
            <label for="username">Username</label>
            <input type="text" id="username""/>
          </p>
          <p>
            <label for="password">Password</label>
            <input type="text" id="password""/>
          </p>
          <button type="submit">Login</button>
        </form>
        <h1>This is aside</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit cum
          odit facilis rerum ad impedit libero laboriosam quas. Repudiandae
          dolores ut dolorum ratione cumque velit culpa dignissimos voluptatum
          eius corrupti.
        </p>
      </div>
    </div>
  </div>
</body>

Box-Sizing#

the box-sizing in the box model

:root {
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: inherit;
}

Container Width#

container which limit the width of the page

.container {
  width: 80%;
  margin: auto;
  background-color: antiquewhite;
}

create nav bar and the nav right by using flex box, list with style none, and margin left auto to push the last nav item to the most right edge.

.nav-site {
  color: white;
  list-style: none;
  display: flex;
  background-color: chocolate;
  padding: 0;
}
.nav-site > li {
  padding: 0.5em;
  background-color: brown;
}
.nav-site > li + li {
  margin-left: 1em;
}
.nav-site > .nav-right {
  margin-left: auto;
}

Two Columns#

create equal height two columns using flex box

.content {
  display: flex;
}
.main {
  padding: 0.5em;
  flex: 2;
  background-color: aqua;
}
.sidebar {
  padding: 0.5em;
  margin-left: 1em;
  background-color: orange;
  flex: 1;
}

Form#

using display block so the input in a new line, width 100% with noted that box-sizing border-box

.login-form {
  background-color: aquamarine;
}
.login-form h3 {
  text-transform: uppercase;
}
.login-form input {
  width: 100%;
}
.login-form button {
  cursor: pointer;
  background-color: white;
  margin-top: 1em;
}