z1.css

*
{
    padding: 0;
    margin: 0;
}
body { font-family: 'Montserrat'; }
/* positioning two sectons of header into two sides */

.header {
    position: fixed;
    width: 100%;
    height: 135px;
    background-color: #ffff; 
}
.header__navbar {
    display: flex;
    justify-content: flex-end;
    float: right;
    width: 40%;
    height: 100%;
}
.header__list {
    display: flex;
    list-style: none;
    padding-top: 70px;
}
.header__navcontent {
    margin-right: 30px;
}
.header__link {
    text-decoration: none;
    color:black;
    font-size: 23px;
    
}
.header__imgdiv {
    display: flex;
    justify-content: center;
    float: left;
    width: 60%;
    height: 100%;   
}
.header__logo {   
    padding-top: 50px;
    max-width: 30%;
    height: 40%;
}

/*making responsive the header content with respect to the decrease in  view port width*/

@media(max-width:800px)
{
   .header__list {
        display: grid;
        padding-top: 12px;
        align-content: center;
        justify-content: center;     
    }
    .header__navbar { justify-content: center; }
    .header__logo {
        padding-top: 20px;
        max-width: 120px;
        height: 30px;    
    }
}
@media(max-width:714px)
{
    .header__link { font-size:20px; }    
}
@media(max-width:600px)
{
    .header__link { font-size:17px; }    
}
@media(max-width:550px)
{
    .header__link { font-size:16px; }
    .header__navbar { justify-content: center; }
}
@media(max-width:400px)
{
    .header__imgdiv {
        display: flex;
        float: left;
        justify-content: flex-start;
        padding-left: 20px;
        width: 60%;
        height: 50px;   
    }
    .header {
        display: flex;
        flex-direction: column;
        height:161px; 
    }
    .header__navbar {
        justify-content: flex-end;
        height: 89px;
    }
    .header__link { font-size:15px; }
    .header__logo {
        padding-left:10px;
        padding-top:10px;
    }   
}

/* positioning and arrangement of welcome section */

.welcome {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url(https://intersog.com/wp-content/uploads/2020/08/Top-10-programming-languages-for-web-development-in-2020.jpg);
    color:#f0f0f0;
    line-height: 42px;
    width: 100%;
    height: 600px;
}
.welcome__name {
    font-size: 70px;
    color: black;
}
.welcome__description {
    font-size: 28px;
    padding-top: 25px;
    color: black;
}

/* making welcome section responsive with respect to window width changing */

@media(max-width:831px)
{
    .welcome { height:78vw; }
    
}
@media(max-width:580px)
{
    .welcome__name { font-size: 40px; }
    .welcome__description { font-size: 20px; }
}
/* arrangement of about section */

.about {
    background-color: #ffff;
    width: 100%;
    height: 320px;
}
.about__namediv {
    float: left;
    width: 30%;
    height: 88px;
}
.about__contentdiv {
    float: left;
    width: 70%;
    height: 60%;
    
}
.about__content {
    padding-top: 100px;
    padding-right: 100px;
    padding-left: 5px;
    font-size: 17px;
}
.about__name {
    padding: 100px 0 0 123px;
    font-size: 36px;
    font-weight: 600;
}
.about__button {
    padding: 8px;
    margin-top: 66px;
    width: 194px;
    border: none;
}

/* making welcome section responsive with respect to window width changing */

@media(max-width:818px)
{
    .about__contentdiv { width: 100%; }
    .about__content { padding-top: 20px; }
    .about__name { padding-top: 10px; }
    .about__namediv {
        height:80px;
        width:100%
    }
    .about__button {
        padding: 8px;
        margin: 7px 0 0 130px;
    }
    .about__content { padding-left: 55px; }
}

@media(max-width:550px)
{
    .about__namediv { height: 46px; }
}
@media(max-width:520px)
{
    .about__contentdiv { max-width: 438px; }
    .about__namediv {
        max-width:438px;
        height: 39px;
        
    }
    .about { width: 438px; }
    .about__content { font-size: 14px; }
}

/* arrangement ofthe project section */

.projects {
    padding: 5% 0 10% 0;
    text-align: center;
    background: url(https://i.ibb.co/cwLttq4/hero-banner.jpg)fixed;
    height: 100%;
}
.projects__heading {
    margin: 0 auto 5% auto;
    max-width: 44%;
    font-size: 35px;
    color: black;
}

/*all the projects are arranged inside the project__grid div*/

.projects__grid {
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-bottom: 6rem;
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
  }
  .projects__images {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .projects__title {
    padding: 11px;
    background: #303841;
}
.projects__tile {
text-decoration: none;
color: white;
font-size: 19px; 
}
.projects__code { visibility: hidden; }
.projects__tile:hover
.projects__code--active {
   visibility: visible;
   color:orange;
}
.projects__showall--active {
    padding: 12px;
    font-size: 19px;
    color: white;
    background-color: #303841;
    text-decoration: none;
}
.projects__showall--active:hover { background-color: #F44336; }
.projects__showall:hover i { transform: translateX(2px); }

/* arranging of contact section */

.contacts {
    padding-top: 12%;
    display: grid;
    justify-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    background-color: white;
    width: 100%;
    height: 100%;
    line-height: 3vw;
  }
  .contacts__list {
    display: flex;
    position: relative;
    padding-top: 12px;
    list-style: none;
}
.contacts__items { padding-right:20px; }
.contacts__para {
    font-size:20px;
    color: black;
    line-height: 2;
}
.contacts__links {
    text-decoration: none;
    color: black;
    font-size: 21px;
}
.contacts__details { padding-top: 1%; }
.contacts__heading {
    padding-bottom: 4px;
    font-size: 50px;
    font-weight: bold;
    color: black;
}
.contacts__items:hover { transform: translateY(3px); }

/* make contact section resposive with respect to view port.
*in this same limit width other containers also need to be adjust
*/
@media(max-width:800px)
{
    .contacts { line-height: 5vw; }
}
@media(max-width:444px)
{
   .contacts__list { display: flex; }
   .contacts__items { padding-top: 10px; }
   .contacts { padding-top: 0; }
   .footer__para { font-size: 12px; }
   .footer {
        display: grid;
        z-index: 1;
        width: 438px;
    }
    .welcome {
        width: 438px;
        height: 408px;
    }
    .projects { width: 438px; }
    .contacts {
        width: 438px;
        line-height: normal;
    }
    
}

/* adjusting the footer section */

.footer {
    display: flex;
    padding-bottom: 2%;
    margin-top: 100px;
    border-top: 2px solid #be3144;
    background: white;
    width: 100%;
}
.footer__para {
    padding-left: 200px;
    font-size: 16px;
}

/* making the footer section sections responsive from 700px of screen width */
@media(max-width:850px)
{
    .footer { margin-top:70px; }
    .footer__para {
    padding-left: 100px;
    }
}
@media(max-width:800)
{
    .footer__para {
    padding-left: 80px;
    font-size: 13px;
    }
}
@media(max-width:700px)
{
    .contacts__heading { font-size: 30px; }
    .footer__para { 
        font-size: 11px;
        padding-left: 40px;
    }
    .contacts__links { font-size: 15px; }
    .projects__heading { font-size: 20px; }
    
    
}
@media (max-width:450px)
{
    .footer { width:438px }
    .footer__para {
        padding-left: 20px;
        font-size: 6px;
    }    
}