eggheadio-projects/SassyEgghead: null

node_modules/
css/
.idea
.DS_Store
npm-debug.log

# Intro to SCSS

This repository supports the [egghead](https://egghead.io/) course on SCSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SassyEgghead</title>
    <link rel="stylesheet" href="scss/main.css">
</head>
<body>
    <div class="spiderman-container">
        <div class="spiderman">
            <img src="images/spiderman.jpg" height="350" />
            <div class="description">
                <div class="header">
                    Spider-man
                    <a class="description-link" href="https://en.wikipedia.org/wiki/Spider-Man">stuff </a>
                    <div>MOOOOOOOOAAAR!!!</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

{
  "name": "Sassy-Egghead",
  "version": "0.0.1",
  "description": "Learn the Best and Most Useful SCSS Egghead Course Repo",
  "devDependencies": {
    "node-sass": "^3.11.2"
  },
  "scripts": {
    "start": "node-sass -o css scss --output-style expanded"
  },
  "author": "Ari Picker",
  "license": "UNLICENSED"
}

@import "nesting/_nesting.scss";

.spiderman {
  padding: 1rem 2rem;
  transition: transform .8s ease-in-out;

  &-container:hover & { transform: rotate(180deg); }
  &-container { background-color: #dbbebe; }

  &::before {
    display: block;
    content: url('../images/spiderman-icon.png');
  }

  img {
    transition: transform .8s ease-in-out;
    &:hover { transform: rotate(360deg); }
  }

  .description {
    color: darkred;
    text-align: center;
    margin-top: 1rem;

    .header { font-size: 2rem; }
  }

  .description-link {
    text-decoration: none;

    &::after {
      content: url('../images/spiderman-ok.jpg');
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.blue { color: $yellow; }

.blue { color: lighten(blue, 35%); }
$yellow: yellow;

.cool { color: rebeccapurple; }