PattrnPartyCSS.txt

*{
  margin: 0;
  font-family: 'Open Sans';
  font-weight: 300;
}

header{
  background-color: #2F2235;
  display: flex;
  justify-content: space-between;
}

h1{
  color: #FFFFFF;
  text-transform: uppercase;
  margin: 1% 3%;
}

h1 span{
  color: #34D1D1;
}

h2{
  color: #FFFFFF;
  margin: 1% 3%;
}

h3{
  text-transform: uppercase;
  margin: 2% 1%;
  width: 165px;
  margin: 5px auto;
}

hr{
  width: 85%;
}

.pattern-title{
  display: flex;
  align-items: center;
}

.card-info{
  border: 2px solid #D1D2D3;
  border-top: none;
  padding: 20px;
  background: white;
  display: flex;
}

.desktop-tab{
  padding: 10px 0;
  background-color: #F2F2F2;
  position: relative;
  width: 25%;
  border-right: #FFFFFF solid 1px;
  border-bottom: #D1D2D3 solid 2px;
}

.card{
  display: flex;
  justify-content: center;
}

.card-image{
  width: 250px;
  height: 300px;
  background-position: center;
  background-size: cover;
  margin-right: 20px;
}

.card-1 .card-image{
  background-image: url('./This-Corgi-puppy-is-a-teddy-bear.jpg');
}

.card-2 .card-image{
  background-image: url('./51p5c1efueoy.jpg')
}

.card-3 .card-image{
  background-image: url('./corgi-puppy-6.jpg')
}

.card-4 .card-image{
  background-image: url('./Corgi_Puppy_with_Ball.jpg')
}

.card-text{
  width: 500px;
  margin: 0 10px;
}

h5{
  font-weight: 800;
  font-size: 18px;
  padding: 5px 0;
  border-bottom: 1px solid #D1D2D3;
}

p{
  padding: 18px 0;
  line-height: 150%;
}


.all-tabs{
  display: flex;
  text-align: center;
  color: #666666;
}

.card-and-tabs{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-area{
  display: flex;
  justify-content: center;
  margin: 3% 0;
}

.selected{
  background-color: #FFFFFF;
  border: solid 2px #D1D2D3;
  border-bottom: none;
  font-weight: 800;
}

.hidden{
  display: none;
}
.mobile{
  display: none;
}

footer{
  display: flex;
  justify-content: center;
}
.view-code-btn{
  background-color: #3F3244;
  padding: 10px 75px;
  color: #F2F2F2;
  margin: 5%;
}

@media screen and (max-width: 700px){
  header{
    flex-direction: column;
    text-align: center;

  }

  .all-tabs{
    display: none;
  }
  .card{
    display: flex;
    flex-direction: column;
    width: 80vw;
  }
  .card-info{
    flex-direction: column;
    padding: 0;
    background-position: top;
  }

  .card-text{
    width: 95%;
  }

  .card-image{
    width: 100%;
    height: 250px;
    margin: 0;
  }

  .mobile{
    display: flex;
    top: 0;
    left: 0;
    width: 74vw;
    border: #D1D2D3 solid 1px;
    text-align: center;
    align-self: center;
    align-items: center;
    padding: 10px;
    justify-content: space-between;
  }

  .close-icon{
    background-image: url('./substract.svg');
    background-size: cover;
    background-position: center;
    width: 10px;
    height: 10px;
  }

  .open{
    background-image: url('./add.svg');
  }

  h5{
    width: 95%;
  }
}