Day 291

MIXER>COM Clone four of four... FINISHED!
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

@import url("reset.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap");

html,
body {
  font-family: "Open Sans Condensed", sans-serif;
  background-image: linear-gradient(
      to bottom,
      rgba(37, 49, 65, 0.7) 0%,
      #253141 75%,
      #253141 100%
    ),
    url("http://feed4gamers.com/imgs/2016-10-19-21-33-33/halo-wars-2-image-1920.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  header {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    .left-menu {
      display: flex;
      .logo {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
      }
      .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 50px;
        a {
          color: rgba(255, 255, 255, 0.6);
          text-decoration: none;
          font-weight: 500;
          font-size: 1.2rem;
          padding: 0 25px;
          transition: all 0.2s ease-in-out;
          &:hover {
            color: #fff;
          }
        }
      }
    }
    .right-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      .language {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 1.2rem;
        padding-right: 60px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        .fa {
          font-weight: 300;
          font-size: 1.5rem;
        }
        &:hover {
          color: #fff;
        }
      }
      .signin {
        background: #0375d5;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 0.8rem;
        color: #fff;
        font-weight: 700;
      }
    }
  }
  .section-title {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .container {
    width: 1400px;
    margin: 0 auto;
  }
  #featured {
    padding: 10px 0 0 0;
    .videos-section {
      display: grid;
      grid-template-columns: 1fr 2fr 620px 2fr 1fr;
      grid-gap: 10px;
      .video {
        display: flex;
        justify-content: center;
        align-items: center;
        .image {
          width: 100%;
          height: 300px;
          background: url("https://i.ytimg.com/vi/yq1d_NHtwOI/maxresdefault.jpg");
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }
      .video:nth-child(1) .image,
      .video:nth-child(5) .image {
        position: relative;
        .arrow {
          height: 100%;
          position: absolute;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px;
          transition: all 0.2s ease-in-out;
          &:hover {
            background: rgba(0, 0, 0, 0.6);
          }
          .fa {
            font-size: 4rem;
            color: #00b4f0;
          }
        }
      }
      .video:nth-child(5) .image {
        .arrow {
          right: 0;
        }
      }
      .center {
        width: 100%;
        height: 349px;
        .image {
          width: 100%;
          height: 100%;
          background: url("https://i.ytimg.com/vi/GT6ushVNkGY/maxresdefault.jpg");
          transform: scale(1.02);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          border: 2px solid #00b4f0;
        }
      }
    }
    .dots {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      .circles-section {
        display: flex;
        justify-content: center;
        align-items: center;
        .circle {
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .background-color {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #bdc2c4;
            transition: all 0.2s ease-in-out;
            &:hover {
              width: 15px;
              height: 15px;
              background: #00b4f0;
            }
            &.active {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: #00b4f0;
            }
          }
        }
      }
    }
  }
  #top-games {
    .games {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-gap: 7px;
      .music {
        background: url("https://mrc-assets.s3.amazonaws.com/assets/Image/103884-fitandcrop-717x437.jpg");
      }
      .fortnite {
        background: url("https://cdn2.unrealengine.com/Fortnite%2Fbattle-royale%2F10BR_Launch_Web_GetFortnite_Header-1920x1000-a8e332ddc946efe01f26b84b43de5f59b8224305.jpg");
      }
      .paladins {
        background: url("https://i.ytimg.com/vi/0rV3-HXhky8/maxresdefault.jpg");
      }
      .battlegrounds {
        background: url("https://hb.imgix.net/73b656380a1689b5188d4ff9b2386e6978d378d3.jpg?auto=compress,format&fit=crop&h=353&w=616&s=d48dbf0e3add5c4874361ebd77312570");
      }
      .smite {
        background: url("https://static-cdn.jtvnw.net/ttv-boxart/Smite.jpg");
      }
      .apex {
        background: url("https://upload.wikimedia.org/wikipedia/en/d/db/Apex_legends_cover.jpg");
      }
      .game {
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 300px;
        border-radius: 5px;
        position: relative;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.45);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.45);
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        margin-bottom: 48px;
        cursor: pointer;
        &:hover .info {
          background: #313f55;
        }
        .info {
          background: #253041;
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 10px;
          color: #fff;
          transition: all 0.2s ease-in-out;
          .title {
            font-weight: 600;
            margin-bottom: 10px;
          }
          .views {
            font-weight: 300;
            color: #8c919d;
            font-size: 0.9rem;
            .fa {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}