Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

moozi

index.html 본문

TIS_2016/주말반_5기

index.html

moozi 2016. 12. 10. 17:03

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>TIS Edu.</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

        @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

        body{

            font-family: 'Jeju Gothic', sans-serif;

        }

        .jumbotron{

            background-color: darkblue;

            color:white;

            padding:120px 25px;

        }

        .bg-grey{

            background-color: darkgray;

        }

        .container-fluid{

            padding:60px 50px;

        }

        .logo{

            font-size: 200px;

            color:#286EB4;

        }

        .logo-small{

            font-size: 70px;

            color:#286EB4;

        }

        .carousel-control.right, .carousel-control.left {

            background-image: none;

            color: #f4511e;

        }


        .carousel-indicators li {

            border-color: #f4511e;

        }


        .carousel-indicators li.active {

            background-color: #f4511e;

        }

        #myCarousel{

            height: 130px;

        }

        .navbar{

            background-color: darkblue;   

            border-bottom: none;

        }

        .navbar li a, .navbar .navbar-brand {

            color: white !important;

        }

        .navbar-nav li a:hover, .navbar-nav li.active a {

            color: darkblue !important;

            background-color: skyblue !important;

        }

        .slideanim {visibility:hidden;}

        .slide {

            /* The name of the animation */

            animation-name: slide;

            animation-duration: 1s; 

            visibility: visible; 

        }


        @keyframes slide {

            0% {

                opacity: 0;

                transform: translateY(70%);

            } 

            100% {

                opacity: 1;

                transform: translateY(0%);

            } 

        }

        

        @media screen and (max-width:768px){

            .col-md-4{

                text-align: center;

                padding-top: 50px;

                padding-bottom: 50px;

            }

            .search{

                width: 50%;

                display: inline; /* 옆이 버튼 줄바뀌지 않고 나란히 */

                vertical-align: middle; /* 옆의 버튼 수직 정렬 가운데*/

            }

        }

    </style>

    

    <script>

    $(document).ready(function(){

      // Add smooth scrolling to all links in navbar + footer link

      $(".navbar a, footer a[href='#myPage']").on('click', function(event) {


       // Make sure this.hash has a value before overriding default behavior

      if (this.hash !== "") {


        // Prevent default anchor click behavior

        event.preventDefault();


        // Store hash

        var hash = this.hash;


        // Using jQuery's animate() method to add smooth page scroll

        // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area

        $('html, body').animate({

          scrollTop: $(hash).offset().top

        }, 900, function(){


          // Add hash (#) to URL when done scrolling (default click behavior)

          window.location.hash = hash;

          });

        } // End if

      });

        

        

        $(window).scroll(function() {

          $(".slideanim").each(function(){

            var pos = $(this).offset().top;


            var winTop = $(window).scrollTop();

            if (pos < winTop + 600) {

              $(this).addClass("slide");

            }

          });

        });

        

        $('.nav a').on('click', function(){

            $('.btn-navbar').click(); //bootstrap 2.x

            $('.navbar-toggle').click() //bootstrap 3.x by Richard

        });

    

        

    })

    </script>

</head>

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

   <nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span> 

      </button>

      <a class="navbar-brand" href="#myPage">TIS 정보기술 교육센터</a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#about">교육원소개</a></li>

        <li><a href="#history">교육센터연혁</a></li>

        <li><a href="#course">교육과정</a></li>

        <li><a href="#class">강의시설</a></li>

        <li><a href="#contact">CONTACT</a></li>

      </ul>

    </div>

  </div>

</nav>

   

   

    <div class="jumbotron text-center">

      <h1>TIS 정보기술 교육센터</h1> 

      <p>정부지원 IT전문교육 운영</p> 

      <form action="search.php" method="post" class="form-inline">

          <input type="text" class="form-control search" size="50" placeholder="검색어를 입력하세요">

          <input type="submit" value="search" class="btn btn-danger">

      </form>

    </div>

    <div id="about" class="container-fluid">

       <div class="row">

           <div class="col-md-4">

               <span class="glyphicon glyphicon-globe logo slideanim"></span>

           </div>

           <div class="col-md-8">

               <h1>교육센터 소개</h1>

                <p>

                    TIS 정보기술 교육센터에서는 정부지원 IT 전문교육을 운영하고 있습니다.

                </p>

           </div>

       </div>

       

        

    </div>

      <div id="history" class="container-fluid bg-grey">

        <div class="row">

            <div class="col-md-8">

                <h1>교육센터 연혁</h1>

                <p>

                    2013 교육센터 설립

                    2014 IT전문과정 교육

                    2015 ^^

                </p>

            </div>

            <div class="col-md-4">

                <span class="glyphicon glyphicon-signal logo slideanim"></span>

            </div>

        </div>

        

    </div>

   <div id="course" class="container-fluid text-center">

       <h1 style="padding-bottom:30px;">교육과정</h1>

       <div class="row slideanim">

           <div class="col-md-4">

               <span class="glyphicon glyphicon-leaf logo-small"></span>

               <h3>웹퍼블리셔</h3>

               <p>Web Publisher</p>

           </div>

           <div class="col-md-4">

               <span class="glyphicon glyphicon-heart logo-small"></span>

               <h3>프론트앤드개발</h3>

               <p>Front End Dev.</p>

           </div>

           <div class="col-md-4">

               <span class="glyphicon glyphicon-off logo-small"></span>

               <h3>Java</h3>

               <p>Java Dev.</p>

           </div>

       </div>

       

       <h2 class="text-center">Curriculumn</h2>

        <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">

          <!-- Indicators -->

          <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel" data-slide-to="1"></li>

            <li data-target="#myCarousel" data-slide-to="2"></li>

            <li data-target="#myCarousel" data-slide-to="3"></li>

          </ol>


          <!-- Wrapper for slides -->

          <div class="carousel-inner" role="listbox">

            <div class="item active">

            <h4>HTML5</h4>

            </div>

            <div class="item">

              <h4>CSS3</h4>

            </div>

            <div class="item">

              <h4>Javascript</h4>

            </div>

            <div class="item">

              <h4>JQuery</h4>

            </div>

          </div>


          <!-- Left and right controls -->

          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

          </a>

          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

          </a>

        </div>

       

       

   </div>

   <div id="class" class="container-fluid text-center bg-grey">

       <h1 style="padding-bottom:30px;">강의시설</h1>

       <div class="row slideanim">

           <div class="col-md-3">

              <div class="thumbnail">

                  <img src="img/pic1.png" alt="강의실1">

                   <h3>강의실1</h3>

                   <p>Class1</p>

              </div>

               

           </div>

           <div class="col-md-3">

               <div class="thumbnail">

                  <img src="img/pic2.png" alt="강의실2">

                   <h3>강의실2</h3>

                   <p>Class2</p>

              </div>

           </div>

           <div class="col-md-3">

               <div class="thumbnail">

                  <img src="img/pic3.png" alt="강의실3">

                   <h3>강의실3</h3>

                   <p>Class3</p>

              </div>

           </div>

           <div class="col-md-3">

               <div class="thumbnail">

                  <img src="img/pic3.png" alt="강의실3">

                   <h3>강의실3</h3>

                   <p>Class3</p>

              </div>

           </div>

       </div>

       

   </div>

   

   

       <div id="contact" class="container-fluid">

          <h1 class="text-center">Contact</h1>

           <div class="row">

               <div class="col-md-5">

                   <span class="glyphicon glyphicon-map-marker"></span>

                   서울특별시 영등포구 선유동2로 70, 이화빌딩 2층<br>

                   <span class="glyphicon glyphicon-phone"></span>

                   02-2069-1931<br>

                   <span class="glyphicon glyphicon-envelope"></span>

                   contact@tisedu.co.kr

               </div>

               <div class="col-md-7">

                   <div class="row slideanim">

                       <div class="col-md-6">

                          <div class="form-group">

                            <input type="text" name="name" placeholder="name" class="form-control">

                           </div>

                       </div>

                       <div class="col-md-6">

                          <div class="form-group">

                            <input type="email" name="email" placeholder="email" class="form-control">

                           </div>

                       </div>

                       

                       <div class="col-md-12">

                           <div class="form-group">

                               <textarea name="comment" placeholder="comment" class="form-control" rows="5"></textarea>

                           </div>


                             <div class="form-group">

                                  <input type="submit" name="send" class="btn btn-primary pull-right">

                             </div>

                       </div>

                       

                        

                       

                   </div>

                   

                   

               </div>

           </div>

       </div>

       

       <!-- Set height and width with CSS -->

       

       <div class="container-fluid">

           <div id="googleMap" style="height:400px;width:100%;"></div>

       </div>

        

        <!-- Add Google Maps -->

        <script src="http://maps.googleapis.com/maps/api/js"></script>

        <script>

        var myCenter = new google.maps.LatLng(37.534441, 126.898556);


        function initialize() {

        var mapProp = {

        center:myCenter,

        zoom:16,

        scrollwheel:true,

        draggable:true,

        mapTypeId:google.maps.MapTypeId.ROADMAP

        };


        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);


        var marker = new google.maps.Marker({

        position:myCenter,

        });


        marker.setMap(map);

        }


        google.maps.event.addDomListener(window, 'load', initialize);

        </script>


    <footer class="container-fluid text-center bg-grey">

        <a href="#myPage"><span class="glyphicon glyphicon-chevron-up"></span></a>

        <p>

            &copy;TIS Edu. All rights reserved.

        </p>

    </footer>

</body>

</html>

'TIS_2016 > 주말반_5기' 카테고리의 다른 글

안랩 index.html  (0) 2016.12.17
join.html  (0) 2016.12.10
bootstrap navbar 클릭시 닫히게 하기  (0) 2016.12.10
company.zip  (0) 2016.12.10
movie.zip  (0) 2016.12.03
'TIS_2016/주말반_5기' Related Articles more
Comments