gallery.css

 
* {
    box-sizing: border-box;
  }
  body{
    margin: 2%;
    
    background-image:url("bg.jpg");
    background-repeat: repeat-y;
    background-size:100%;
}
#image{
    color: rgb(92, 153, 140);
    font-family: 'Bellota Text';
    font-weight: 200;
    text-align: center;
  }
  .flip-card1 {
    padding-top: 20px;
    background-color: transparent;
    width: 850px;
    height: 400px;
    border: 0.5px solid #050505;
    perspective: 1000px; 
  }
  
  .flip-card-inner1 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
  }
  
  
  .flip-card1:hover .flip-card-inner1 {
    transform: rotateX(180deg);
  }
  

  .flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flip-card-front1 {
    
    background-image: url("painting.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 75px;
    font-weight: 150;
    font-family: 'Caveat', cursive;
    text-align: center;
    line-height: 400px;
    color: rgb(255, 255, 255);
  }
  
  .flip-card-back1 {
    background: linear-gradient(25deg, #f7b2c3 25%,#fdd3ab 50%);
    color: white;
    font-weight: 150;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    line-height: 300px;
    transform: rotateX(180deg);
  }
  
  .flip-card2 {
    float: right;
    padding-top: 60px;
    background-color: transparent;
    width: 700px;
    height: 400px;
    border: 0.5px solid #050505;
    perspective: 1000px; 
  }
  
  .flip-card-inner2 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
  }
  
  
  .flip-card2:hover .flip-card-inner2 {
    transform: rotateX(180deg);
  }
  

  .flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flip-card-front2 {
    background-image: url("scribble.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 70px;
    font-weight: 150;
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    line-height: 200px;
    color: rgb(53, 52, 52);
  }
  
  .flip-card-back2{
    background: linear-gradient(to left, #dbd9da 35%,#949494 50%);
    color: rgb(34, 33, 33);
    font-weight: 150;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    line-height: 300px;
    transform: rotateX(180deg);
  }
  
  .flip-card3{
    clear: right;
    padding-top: 80px;
    background-color: transparent;
    width: 1000px;
    height: 450px;
    border: 0.5px solid #050505;
    perspective: 1000px; 
  }
  
  .flip-card-inner3 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
  }
  
  
  .flip-card3:hover .flip-card-inner3 {
    transform: rotateX(180deg);
  }
  

  .flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .flip-card-front3 {
    background-image: url("others.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 60px;
    font-weight: 150;
    font-family: 'Caveat', cursive;
    font-family: 'Mansalva', cursive;
    text-align: left;
    padding-left:335px;
    line-height: 250px;
    color: rgb(212, 211, 211);
  }
  
  .flip-card-back3{
    background: linear-gradient(30deg, #b2f7e2 35%,#fdabcd 50%);
    color: white;
    font-weight: 150;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    line-height: 300px;
    transform: rotateX(180deg);
  }
  
  
#by{
    font-weight: 350;
    font-family: 'Bellota Text';
    color:rgba(122, 122, 122, 0.979);
    margin-top: 20px;
    font-size: 15px;
}

#head{
    background: linear-gradient(to right, #f8aada 35%,#f8be88 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Comfortaa';
    padding-left: 10px;
    line-height:75px;
   
}
.ig:hover {
    transform: scale(1.2);
   
}
.mail:hover {
    transform: scale(1.2);
   
}