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

moozi

bootstrap04.html 본문

TIS_2016/HTML5_3기

bootstrap04.html

moozi 2016. 7. 25. 09:33

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</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>

    

    

    

    <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 

  });

})

</script>

    

    

    

    <style>

        .navbar-default{

            background-color: white;

        }

        .navbar-default .navbar-nav>li>a {

            color: darkblue;

        }

        .navbar-default .navbar-nav>.active>a,

        .navbar-default .navbar-nav>.active>a:focus,

        .navbar-default .navbar-nav>.active>a:hover {

            color: #555;

            background-color: #38B684;

        }

        .container-fluid{

            padding:50px;

        }

        .col-md-4{

            margin-top:70px;

            margin-bottom:70px;

        }

        .contact{

            margin-top:0px;

            margin-bottom:0px;

        }

        .bg1{

            background-color: #dddddd;

        }

        .thumbnail{

            padding-bottom: 50px;

        }

        button{

            float: right;

        }

        .carousel-inner img{

            width:100%;

            height:450px !important;        

        }

        

        .modal-header, .modal-footer{

            background-color: #333333;

            color:#eeeeee;

        }

        .close{

            color:#eeeeee !important;

            opacity: 1 !important;

            

        }

        .map{

            padding:50px;

        } 

        #googleMap{

            width:100%;

            height:400px; 

            border:3px solid #eeeeee;

        }

        footer{

            background-color: #5686B3;

            padding-top:50px;

            padding-bottom:50px;

        }

       

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

            .item{

                width: 768px !important;

                height: 300px !important;

                overflow: hidden !important;

            }

            .item img{

               margin: -75px 0 0 -100px !important; 

            }

             

            

            

        }

    </style>

</head>

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

   <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"><img src="img/img_logo.gif"></a>

        </div>

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

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

            <li><a href="#notice">Notice</a></li>

            <li class="dropdown">

              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Product

                <span class="caret"></span>

              </a>

              <ul class="dropdown-menu">

                <li><a href="#product">MDS</a></li>

                <li><a href="#product">V3 365클리닉</a></li>

                <li><a href="#product">간편인증</a></li> 

              </ul>

            </li>           

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

          </ul>

        </div>

      </div>

    </nav>

    <div id="myCarousel" class="carousel slide" 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">

      <img src="img/title1.png" alt="안랩">

<!--

      <div class="carousel-caption">

        <h3>New York</h3>

        <p>The atmosphere in New York is lorem ipsum.</p>

      </div> 

-->

    </div>


    <div class="item">

      <img src="img/title2.png" alt="안랩">      

    </div>


    <div class="item">

      <img src="img/title3.png" alt="안랩">

    </div>

    

    <div class="item">

      <img src="img/title4.png" alt="안랩">

    </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 id="notice" class="container-fluid" style="background-color:#4D5458;color:white;">

    <div class="row">

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

            <h3>보안경보</h3>

            <p>

                <img src="img/icon1.png" alt="보안경보">

            </p>

        </div>

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

            <ul class="nav nav-tabs">

              <li class="active"><a data-toggle="tab" href="#notice">Notice</a></li>

              <li><a data-toggle="tab" href="#press">Press</a></li>             

            </ul>


            <div class="tab-content">

              <div id="notice" class="tab-pane fade in active">

                  <p>[공지] V3 MSS ‘IT자산관리’ 업그레이..2016.07.15</p>

                  <p>[공지] 안랩 웹 보안 업그레이드 캠페인2016.07.14</p>

                  <p>[공지] V3 제품군, ASTx 엔진 패치(ASD 2...2016.07.13</p>

              </div>

              <div id="press" class="tab-pane fade">

                <p>

                   안랩, 역사학자 신병주 교수 초청 인문학 특강 진행2016.06.24 

                </p>

                <p>

                    안랩, '이메일 랜섬웨어 보안 서비스' 출시2016.06.24 

                </p>

                <p>

                    안랩 V3 모바일 시큐리티, ‘URL/문자메..2016.06.24

                </p>

              </div>

            </div>            

        </div>

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

            <h3>V3 365클리닉</h3>

            <img src="img/product1.png" style="float:right;">

            <p>                

                V3 365 클리닉은 통합 보안부터

                전문 클리닉 서비스까지

                프리미엄 PC 보안 및

                토털 PC 케어를 제공합니다.

            </p>

        </div>

    </div>

    

</div>


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

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

    <div class="row">

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

            <div class="thumbnail">

                <img src="img/product2.png">

                <h3>MDS</h3>

                <p>

                    지능형 위협대응 솔루션

                </p>

                <button class="btn btn-primary btnRight" data-toggle="modal" data-target="#myModal">more</button>

                <!-- Modal -------------------------------------------->

                <div class="modal fade" id="myModal" role="dialog">

                  <div class="modal-dialog">


                    <!-- Modal content-->

                    <div class="modal-content">

                      <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal">&times;</button>

                        <h4><span class="glyphicon glyphicon-th-large"></span> MDS</h4>

                      </div>

                      <div class="modal-body">

                        <h4>AhnLab MDS는

                        '악성 파일 수집-분석-모니터링- 대응'의 종합 프로세스를 통해 APT(Advanced Persistent Threat) 등의 지능형 위협을 효과적으로 방어합니다. </h4>

                        <img src="img/product01.jpg" width="100%">

                      </div>

                      <div class="modal-footer">

                        <a href="http://download.ahnlab.com/kr/site/brochure/MDS_Brochure_kr.pdf" class="btn btn-success">more</a>

                      </div>

                    </div>

                  </div>

                </div>  

                <!-- Modal.끝. ----------------------------------------->          

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/product3.png">

                <h3>V3 Internet Security 9.0</h3>

                <p>

                    진단율,속도,사전방역 

'차원'이 다르다!   

                </p>

                 <button class="btn btn-primary btnRight" data-toggle="modal" data-target="#myModal2">more</button>

                 <!-- Modal -------------------------------------------->

                <div class="modal fade" id="myModal2" role="dialog">

                  <div class="modal-dialog">


                    <!-- Modal content-->

                    <div class="modal-content">

                      <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal">&times;</button>

                        <h4><span class="glyphicon glyphicon-th-large"></span> V3 Internet Security 9.0</h4>

                      </div>

                      <div class="modal-body">

                                                <h4>기업용 통합 PC 보안 솔루션 AhnLab V3 Internet Security 9.0은

                        다차원 분석 플랫폼을 통해 다양한 보안 위협으로부터

                        기업의 클라이언트 PC를 안전하게 보호하며, 사전 방역 기능을 제공해

                        안전한 컴퓨팅 환경 구축에 기여합니다. </h4>

                        <img src="img/product02.jpg" width="100%">

                      </div>

                      <div class="modal-footer">

                        <a href="http://download.ahnlab.com/kr/site/brochure/Brochure_V3%20Internet%20Security%209.0.pdf" class="btn btn-success">more</a>

                      </div>

                    </div>

                  </div>

                </div>  

                <!-- Modal.끝. ----------------------------------------->

                 

                 

                 

                 

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/product4.png">

                <h3>간편인증</h3>

                <p>

                    보안성과 편의성의

공존을 실현하다

                </p>

                <button class="btn btn-primary btnRight">more</button>

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/product5.png">

                <h3>V3 365 클리닉</h3>

                <p>

                    빠르다, 가볍다, 스마트하다!

                </p>

                <button class="btn btn-primary btnRight">more</button> 

                

                   

                        

                   

                    

                

                 

            </div>

        </div>

    </div>

</div>


<!-- Contact ----------------------------------------------------->

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

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

    <div class="row">

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

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

                대표전화 : 031-722-8000 </p>

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

                Fax : 031-722-8901 </p>

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

                구매문의 : 1588-3096 </p>

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

                개인고객 기술지원 : 1577-9880 </p>

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

                기업고객 기술지원 : 1577-9431</p>

        </div>

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

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

                <div class="row">

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

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

                    </div>

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

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

                    </div>

                </div>

                <div class="form-group">

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

                </div>                

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

            </form>

        </div>

    </div>    

</div>


<!-- Contact.끝.--------------------------------------------------->


<div class="map">

    <div id="googleMap"></div>


    <!-- Add Google Maps -->

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

    <script>

    var myCenter = new google.maps.LatLng(37.400245, 127.110784);


    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>


</div>


<footer class="text-center">

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

    <h5>&copy;AhnLab. All rights reserved.</h5>

</footer>


</body>

</html>

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

svg translate() 관련링크  (0) 2016.07.25
canvas연습문제01  (0) 2016.07.25
bootstrap연습문제02  (0) 2016.07.22
bootstrap04.html  (0) 2016.07.22
bootstrap03.html  (0) 2016.07.22
'TIS_2016/HTML5_3기' Related Articles more
Comments