style.css

/* Color Palette

#182747
#562B08
#647E68
#D8D8D8 */

* {
    padding: 0;
    margin: 0;
}
h1 {font-size: 48px;}
h2 {font-size: 42px;}
h3 {font-size: 36px;}
h4 {font-size: 30px;}
h5 {font-size: 24px;}
h6 {font-size: 18px;}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Heading part css */

.div_header {
    width: 100%;
    background-color: #ddd;
}
.header_intro {
    width: 50%;
    height: 100vh;
    background-color: #182747;
    color: #fff;
    float: left;
}

nav ul {
    list-style-type: none;
    padding-top: 40px;
}
.nav_home { background-color: #D8D8D8; }
.nav_home a { color: #182747; }

nav ul li {
    float: left;
    background-color: #182747;
}
nav ul li a {
    display: inline-block;
    color: #D8D8D8;
    text-decoration: none;
    padding: 10px 15px;
}
nav ul li:hover a {
    background-color: #D8D8D8;
    color: #182747;
    /* font-weight: bold; */
}
.header_intro nav, .header_intro p, h1 { 
    padding-left: 100px; 
    padding-right: 50px;
}
.header_intro p.greet {
    font-size: 30px;
    padding-top: 180px;
    /* padding-bottom: 50px; */
    /* background-color: #647E68; */
    color: #D8D8D8;
}
.header_intro h1 {
    padding-top: 20px;
    padding-bottom: 80px;
    color: #D8D8D8;
}

.header_intro p {
    color: #D8D8D8;
}

.header_img {
    width: 50%;
    height: 100vh;
    float: left;
}
.header_img  img {
    width: 100%;
    height: 100%;
}

main {
    clear: left;
    width: 100%;
    /* height: 600px; */
    /* background-color: #D8D8D8; */
}

/* About part css */

.about_me {
    background-color: #D8D8D8;
    color: #182747;
    height: 100vh;
    text-align: center;
}

.about_me h2 {
    padding-top: 60px;
    margin-bottom: 40px;
}

.about_me p {
    padding: 20px 100px;
    text-align: justify;
}
.about_me a {
    text-decoration: none;
    display: inline-block;
    color: #182747;
    background-color: #D8D8D8;
    padding: 10px 30px;
    margin-top: 60px;
    border: 1px solid #182747;
}
.about_me a:hover {
    background-color: #182747;
    color: #D8D8D8;
}

/* Portfolio part css */

.portfolio {
    background-color: #647E68;
    height: 100vh;
    /* padding-top: 20px; */
}

.div_portfolio {
    display: flex;
    justify-content:space-around;
    /* align-items: center; */
    padding: 0 80px;
}
.div_portfolio div {
    width: 30%;
    height: 200px;
    color: #182747;
    background-color: #D8D8D8;
    margin-top: 30px;
    border: 2px solid #D8D8D8;
    /* opacity: 0.7; */
}
.div_portfolio img {
    width: 100%;
    height: 100%;
}
.div_portfolio h4 {
    text-align: center;
    color: #D8D8D8;
    margin-top: 10px;
}

/* .div_portfolio div:hover {
    width: 33%;
    opacity: 1;
    border: 2px solid #D8D8D8;
} */

.portfolio h2 {
    text-align: center;
    /* background-color: #562B08; */
    color: #D8D8D8;
    padding-top: 20px;
    /* padding-bottom: 20px; */
}

.row_2 {
    margin-top: 30px;
}

/* Contact part css */

.contact {
    background-color: #562B08;
    color: #D8D8D8;
    height: 655px;
    display: flex;
}
.contact .div1 {
    width: 60%;
    /* text-align: center; */
}
.contact .div2 {
    width: 40%;
    background-color: #D8D8D8;
}
.contact .div1, .contact .div2 {
    /* width: 50%; */
    height: 655px;
}
.contact .div1 h2 {
    text-align: right;
    padding-right: 55px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.contact .left_padding {
    padding: 0 100px;
}
.contact .div1 h3 {
    padding-top: 40px;
}
.contact .div1 p {
    padding-top: 5px;
}
.contact .div1 ul {
    list-style-type: none;
    padding-top: 120px;
}
.contact .div1 ul li {
    float: left;
    margin-right: 10px;
    /* color: #fff; */
    background-color: #D8D8D8;
    padding: 4px 6px 2px;
    border-radius: 10px;
}

/* .icons li a img {
    background-color: #D8D8D8;
} */

.contact .div2 img {
    width: 100%;
    height: 100%;
}

/* .clearfix { clear: left; } */

/* Footer part css */

footer {
    height: 80px;
    background-color: #222;
    color: #D8D8D8;
    text-align: center;
    line-height: 80px;
}

/* Responsive Part CSS */

/* Screen Max 1024px */

@media only screen and (max-width: 1024px) {

    .header_intro nav, .header_intro p, h1 {
        padding-left: 60px;
        padding-right: 40px;
    }

    nav ul li a {
        font-size: 20px;
        padding: 10px;
    }

    .header_intro h1 {
        padding-bottom: 100px;
    }

    .header_intro p.roles {
        font-size: 24px !important;
    }
}

/* For Tablet Screen Max 768px */

@media only screen and (max-width: 768px) {

    .header_intro nav, .header_intro p, h1 {
        padding-left: 20px;
        padding-right: 20px;
    }

    nav ul {
        padding-top: 20px;
    }

    nav ul li a {
        padding: 8px 10px;
    }

    .header_intro p.greet {
        font-size: 24px;
    }

    .header_intro h1 {
        font-size: 36px;
    }

    /* .header_intro p {
        font-size: 18px !important;
    } */

    .header_img img {
        src: url('/Images/my_pic_3_edit_2.jpg') !important;
    }

    .about_me h2 {
        padding-top: 40px;
        margin-bottom: 10px;
        font-size: 36px;
    }

    .about_me p {
        padding: 20px;
    }

    .about_me p.md {
        padding-bottom: 0;
    }

    .about_me a {
        margin-top: 30px;
    }

    .portfolio h2 {
        font-size: 36px;
    }

    .div_portfolio {
        padding: 0 20px;
    }

    .div_portfolio div {
        height: 150px;
        margin-top: 20px;
    }

    .div_portfolio h4 {
        margin-top: 5px;
        font-size: 24px;
    }

    .contact {
        height: 100vh;
    }

    .contact .div1, .contact .div2 {
        width: 50%;
        height: 531px;
    }

    .contact .div1 h2 {
        font-size: 36px;
        text-align: left;
        padding-left: 20px;
    }

    .contact .div1 h3 {
        font-size: 30px;
    }

    .contact .left_padding {
        padding-left: 20px;
    }

    .contact .div1 ul {
        padding-top: 60px;
    }

    footer {
        height: 60px;
        line-height: 60px;
    }

}

/* Screen below 425px */

@media only screen and (max-width: 425px) {

    .header_intro {
        width: 100%;
    }

    nav ul {
        padding-top: 40px;
    }

    nav ul li a {
        padding: 5px 10px;
    }

    .header_intro nav, .header_intro p, h1 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header_intro p.greet {
        padding-top: 120px;
        font-size: 30px;
    }

    .header_intro h1 {
        padding-top: 40px;
        padding-bottom: 80px;
        font-size: 42px;
    }

    .header_intro p {
        font-size: 20px !important;
    }

    .header_img {
        width: 100%;
        height: 100%;
    }

    .about_me {
        height: 650px;
    }

    .about_me h2 {
        padding-top: 20px;
        margin-bottom: 20px;
        font-size: 36px !important;
    }

    .about_me p {
        padding-top: 0;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 16px !important;
        text-align: start;
    }

    .about_me p.md {
        padding-bottom: 20px;
    }

    .about_me a {
        margin-top: 40px;
        padding: 5px 20px;
        border-radius: 5px;
    }

    .portfolio {
        height: 1680px;
    }

    .portfolio h2 {
        font-size: 36px !important;
    }

    .div_portfolio {
        display: block;
        padding: 0 40px;
    }

    .div_portfolio div {
        width: 100%;
        height: 200px;
        margin-top: 20px;
        margin-bottom: 60px;
    }

    .div_portfolio h4 {
        margin-top: 0;
        font-size: 24px !important;
        margin-top: 10px;
        /* background-color: tomato; */
    }

    .contact {
        height: 600px;
    }

    .contact .div1 {
        width: 100%;
        height: 560px;
    }

    .contact .div1 h2 {
        text-align: center;
        padding-right: 0;
        font-size: 36px !important;
        padding-bottom: 40px;
    }

    .contact .div1 h3 {
        padding-top: 20px;
        font-size: 30px;
        /* text-align: center; */
        padding-left: 20px;
    }

    .contact .div1 p {
        padding-top: 10px;
        /* padding-left: 130px; */
        text-align: center;
    }

    .contact .left_padding {
        padding: 0;
    }

    .contact .div1 ul {
        padding-top: 100px;
        padding-left: 20px;
    }

    .contact .div2 {
        display: none;
    }

    footer {
        line-height: normal;
    }

    footer p {
        padding: 10px 30px;
    }
}