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> <!-- ---------------main banner --------------- --> <section class="mainbannernir"> <div class="bannernirmithidetail"> <div class="bannerdetails"> <h2 class="bannernirhedaing"> Constructional Activities </h2> <p class="bannerheadingdetail">For Government and Private Sectors</p> <!-- project head -- --> <div class="projleaders"> <!-- -----------leadre 1 ------------ --> <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> <!-- -----------leadre 2 ------------ --> <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> <!-- -----------leadre 3 ------------ --> <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> <!-- project head details end --> <!-- <div class="bannerloginbtn mt-3 "> <a href="<?php echo base_url('loginpage')?>" class="loginbuttonbanner">Login</a> </div> </div> --> </div> </section> <!-- ---------------main banner --------------- --> <!-------------------- completed projects --------------- --> <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 class="item"><img src="<?php echo base_url('public/assets/images/image 2.png');?>"></div> <div class="item"><img src="<?php echo base_url('public/assets/images/image 2.png');?>"></div> <div class="item"><img src="<?php echo base_url('public/assets/images/image 2.png');?>"></div> <div class="item"><img src="<?php echo base_url('public/assets/images/image 2.png');?>"></div> <div class="item"><img src="<?php echo base_url('public/assets/images/image 2.png');?>"></div> --> </div> </div> </section> <!-------------------- completed projects end--------------- --> <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> <!-- Load jQuery and Owl Carousel scripts --> <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> document.addEventListener('DOMContentLoaded', function () { $(".owl-carousel").owlCarousel({ loop: true, margin: 10, nav: true, navText: [ "<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>" ], autoplay: true, autoplayHoverPause: true, responsive: { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 6 } } }); }) </script> </html>