.artboard
  .cards
    .card.p1
      a Food
    .card.p2
      a people
    .card.p3
      a Nature
    .card.p4
      a Travel


















footer
  .content
    .top
      a(target="_blank",href="https://www.instagram.com/akshaycodes/?hl=en") #[i.fab.fa-instagram]
      a(target="_blank",href="https://twitter.com/akshaycodes/") #[i.fab.fa-twitter]
      a(target="_blank",href="http://akshaycodes.com/youtube") #[i.fab.fa-youtube]
      a(target="_blank",href="https://codepen.io/akshaycodes/") #[i.fab.fa-codepen]
    .bottom
      a made with #[i.fas.fa-heart.beat] by #[a(target="_blank",href="https://codepen.io/akshaycodes/") Akshaycodes]

@import url('https://fonts.googleapis.com/css?family=Satisfy')
// sass
//Var
//colors
$base: #252525
$primary: #252525
$accent: #ffffff
$secondary: #a9a9a9

//mixins
=fhover($color)
  &:hover
    transition: 350ms ease-in-out
    color:  $color
    transform: scale(1.4)
=flex()
  display: flex
  align-items: center
  justify-content: center
  flex-direction: row
  flex-wrap: wrap
   
=center()
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  
=align()
  top: 50%
  transform: translateY(-50%)

// reset
*
  margin: 0
  box-sizing: border-box
  padding: 0
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
h1,h2,h3,h4,h5,h6,a,p,span
  //margin: 10px 10px 0 0
  padding-bottom: 0.714em !important
  padding-top: 0.714em !important
  text-transform: uppercase
  letter-spacing: 0.1em
  font-weight: 400
  color: $accent
  font-weight: bold
  text-align: center
  
footer
  bottom: 0
  right: 0
  left: 0
  margin: 0 auto
  position: fixed
  width: 100%
  background: $base
  text-align: center
  //padding: 10px 20px
  
  .content
    border-radius: 5px
    +flex
    //flex-direction: column
    justify-content: space-evenly
    //background-color: $primary
    height: 80px
    .bottom
      padding: 0
      margin: 0
      top: 10%
      .beat
        color: red
        animation: beat .30s infinite alternate
        
    .top
      font-size: 25px
      .fa-twitter
        +fhover(#55acee)
      .fa-youtube
        +fhover(#cd201f)
      .fa-instagram
        +fhover(#e4405f)
      .fa-codepen
        +fhover(#FFDD40)
        
      a
        padding: 10px
      i
        transition: 500ms ease-in-out
      
    
body, html
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  border: 0
  overflow: hidden
  background: $base
  font-family: 'Raleway', sans-serif
  text-align: center
  
.noselect
  user-select: none

  

//animation
@keyframes beat
  to 
    transform: scale(1.4)
.artboard
  .cards
    text-align: center
    min-height: 100vh
    overflow: hidden
    display: flex
    .card
      min-width: calc(25%)
      min-height: 100%
      text-align: center
      background-size: content
      background-repeat: no-repeat
      background-position: center
      cursor: pointer
      //transition: all 500ms
      transition: 500ms cubic-bezier(1,.02,0,.98)
      vertical-align: middle
      a
        font-family: 'Satisfy', cursive
        font-size: 60px
        text-transform: capitalize
        vertical-align: middle
        text-align: center
        position: relative
        top: 50%
        transition: 250ms cubic-bezier(1,.02,0,.98)
        
  .p1
    background: url("https://images.unsplash.com/photo-1551326844-4df70f78d0e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1226&q=80")
  
  .p2
    background: url("https://images.unsplash.com/photo-1543965860-82ed7d542cc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80")
    
  .p3
    background: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80")
  .p4 
    background: url("https://images.unsplash.com/photo-1548013146-72479768bada?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1510&q=80")
    
.open
  min-width: 100% !important
  a
    top: 100% !important

.close 
  min-width: 0%!important
  a
    top: -50% !important
    
  
  



  
      
//    background: url("https://images.unsplash.com/photo-1550639524-39ef65e52515?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=659&q=80")
 background: url("https://images.unsplash.com/photo-1554652297-6e7a24cf8fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1325&q=80")

//tested on Safari,chrome 
//No Script
//total time: 2 hours 
//You Can Find Me On Instagram: @akshaycodes 
//if you have questions feel free to ask
const cards = document.querySelectorAll('.card');
    function toggleOpen() {
      this.classList.toggle('open');
     for (i = 0; i < cards.length; i++) {
       if ( cards[i] !== this)
       cards[i].classList.toggle('close')
     }
}
 cards.forEach(card => card.addEventListener('click', toggleOpen));