virus.css

*{
    margin: 0;
    padding: 0;
}
::-webkit-scrollbar{
    background: rgb(173, 238, 148);
    width: 14px;
  }

.banner{
    margin-top: 0px;
    width: 100%;
    height: 18vh;
    background: linear-gradient(
          to bottom,
          #757373,
          aqua);
 }
 .logo{
  
    border-radius: 80px;
    position: relative;
    right: 456px;
    bottom: 30px;
    cursor: pointer;
}
 .konu img
 {
    width: 400px; 
    height: 400px; 
    float: left; 
    margin-right: 20px;
    position: relative;   
    margin-left: 420px;
    margin-top: 50px;
    
}
.resim2 img{
  
    width: 400px; 
    height: 400px; 
    float: right; 
    margin-right: 420px;
    position: relative;   
    margin-left: 20px;
    
  }
.konu h1{ /*baslik*/
    margin-bottom: 5px;
  font-family: Roboto, sans-serif;
  font-size: 28px;
  position: relative;
  right: 450px;
  font-size: 2rem;
  color: rgb(19, 24, 62);
}
.konu p{ /*paragraf*/
    text-align: left;
    float: none;
      line-height: 1.6;
      font-family: Roboto, sans-serif;
      font-size: 16px;
      margin-right: 420px;
      margin-left: 420px;
      position: relative;
      left: 0px;
      padding-bottom: 10px;
}
.resim2 p{
        text-align: left;
        float: none;
          line-height: 1.6;
          font-family: Roboto, sans-serif;
          font-size: 16px;
          margin-right: 420px;
          margin-left: 420px;
          position: relative;
          left: 0px;
          padding-bottom: 10px;
}
 body{
    text-align: center;
    background-color: white;
    
}

 footer {/*lisans*/
    background-color: #f8f9fa;
    padding: 20px;
    text-align: middle;
}

.btn {/*anasayfa butonu*/
    position: absolute;
    top: 20px;
    right: 35px;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 2.5em;
    display: inline-block;
    border-radius: 6em;
    transition: all .2s;
    border: none;
    font-family: inherit;
    font-weight: 500;
    color: black;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
   }
   
   .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   }
   
   .btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   }
   
   .btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
   }
   
   .btn::after {
    background-color: #fff;
   }
   
   .btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
   }
   .main {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  
  .up {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }
  
  .down {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
  }
  
  .card1 {/*insta*/
    position: fixed;
    right: 110px;
    bottom: 130px;
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 90px 5px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .instagram {
    margin-top: 1.5em;
    margin-left: 1.2em;
    fill: #cc39a4;
  }
  
  .card2 {/*tw*/
    position: fixed;
    right: 10px;
    bottom: 130px;
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 90px 5px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .twitter {
    margin-top: 1.5em;
    margin-left: -.9em;
    fill: #03A9F4;
  }
  
  .card3 {/*ghub*/
    position: fixed;
    right: 110px;
    bottom: 30px;
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 5px 90px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .github {
    margin-top: -.6em;
    margin-left: 1.2em;
  }
  
  .card4 {/*dc*/
    position: fixed;
    right: 10px;
    bottom: 30px;
    width: 90px;
    height: 90px;
    outline: none;
    border: none;
    background: white;
    border-radius: 5px 5px 90px 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: .2s ease-in-out;
  }
  
  .discord {
    margin-top: -.9em;
    margin-left: -1.2em;
    fill: #8c9eff;
  }
  
  .card1:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #cc39a4;
  }
  
  .card1:hover .instagram {
    fill: white;
  }
  
  .card2:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #03A9F4;
  }
  
  .card2:hover .twitter {
    fill: white;
  }
  
  .card3:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: black;
  }
  
  .card3:hover .github {
    fill: white;
  }
  
  .card4:hover {
    cursor: pointer;
    scale: 1.1;
    background-color: #8c9eff;
  }
  
  .card4:hover .discord {
    fill: white;
  }