Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Wonyoung Choi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Wonyoung Choi
Front End Web Development Techdegree Graduate 23,713 Points
Posted by Wonyoung Choi
.a{fill-rule:evenodd;}techdegree seal-36
Wonyoung Choi
Front End Web Development Techdegree Graduate 23,713 Points

I need help with .container and .theme__colors classes(TECHDEGREE)

<body class="container">
  <div class="grid__row">
    <div class="grid__col--3">
      <a class="link" href="/">
          <img class="img--logo" alt="circles logo" src="images/logo.png">
        </a>
    </div>
    <div class="grid__col--9">
      <nav role="navigation">
        <ul class="nav">
          <li class="nav__item"><a href="#type">Typography</a></li>
          <li class="nav__item"><a href="#buttons">Buttons</a></li>
          <li class="nav__item"><a href="#forms">Form</a></li>
          <li class="nav__item"><a href="#images">Images</a></li>
          <li class="nav__item"><a href="#grid">Grid</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="grid__row">
    <div class="grid__col--12">
      <div class="card">
        <p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less than 769px,
          the menu will be displayed vertically.</p>
      </div>
    </div>
  </div>

  <div class="grid__row">
    <div class="grid__col--8">
      <div class="card">
        <h4 id="type" class="headline--secondary">Typography</h4>
        <h1 class="headline--primary">Take a look at this amazing headline</h1>
        <p>This is a typical paragraph for the UI Kit. <a href="#" class="link">Here is what a link might look like</a>. The
          typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
          No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
          fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>.
          Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this
          amazing paragraph as well. :)</p>
        <blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's right, block quotes that say, "Hey,
          I'm an article you want to read and nurture."</blockquote>
      </div>
    </div>
    <div class="grid__col--4">
      <form class="form">
        <legend id="forms" class="headline--secondary">Form Elements</legend>
        <img class="img--avatar" src="images/avatar.png" alt="Avatar">
        <label class="form__label--hidden" for="username">Username:</label>
        <input class="form__input" type="text" id="username" placeholder="Username">
        <label class="form__label--hidden" for="password">Password:</label>
        <input class="form__input" type="password" id="password" placeholder="Password">
        <button class="btn--default theme__colors" type="submit" value="Login">Login</button>
      </form>
    </div>
  </div>

  <h4 id="images" class="headline--secondary">Images</h4>

  <div class="grid__row">
    <div class="grid__col--6">
      <img class="img--frame" src="images/image.png" alt="sample image">
    </div>
    <div class="grid__col--6">
      <img class="img--avatar" src="images/avatar.png" alt="Avatar">
    </div>
  </div>

  <h4 id="buttons" class="headline--secondary">Buttons</h4>

  <div class="grid__row">
    <div class="grid__col--12">
      <button class="btn--default theme__colors">default</button>
      <button class="btn--success theme__colors">success</button>
      <button class="btn--error theme__colors">error</button>
      <button class="btn--warning theme__colors">warning</button>
      <button class="btn--info theme__colors">info</button>
    </div>
  </div>

  <h4 id="grid" class="headline--secondary">Grid System</h4>

  <div class="grid__row">
    <div class="grid__col--12 theme__colors">.grid__col--12</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--6 theme__colors">.grid__col--6</div>
    <div class="grid__col--6 theme__colors">.grid__col--6</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--5 theme__colors">.grid__col--5</div>
    <div class="grid__col--7 theme__colors">.grid__col--7</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--8 theme__colors">.grid__col--8</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
  </div>

</body>

Is there any way of creating separate colors in one .theme-colors class? and why use two .container classes for _grid and _typography partials?

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Looks like there should be some CSS to go with this. If you're using workspaces, you can share everything at once if you just make a snapshot of your workspace and post the link to it here.