Day 296

Almost done with this course...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

HTML:
<div class="header">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

<div class="container">
  <article>
    Tacos mustache semiotics fashion axe etsy trust fund flexitarian. Raclette tacos master cleanse, readymade af crucifix dreamcatcher hexagon occupy lumbersexual seitan. Shoreditch pop-up raclette wayfarers, blue bottle tattooed banh mi beard fashion axe. Gentrify keffiyeh man braid portland brunch franzen paleo schlitz vaporware fixie, selvage single-origin coffee hammock tacos iceland. Fixie roof party DIY shabby chic portland banh mi migas 3 wolf moon mustache vape.
    <br>
    <div class="primary">
      Primary
    </div>
    <div class="danger">
      Danger
    </div>
    <div class="success">
      Success
    </div>
    <div class="warning">
      Warning
    </div>
    <br>
    <div class="btn2 primary2">
      Primary
    </div>
    <div class="btn2 danger2">
      Danger
    </div>
    <div class="btn2 success2">
      Success
    </div>
    <div class="btn2 warning2">
      Warning
    </div>
  </article>

  <aside>
    <img src="https://imgix.ranker.com/user_node_img/37/726854/original/christopher-reeve-photo-u29?w=650&q=50&fm=pjpg&fit=crop&crop=faces">
  </aside>
</div>

**********
SCSS:
@import url('https://fonts.googleapis.com/css?family=Muli|Roboto&display=swap');
$mainFont: 'Roboto', sans-serif;
$secFont: 'Muli', sans-serif;
$liPadding: 10px 15px;
$liDisplay: inline-block;
$marginNum: 20;

* {
  box-sizing: border-box;
}

.header {
  background: red;
  ul {
    padding: 0;
    margin: 0;
    li {
      font-family: $mainFont;
      display: $liDisplay;
      padding: $liPadding;
      list-style: none;
    }
  }
}

.container {
  width: 50 * 15 + px;
  margin: 0 auto;
  &:after {
    clear: both;
    content: "";
    display: table;
  }
    article {
    width:1000px / 1200px * 100%;
    display: inline-block;
    float: left
    }
    aside {
      width:200px / 1200px * 100%;
      display: inline-block;
      padding: 20px / 1200px * 100%;
    img {
      width: 100%;
    }
  }
}

.submenu {
  transition: background .5s ease-in;
  &.blue {
    background:blue;
  }
  &.nav li {
    display: $liDisplay;
    padding: $liPadding;
    margin-bottom: $marginNum + px;
    font-family: $mainFont;
    list-style: none;
  }
  &.sky ul {
    padding: 0;
  }
  &:hover {
    background: yellow;
  }
}

.btn {
  padding: 10px 15px;
  border-radius: 10px;
  margin: 10px 0;
  display: inline-block;
}
.primary {
  @extend .btn;
  background: blue;
}

.danger {
  @extend .btn;
  background: red;
}

.success {
  @extend .btn;
  background: green;
}

.warning {
  @extend .btn;
  background: yellow;
}

.btn2 {
  padding: 10px 15px;
  border-radius: 10px;
  margin: 10px 0;
  display: inline-block;
  &.primary2 {
    background: blue;
  }
  &.danger2 {
    background: red;
  }
  &.success2 {
    background: green;
  }
  &.warning2 {
    background: yellow;
  }
}





<div class="submenu nav blue sky">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>