EVOLUTION-NINJA

Edit File: landingnew.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Nirmithi Kendra</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap">
</head>
<style>
    .headlogonir {
        background-image: linear-gradient(#4B0B0B, #7B0D0D);
        width: 100%;
        height: auto;
        text-align: center;
        padding: 15px
    }

.mainbannernir {
        width: 100%;
        height: 780px;
        overflow-x: hidden;
    }

.bannernirmithidetail {
        background-image: url('public/assets/images/Banner (1).png');
        background-repeat: no-repeat;
        /* background-position: center center; */
        background-size: cover;
        width: 100%;
        height: 100%;
        position: relative;
    }

.bannernirhedaing {
        font-size: 60px;
        color: #001740;
        font-weight: 600;
        font-family: 'Poppins';
        width: fit-content;

}

.bannerheadingdetail {
        font-size: 24px;
        font-family: 'poppins', sans-serif;
        color: #001740;
        font-weight: 500;
        width: fit-content;
    }

.loginbuttonbanner {
        border: none;
        outline: none;
        background-image: linear-gradient(to right, #056900, #41CB00);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        padding: 6px 14px;
        border-radius: 67px;
        font-family: 'Poppins';
        font-size: 21px;
        font-weight: 500;
        margin-top: 24px;
    }

.bannerloginbtn {
        width: fit-content
    }

.bannerloginbtn a{
      text-decoration:none;
    }

.bannerloginbtn a:hover{
    color:green;
    }

.bannerdetails {
        position: relative;
        top: 23%;
        left: 14%;
    }

.projleaders {
        width: 75%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

.projheaddetail {
        background-image: url('public/assets/images/About.png');
        background-repeat: no-repeat;
        background-position: bottom center;
        /* background-size: cover; */
        margin-top: 20px;
        padding-block: 20px;
        height: 508px;

}

.mainleaderdet {
        width: 330px;
        background-size: contain;
        height: auto;
        background-image: url('public/assets/images/Rectangle\ 4137.png');
        background-repeat: no-repeat;
        background-position: top center;
        text-align: center;
        padding: 8px 5px;
        border-radius: 14px;
        background-color: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        transition: transform 0.6s;
    }

.headleadimg {
        margin-top: 20px;
    }

.ledname {
        font-size: 20px;
        color: #00337D;
        font-weight: 600;
        font-family: 'Poppins';
    }

.leadersdetailscontent {
        margin-top: 18px;
    }

.leddepartment {
        font-size: 15px;
        color: #2B2B2B;
        font-weight: 500;
        font-family: 'Poppins';
    }

/* -------------------carosal  -------------------------------- */
    .carousel-wrap {
        margin: 20px auto;
        padding: 0 5%;
        width: 80%;
        position: relative;
    }

/* fix blank or flashing items on carousel */
    .owl-carousel .item {
        position: relative;
        z-index: 100;
        -webkit-backface-visibility: hidden;
    }

/* end fix */
    .owl-nav>div {
        margin-top: -26px;
        position: absolute;
        top: 50%;
        color: #cdcbcd;
    }

.owl-nav i {
        font-size: 52px;
    }

.owl-nav .owl-prev {
        position: absolute;
        left: -42px;
        top: 65px;
    }

.owl-nav .owl-next {
        position: absolute;
        right: -42px;
        top: 65px;
    }

.owl-carousel .item img {
        width: 100%;
        /* Make images responsive */
        max-width: 213px;
        /* Set a maximum width if desired */
        height: auto;
        /* Maintain aspect ratio */
    }

.owl-carousel .item {
        /* background-color: white; */
    }

.carodet {
        background-color: #E8EDFF;
        margin-top: 30px;
        padding: 13px;

}

.completedprojcar {
        text-align: center;
        color: #05004E;
        font-size: 22px;
        font-weight: 500;

}

.cardetailspara {
        color: #363636;
        font-size: 15px;
        text-align: center;
        font-weight: 500;

}

/* footer  */
    .mainfooternir {
        background-image: linear-gradient(to right, #4B0B0B, #7B0D0D);
    }

.footbarmain {
        width: 80%;
        margin: auto;
        height: auto;
        padding: 14px 4px;

}

.fotblock {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 14px 4px;
    }

.footerpara {
        font-size: 18px;
        color: #FFE100;
        font-weight: 500;
    }

.fotadress {
        color: #fff;
        font-size: 16px;
        text-align: center;

}

.footcopyright {
        text-align: center;
        color: #fff;
        font-size: 20px;
    }

.footlinks {
        color: #fff;
        font-size: 16px;
        text-decoration: none;
    }

.footcopyright>span {
        color: #FFE100;
        font-size: 20px;
    }

.footcopyright>span a {
        color: skyblue;
        font-size: 19px;
        text-decoration: none;
    }

.mainleaderdet:hover{
        transform:scale(1.1);
        box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    }

@media (min-width:1024px) and (max-width:1280px) {
        .projleaders {
            width: 85%;
        }
    }

@media (min-width:629px) and (max-width:1024px) {
        .mainbannernir {
            width: 100%;
            height: 380px;
        }

.bannernirhedaing {
            font-size: 45px;
        }

.bannerheadingdetail {
            font-size: 20px;
        }

.bannerdetails {
            position: relative;
            top: 15%;
            left: 12%;
        }

.projleaders {
            width: 90%;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

.projheaddetail {
            height: auto;
        }

.mainleaderdet {
            width: auto;
        }

.carousel-wrap {
            width: 95% !important;
        }

.footbarmain {
            width: 96%;
        }
    }

@media only screen and (max-width:628px) {
        .mainbannernir {
            width: 100%;
            height: auto;
        }

.bannernirmithidetail {
            padding: 17px;
        }

.bannerdetails {
            position: relative;
            left: 5%;
        }

.bannerheadingdetail {
            font-size: 16px;
        }

.bannernirhedaing {
            font-size: 20px;
        }

.projleaders {
            width: 90%;
            grid-template-columns: repeat(1, 1fr);
            gap: 15px;
        }

.projheaddetail {
            height: auto;
        }

.mainleaderdet {
            width: auto;
        }

.loginbuttonbanner {
            margin-top: auto;
            font-size: 18px;
            width: 100px;
        }

.footbarmain {
            width: 94%;
        }

.owl-carousel .item img {
            width: 100%;
            max-width: initial;
        }
    }
</style>

<body>
    <header class="headlogonir">
        <div><img src="<?php echo base_url('public/assets/images/logo1 4.png')?>" alt="logo" class="projlogo"></div>
    </header>
    
    <section class="mainbannernir">
        <div class="bannernirmithidetail">
            <div class="bannerdetails">
                <h2 class="bannernirhedaing">
                    Constructional <br> Activities
                </h2>
                <p class="bannerheadingdetail">For Government and Private Sectors</p>
                <div class="bannerloginbtn">
                <a href="<?php echo base_url('loginpage')?>" class="loginbuttonbanner">Login</a>
                </div>
                
            </div>
        </div>
    </section>

<section class="projheaddetail">
        <div class="projleaders">

<div class="mainleaderdet">
                <div class="headleadimg">
                    <img src="<?php echo base_url('public/assets/images/img-1 1.png');?>" alt="hairman img">
                </div>
                <div class="leadersdetailscontent">
                    <h4 class="ledname">Sri. Lakshmikanth Reddy G
                        I.A.S.</h4>
                    <p class="leddepartment">Chairman of </br> Mysore Nirmithi Kendra </br>
                        &</br>
                        Deputy Commissioner </br> Mysuru District </p>

</div>
            </div>

<div class="mainleaderdet">
                <div class="headleadimg">
                    <img src="<?php echo base_url('public/assets/images/img-2.png');?>" alt="cochairman img">
                </div>

<div class="leadersdetailscontent">
                    <h4 class="ledname">Smt.Gayathri K.M </br>
                    I.A.S.</h4>
                    <p class="leddepartment">Co-Chairman </br> Mysore Nirmithi Kendra </br>
                        &</br>
                        Chief Executive Officer</br> Zilla Panchayath, Mysuru</p>

</div>
            </div>

<div class="mainleaderdet">
                <div class="headleadimg">
                    <img src="<?php echo base_url('public/assets/images/img-3.png');?>" alt="pdimg">
                </div>
                <div class="leadersdetailscontent">
                    <h4 class="ledname">Sri. Mahesh Kumar N </br>
                    B.E. MTech</h4>
                    <p class="leddepartment">Project Director </br> & </br> Member secretary </br>
                       
                    Mysore Nirmithi Kendra </br> Mysuru</p>

</div>
            </div>
        </div>
    </section>

<section class="carodet">
        <h2 class="completedprojcar">Completed Projects</h2>
        <div class="carousel-wrap">
            <div class="owl-carousel ">
                <div class="item "><img src="<?php echo base_url('public/assets/images/image 2.png');?>">
                    <p class="cardetailspara">Jenukuruba Houses</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image-1.png');?>">
                    <p class="cardetailspara">Ashraya houses-mysore</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image-2.png');?>">
                    <p class="cardetailspara">RIVA quarters- Gundlupet</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image-3.png');?>">
                    <p class="cardetailspara">Sollepura Tribal Houses</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image-4.png');?>">
                    <p class="cardetailspara">Ashraya houses in mysore</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image-5.png');?>">
                    <p class="cardetailspara">Sollepura Tribal Houses-Hunsur Tq</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/image6.png');?>">
                    <p class="cardetailspara">Anganawadi-Sollepura</p>
                </div>
                
            </div>
        </div>
    </section>

<footer class="mainfooternir">
        <div class="footbarmain">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 fotblock">
                    <h4 class="footerpara">Number</h4>
                    <a href="tel:0821-2410798" class="footlinks">Tel : 91 - 0821 - 2410798</a>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 fotblock">
                    <h4 class="footerpara">Address</h4>
                    <address class="fotadress">
                        Mysore Nirmithi Kendra ® </br> #98, Behind Regional College </br> Bogadi 2nd Stage Mysore -
                        570026 Karnataka - India
                    </address>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 fotblock">
                    <h4 class="footerpara">Email</h4>
                    <a href="mailto:mnkmys@gmail.com" class="footlinks">mnkmys@gmail.com</a>

</div>
            </div>

<div style="width:100%;height:3px;background-color: #fff"></div>
            <div class="footcopyright">Copyright 2024 © <span> Mysore Nirmithi Kendra.</span> All rights reserved |
                Developed by | <span><a href="https://jayblues.com/">Jayblues Technologies</a></span></div>
        </div>
    </footer>

</body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

})

</script>

</html>