index.html

<html class="">
<head>
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125870124-1"></script>
      <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-125870124-1');
      </script>

      <title>Codezoned - Home</title>

      <meta name="description" content="A community of amazing individuals focused on building open source solutions which have a direct social impact in today's society" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="assets/bootstrap.min.css">
      <link rel="stylesheet" href="assets/font-awesome.min.css">
      <link rel="stylesheet" href="assets/custom.css">
      <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
      <script language="JavaScript" type="text/javascript" src="assets/custom.js.download"></script>

      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="icon" type="image/ico" href="assets/img/cz_signature.png" />
      <link rel="stylesheet" type="text/css" href="assets/materialize.css">
      <script type="text/javascript" src="assets/materialize.js"></script>

     <link rel="stylesheet" type="text/css" href="assets/slick.css">
     <link rel="stylesheet" type="text/css" href="slick-theme.css">
     <link rel="stylesheet" type="text/css" href="./assets/css/banner.css">
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet"> 
    <script type="text/coffeescript" src="./assets/js/banner.coffee"></script>
      <style>
        @font-face{
          font-family: profontwindows;
          src: url('assets/fonts/ProFontWindows/ProFontWindows.ttf');
        }

        ul li a{
          color: white;
        }
        ul li a:hover {
          color: red;
        }

        a span{
          background-color: transparent;
          margin: 5px 2%;
          padding: 5px 2%;
          font-size: 20px;
          /*box-shadow: 2px 2px 2px #353535; */
          color: white;
        }

        button{
          background-color: transparent;
          border: none;
        }

        a span:hover{
          border-bottom-style: none;
          list-style: none;
          color: red;
        }
        div a{
          color: #222222;
        }
        div a:hover {
          color: red;
          text-decoration:  none;
        }
        .button-container {
            display: flex;

            margin: 5px auto;

            flex-wrap: wrap;
            justify-content: center;
        }
        .button {
            display: flex;
            overflow: hidden;

            margin: 4px 10px;
            padding: 12px 12px;

            cursor: pointer;
            user-select: none;
            transition: all 150ms linear;
            text-align: center;
            white-space: nowrap;
            text-decoration: none !important;
            text-transform: none;
            text-transform: capitalize;

            color: #fff;
            border: 0 none;
            border-radius: 4px;

            font-size: 13px;
            font-weight: 500;
            line-height: 1.3;

            -webkit-appearance: none;
            -moz-appearance:    none;
            appearance:         none;

            justify-content: center;
            align-items: center;
            flex: 0 0 160px;

            box-shadow: 2px 5px 10px var(--color-smoke);


          }
          .button:hover {
              transition: all 150ms linear;

              opacity: .85;
            }

            .button:active {
              transition: all 150ms linear;
              opacity: .75;
            }

            .button:focus {
              outline: 1px dotted #959595;
              outline-offset: -4px;
            }

          .button.-regular {
            color: #202129;
            background-color: #f2f2f2;

          }
          .button.-regular:hover {
              color: red;
              background-color: #e1e2e2;
              opacity: 1;
            }

            .button.-regular:active {
              background-color: #d5d6d6;
              opacity: 1;
            }

            .button.-regular2 {
            color: #4F4F4F;
            background-color: #E2DBD6;

          }
          .button.-regular2:hover {
              color: black;
              background-color: #EFEFEF;
              opacity: 1;
            }

            .button.-regular2:active {
              background-color: #D9D9D9;
              opacity: 1;
            }

            .box-centerside {
              background: url("") repeat-x scroll center top transparent;
              float: left;
              height: 250px;
              width: 250px;
              border-radius: 20px;
              padding: 5px;
              /*background-color: red;*/
              margin: 3.5%;
              /*box-shadow: 4px 4px 4px gray;*/
            }

            .button-container div a:hover{
              color: red;

            }

            #hoverbtn:hover{
              background-color: red;
            }
            @media(max-width: 900px){

            }

            /*slider style*/
            #wrapper{
              width: 1000px;
              margin: auto auto;
            }
            /*slider end*/
            .company-logo{
              -webkit-transition: opacity 2s;
              

            }
            .company-logo:hover{
              opacity: 0.5;
              -moz-transform: opacity 2s;
              -moz-transform: scale(1.15);
              -webkit-transform: scale(1.15);
              -o-transform: scale(1.15);
              -ms-transform: scale(1.15);
              -webkit-transform: scale(1.15);
              transform: scale(1.15);

              -webkit-transition: transform 1.15s ease-in-out;
              -moz-transition:transform 1.15s ease-in-out;
              -ms-transition:transform 1.15s ease-in-out;
            }

             .events-img{
              -webkit-transition: opacity 2s;
              width: 25%;
              opacity: 1;

             }

             .events-img:hover{
              opacity: 0.9;
              -moz-transform: opacity 2s;
              -moz-transform: scale(1.05);
              -webkit-transform: scale(1.05);
              -o-transform: scale(1.05);
              -ms-transform: scale(1.05);
              -webkit-transform: scale(1.05);
              transform: scale(1.05);

              -webkit-transition: transform 1.05s ease-in-out;
              -moz-transition:transform 1.05s ease-in-out;
              -ms-transition:transform 1.05s ease-in-out;
            }
      </style>

      <title>Codezoned</title>
</head>

<body data-gr-c-s-loaded="true">
  <header style="position: absolute;">
        <nav class="navbar navbar-toggleable-sm navbar-fixed-top" style="background-color: black;">

          <div><a href="http://www.codezoned.com" class="navbar-brand mb-0" style=""><img src="./assets/img/czmainsmall1.png" style="width: 12%; min-width: 150px;"></a></div>


            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#headerNav" aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: white; width: 80px; background-color: #343434; padding-top: 2px; margin-top: 5px;">Menu</span>
            </button>


          <div id="headerNav" class="navbar-collapse justify-content-end collapse" aria-expanded="false" style="">
            <ul class="navbar-nav">

              <li class="nav-item">
                <a class="nav-link" href="https://github.com/codezoned/join_codezoned" target="_blank">JoinUs</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="https://github.com/codezoned/rig" target="_blank">RIG</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="https://github.com/codezoned/ScriptsDump" target="_blank">ScriptsDump</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://github.com/codezoned/BlogCast" target="_blank">BlogCast</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="http://talk.codezoned.com/" target="_blank" style="color:red;">Forum</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- <div class="banner" onclick="window.location.href='https://hac.codezoned.com';" value="Hac">
          <p class="banner-text"><a href="https://hac.codezoned.com">Codezoned's latest hackathon - <img src="./assets/img/hac_logo.png"/> <strong> "HackAgainstCovid" </strong> (7th to 9th Aug 2020) is open for registrations 🎉 </a> </p>
        </div> -->
    </header>
   <br>

        <section class="hero">
          <div class="jumbotron jumbotron-fluid mb-0" style="text-align: center;">

          <div class="container">
            <div class="row justify-content-center text-center">
              <div class="col-md-10 col-lg-6  animated bounceInDown" id="animate1" style="vertical-align: middle; text-align: center;">
                <h1 class="display-5" style="font-family: profontwindows; word-spacing: -8px; font-size: 3em;">Welcome to<span class="display-5" style="font-family: profontwindows; word-spacing: -8px; color: red;">&nbsp;<span style="color: white;">codezoned</span><span style="color: #767777;">;</span></span></h1>
                <p class="lead" style="font-size: 18.5px; color: #d1d1d1;">We are an Opensource non-profit-organization which is targeting on educating and spreading our core belief of 'learning by doing'.</p>
                 <div class="button-container">
                     <a href="http://join.codezoned.com/"><div class='button -regular center' style="min-width: 340px;"> Join Us</div></a>
                     
                 </div>
                 <div class="button-container">
                     <a href="https://github.com/codezoned/"><div class='button -regular center' style="min-width: 100px;"> GitHub</div></a>
                     <a href="http://talk.codezoned.com"><div class='button -regular center' style="min-width: 100px;">Forum</div></a>
                     <a href="http://discord.codezoned.com"><div class='button -regular center' style="min-width: 100px;">Discord</div></a>
                 </div>
              </div>
            </div>
          </div>
          </div>
      </section>

      <section id="sec-about" class="sec-about pt-5 pb-5">
          <div class="container">
            <div class="row justify-content-center text-center">
              <div class="col-md-10 col-lg-8 animated bounceInLeft" id="animate2">
                <p class="mt-4 mb-4" style="">

                  Codezoned is an opensource NPO which is targeting on educating and spreading its core belief by making college and school students contribute to opensource. We develop FOSS (Free Open-source software) for NGOs, Conduct Hackathons across colleges and organisations and give digital literacy education to less privileged children.
                  <br><br>
                  We are an organization that strives towards building a community of enthusiastic and passionate individuals who want to share their love for creativity and imagination by building open source projects that have a positive impact on the society, making the world a better place.<br><br>
                  We are completely opensource. We make our own stuff and help everyone make theirs. Your contributions are welcome!
                </p>
              </div>
            </div>
          </div>
      </section>

      <!-- <section id="sec-about" class="sec-about pt-5 pb-5" style="background-color: #222222;"> -->
                <!-- <div class="container"> -->
                  <!-- <div class="row justify-content-center text-center" style="">
                    <div class="col-md-4 col-lg-8 animated bounceInLeft" id="animate2">
                      <h2 class="display-5" style="font-family: quicksand; word-spacing: -8px; color: white;">How to Join/Working with us</h2>
                      <div class="row">
                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>Step 1</strong> </span>
                              <p style="color: #9E9E9E">Join us,,,,,,,,,,,,,,,,,,</p>
                            </div> -->
                            <!-- <div class="card-action">
                              <a href="#"><div class='button -regular center' style="background-color: #2196F3; color: white;" id="hoverbtn">Check it out!</div></a>

                            </div> -->
                          <!-- </div>
                        </div>
                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>Step 2</strong></span>
                              <p style="color: #9E9E9E">zsxdcfvghbjnkml,;.'/.;l,kmjhgvfcdcfvgbhjnkm!</p>
                            </div> -->
                            <!-- <div class="card-action">
                              <a href="#"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>

                            </div> -->
                         <!--  </div>
                        </div>

                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>step 3</strong> </span>
                              <p style="color: #9E9E9E">zsxdcfvgbhnjmkjnhbgvfcdx</p>
                            </div> -->
                           <!--  <div class="card-action">
                              <a href="#"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>

                            </div> -->
                          <!-- </div>
                        </div>
                      </div>

                    </div>
                  </div> -->

      <!-- </section> -->
      <section>
      
            <div style="width: 100%; text-align: center;">
              <div style="width: 80%; margin: auto auto;">
                <h1 class="display-5" style="font-family: quicksand; word-spacing: -8px;">Events!</h1>

                <h3 class="lead">These are some of the events we are honoured to have organised/be a part of.</h3><br>
              </div>
                <div style="width: 80%; margin: auto auto;">
                    <a href="https://codezoned.com/"><img src="assets/img/hac_logo.png" class="events-img" style=" min-width: 125px;"></a>
                    <a href="http://uhack.in/"><img src="assets/img/uhack_sticker.png" class="events-img" style=" min-width: 125px;"></a>
                    <a href="http://alert.ngo/alertathon/" style=""><img src="assets/img/Alertathon-logo.png" class="events-img" style=" min-width: 125px;"></a><br>
                    <!-- <span style="font-size: 1em; color: #222222; margin-right: 17.5%;">Uhack 18</span>
                    <span style="font-size: 1em; color: #222222;">Alertathon 18</span> -->
                </div> >   
            </div>
           
      </section>
      <br>
      <section style="background-color: black; min-height:850px;">
          <div class="container-fluid" style="width: 100%;"><br>
            <div class="row justify-content-center text-center">
              <div class="col-md-10 col-lg-8 animated bounceInRight" id="animate3" style="text-align: center;">
                <div style=" color: #d1d1d1; width: 100%;"><p style="margin-left: 8%; letter-spacing: 2.5px; font-family: quicksand; font-size: 24px;">Our Amazing partners:</p></div><br><br>
                  <div style=""><br>
                    
                        <a href="https://www.spicinemas.in/"><img class="company-logo" src="assets/img/spi_shadow.png" style="width: 70%; min-width: 320px;"></a>
                        <a href="https://ankor.us/"><img class="company-logo" src="assets/img/Ankor-White.png" style="width: 37.5%; min-width: 320px; margin-right: 3.5%; padding-right: 3.5%; "></a>
                        <a href="http://alert.ngo/"><img class="company-logo" src="assets/img/Alert-logo.png" style="width: 23.5%; min-width: 220px; margin-left: 3.5%; padding-left: 3.5%; "></a><br>
                        <a href="https://www.digitalocean.com/"><img class="company-logo" src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" style= "min-width : 350px; width: 60%; padding: 7.5%;" ></a>
              
                  </div>
                </div>
              </div>
            </div>
          </div>

      </section>
      <ul class="list-inline mb-0 text-center" style="width: 100%; margin-top: -1.5%; position: relative; background-color: black; width: 100%;">
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red; font-family: quicksand;">Creative</span> Partners</li>
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red;">Outreach</span> Partners</li>
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red;">Evangelist</span> Partners</li>
                    <br>
                </ul>

 <!-- <section class="hero">
          <div class="jumbotron jumbotron-fluid mb-0" style="vertical-align: middle;">
            <div class="container row justify-content-center text-center" style="">
              
                  <div style=" color: #d1d1d1; width: 100%; text-align: left;"><p style="margin-left: 8%; letter-spacing: 2.5px; font-family: quicksand;">Our Amazing partners:</p></div>
                        <div style="margin-top: -3%; width: 100%;" class="container">
                          <div class="w3-content w3-section" style="max-width:1500px;">
                            <a href="#"><img src="assets/img/spi_shadow.png" style="width: 60%; min-width: 320px;"></a><br>
                            <a href="#"><img src="assets/img/Ankor-White.png" style="width: 50%; height: 30%; min-width: 320px;"></a><br><br>
                            <a href="#"><img src="assets/img/Alert-logo.png" style="width: 40%; min-width: 320px;"></a><br>

                        </div>
                   
                  </div>
                  <ul class="list-inline mb-0 text-center" style="width: 100%; margin-top: -1.5%;">
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red; font-family: quicksand;">Creative</span> Partners</li>
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red;">Outreach</span> Partners</li>
                    <li class="list-inline-item" style="margin: 2px 20px; font-size: 33px; color: white; font-family: quicksand;"><span style="color: red;">Evangelist</span> Partners</li>
                  </ul>
               
            </div>
          </div>
      </section> -->

      <section id="sec-about" class="sec-about pt-5 pb-5">
                
                  <div class="row justify-content-center text-center" style="">
                    <div class="col-md-4 col-lg-8 animated bounceInLeft" id="animate2">
                      <h3 class="display-5" style="font-family: quicksand; word-spacing: ; color: #272727;">Some of our Opensource projects:</h3>
                      <br>
                      <div class="row">
                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>ScriptsDump</strong> </span>
                              <p style="color: #777777">ScriptsDump is a complete repository of all kind of scripts we and you can think of.</p>
                            </div>
                            <div class="card-action">
                              <a href="https://github.com/codezoned/ScriptsDump"><div class='button -regular center' style="background-color: #2196F3; color: white;" id="hoverbtn">Check it out!</div></a>

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

                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>RIG</strong></span>
                              <p style="color: #777777">RIG (Randomized ID Generator) is an app to generate IDs and badges for any event or meetup!</p>
                            </div>
                            <div class="card-action">
                              <a href="https://github.com/codezoned/rig"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>

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

                        <div class="col s12 m12">
                          <div class="card darken-1" style="background-color: white; min-height: 240px;">
                            <div class="card-content white-text">
                              <span class="card-title" style="color: black;"><strong>BlogCast</strong> </span>
                              <p style="color: #777777">BlogCast is a 100% Opensource blogging App/Platform.</p>
                            </div><br>
                            <div class="card-action">
                              <a href="https://github.com/codezoned/BlogCast"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>

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

                    </div>
                  </div>
                  <div style="width: 100%; text-align: center;">
                        <a href="https://github.com/codezoned/"><h5 style="color: darkgray;" href=>And many more...</a></h5>

                  </div><br><br>

                  <div style="width: 100%; text-align: center;">
                    <span style="font-size: 22px;">Wanna Partner with us? Sponsor us? Or talk to us?</span><br>
                        <span style="font-size: 22px;"><b><a href = "mailto: team@codezoned.com">Contact us at team@codezoned.com</a><b></span>

                  </div>

      </section>
      <br><br>

  <div style="width: 100%; position: fixed; background-color: black; height: 55px;" class="footer">
      <ul class="list-inline mb-0 text-center" style="padding-top: -10px;">

        <li class="list-inline-item" style="margin: 0 12px;">
          <a href="https://www.facebook.com/codezoned/" target="_blank"><span class="fa fa-facebook"></span></a>
        </li>

        <li class="list-inline-item" style="margin: 0 12px;">
          <a href="https://github.com/codezoned" target="_blank"><span class="fa fa-github-square"></span></a>
        </li>

        <li class="list-inline-item" style="margin: 0 12px;">
          <a href="https://www.linkedin.com/company/codezoned/" target="_blank"><span class="fa fa-linkedin"></span></a>
        </li>

        <li class="list-inline-item" style="margin: 0 12px;">
          <a href="https://www.instagram.com/codezoned/" target="_blank"><span class="fa fa-instagram"></span></a>
        </li>
        <li class="list-inline-item" style="margin: 0 12px;">
          <a href="http://discord.codezoned.com" target="_blank"><span class="fa fa-discord"></span></a>
        </li>
      </ul>
  </div>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script src="assets/bootstrap.min.js.download"></script>
      <script type="text/javascript" src="assets/slick.js"></script>

      <script>
        

  </script>

</body>
</html>