design.css

ul li a
{
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    font-family: 'KoHo' ,sans-serif;
    font-weight: 500;

}
ul li a:hover,ul li .active {
    background: aliceblue !important;
    color: #393e46 !important;


}
section{
    padding: 100px 0;
}
.about, .work, .skills, .contact, .footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content,
.work .work-content,
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -12px;
    font-size: 20px;
    left: 50%;
    padding: 5px;
    color: crimson;
    background: #fff;
    transform: translateX(-50%);
}

.home{
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0, 0, 0, 0.7)), url("hogwards.jpg") no-repeat center;
    background-size: cover;  
    display: flex;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
    margin: auto 0 auto 40px;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: crimson;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 25px;
    padding:  12px 36px;
    margin-top: 20px;
    border-radius: 5px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: crimson;
    background: none;
}

/* About Section Styling */
.about, .work{
    font-family: 'Poppins', sans-serif;
}
.about .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
.about .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
.about .title::after{
    position: absolute;
    bottom: -12px;
    font-size: 20px;
    left: 50%;
    padding: 5px;
    color: crimson;
    background: #fff;
    transform: translateX(-50%);
}
.about .title::after{
    content: 'who I am';
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 300px;
    width: 350px;
    object-fit: cover;
    border-radius: 50px;
    
    -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: crimson;
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 20px;
    padding:  8px 30px;
    margin-top: 20px;
    border-radius: 5px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: crimson;
    background: none;
}

/* Work Section Start */
.work{
    color: #fff;
    background: #111;
}
.work .title::before{
    background: #fff;
}
.work .title::after{
    background: #111;
    content: 'what I do';
}
.work .work-content .card{
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 20px 25px;
    cursor: pointer;
}
.work .work-content .card:hover{
    background: gray;
}
.work .work-content .card .box{
    transition: all 0.3s ease;
}
.work .work-content .card:hover .box{
    transform: scale(1.05);
}
.work .work-content .card .text{
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0 7px 0;
}

/* Skills Section Styling */
.skills .title::after{
    content: 'what I know';
}
.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.skills .skills-content .left p{
    text-align: justify;
}
.skills .skills-content .left a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    padding:  8px 16px;
    margin-top: 20px;
    border-radius: 5px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: crimson;
    background: none;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-size: 18px;
    font-weight: 500;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgray;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 80%;
    left: 0;
    top: 0;
    background: crimson;
}
.skills .skills-content .right .html::before{
    width: 90%;
}
.skills .skills-content .right .css::before{
    width: 85%;
}
.skills .skills-content .right .js::before{
    width: 60%;
}
.skills .skills-content .right .python::before{
    width: 75%;
}
.skills .skills-content .right .dsa::before{
    width: 70%;
}


/* Responsive Media Querry */
@media(max-width: 1300px){
    .home .max-width{
        margin-left: 0px;
    }
}
@media(max-width: 947px){
    .max-width{
        padding: 0 50px;
    }
    .home .home-content .text-1{
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .right .text{
        font-size: 22px;  
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .left img{
        height: 280px;
        width: 300px;
        object-fit: cover;
        border-radius: 200px;
    }
    .work .work-content .card,
    .skills .skills-content .column{
        width: 100%;
        margin-bottom: 20px;
    }
} 
@media(max-width: 681px){
    .max-width{
        padding: 0 25px;
    }
    .navbar .logo a{
        font-size: 23px;
    }
    .home .home-content .text-1{
        font-size: 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 30px;
    }
    .navbar .menu li a{
        font-size: 12px;
    }
    .home .home-content a{
        font-size: 17px;
    }
    footer p{
        font-size: .9rem;
    }
}  
@media(max-width: 400px){
    .max-width{
        padding: 0 25px;
    }
    .navbar .logo a{
        font-size: 20px;
    }
    .home .home-content .text-1{
        font-size: 20px;
    }
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 25px;
    }
    .navbar .menu li a{
        font-size: 8px;
    }
    .home .home-content a{
        font-size: 13px;
    }
} 
@media(max-width: 370px){
    .max-width{
        padding: 0 20px;
    }
    .navbar .logo a{
        font-size: 18px;
    }
    .home .home-content .text-1{
        font-size: 18px;
    }
    .home .home-content .text-2{
        font-size: 40px;
    }
    .home .home-content .text-3{
        font-size: 23px;
    }
    .navbar .menu li a{
        font-size: 6px;
    }
    .home .home-content a{
        font-size: 10px;
    }
}  

footer {
    /* place on the bottom */
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
  
    background: #252a47;
    display: grid;
    place-items: center;
    padding: 50px;
  }

  main {
    /* make sure to cover the screen */
    min-height: 100vh;
  
    /* need a solid bg to hide the footer */
    background: white;
  
    /* put on top */
    position: relative;
    z-index: 1;
  
    font: 16px/1.4 system-ui, sans-serif;
  }


  .site-footer
  {
    background-color:#26272b;
    padding:45px 0 20px;
    font-size:19px;
    line-height:24px;
    color:#737373;
  }
  .site-footer hr
  {
    border-top-color:#bbb;
    opacity:0.5
  }
  .site-footer hr.small
  {
    margin:20px 0
  }
  .site-footer h6
  {
    color:#fff;
    font-size:26px;
    text-transform:uppercase;
    margin-top:5px;
    letter-spacing:2px
  }
  .site-footer a
  {
    color:#737373;
  }
  .site-footer a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links
  {
    padding-left:0;
    list-style:none
  }
  .footer-links li
  {
    display:block
  }
  .footer-links a
  {
    color:#737373
  }
  .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links.inline li
  {
    display:inline-block
  }
  .site-footer .social-icons
  {
    text-align:right
  }
  .site-footer .social-icons a
  {
    width:40px;
    height:40px;
    line-height:40px;
    margin-left:6px;
    margin-right:0;
    border-radius:100%;
    background-color:#33353d
  }
  .copyright-text
  {
    margin:0
  }
  @media (max-width:991px)
  {
    .site-footer [class^=col-]
    {
      margin-bottom:10px
    }
    .site-footer
    {
       font-size: 14px;
       line-height: 18px;
    }
    .site-footer h6
    {
       font-size: 18px;
    }
    .site-footer hr.small
    {
        margin: 10px 0;
    }
    .site-footer hr
    {
        margin: 5px 0;
    }
    #navedit
    {
        min-height: 60px !important;
    }
  
  }
  @media (max-width:767px)
  {
    .site-footer
    {
      padding-bottom:0
    }
    .site-footer .copyright-text,.site-footer .social-icons
    {
      text-align:center
    }
  }
  .social-icons
  {
    padding-left:0;
    margin-bottom:0;
    list-style:none
  }
  .social-icons li
  {
    display:inline-block;
    margin-bottom:4px
  }
  .social-icons li.title
  {
    margin-right:15px;
    text-transform:uppercase;
    color:#96a2b2;
    font-weight:700;
    font-size:13px
  }
  .social-icons a{
    background-color:#eceeef;
    color:#818a91;
    font-size:16px;
    display:inline-block;
    line-height:44px;
    width:44px;
    height:44px;
    text-align:center;
    margin-right:8px;
    border-radius:100%;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
  }
  .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  {
    color:#fff;
    background-color:#29aafe
  }
  .social-icons.size-sm a
  {
    line-height:34px;
    height:34px;
    width:34px;
    font-size:14px
  }
  .social-icons a.facebook:hover
  {
    background-color:dodgerblue;
      
  }
  .social-icons a.instagram:hover
  {
    background-color:#fb39a1;
  }
  .social-icons a.github:hover
  {
    background-color:lightseagreen;
      
  }
  .social-icons a.linkedin:hover
  {
    background-color: blueviolet;
  }

  .fa-facebook:before
  {
      font-size: 40px;

  }
  .fa-instagram:before
  {
      font-size: 40px;

  }
  .fa-github:before
  {
      font-size: 40px;

  }

    .fa-linkedin:before
  {
      font-size: 40px;

  }