Functions.c

on

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Register</title>
  <!-- Stylesheets
    ================================================== -->
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <!-- Custom styles for this template -->
  <style>

.buttonfntr{
    backdrop-filter: blur(5px);
}
.buttonfnte{
    backdrop-filter: blur(5px);
}
.gall{
    backdrop-filter: blur(5px) ;

}
.tooltiptext{
    backdrop-filter: blur(5px) !important;

}
.text{
    backdrop-filter: blur(5px) !important;
}
.tab{
    backdrop-filter: blur(5px) !important;
}
.tabcontent{
    backdrop-filter: blur(5px) !important;

}
.aos-init{
    backdrop-filter: blur(5px) !important;
}
.com-btn{
    backdrop-filter: blur(5px) !important;

}
.notif{
    backdrop-filter: blur(5px) !important;
}
.reg-box{
    backdrop-filter: blur(5px) !important;
}
.test{
    backdrop-filter: blur(5px) !important;
}
.dropdown-menu{
    backdrop-filter: blur(5px) !important;
}
.contact{
    backdrop-filter: blur(5px) !important;

}
.reg-success{
    backdrop-filter: blur(5px) !important;

}
.clipped{
    clip-path: url(#svgTextPath);
    backdrop-filter: blur(5px);

}
.abt{

    backdrop-filter: blur(5px) !important;

}
.bgblurred{
    backdrop-filter: blur(10px) !important;

}
.com-btn2{
    backdrop-filter: blur(10px) !important;

}
.container-contact{
    backdrop-filter: blur(5px) !important;

}

</style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
    @font-face {
        font-family: euro;
        src:url(http://techfest.org/fonts/eurostile.TTF);
    }
    body{
        background: url(https://media.istockphoto.com/photos/dark-blue-de-focused-blurred-motion-abstract-background-picture-id1216628493?k=20&m=1216628493&s=612x612&w=0&h=PGifdN4ADl0gs6KuDFMbh7R4BgoxtJh-5ZVYXvgfHXw=);
        font-family: euro;
        background-attachment: fixed;
        background-position: center;

        background-color: #121921;
    }
    h3{
        letter-spacing: 1px;
    }
    .reg-box {
        background-color: rgba(255, 255, 255, 0.1);
        border: 0.5px solid white;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        letter-spacing: 1px;
        color: white;
        font-size: 16px;
        padding-left: 1rem;
    }
    .submit-box{
        background-color: rgba(255, 255, 255, 0.1);
        border: 0.5px solid white;
        border-radius: 5px;
        width: 100%;
        height: 35px;
        letter-spacing: 1px;
        color: white;
        font-size: 16px;

    }
    .reg-success {
        color: #96dd58;
    }
    ::placeholder{
        position: relative;
        opacity: 1;
        color: white;
    }
    option {
        /*background-color: rgba(255,255,255,0.14);*/
        color: #212121;
    }
</style>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function(){
        $('.dropdown-btn1').click(function() {
            $('.dropdown-container1').toggle("slide");
        });
    });
    $(document).ready(function(){
        $('.dropdown-btn2').click(function() {
            $('.dropdown-container2').toggle("slide");
        });
    });
    $(document).ready(function(){
        $('.dropdown-btn3').click(function() {
            $('.dropdown-container3').toggle("slide");
        });
    });

</script>
  <style>
    /* width */
    ::-webkit-scrollbar {
        width: 6px;
    }
    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
        display: none;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .dropdown-container1 {
        display: none;
        /*background-color: #262626;*/
        padding-left: 8px;
    }
    .dropdown-container2 {
        display: none;
        /*background-color: #262626;*/
        padding-left: 8px;
    }
    .dropdown-container3 {
        display: none;
        /*background-color: #262626;*/
        padding-left: 8px;
    }
    @font-face {
        font-family: GothamLight;
        src:url(http://techfest.org/fonts/gotham/GothamLight.ttf);
    }
    @font-face {
        font-family: euro;
        src:url(http://techfest.org/fonts/eurostile.TTF);
    }

    #logo{
        position: fixed;
        z-index: 10;
        top: 0;
        left:0;
        width: 100%;
        display: inline;
        transition: top 0.3s;

    }
    #logo-img{
        position: fixed;
        top: 1.5vh;
        left:0.5vh;
        /*width: 100%;*/
        /*max-height: 50px !important;*/
        display: inline;
        transition: top 0.3s;

    }
    #right-nav{
        z-index: 10;
    }
    #navbar {
        /*background-color: #333;*/
        position:fixed;
        z-index: 10;

        top: 0;
        left:29vh;
        width: 100%;
        display: inline;
        transition: top 0.3s;
    }

    .navgrad{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%,  #000000 100%);
    }

    #signbtn{
        position: fixed;
        background: #268AFF;
        z-index: 100;
        color: #fff;
        width: 8.5vh;
        height: 2.8vh;
        text-align: center;
        /*padding: 5px;*/
        border: 0.5px solid #FFFFFF;
        border-radius: 20px;
        top: 1.5vh;
        right: 7.7vh;
    }
    a:hover{
        text-decoration: none;
    }

    .button_container {
        position: fixed;
        top: 1.7vh ;
        right: 1.2vh;

        height: 27px;
        width: 35px;
        cursor: pointer;
        z-index: 200;
        transition: opacity 0.25s ease;
    }
    .button_container:hover {
        opacity: 0.7;
    }
    .button_container.active .top {
        transform: translateY(11px) translateX(0) rotate(45deg);
        background: #fff;
    }
    .button_container.active .middle {
        opacity: 0;
        background: #fff;
    }
    .button_container.active .bottom {
        transform: translateY(-11px) translateX(0) rotate(-45deg);
        background: #fff;
    }
    .button_container span {
        background: #fff;
        border: none;
        height: 0.2vh;
        width: 80%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.35s ease;
        cursor: pointer;
    }
    .button_container span:nth-of-type(2) {
        top: 8px;
    }
    .button_container span:nth-of-type(3) {
        top: 16px;
    }
    .overlay {
        position: fixed;
        z-index:101;
        background: #000;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s, visibility 0.35s, height 0.35s;
        overflow: hidden;
    }
    .overlay.open {
        opacity: 0.9;
        visibility: visible;
        height: 100%;
    }
    .overlay.open li {
        animation: fadeInRight 0.5s ease forwards;
        animation-delay: 0.35s;
    }
    .overlay.open li:nth-of-type(2) {
        animation-delay: 0.4s;
    }
    .overlay.open li:nth-of-type(3) {
        animation-delay: 0.45s;
    }
    .overlay.open li:nth-of-type(4) {
        animation-delay: 0.5s;
    }
    .overlay nav {
        position: relative;
        height: 100%;
        top: 70%;
        /*width: 100%;*/
        transform: translateY(-50%);
        font-size: 30px;
        font-family: 'Varela Round', serif;
        font-weight: 400;
        text-align: center;

    }
    .overlay ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: inline-block;
        position: relative;
        height: 100%;
    }
    .overlay ul li {
        display: block;
        /*height: 25%;*/
        /*height: calc(100% / 4);*/
        min-height: 50px;
        position: relative;
        opacity: 0;
    }
    .overlay ul li a {
        display: block;
        position: relative;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
    }
    .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
        width: 100%;
    }
    .overlay ul li a:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0%;
        transform: translateX(-50%);
        height: 3px;
        background: #fff;
        transition: 0.35s;
    }
    @keyframes  fadeInRight {
        0% {
            opacity: 0;
            left: 20%;
        }
        100% {
            opacity: 1;
            left: 0;
        }
    }
    .overlay-menu{
        font-family: euro !important;
    }
/*    YASH BT*/

    .mainbtn{
        position: fixed;
        background: #268AFF;
        z-index: 100;
        color: #fff !important;
        width: 8.5vh;
        height: 2.8vh;
        text-align: center;
        /*padding: 5px;*/
        border: 0.5px solid #FFFFFF;
        border-radius: 20px;
        top: 1.5vh;
        right: 7.7vh;
    }

</style>
  <div style="margin-top: 50px;" class="container mb-5">
   <div class="row">
    <div class="col-md-12 col-12">
     <h3 class="text-center text-white">REGISTRATION FORM</h3>
    </div>
    <div class="col-md-6 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Name" name="Name" required>
    </div>
   </div>
   <div class="row mb-3">
    <div class="col-md-6 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Email" name="Email" required>
    </div>
   </div>
   <div class="row mb-3">
    <div class="col-md-6 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Phone" name="phone" required oninvalid="this.setCustomValidity('Enter a Valid Phone Number')" onchange="this.setCustomValidity('')">
    </div>
    <div class="col-md-6 col-12">
     <input type="text" class="reg-box" placeholder="Country" name="country" required>
    </div>
   </div>
   <div class="row mb-3">
    <div class="col-md-6 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="City" name="city" required>
    </div>
    <div class="col-md-6 col-12">
     <select type="text" class="reg-box" name="gender" required> <option disabled selected value="">Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> <option>Others</option> </select>
    </div>
   </div>
   <div class="row mb-3">
    <div class="col-md-6 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Residential Address" name="res_add" required>
    </div>
    <div class="col-md-6 col-12">
     <input type="text" class="reg-box" placeholder="Res. Pincode" name="pincode" required>
    </div>
   </div>
   <div class="row mb-3">
    <div class="col-md-12 mb-3 col-12">
     <select type="text" class="reg-box" name="year" required> <option disabled selected value="">Year of study/ Standard</option> <option value="1">First Year</option> <option value="2">Second Year</option> <option value="3">Third Year</option> <option value="4">Fourth Year</option> <option value="6">Post Graduate</option> </select>
    </div>
    <div class="col-md-12 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Institute Full Name" name="insti_name" required>
    </div>
    <div class="col-md-12 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Institute Address" name="insti_add" required>
    </div>
    <div class="col-md-12 col-12 mb-3">
     <input type="text" class="reg-box" placeholder="Institute Area Pincode (Optional)" name="insti_pin">
    </div>
   </div>
   <div class="row mt-4">
    <div class="col-md-12 col-12 d-flex justify-content-end">
     <input type="submit" value="Submit" class="submit-box" style="background: #268AFF;color: white;">
    </div>
   </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script src="https://techfest.org/2020/mun/js/script.js"></script>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    $('#profile-icon').click(function(){
        $('#profile-dropdown').slideToggle('slow');
    });
</script>
  <script>
    AOS.init();
    $(window).scroll(function(e){
        var $el = $('.fixedElement');
        var isPositionFixed = ($el.css('position') == 'fixed');
        if ($(this).scrollTop() > 200 && !isPositionFixed){
            $el.css({'position': 'fixed', 'top': '0px'});
        }
        if ($(this).scrollTop() < 200 && isPositionFixed){
            $el.css({'position': 'static', 'top': '0px'});
        }
    });

</script>
  <script>

    var subNav = false;
    $('.sub-nav-dropdown').click(function (){
        if (subNav == false)
        {
            //    Dropdown is closed. Open in
            $('.sub-nav-dropdown').css('transform', 'rotate(180deg)');
            $('.sub-nav-dropdown-content').slideDown('slow');
            subNav = true;
        }
        else
        {
            $('.sub-nav-dropdown').css('transform', 'rotate(0deg)');
            $('.sub-nav-dropdown-content').slideUp('slow');
            subNav = false;
        }
    });
</script>
  <script>
    $('#toggle').click(function() {
        $(this).toggleClass('active');
        $('#overlay').toggleClass('open');
    });

</script>
</body>
</html>

Comments

Post a Comment