CSS CODE

                    *{
                        margin: 0;padding: 0;box-sizing: border-box;
                    }

                    @media screen and (max-width: 600px) {
                        header h2{
                            background-color: rgba(0,0,0,0.9);
                            padding: 20px 0px;
                            text-align: center;
                            text-transform: capitalize;
                            font-weight: 400;
                            font-size: 2.5rem;
                            color: #eee;
                           }
                           
                           nav{
                               position: relative;
                               display: flex;
                               justify-content: space-between;
                               align-items: center;
                               height: 50px;
                               background-color: rgba(0,0,0,0.9);
                               padding: 0px 20px;
                               border-top: 1px solid #eee;
                               border-left: 1px solid #eee;
                               border-right: 1px solid #eee;
                               border-radius: 5px;
                               z-index: 1;
                               transition: all 0.5s ease;
                           
                           }
                           
                           nav ul{
                               position: absolute;
                               top: 50px;
                               left: 0;
                               width: 0%;
                               height: 60vh;
                               background-color: rgba(0,0,0,0.9);
                               transition: all 0.5s ease;
                               overflow: hidden;
                               z-index: 1;
                           
                           }
                           .show{
                               transition: all 0.5s ease;
                               width: 100%;
                           }
                           nav ul li{
                               list-style: none;
                           }
                           nav ul li a{
                               color: white;
                               text-decoration: none;
                               display: block;
                               border: 1px solid #eee;
                               font-size: 15px !important;
                               font-weight: 300;
                               font-family: Arial, Helvetica, sans-serif;
                               padding: 10px 20px;
                               margin-top: 15px;
                               transition: all 0.5s ease;
                           }
                           nav ul li a:hover{
                               background-color: rgb(34, 1, 43);
                           }
                           nav a:nth-child(1){
                               display: block;
                               text-decoration: none;
                               font-size: 33px;
                               color: white;
                               font-weight: 400;
                               font-family: Arial, Helvetica, sans-serif;
                               border-radius: 5px;
                           
                           }
                           nav a:nth-child(3){
                               display: block;
                               text-decoration: none;
                               font-size: 33px;
                               color: white;
                               font-weight: 400;
                               font-family: Arial, Helvetica, sans-serif;
                               border-radius: 5px;
                               cursor: pointer;
                               transition: all 0.5s ease;
                               padding: 0px 15px;
                               border: 1px solid #eee;
                           
                           }
                           nav a:nth-child(3):hover{
                               box-shadow: 1px 1px 1px 1px rgba(236, 144, 78, 0.87);
                           }
                           
                           nav.scrolled{
                               width: 100%;
                               height: 100px;
                               top: 0;
                               position: sticky;
                               position: fixed;
                               background-color: rgba(0,0,0,0.8);
                           
                           }
                           nav.scrolled ul{
                               top: 100px;
                               background-color: rgba(0,0,0,0.8);
                           }
                           
                           /* slider=carousel */
                           .carousel-slider{
                               position: relative;
                               overflow: hidden;
                           }
                           
                           .slider{
                               position: relative;
                               display: none;
                               transition: all 0.5s ease;
                           }
                           .img{
                               width: 100%;
                               height: auto;
                               object-fit: cover;
                               aspect-ratio: 321*21;
                           }
                           .slider-content{
                               position: absolute;
                               top: 50%;
                               left: 50%;
                               transform: translate(-50%, -50%);
                           
                           }
                           .slider-content h2{
                               background-color: rgba(0,0,0,0.5);
                               padding: 50px;
                               color: white;
                           }
                           
                           /* nature=========== */
                           .home-nature{
                               padding: 10px 10px;
                               display: grid;
                               grid-template-columns: 100%;
                               justify-content: center;
                               gap: 20px;
                               overflow: hidden;
                           }
                           .my-nature{
                               display: grid;
                               grid-template-rows: auto;
                               flex-direction: column;
                               padding: 20px 10px;
                               row-gap: 20px;
                           }
                           .nature-big{
                               display: grid;
                               grid-template-rows: auto;
                               gap: 20px;
                           }
                           .nature-small{
                               display: grid;
                               grid-template-rows: auto;
                               gap: 20px;
                           }
                           .nature{
                               border: 1px solid #bbb;
                               border-radius: 10px;
                               padding: 10px;
                           }
                           
                           .nature-content{
                               padding-bottom: 20px;
                           }
                           
                           /* image gallery========= */
                           .my-nature-gallery{
                               padding: 20px 10px;
                               display: grid;
                               gap: 10px;
                               grid-template-rows: auto;
                               justify-content: center;
                               overflow: hidden;
                           }
                           .nature-img{
                               border-radius: 10px;
                           }
                           
                           /* about-nature */
                           .nature-about{
                               padding: 10px 20px;
                               display: grid;
                               grid-template-rows: auto;
                               justify-content: center;
                               gap: 20px;
                               overflow: hidden;
                           }
                           .bor-pa-ra{
                               border: 1px solid #bbb;
                               border-radius: 10px;
                               padding: 10px;
                           }
                           .h2{
                               font-weight: 400;
                               font-family: Arial, Helvetica, sans-serif;
                               font-size: 32px;
                           }
                           .py-2{
                             padding: 20px 0px;
                           }
                           .px-2{
                               padding: 0px 20px;
                           }
                           .pb-2{
                               padding-bottom: 20px;
                           }
                           .mt-2{
                               margin-top: 20px;
                           }
                           .bg-primary{
                               background-color: dodgerblue;
                           }
                           .text-center{
                               text-align: center;
                           }
                           
                           .contact-me{
                               display: flex;
                               justify-content: center;
                               background-color: #fff;
                           }
                           form{
                               width: 100%;
                               padding: 20px 10px;
                               display: flex;
                               flex-direction: column;
                               gap: 20px;
                               background-color: #eee;
                               padding: 5%;
                           }
                           
                           .input-div{
                               display: flex;
                               flex-direction: column;
                           }
                           
                           input[type="text"],input[type="email"],input[type="number"],textarea[type="text"]{
                               width: 100%;
                               padding: 20px 10px;
                               border: none;
                               outline: none;
                               border-radius: 5px;
                               font-size: 16px;
                           }
                           label{
                               margin-bottom: 10px;
                               font-weight: 600;
                               font-size: 20px;
                           
                           }
                           
                           input[type="submit"]{
                               width: 100%;
                               padding: 20px 10px;
                               border: none;
                               outline: none;
                               border-radius: 5px;
                               font-size: 16px;
                               background-color: #005500;
                               color: white;
                               cursor: pointer;
                               transition: all 0.5s ease;
                           }
                           input[type="submit"]:hover{
                               background-color: transparent;
                               border: 1px solid #005500;
                               color: #005500;
                           }
                           
                           /* footer============ */
                           footer{
                               background-color: black;
                               color: white;
                               padding: 50px 0px;
                               text-align: center;
                           }
                           footer a{
                               text-decoration: none;
                               color: white;
                           }
                           
                           .message-modal{
                               top: 0px;
                               padding: 100px;
                               width: 100%;
                               height: 100%;
                               position: fixed;
                               background: rgb(0,0,0);
                               background-color: rgba(0,0,0,0.5);
                               overflow: auto;
                               display: none;
                               z-index: 1;
                           }
                           .message-modal span{
                               font-size: 25px;
                               background-color: #eb0909;
                               color: white;
                               padding: 0px 10px;
                               border-radius: 5px;
                               position: absolute;
                               top: 71%;
                               left: 92%;
                               transform: translate(-50%, -50%);
                               cursor: pointer;
                               z-index: 1;
                           }
                           .message-modal span:hover{
                               background-color: transparent;
                               color: red;
                               border: 1px solid red;
                               border-radius: 5px;
                           }
                           .message-content{
                               width: 95%;
                               margin: auto;
                               position: absolute;
                               top: 82%;
                               left: 50%;
                               transform: translate(-50%, -50%);
                               border: 1px solid white;
                               border-radius: 5px;
                               padding: 2%;
                               color: white;
                               overflow: hidden;
                           }
                    }

                    @media screen and (min-width: 600px) {
                    
                    header h2{
                     background-color: rgba(0,0,0,0.9);
                     padding: 20px 0px;
                     text-align: center;
                     text-transform: capitalize;
                     font-weight: 400;
                     font-size: 3rem;
                     color: #eee;
                    }
                    
                    nav{
                        position: relative;
                        display: grid;
                        grid-template-columns: auto auto;
                        justify-content: space-between;
                        height: 50px;
                        line-height: 50px;
                        background-color: rgba(0,0,0,0.9);
                        border-top: 1px solid #eee;
                        border-left: 1px solid #eee;
                        border-right: 1px solid #eee;
                        border-radius: 5px;
                        padding: 0px 20px;
                        z-index: 1;
                    
                    }
                    nav ul{
                        position: relative;
                        width: 100%;
                        background-color: rgba(0,0,0,0.9);
                        transition: all 0.5s ease;
                        overflow: hidden;
                        z-index: 1;
                    
                    }
                    
                    nav ul li{
                        display: inline-block;
                        list-style: none;
                    }
                    nav ul li a{
                        color: white;
                        text-decoration: none;
                        display: block;
                        border: 1px solid #eee;
                        font-size: 15px !important;
                        font-weight: 300;
                        font-family: Arial, Helvetica, sans-serif;
                        padding: 0px 10px;
                        transition: all 0.5s ease;
                    }
                    nav ul li a:hover{
                        background-color: rgba(50,50,50,0.9);
                    }
                    nav a:nth-child(1){
                        display: block;
                        text-decoration: none;
                        font-size: 33px;
                        color: white;
                        font-weight: 400;
                        font-family: Arial, Helvetica, sans-serif;
                        border-radius: 5px;
                    
                    }
                    nav a:nth-child(3){
                        display: none;
                    }
                    
                     nav.scrolled{
                        width: 100%;
                        top: 0;
                        position: sticky;
                        position: fixed;
                        background-color: rgba(0,0,0,0.8);
                        height: 100px;
                        line-height: 100px;
                    }
                    nav.scrolled ul{
                        background-color: rgba(0,0,0,0.8);
                    }
                    
                    
                    /* slider=carousel */
                    .carousel-slider{
                        position: relative;
                        overflow: hidden;
                    }
                    
                    .slider{
                        position: relative;
                        display: none;
                        transition: all 0.5s ease;
                    }
                    .img{
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                        aspect-ratio: 321*21;
                    }
                    .slider-content{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    
                    }
                    .slider-content h2{
                        background-color: rgba(0,0,0,0.5);
                        padding: 100px;
                        color: white;
                    }
                    
                    /* nature=========== */
                    .home-nature{
                        padding: 10px 40px;
                        display: grid;
                        grid-template-columns: 33% 33% 33%;
                        justify-content: center;
                        gap: 20px;
                        overflow: hidden;
                    }
                    .my-nature{
                        padding: 10px 40px;
                        display: grid;
                        grid-template-columns: 80% 20%;
                        justify-content: center;
                        gap: 20px;
                        overflow: hidden;
                    }
                    .nature-big{
                        display: grid;
                        grid-template-rows: auto;
                        gap: 20px;
                    }
                    .nature-small{
                        display: grid;
                        grid-template-rows: auto;
                        gap: 20px;
                    }
                    .nature{
                        border: 1px solid #bbb;
                        border-radius: 10px;
                        padding: 10px;
                    }
                    .nature-content{
                        padding-bottom: 20px;
                    }
                    
                    /* image gallery========= */
                    .my-nature-gallery{
                        padding: 10px 25px;
                        display: grid;
                        gap: 10px;
                        grid-template-columns: auto auto 50% auto;
                        justify-content: center;
                        overflow: hidden;
                    }
                    .nature-img{
                        border: 1px solid #bbb;
                        border-radius: 10px;
                        padding: 10px;
                    }
                    
                    /* about-nature */
                    .nature-about{
                        padding: 10px 40px;
                        display: grid;
                        grid-template-columns: 60% 40%;
                        justify-content: center;
                        gap: 20px;
                        overflow: hidden;
                    }
                    .bor-pa-ra{
                        border: 1px solid #bbb;
                        border-radius: 10px;
                        padding: 10px;
                    }
                    .h2{
                        font-weight: 400;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 32px;
                    }
                    .py-2{
                      padding: 20px 0px;
                    }
                    .px-2{
                        padding: 0px 20px;
                    }
                    .pb-2{
                        padding-bottom: 20px;
                    }
                    .mt-2{
                        margin-top: 20px;
                    }
                    .bg-primary{
                        background-color: dodgerblue;
                    }
                    .text-center{
                        text-align: center;
                    }
                    
                    
                    /* contact============ */
                    
                    .contact-me{
                        display: flex;
                        justify-content: center;
                        background-color: #fff;
                    }
                    form{
                        width: 50%;
                        margin: auto;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        background-color: #eee;
                        padding: 5%;
                    }
                    
                    .input-div{
                        display: flex;
                        flex-direction: column;
                    }
                    
                    input[type="text"],input[type="email"],input[type="number"],textarea[type="text"]{
                        width: 100%;
                        padding: 20px 10px;
                        border: none;
                        outline: none;
                        border-radius: 5px;
                        font-size: 16px;
                    }
                    label{
                        margin-bottom: 10px;
                        font-weight: 600;
                        font-size: 20px;
                    
                    }
                    
                    input[type="submit"]{
                        width: 100%;
                        padding: 20px 10px;
                        border: none;
                        outline: none;
                        border-radius: 5px;
                        font-size: 16px;
                        background-color: #005500;
                        color: white;
                        cursor: pointer;
                        transition: all 0.5s ease;
                    }
                    input[type="submit"]:hover{
                        background-color: transparent;
                        border: 1px solid #005500;
                        color: #005500;
                    }
                    /* footer============ */
                    footer{
                        background-color: black;
                        color: white;
                        padding: 50px 0px;
                        text-align: center;
                    }
                    footer a{
                        text-decoration: none;
                        color: white;
                    }
                    
                    .message-modal{
                        top: 0px;
                        padding: 100px;
                        width: 100%;
                        height: 100%;
                        position: fixed;
                        background: rgb(0,0,0);
                        background-color: rgba(0,0,0,0.5);
                        overflow: auto;
                        display: none;
                        transition: all 0.5s ease;
                        z-index: 1;
                    }
                    .message-modal span{
                        font-size: 25px;
                        background-color: #eb0909;
                        color: white;
                        padding: 0px 10px;
                        border-radius: 5px;
                        position: absolute;
                        top: 71%;
                        left: 71%;
                        transform: translate(-50%, -50%);
                        cursor: pointer;
                        z-index: 1;
                    }
                    .message-modal span:hover{
                        background-color: transparent;
                        color: red;
                        border: 1px solid red;
                        border-radius: 5px;
                    }
                    .message-content{
                        width: 95%;
                        margin: auto;
                        position: absolute;
                        top: 82%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        padding: 1%;
                        color: white;
                    }
                }

JAVASCRIPT CODE


                    <script>
                        const header = document.querySelector('nav');
                    
                            window.addEventListener('scroll', () => {
                                if (window.scrollY > 100) { // Adjust this value based on when you want the color to change
                                    header.classList.add('scrolled');
                                } else {
                                    header.classList.remove('scrolled');
                                }
                            });
                    
                    
                            function myNavFunction(){
                                document.querySelector("nav ul").classList.toggle("show");
                            }
                    
                            var myIndex = 0;
                            carousel();
                    
                            function carousel(){
                                var i;
                             var x = document.querySelectorAll(".slider");
                             for(i = 0; i < x.length; i++){
                                x[i].style.display="none";
                             }
                             myIndex++
                             if(myIndex > x.length) {myIndex = 1}
                             x[myIndex-1].style.display="block";
                             setTimeout(carousel, 2000);    
                            }
                    
                    
                            var message = document.querySelector(".message-modal");
                         
                            function myloadFunction(){
                                message.style.display="block";
                            }
                    
                            function messageCloseFunction(){
                                document.querySelector(".message-modal").style.display="none";
                            }
                        </script>

HTML CODE

CSS CODE

JAVASCRIPT CODE