EVOLUTION-NINJA

Edit File: landingpage.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;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

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

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

}

.bannernirhedaing {
        font-size: 60px;
        color: #001740;
        font-weight: 600;
        font-family: 'Poppins';
        width: fit-content;
         /*margin-left:100px !important;*/

}

.bannerheadingdetail {
        font-size: 24px;
        font-family: 'poppins', sans-serif;
        color: #323232;
        font-weight: 500;
        width: fit-content;
        /*margin-left:250px !important;*/
     
     
    }

.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 a {
        text-decoration: none;
    }

.bannerloginbtn a:hover {
        color: #001740;

}

.bannerdetails {
        position: relative;
        top: 3%;
        left: 10%;
    }

.projleaders {
        width: 58%;
        /* margin: auto; */
        display: grid;
        margin-top:25px;
        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: 100%; */
        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 */
            height: 200px;
    border-radius: 12px;
    }
 
  
    .carodet {
        background-color: #E8EDFF;
        padding: 13px;
        width: 80%;
        margin: auto;
        margin-block: 50px;
        border-radius: 12px;

}

.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);
        box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
    }

@media only screen and (max-width:1800px){
      .projleaders {
        width: 75%;
       
    }

}
    @media (min-width:1001px) and (max-width:1380px) {
        .projleaders {
            width: 70%;
            gap: 11px;
        }

.mainbannernir {
            width: 100%;
            height: auto;
        }

.mainleaderdet {
            width: 260px;
        }

/* .bannerdetails {
            position: relative;

left: 8%;
        } */

.bannernirmithidetail {
            background-size: cover;

padding-bottom: 171px;
        }

.bannerdetails {
            position: relative;
            left: 9%;
            top: 0%;
        }

.ledname {
            font-size: 16px;
        }

.leddepartment {
            font-size: 13px;
        }

.leadersdetailscontent {
            margin-top: 3px;
        }

}

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

.bannernirhedaing {
            font-size: 45px;
        }

.bannerheadingdetail {
            font-size: 20px;
          
     
        }

.bannerdetails {
            position: relative;
            top: 0%;
            left: 0%;
        }

.projheaddetail {
            height: auto;
        }

/* .mainleaderdet {
            width: auto;
        } */

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

.footbarmain {
            width: 96%;
        }
        .mainleaderdet {
            width: 309px;
            
        }
        .ledname {
           font-size: 19px;
        }
        .leddepartment {
         font-size: 14px;
        }
    
    
        /* ------------------- main bar  */

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

}

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

.mainleaderdet:hover {
            transform: scale(1);
        }
    }

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

.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;
        }

.projlogo {
            width: 84%;
        }

.bannernirmithidetail {
            padding: 17px;
            background: none;
        }

}
</style>

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

<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> Mysore District </p>

</div>
                    </div>

<div class="mainleaderdet">
                        <div class="headleadimg">
                            <img src="<?php echo base_url('public/assets/images/Shri S Ukesh Kumar IAS.jpeg');?>" alt="cochairman img"  style="border-radius: 50%; height:139px;width: 139px;">
                        </div>

<div class="leadersdetailscontent">
                            <h4 class="ledname">Sri S Ukesh Kumar</br>
                                I.A.S.</h4>
                            <p class="leddepartment">Co-Chairman of </br> Mysore Nirmithi Kendra </br>
                                &</br>
                                Chief Executive Officer</br>Zilla Panchayath, Mysore</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> of Mysore Nirmithi Kendra
                                </br> Mysore </p>

</div>
                    </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/sollepura.jpeg');?>">
                    <p class="cardetailspara">Sollepura MPC Building H D kote Taluk</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/nagpura.jpeg');?>">
                    <p class="cardetailspara">Nagapura MPC Building Hunsur Taluk</p>
                </div>
                <div class="item"><img src="<?php echo base_url('public/assets/images/hosakadajatti.jpeg');?>">
                    <p class="cardetailspara">Hosakadajatti MPC Building Nanjangud Taluk</p>
                </div>
                
                <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 Taluk</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>