music store

fullscreen slider

by milenig

HTML

<div class="topnav">

  <!-- Centered link -->
  <div class="topnav-centered">
      <a href="#"><i class="fa fa-adjust"></i></a>
  </div>
  
  <!-- Left-aligned links (default) -->
  <a href="#news"><i class="fa fa-bars"></i></a>
  <a href="#search"><i class="fa fa-search"></i></a>
  
  <!-- Right-aligned links -->
  <div class="topnav-right">
    <a href="#search"  class="active">HOME</a>
    <a href="#about">GUITARS</a>
    <a href="#about">PEDALS</a>
    <a href="#about">APMS</a>
  </div>
  
</div>



<div class="slider">
  <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
  <input type="radio" name="slider" title="slide2" class="slider__nav"/>
  <input type="radio" name="slider" title="slide3" class="slider__nav"/>
  <input type="radio" name="slider" title="slide4" class="slider__nav"/>
  <div class="slider__inner">
    <div class="slider__contents">
      <h2>ltd deluxe</h2>
      <h3>'69 vintage custom eclipse'</h3>
      <a><img src="https://i.ibb.co/CngK5VP/M-Jet.png" alt="M-Jet" border="0"></a>
      <h4>ESP LTD EC-1000 DELUXE</h4>
      <p class="slider__txt">VINTAGE BLACK, MAHOGANY BODY...</p>
      <p class="price">$1,649.00</p>
      <button>
      ADD TO CARD
      </button>
    </div>
    <div class="slider__contents">
      <h2>ltd deluxe</h2>
      <h3>'69 vintage custom eclipse'</h3>
      <a><img src="https://i.ibb.co/K2g7R2L/G220-CAR.png" alt="M-Jet" border="0"></a>
      <h4>ESP LTD EC-1000 DELUXE</h4>
      <p class="slider__txt">VINTAGE BLACK, MAHOGANY BODY...</p>
      <p class="price">$1,649.00</p>
      <button>
      ADD TO CARD
      </button>
    </div>
    <div class="slider__contents">
      <h2>ltd deluxe</h2>
      <h3>'69 vintage custom eclipse'</h3>
      <a><img src="https://i.ibb.co/nsn5cCM/white.png" alt="M-Jet" border="0"></a>
      <h4>ESP LTD EC-1000 DELUXE</h4>
      <p class="slider__txt">VINTAGE BLACK, MAHOGANY BODY...</p>
      <p class="price">$1,649.00</p>
      <button>
     ...

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

html, body {
  margin: 0;
  font-family: helvetica;
}

$main_color: rgb(244, 194, 66);
$red: #af1616;

.topnav {
  position: relative;
  overflow: hidden;
  background-color: black;
}

.topnav a {
  float: left;
  color: #e5e5e5;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  color: $red;
}

.topnav a.active {
  color: $main_color;
}

.topnav-centered a {
  float: none;
  font-size:25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.topnav-centered a:hover{
  color:$red;
}

.topnav-right {
  float: right;
  font-size:17px;
}



/*----------------------SLIDER-------------------*/

.slider {
  height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;
  display: flex;
          flex-flow: row nowrap;
          align-items: flex-end;
          justify-content: center;
}
.slider__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
          appearance: none;
          backface-visibility: hidden;
}
.slider__nav:checked {
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300%;
}
.slider__inner {
  background: #1d1d1d;
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
 ...