index.html


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

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title -->
    <title>OSC- Web </title>

    <!-- Favicon -->
    <link rel="icon" href="./img/core-img/favicon.png">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
	

</head>


<body>
    <!-- Preloader -->
    <div id="preloader">
        <img src="img/walk.gif">
    </div>
    <!-- /Preloader -->

    <!-- Header Area Start -->
    <header class="header-area">
   
        <!-- Main Header Start -->
        <div class="main-header-area">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Classy Menu -->
                    <nav class="classy-navbar justify-content-between" id="hamiNav">

                        <!-- Logo -->
			    <img src="img/logo.png" style="height: 80px">

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"><span></span><span></span><span></span></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu">
                            <!-- Menu Close Button -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>
                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul id="nav">
                                    <li class="active"><a href="#">Home</a></li>
                                  
                                </ul>

                                <!-- Live Chat -->
                                <div class="live-chat-btn ml-5 mt-4 mt-lg-0 ml-md-4">
                                    <a href="https://chat.whatsapp.com/FCOiLrCadSWDoIGPVF7CSY" class="btn hami-btn live--chat--btn"><i class="fa fa-whatsapp	" aria-hidden="true"></i> Join OSC Group in Whats app</a>
                                </div>
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>  
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Welcome Area Start -->
    <section class="welcome-area">

        <!-- Welcome Pattern -->
        <div class="welcome-pattern">
            <img src="img/core-img/welcome-pattern.png" alt="">
        </div>

        <!-- Welcome Slide -->
        <div class="welcome-slides owl-carousel">

            <!-- Single Welcome Slide -->
            <div class="single-welcome-slide">
                <!-- Welcome Content -->
                <div class="welcome-content h-100">
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <!-- Welcome Text -->
                            <div class="col-12 col-md-9 col-lg-7">
                                <div class="welcome-text mb-50">
                                    <h2 data-animation="fadeInLeftBig" data-delay="200ms" data-duration="1s">Welcome to the <br> Community</h2>
                                    <h3 data-animation="fadeInLeftBig" data-delay="400ms" data-duration="1s">Get Support of leads of your favourate techonology </h3>
                                    <p data-animation="fadeInLeftBig" data-delay="600ms" data-duration="1s">Technology is a word that describes something that doesn’t work yet</p>
                                    <a href="#leads" class="btn hami-btn btn-2" data-animation="fadeInLeftBig" data-delay="800ms" data-duration="1s">Get Start Now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Welcome Thumbnail -->
                <div class="welcome-thumbnail">
                    <img src="img/bg-img/1.png" alt="">
                </div>
            </div>

            <!-- Single Welcome Slide -->
            <div class="single-welcome-slide">
                <!-- Welcome Content -->
                <div class="welcome-content h-100">
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <!-- Welcome Text -->
                            <div class="col-12 col-md-9 col-lg-7">
                                <div class="welcome-text mb-50">
                                    <h2 data-animation="fadeInLeftBig" data-delay="200ms" data-duration="1s">Welcome to the <br> Community</h2>
                                    <h3 data-animation="fadeInLeftBig" data-delay="400ms" data-duration="1s">Get Support of GitHub Campus Expert and the</h3>
                                    <p data-animation="fadeInLeftBig" data-delay="600ms" data-duration="1s">GitHub is a way of life</p>
                                    <a href="#expert" class="btn hami-btn btn-2" data-animation="fadeInUpBig" data-delay="800ms" data-duration="1s">Get Start Now!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Welcome Thumbnail -->
                <div class="welcome-thumbnail">
                    <img src="img/bg-img/s2.png" alt="">
                </div>
            </div>

        </div>

        <!-- Clouds -->
        <div class="clouds">
            <img src="img/core-img/cloud-1.png" alt="" class="cloud-1">
            <img src="img/core-img/cloud-2.png" alt="" class="cloud-2">
            <img src="img/core-img/cloud-3.png" alt="" class="cloud-3">
            <img src="img/core-img/cloud-4.png" alt="" class="cloud-4">
            <img src="img/core-img/cloud-5.png" alt="" class="cloud-5">
            
        </div>
    </section>
	<div class="feature-pattern">
            <img src="img/core-img/test2.png" alt="">
        </div>
		
		
		<section class="hami-features-area bg-gray section-padding-100">

        <div class="container">
            <div class="row">
                <!-- S	ection Heading -->
                <div class="col-12">
                    <div class="section-heading text-center">
                        <h2>Events</h2>
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
		<div class="row">
		<div class="col-md-3">
		</div>
		<div class="col-md-4">
            <div class="card" style="width: 18rem;">
  <img src="V-Ignite.png" class="card-img-top" alt="...">
  <div class="card-body">
  <center>
    <h5 class="card-title">V-IGNITE</h5>
    <p class="card-text">A 24hrs intense, fun-filled, rewarding convergence of programmers, designers and developers to build something amazing.</p>
    <a href="http://viit-vignite.ml" class="btn btn-primary">Event Details</a>
  </center>
  </div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 18rem;">
  <img src="githubworkshop.jpeg" class="card-img-top" alt="...">
  <div class="card-body">
  <center>
    <h5 class="card-title">GitHub Workshop</h5>
    <p class="card-text">Technical awareness,
Why GitHub?
Git,
GitHub,
Hands on session on open source contribution..</p>
	  <a href="https://githubcampus.expert/saibhaskar24/git-github/" class="btn btn-primary">Event Details</a> 
  </center>
  </div>
</div>	
</div>
<div class="col-md-1">
		</div>
</div>
			</div>
		<div class="feature-pattern">
            <img src="img/core-img/welcome-pattern.png" alt="">
        </div>
    </section>
    <!-- Welcome Area End -->
	<section class="find-domain-area section-padding-0-0" id = "expert">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-4">
                    <div class="domain-text mb-100">
                        <img src="img/flag2.png" STYLE=" TOP:0px; LEFT:0px; WIDTH:100%; HEIGHT:100%" >
                            
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="domain-search-form mb-100">
                        <!-- Search Form -->
                        <h3>Get Expert Help</h3>
                            <p >As a part of the community, you will have the opportunity to connect, interact and take help from experts in and around the campus to grow as an individual.

                            GitHub Campus Experts can help with hackathons, workshops, and more.</p>
							<ul>
                              <li>  Get workshops from trained speakers </li>
                              <li>  Get swag and educational material for your event<li>
                              <li>  Get help improving your tech community<li>
								<br></br>
								<a href="#contact" class="btn hami-btn w-100 mb-30">Contact now</a>
			
								</ul>
			    
			   <!-- Domain Price Help -->
                        <div class="domain-price-help mt-50 d-flex align-items-center justify-content-between">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
	
<section class="hami-features-area bg-gray section-padding-100">

        <div class="container">
            <div class="row">
                <!-- Section Heading -->
                <div class="col-12">
                    <div class="section-heading text-center">
                        <h2>Why Open Student Community</h2>
                        <p>Some heading might go here</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="testimonial-slide owl-carousel">

                        <!-- Single Testimonial Area -->
                        <div class="single-testimonial-area" style="background-color: white">
                            <div class="testimonial-content">
                                <!-- Ratings & Quote -->
                                <div class="ratings-icon d-flex align-items-center justify-content-between">    
									<div class="single-feature-area d-flex mb-50">
										<div class="feature-text">
											<div class="feature-icon">
												<center>
												<i class="   icon_lock-open  "></i>
												</center>
											</div>
											<h5><center><b>Open to All !</b></center></h5>
											<br><p style="text-align: justify;">OSS is an open Society for students. We encourage equal participation from all branches and years in college to grow together as a community.</p>
										</div>
									</div>
								</div>
                             </div>
                        </div>
						 <div class="single-testimonial-area" style="background-color: white">
                            <div class="testimonial-content">
                                <!-- Ratings & Quote -->
                                <div class="ratings-icon d-flex align-items-center justify-content-between">    
									<div class="single-feature-area d-flex mb-50">
										<div class="feature-text">
											<div class="feature-icon">
												<center>
												<i class="  icon_group "></i>
												</center>
											</div>
											<h5><center><b>Collaborate with others</b></center></h5>
											<br><p style="text-align: justify;">Nothing gets a job done better than Teamwork! Join hands with other members to succeed in making your ideas come alive.</p>
										</div>
									</div>
								</div>
                             </div>
                        </div>
						 <div class="single-testimonial-area" style="background-color: white">
                            <div class="testimonial-content">
                                <!-- Ratings & Quote -->
                                <div class="ratings-icon d-flex align-items-center justify-content-between">    
									<div class="single-feature-area d-flex mb-50">
										<div class="feature-text">
											<div class="feature-icon">
												<center>
												 <i class="icon_lightbulb"></i>
												</center>
											</div>
											<h5><center><b>Cross platfrom knowledge entraide</b></center></h5>
											<br><p style="text-align: justify;">What we have might not be others! What they have, might not be with us! But what 'WE' have is always the maximum knowledge 'WE' can have OSC has the best of the two worlds and knowledge sharing sessions can be transtorming and brain-Filling.</p>
										</div>
									</div>
								</div>
                             </div>
                        </div>
						 <div class="single-testimonial-area" style="background-color: white">
                            <div class="testimonial-content">
                                <!-- Ratings & Quote -->
                                <div class="ratings-icon d-flex align-items-center justify-content-between">    
									<div class="single-feature-area d-flex mb-50">
										<div class="feature-text">
											<div class="feature-icon">
												<center>
												<i class="icon_puzzle_alt"></i>
												</center>
											</div>
											<h5><center><b>HACKathons & SEMinars</b></center></h5>
											<br><p style="text-align: justify;">The best platform to assess your Tech Skills is by participating in a HACKathon. OSC offers you some astouning HACKathons to PROVE & ASSESS yourself .SEMinaers unlike SEMesters are much more engrossing & riveting.</p>
										</div>
									</div>
								</div>
                             </div>
                        </div>
					 </div>
                </div>
            </div>
        </div>
		<div class="feature-pattern">
            <img src="img/core-img/welcome-pattern.png" alt="">
        </div>
    </section>
    
    
    <div class="unit-3 h-100 bg-white">

        
    <!-- Features Area Start -->
    
    <!-- Features Area End -->

    <!-- Price Plan Area Start -->
    <section class="hami-price-plan-area mt-50">
        <div class="container">
            <div class="row">
                <!-- Section Heading -->
                <div class="col-12">
                    <div class="section-heading text-center">
                        <h2>Contact the leads</h2>
                        <p>Get involved in your fav techonology</p>
                    </div>
                </div>
            </div>
			
			
            <div class="row justify-content-center" id = "leads">

                <!-- Single Price Plan -->
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-price-plan mb-100">
                        <!-- Title -->
                        <div class="price-plan-title">
                            <h4>Web</h4>
                            <p></p>
                        </div>
                  
                        <div class="price-plan-value">
                            
							<img src="img/web.png">
                            <a href="web.html" class="btn hami-btn w-100 mb-30">Get Started</a>

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

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-price-plan mb-100">
                        <!-- Title -->
                        <div class="price-plan-title">
                            <h4>Game Development</h4>
                            <p></p>
                        </div>
                  
                        <div class="price-plan-value">
                            
                            <img src="img/game.jpg">
                            <a href="gamedev.html" class="btn hami-btn w-100 mb-30">Get Started</a>
                        
                        </div>
                        
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-price-plan mb-100">
                        <!-- Title -->
                        <div class="price-plan-title">
                            <h4>Cyber Security</h4>
                            <p></p>
                        </div>
                  
                        <div class="price-plan-value">
                            
                            <img src="img/Fintechtocat.png">
                            <a href="cybersec.html" class="btn hami-btn w-100 mb-30">Get Started</a>
                        
                        </div>
                        
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-price-plan mb-100">
                        <!-- Title -->
                        <div class="price-plan-title">
                            <h4>ML</h4>
                            <p></p>
                        </div>
                  
                        <div class="price-plan-value">
                            
                            <img src="img/ml.jpg">
				<br></br>
                            <a href="ml.html" class="btn hami-btn w-100 mb-30">Get Started</a>
                        
                        </div>
                        
                    </div>
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="single-price-plan mb-100">
                        <!-- Title -->
                        <div class="price-plan-title">
                            <h4>App Development</h4>
                            <p></p>
                        </div>
                  
                        <div class="price-plan-value">
                            
                            <img src="img/android1.png">
							<br><br>
                            <a href="appdev.html" class="btn hami-btn w-100 mb-30">Get Started</a>
                        
                        </div>
                        
                    </div>
                </div>
	</div>
	

    </section>
    <!-- Call To Action Area End -->

    
    <!-- Footer Area Start -->
    <footer class="footer-area section-padding-80-0" id="contact">
	
        <!-- Main Footer Area -->
        <div class="main-footer-area">
            <div class="container">
                <div class="row justify-content-between">

                    <div class="col-12 col-sm-8 col-lg-12">
					
                        <div class="single-footer-widget mb-80">
                            <!-- Widget Title -->
				<h5 class="widget-title">Contact Github Campus Expert <br></br> P Sai Bhaskar : <a style="color:blue;" href="https://saibhaskar24.github.io" > Link to Portfolio</a></h5>
				<h4>Or leave a message here</h4>
							<div class="row">
                            <div class="col-md-6">
				   
                            <!-- Newsletter Form -->
                            <form action="https://formspree.io/saibaaskar24091999@gmail.com" class="nl-form" method="POST">
                                
								<input type="text" class="form-control" placeholder="Your Name" name="Name"><br>
								<input type="text" class="form-control" placeholder="Your Phone Number" name="Phone_Number"><br>
				                 
								<input type="email" class="form-control" placeholder="Your Email" name="Email"><br>
								<input type="text" class="form-control" placeholder="Query" name="Query">
								<br>
				                <center>
                                <button type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
								<center>
								
                            </form>
							</div>
							
							<div class="col-md-6">
							<center>
							<br><br><br></br>
								<h6>Get in touch with me in my in my social media</h6>
							<div class="live-chat-btn ml-5 mt-4 mt-lg-0 ml-md-4">
                                                                        <a href="https://t.me/Sai_bhaskar" class="btn hami-btn live--chat--btn"><i class="fa fa-paper-plane	" aria-hidden="true"></i> Telegram</a>
                                </div>
							
                            <!-- Social Info -->
                            <div class="social-info">
                                <a href="https://github.com/saibhaskar24" class="facebook"><i class="fa fa-github" aria-hidden="true"></i></a>
				<a href="https://www.linkedin.com/in/sai-bhaskar-946529152" class="instagram"><i class="fa fa-linkedin-square" aria-hidden="true"></i>    
                                <a href="https://www.facebook.com/psaibhaskar" class="twitter"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                <a href="https://www.instagram.com/saibhaskar_royal/" class="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                <a href="https://twitter.com/bhaskarbaaskar" class="youtube"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                            </div>
							</center>
							</div>
							</div>
				   <div class="feature-pattern">
            			<img src="img/core-img/test.png" alt="">
       				 </div>
                        </div>
                    </div>

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

        <!-- Bottom Footer Area -->
        <div class="bottom-footer-area bg-gray">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-md-6">
                        <!-- Copywrite Text -->
                        <div class="copywrite-text">
                            <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy; <script>document.write(new Date().getFullYear());</script> All rights reserved | This Website is made with <i class="fa fa-heart-o" aria-hidden="true"> by OSC vizag   Templete credits :</i><a " href="https://colorlib.com" > Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Area End -->

    <!-- **** All JS Files ***** -->
    <!-- jQuery 2.2.4 -->
    <script src="js/jquery.min.js"></script>
    <!-- Popper -->
    <script src="js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- All Plugins -->
    <script src="js/hami.bundle.js"></script>
    <!-- Active -->
    <script src="js/default-assets/active.js"></script>

</body>

</html>