Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

bootstrap03.html 본문

TIS_2016/HTML5_3기

bootstrap03.html

moozi 2016. 7. 22. 13:37

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Boot스트랩연습</title>

    <!-- 뷰포트 ------------------------------------------->

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

    

    <title>Bootstrap연습</title>

    <!-- 부트스트랩CSS -->

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


    <!-- jQuery -->

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


    <!-- 부트스트랩 JavaScript -->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>

        .jumbotron{

            background-color: #1E2759;

            color:white;

            text-align: center;

            padding:250px 25px;

            

        }

        .bg-grey{

            background-color: #F2EBDC;

        }

        .container-fluid{

            padding:60px 50px;

        }

        .logo{

            font-size: 200px;

            color:#CBBD8E;

        }

        .logoSmall{

            font-size: 50px;

            color:#CBBD8E;

        }

        #myCarousel{

            padding:100px;

        }

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

             background-image: none;

             color: #f4511e;

          }

          .carousel-indicators li {

              border-color: #f4511e;

          }

          .carousel-indicators li.active {

              background-color: #f4511e;

          }

        

        /* 미디어쿼리 768px이하에서는 텍스트와 아이콘이 중앙정렬되고 상하여백을 줌. 검색창의 크기를 조절함.  */

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

            .container-fluid{

                text-align: center;

            }

            .col-md-4 {

                margin: 50px 0;

            }

            .search{ width:50%;display:inline;vertical-align: middle;}           

        }

    </style>

</head>

<body>

    <div class="jumbotron">

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

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

        <form class="form-inline" action="https://search.naver.com/search.naver" method="get">

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

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

         </form>

    </div>

    <div class="container-fluid">

       <div class="row">

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

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

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

           </div>

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

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

           </div>

       </div>

       

       

    </div>

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

        <div class="row">

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

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

            </div>

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

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

                <div>

                    <ul class="list-group" style="width:85%;">

                      <li class="list-group-item">

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

                      2013년 설립</li>

                      <li class="list-group-item">

                      <span class="glyphicon glyphicon-apple"></span> 2013년 설립</li>

                      <li class="list-group-item">

                      <span class="glyphicon glyphicon-apple"></span> 2013년 설립</li>

                    </ul>

                </div>

            </div>

        </div>     

        

        

           

        

    </div>

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

        <h3>교육과정</h3>

        <p>정부지원IT교육과정</p>

        <div class="row">

           <h4 style="margin-top:70px;">구직자과정</h4>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>웹표준UI/UX</h4>

                <p>웹표준UI/UX과정은 모던웹사이트 제작을 위한 웹표준 개발방법을 학습합니다. </p>

            </div>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>Java</h4>

                <p>Java과정은 Java를 시작으로, JSP와 스프링을 기반으로 전자정부프레임워크를 사용한 웹사이트 개발방법을 학습합니다.</p>

            </div>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>네트워크</h4>

                <p>네트워크과정은 네트워크 이론을 시작으로,스위치와 허브 등 네트워크 실무를 학습합니다.</p>

            </div>

        </div>

        <div class="row">

           <h4 style="margin-top:70px;">재직자과정</h4>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>웹표준UI/UX</h4>

                <p>웹표준UI/UX과정은 모던웹사이트 제작을 위한 웹표준 개발방법을 학습합니다. </p>

            </div>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>Java</h4>

                <p>Java과정은 Java를 시작으로, JSP와 스프링을 기반으로 전자정부프레임워크를 사용한 웹사이트 개발방법을 학습합니다.</p>

            </div>

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

                <span class="glyphicon glyphicon-leaf logoSmall"></span>

                <h4>네트워크</h4>

                <p>네트워크과정은 네트워크 이론을 시작으로,스위치와 허브 등 네트워크 실무를 학습합니다.</p>

            </div>

        </div>

    </div>

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

        <h3>교육장시설</h3>

        <p>교육센터 시설을 소개합니다.</p>

        <div class="row">

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

                <div class="thumbnail">

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

                    <p><strong>1강의실</strong></p>

                    <p>좌석 30명</p>

                </div>

            </div>

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

                <div class="thumbnail">

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

                    <p><strong>2강의실</strong></p>

                    <p>좌석 32명</p>

                </div>

            </div>

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

                <div class="thumbnail">

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

                    <p><strong>3강의실</strong></p>

                    <p>좌석 25명</p>

                </div>

            </div>

        </div>

    </div>

    

    <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>

    </ol>


    <!-- Wrapper for slides -->

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

      <div class="item active">

        <h4>"HTML5"<br><span style="font-style:normal;">HTML5 is a standard language for mordern web pages.</span></h4>

      </div>

      <div class="item">

        <h4>"CSS3"<br><span style="font-style:normal;">CSS3 is a style sheet for mordern web pages.</span></h4>

      </div>

      <div class="item">

        <h4>"jQuery"<br><span style="font-style:normal;">jQuery is a javascript frame work based on javascript</span></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 class="container-fluid bg-grey">

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

       <div class="row">

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

              <p>

                 <span class="glyphicon glyphicon-phone"></span> 교육&amp;수강문의 : 02-2069-1931, 1544-5637 

              </p>

              <p>

                 <span class="glyphicon glyphicon-phone"></span> 업무문의 : 02-2069-1930

              </p>

              <p>

                 <span class="glyphicon glyphicon-phone"></span> 팩스 : 02-2069-1932

              </p>  

              <p>

                 <span class="glyphicon glyphicon-envelope"></span> 주소 : (우: 70213) 서울특별시 영등포구 선유동2로 70, 이화빌딩 2층(지번 : 서울특별시 영등포구 당산동5가 9-9번지 이화빌딩 2층)

              </p> 

               

           </div>

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

               <form action="mail.php" method="post">

                 <div class="row">

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

                         <div class="form-group">

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

                          </div>

                     </div>

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

                          <div class="form-group"> 

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

                          </div>

                     </div>

                 </div>

                   <textarea class="form-control"  name="comment" placeholder="comment" cols="30" rows="7"></textarea>

                   <div class="form-group">

                       <input  class="btn btn-success pull-right"  type="submit" value="전송">

                   </div>

                   

               </form>

           </div>

       </div>

   </div>

    

    

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


    <!-- Add Google Maps -->

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

    <script>

    var myCenter = new google.maps.LatLng(37.534462, 126.898561);


    function initialize() {

    var mapProp = {

      center:myCenter,

      zoom:12,

      scrollwheel:false,

      draggable:false,

      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>


</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

bootstrap연습문제02  (0) 2016.07.22
bootstrap04.html  (0) 2016.07.22
bootstrap연습문제01 풀이  (0) 2016.07.22
7/21 bootstrap03.html  (0) 2016.07.21
Bootstrap연습문제01  (0) 2016.07.21
'TIS_2016/HTML5_3기' Related Articles more
Comments