<div class="card">
  <div class="front">
    <h1 class="front__heading">Hi i am Shubham Tiwari</h1>
    <p class="front__description">I'm a front-end developer with experience in the following technologies.</p>
    <ul class="front__list">
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
      <li>TailwindCSS</li>
      <li>Bootstrap</li>
      <li>React JS</li>
    </ul>
  </div>
  <div class="back">
    <h1 class="back__heading">Contacts</h1>
    <ul class="back__list">
      <li><i class="fa-brands fa-facebook"></i></li>
      <li><i class="fa-brands fa-instagram"></i></li>
      <li><i class="fa-brands fa-linkedin"></i></li>
      <li><i class="fa-brands fa-twitter"></i></li>
    </ul>
  </div>
  <div class="contact__button__container">
  <button class="contact__toggle">Contact</button>
  </div>
</div>.

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration:none;
  box-sizing:border-box;
}
body{
  height:100vh;
  background-color:lightgrey;
  display:grid;
  place-items:center;
}

/* Card Styling */
.card{
  position:relative;
  background-image:linear-gradient(to right,rgb(0,0,0,0.4), rgb(0,0,0,0.7)), url("data:image/jpeg;base64,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");
  background-size:cover;
  padding:2rem 1.5rem;
  color:white;
  text-shadow:1px 1px black;
  font-family:sans-serif;
  width:300px;
  min-height:400px;
  transition:all 0.5s linear;
  border-radius:8px;
  box-shadow:5px 5px 25px 7px rgb(0,0,0,0.5)
}

/* Front side Styling */
.front__heading,.back__heading{
  font-size:1.5rem;
}
.front__description,.back__description{
  margin-top:1.25rem;
  max-width:20rem;
  word-spacing:4px
}
.front__list,.back__list{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.75rem;
}
.front__list > li{
  padding:0.3rem 0.6rem;
  background-color:whitesmoke;
  color:black;
  text-shadow:0px 0px;
  border-radius:5px;
}


/* Backside Styling */
.back{
  display:none;
}
.back__heading{
  text-align:center;
}
.back__list{
  flex-direction:column;
  align-items:center;
  gap:0;
}
.back__list > li{
  padding:1rem;
  border-radius:50%;
  font-size:2rem;
  cursor:pointer;
}

/* Toggle Button */
.contact__button__container{
  position:absolute;
  width:85%;
  bottom:1rem;
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}
.contact__toggle{
  border:none;
  background-color:darkslateblue;
  color:white;
  padding:0.4rem 1rem;
  border-radius:5px;
  cursor:pointer;
}


.show{
  display:block
}
.hide{
  display:none;
}

.flip__card{
  transform:rotateY(-360deg)
}

.change_bg{
  background-image:linear-gradient(to right,rgb(0,0,0,0.1), rgb(0,0,0,0.5)),url("https://i.pinimg.com/originals/e9/e9/cf/e9e9cf900af2607f731942f973fc787b.png")
}

.bg-brown{
  background-color:brown;
}

/* Media Queries */
@media screen and (max-width:768px){
  .card{
    margin-top:1rem;
  width:250px;
  }
}

const card = document.querySelector(".card");
const frontSide = document.querySelector(".front");
const backSide = document.querySelector(".back");
const toggleButton = document.querySelector(".contact__toggle")

toggleButton.addEventListener("click",(e) => {
  card.classList.toggle("flip__card")
  card.classList.toggle("change_bg")
  frontSide.classList.toggle("hide")
  backSide.classList.toggle("show")
  e.target.textContent = e.target.textContent === "Contact" ? "User Info" : "Contact"
  e.target.classList.toggle("bg-brown")
})