BCS Week 4

In this example below you will see how to do a BCS Week 4 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by albemuth, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright albemuth ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>BCS Week 4</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://twitter.github.com/bootstrap/assets/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>BCS UI Training <small>week 4</small></h1>

<!-- OOCSS -->
<!-- 1: Optimize the code on the CSS panel. -->
<div class="ex ex1">
  <div class="box punk rawk">
    <h3 id="bitw" class="header-3"><strong class="band-name">Rancid</strong><span class="song-name">Time Bomb</span></h3>
  </div>
</div>

<!-- 2: Use Twitter Bootstrap's classes to format this form to look like this http://i.imm.io/I5di.png -->
<div class="ex ex2">
  <form class="form-horizontal">
    <legend>login</legend>
    <div class="control-group">
      <label for="inputEmail" class="control-label">Email</label>
      <div>
        <input type="text" id="inputEmail">
      </div>
    </div>
    <div class="control-group">
      <label for="inputPassword" class="control-label">Password</label>
        <div>
          <input type="password" id="inputPassword">
        </div>
     </div>
     <div class="control">
       <div>
         <button class="btn btn-primary" type="submit">get in!</button>
       </div>
     </div>
   </form>  
</div>

<!-- 3: Refactor these styles (CSS panel line 63) to make them fully portable, fully portable meaning, they can be applied to any element and still retain their styles, no matter what tag is being used on -->
<div class="ex ex3">
  <div class="targeter-top">
    <h2>this is a call</h2>
    <ul class="lyrics-list">
      <li>visiting is pretty</li>
      <li>visiting is good</li>
      <li>seems that all they ever wanted was a brother</li>
    </ul>
  </div>
  <div class="targeter-bottom">
    <h1>Monkey Wrench</h1>
    <ul class="lyrics-list">
      <li>What have we done with innocence</li>
      <li>It disappeared with time</li>
      <li>it never made much sense</li>
    </ul>
  </div>
</div>
  
<!-- 4: Recreate this error message http://i.imm.io/HNQA.png using OOCSS. -->
<div class="ex ex4">
  <div class="ex-alert ex-alert-block">
    <p>Please choose a rating</p>
  </div>
</div>  

<!-- 5: A UPC, unique piece of content, is the smallest object where all community content types (reviews, photos, videos, photos) inherit from, recreate this mock http://img6.imagebanana.com/img/7586irfz/20121015bSelection.png using the provided HTML, here's a useful sprite http://img6.imagebanana.com/img/4vzc884e/minisprite.jpg -->
<div class="ex ex5">
  <div class="upc upc-question">
    <div class="upc-header"><h3>Is this jacket machine washable?</h3></div>
    <div class="upc-user-info">
      <img class="user-photo" src="http://lorempixel.com/60/60/" />
      <h4 class="user-name">Olivia</h4>
      <p class="date-posted">Posted on <time>July 8th, 2012</time></p>
    </div>
    <div class="upc-content">
      <p>Is this jacket machine washable?</p>
    </div>
    <ul class="upc-tools">
      <li class="fb-like">Like</li>
      <li class="vote up-vote">(0)</li>
      <li class="flag">Flag</li>
    </ul>
  </div>
</div>

<!-- 6: Now do the same for this review http://i.imm.io/HNT8.png, keep in mind:
- Community badges are not exclusive to UPCs.
- The same rating component is used in item listing for product reviews.
Try reuse as much code as possible from the previous example. -->
<div class="ex ex6"></div>

<!-- SASS/Compass -->
<!-- One of the most important things when dealing with pre-processors such as SASS (and frameworks in general), is to know what the output will be and don't treat the framework as a black box. -->

<!-- 7: Predict the output of -->
<div class="ex ex7">
  <h2>Source:</h2>
  <pre class="source">1 $primary: #000;
2 $secondary: #333;
3 
4 .username-label {
5   color: $primary; font-weight: bold;
6 }</pre>
  <h2>Output:</h2>
  <pre class="output">
/* answer goes here */</pre>
</div>

<!-- 8: Predict the output of -->
<div class="ex ex8">
  <h2>Source:</h2>
  <pre class="source">1 a {
2   color: red;
3 
4   &:hover {
5     background: blue;
6   }
7 }</pre>
  <h2>Output:</h2>
  <pre class="output">
/* answer goes here */</pre>
</div>

<!-- 9: Predict the output of -->
<div class="ex ex9">
  <h2>Source:</h2>
  <pre class="source">1  @mixin text-decor {
2    color: red;
3  
4    &:hover {
5      color: black; background: red;
6    }
7  }
8  a {
9    @include text-decor;
10 }</pre>
  <h2>Output:</h2>
  <pre class="output">
/* answer goes here */</pre>
</div>

<!-- 10: Predict the output of -->
<div class="ex ex10">
  <h2>Source:</h2>
  <pre class="source">1  @mixin text-decor($color-off, $color-on) {
2    color: $color-off;
3  
4    &:hover {
5        color: $color-on; background: $color-off;
6    }
7  }
8  a {
9    @include text-decor(#fff, #000);
10 }</pre>
  <h2>Output:</h2>
  <pre class="output">/* your answer here */</pre>
</div>

<!-- 11: Refactor the following rules leveraging Compass' baked in defaults -->
<div class="ex ex11">
  <div class="circle">C</div>
  <div class="circle">S</div>
  <div class="circle">S</div>
</div>

<!-- Inheritance -->

<!-- 12: Why is the paragraph:
      a) Font colored red?
      b) Surrounded by a red border?
      c) Has 10px padding all around?
      d) AND how come only the <p> behaves this way, but the <h2> doesn't? (see lines 119 ~ 122).
 -->
<div class="ex ex12">
  <div class="wrapper">
    <div>
      <h2>this is a header</h2>
    </div>
    <p>this is a paragraph</p>
  </div>
</div>

<!-- 13: Re-do excercise #3 using the @include directive -->
<div class="ex ex13">
 <div class="targeter-top">
    <h2>this is a call</h2>
    <ul class="lyrics-list">
      <li>visiting is pretty</li>
      <li>visiting is good</li>
      <li>seems that all they ever wanted was a brother</li>
    </ul>
  </div>
  <div class="targeter-bottom">
    <h1>Monkey Wrench</h1>
    <ul class="lyrics-list">
      <li>What have we done with innocence</li>
      <li>It disappeared with time</li>
      <li>it never made much sense</li>
    </ul>
  </div>
</div>

<!-- 14: Re-do excercise #4 using the @extend directive -->
<div class="ex ex14">
  <div class="ex-alert ex-alert-block">
    <p>Please choose a rating</p>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/albemuth/bcs-week-4-tpGrw */
/* --- start base styles --- */
body {
  border: none;
  margin: 25px;
}

pre {
  background: #eee;
  border: 1px solid #999;
  font-family: Courier New, monospaced;
  margin: 50px 0 20px 0;
  padding: 10px;
  position: relative;
}

pre:before {
  background: #999;
  border: 1px solid #eee;
  color: #fff;
  content: "code:";
  font-weight: bold;
  left: -1px;
  padding: 4px 8px;
  position: absolute;
  top: -30px;
}

.ex {
  margin: 0 0 20px;
}

.ex:after,
.ex:before {
  clear: both;
  display: block;
  font-family: Courier New, monospaced;
  color: #999;
  font-size: 12px;
}

.ex:before {
  content: "<ex>";
}

.ex:after {
  content: "</ex>";
}

.ex ul {
  padding: 0;
}
.ex li {
  list-style-type: none;
}

/* --- end of base styles --- */
/* --- your solutions go here --- */
/* --- ex:1 --- */
.ex1 div.box.punk.rawk {
  color: white;
  background: white url("http://threes.urbantribe.jp/wp-content/uploads/2009/02/cover_rancid-indestructible.jpg") 0px -348px;
  border: 10px solid red;
  padding: 0 10px;
  width: 280px;
  margin: 10px;
}
.ex1 div.box.punk.rawk h3.header-3 {
  color: red;
  font-family: Georgia, serif;
  margin-top: 2px;
  text-transform: uppercase;
}
.ex1 div.box.punk.rawk h3.header-3 strong.band-name {
  color: red;
  text-transform: uppercase;
  text-decoration: blink;
  font-weight: bold;
}
.ex1 div.box.punk.rawk h3.header-3 span.song-name {
  color: pink;
  margin-left: 6px;
  text-transform: lowercase;
  font-family: 'Comic Sans Ms', sans-serif;
}

/* --- ex:2 --- */
/* --- you shouldn't need any CSS, just classes on the HTML --- */
/* --- ex3: --- */
.ex3 .targeter-top h2 {
  border-bottom: 3px solid blue;
  font-size: 24px;
  color: red;
  line-height: 28px;
  margin: 10px;
  padding-bottom: 6px;
  text-transform: lowercase;
}

.ex3 .targeter-top ul.lyrics-list li {
  font-style: italic;
  border-left: 3px solid blue;
  padding-left: 6px;
}

.ex3 .targeter-bottom h1 {
  border-bottom: 3px solid blue;
  font-size: 24px;
  color: red;
  line-height: 28px;
  margin: 10px;
  padding-bottom: 6px;
  text-transform: lowercase;
}

.ex3 .targeter-bottom ul.lyrics-list li {
  font-style: italic;
  border-left: 3px solid blue;
  padding-left: 6px;
}

/* --- ex:4 --- */
/* --- ex:5 --- */
/* --- ex:6 --- */
/* Write the answers of 7 ~ 10 inside the output <pre> in the HTML panel. */
/* --- ex: 11 --- */
.ex11 .circle {
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
  margin: 15px 0;
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
  display: inline-block;
  *display: inline;
  color: #fff;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
  font-size: 60px;
  -moz-box-shadow: 0 0 20px 6px #ccc;
  -webkit-box-shadow: 0 0 20px 6px #ccc;
  box-shadow: 0 0 20px 6px #ccc;
  margin: 20px 0;
  text-shadow: 1px 1px 0px #333;
  filter: dropshadow(color=#333, offx=1, offy=1);
}

/* --- ex: 12 --- */
.ex12 .wrapper {
  border: 2px solid red;
  color: red;
  padding: 10px;
  position: relative;
}
.ex12 div {
  color: black;
}
.ex12 h2,
.ex12 p {
  border: inherit;
  padding: inherit;
}

/* --- ex: 13 --- */
/* --- ex: 14 --- */
/* --- ex: 15 --- */

Comments