Advanced CSS from EDX

Advanced CSS from EDX DEV218x Advanced CSS Concepts

by Abid Shaik

HTML

<link rel="stylesheet" href="https://d37djvu3ytnwxt.cloudfront.net/assets/courseware/v1/5743a1a1d31e36b25475d22bf64166e5/asset-v1:Microsoft+DEV218x+3T2016+type@asset+block/AdvCSS_Mod2_Begin_normalize.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<body>
  <header class="header-primary">
    <div class="container">
      <a class="logo logo-primary">
        <img src="https://d37djvu3ytnwxt.cloudfront.net/assets/courseware/v1/3544969d8a54ef28f4ae48d934b7e61b/asset-v1:Microsoft+DEV218x+3T2016+type@asset+block/AdvCSS_Mod2_logo.png" alt="logo" />
      </a>
      <div class="btn btn-primary btn-toggle-menu">Menu</div>
      <nav class="nav nav-primary">
        <ul>
          <li><a href="#" class="btn btn-nav">Link 1</a></li>
          <li><a href="#" class="btn btn-nav">Link 2</a></li>
          <li><a href="#" class="btn btn-nav">Link 3</a></li>
          <li><a href="#" class="btn btn-nav">Link 4</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <section class="hero hero-primary bg-img">
      <img src="https://d37djvu3ytnwxt.cloudfront.net/assets/courseware/v1/ab4703e2502d46b4e941de43695ee261/asset-v1:Microsoft+DEV218x+3T2016+type@asset+block/AdvCSS_Mod2_hero.jpg">
      <div class="container">
        <div class="hero-body">
          <h1 class="hero-title">Header 1</h1>
          <h4 class="hero-subtitle">Header 1</h4>
          <button class="btn btn-hero">Button 1</button>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-1-3 pull-right-sm">
            Circle Image
          </div>
          <div class="col-2-3">
            Content Area
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <div class="row">
         ...

CSS

/*
Color List:
- light blue = 00AEEF;
- dark blue = 1C75BC
- green = 8DC63F
- dark green = 009444
- orange = F7941E
- dark orange = F15A29
- brown = 594a42;
*/


/***************************
****************************
Reset
****************************
***************************/


/* Change all elements to use border-box */

html {
  box-sizing: border-box;
}

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


/***************************
****************************
Base Styles
****************************
***************************/


/***************************
****************************
Layout Styles
****************************
***************************/


/* Content Container*/

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}


/* Row */

.row {
  margin-right: -15px;
  margin-left: -15px;
}


/* Row Clear Float*/

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Media Query excludes extra small devices and includes small and above */

[class*='col-'] {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}


/***************************
****************************
Modules
****************************
***************************/


/*Buttons Module*/

.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  padding: 12px 30px;
  font-size: 1.313em;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
}

.btn-primary {
  background: #8DC63F;
  border-color: #8DC63F;
  color: white;
}

.btn-primary:hover {
  background: none;
  border-color: white;
  text-decoration: none;
}

.btn-toggle-menu {
  position: absolute;
  top: 15px;
  right: 15px;
}

.btn-nav {
  color: white;
  border: 1px solid #FFFFFF;
  transition: all 0.3s ease 0s;
}

.btn-hero {
  padding: 15px 30px;
  font: 28px Areal Regular;
  color:...