Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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

company index.html 본문

TIS_2016/HTML5_4기

company index.html

moozi 2016. 10. 8. 10:25

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>안전해서 더욱 자유로운 세상 - AhnLab</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/1.12.4/jquery.min.js"></script>

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

      

      <style>

          #myCarousel .item img{

              height: 350px;

          }

          #myCarousel{

              margin-top: 50px;

          }

          .col-sm-6{

              padding-top:50px;

          }

          .container{

              padding:50px 0;

          }

          .bg-gray{

              background-color: #424C51;

              color:white;

          }

          .bg-blue{

              background-color: darkcyan;

          }

          footer{

              padding:30px 0;    

          }

            .navbar{

              background-color: white;

/*              border:none;*/

               

            }

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

                color: black !important;

            }

            .navbar-nav>.active>a{

                background-color:cornflowerblue !important;

                color:white !important;

            }

          

          

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

              #myCarousel .item img{

                  height: 250px;

              }

              

              .container{

                  padding:50px 5px !important;

              }

              .col-sm-4,.col-sm-2,.col-sm-6{

                  padding:10px 5px !important;

              }

          }

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

      });

    })

    </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-fluid">

     <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">AhnLab</a>

     </div>

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

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

<!--        <li><a href="#myPage">ABOUT</a></li>-->

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

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

        <li><a href="#board">Board</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>

  </ol>


  <!-- Wrapper for slides -->

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

    <div class="item active">

      <img src="img/title01.png" alt="타이틀이미지1">


<!--

      <div class="carousel-caption">

        <h3>안랩</h3>

        <p>세상에서 가장 안전한 이름</p>

      </div> 

-->


    </div>


    <div class="item">

      <img src="img/title02.png" alt="타이틀이미지2">

<!--

      <div class="carousel-caption">

        <h3>Chicago</h3>

        <p>Thank you, Chicago - A night we won't forget.</p>

      </div> 

-->

    </div>


    <div class="item">

      <img src="img/title03.png" alt="타이틀이미지3">

<!--

      <div class="carousel-caption">

        <h3>LA</h3>

        <p>Even though the traffic was a mess, we had the best time.</p>

      </div> 

-->

    </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="bg-gray">  

   <div class="container">

       <div class="row">

           <div class="col-sm-3 text-center">

               <h3>보안경보</h3>

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

           </div>

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

               <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>[공지] 서비스 정기 점검 (10/12)2016.10.06</p>

                      <p>[공지] 바이러스신고 시스템 점검 (10/2~10/3)2016.09.30</p>

                      <p>[공지] V3 Mac(기업용/개인용) 지원 OS 관련 안내2016.09.19</p>

                  </div>

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

                      <p>안랩, 2016년 ‘한-콜롬비아 IT협력센터..2016.09.09</p>

                      <p>안랩, 안전한 추석 연휴를 위한 ‘사..2016.09.07</p>

                      <p>판교CSR얼라이언스, 자선바자 행사 ‘..2016.09.07</p>

                  </div>                  

                </div>

           </div>

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

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

               <img src="img/icon2.png" alt="v3 365" style="float:right;width:70px;height:70px;">

               <p>

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

                    전문 클리닉 서비스까지

                    프리미엄 PC 보안 및

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

               </p>

           </div>

            

       </div>

   </div>

</div>    

   <div id="product" class="container text-center">

      <h1>Product</h1>

       <div class="row">

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

               <div class="thumbnail">

                   <img src="img/product01.png" alt="제품1">

                   <h5>MDS</h5>

                   <p>

                     지능형 위협 대응 솔루션  

                   </p>

                   <button class="btn btn-primary" 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-lock"></span> MDS</h4>

                          </div>

                          <div class="modal-body">

                            <h5>AhnLab MDS는

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

                            <img src="img/product01_1.jpg" alt="mds" width="100%">

                          </div>

                          <div class="modal-footer">

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

                          </div>

                        </div>

                      </div>

                    </div>

                   

                   

                   

                   

               </div>

           </div>

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

               <div class="thumbnail">

                   <img src="img/product02.png" alt="제품2">

                   <h5>V3 Internet Security 9.0</h5>

                   <p>

                     진단율, 속도, 사전 방역까지 '차원'이 다르다!   

                   </p>

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

               </div>

           </div>

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

               <div class="thumbnail">

                   <img src="img/product01.png" alt="제품1">

                   <h5>간편인증</h5>

                   <p>

                     보안성과 편의성의 공존을 실현하다  

                   </p>

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

               </div>

           </div>

       </div>

   </div>

   

   

   <div class="bg-blue" id="contact">

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

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

            <div class="row">

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

                <pre>

                <span class="glyphicon glyphicon-phone"></span>대표전화 : 031-722-8000 

                <span class="glyphicon glyphicon-phone"></span>Fax : 031-722-8901 

                <span class="glyphicon glyphicon-phone"></span>구매문의 : 1588-3096 

                <span class="glyphicon glyphicon-phone"></span>개인고객 기술지원 : 1577-9880 

                <span class="glyphicon glyphicon-phone"></span>기업고객 기술지원 : 1577-9431</pre>

                </div>

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

                  <form action="contact.aspx" method="post">


                   <div class="row">

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

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

                       </div>

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

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

                        </div>

                   </div>

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

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



                  </form>


                </div>

            </div>

        </div> 


       

   </div>

   

   

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

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

    <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.400250, 127.110760);


    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="text-center">

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

        <h6>

            &copy;AhnLab. All rights resereved.

        </h6>

    </footer>   


    

</body>

</html>

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

bootstrap 연습문제02  (0) 2016.10.10
안랩 캐러셀 배경이미지  (0) 2016.10.10
bootStrap연습문제01  (0) 2016.10.07
jQueryMobile 연습문제01  (0) 2016.10.06
introduce3.html  (0) 2016.10.06
'TIS_2016/HTML5_4기' Related Articles more
Comments