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

company index.html 본문

TIS_2016/주말반_2기

company index.html

moozi 2016. 6. 11. 14:26

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>안전해서 더욱 자유로운 세상 - Ahnlab</title>

    <!-- viewport. 모바일화면에 맞게 글자.이미지크기 조정 ----->

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

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

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

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

    <style type="text/css">

/*

        .carousel-indicators{

            position:fixed !important;

            top:10px  !important;

            left:1200px !important;

        }

*/

        .container-fluid{

            padding:50px 120px;

        }

        .carousel-inner img {

            width: 100%; 

            margin: auto;

        }

        

        .modal-header, h4, .close {

            background-color: #333;

            color: #fff !important;

            text-align: center;

            font-size: 30px;

        }


        .modal-header, .modal-body {

            padding: 40px 50px;

        }

        

        #googleMap{

            width:100%;

            height:400px;

        }

        

        .bg1{

            background-color: #5686B3;

        }

        .bg2{

            background-color:#333333;

            color:white;

        }

        footer{

            padding:50px 120px;

        }

        .nav1{

            padding:0;

        }

        .navbar{

            background-color: white !important;

        }

        

        @media (max-width: 600px) {

            .container-fluid, footer {

                padding-left:10px;

                padding-right:10px;

            }

        }

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

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

  <div class="container-fluid nav1">

    <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="#"><img src="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">TrusGuard</a></li>

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

            </ul>

        </li>

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

        <li><a href="#map">Map</a></li>

      </ul>

    </div>

  </div>

</nav>

    <div class="container-fluid">

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

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

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

                <div class="item active">

                  <img src="img/title01.png" alt="타이틀01">

    <!--

                  <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/title02.png" alt="타이틀02">           

                </div>

                <div class="item">

                    <img src="img/title03.png" alt="타이틀03">

                </div>

            </div>

            

            <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 class="container-fluid" id="notice">

       <h1 style="text-align:center;">Notice</h1>         

        <div class="row">

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

                <h3>보안경보</h3>

                <p>3단계주의</p>

            </div>

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

                <ul class="nav nav-tabs">

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

                  <li><a data-toggle="tab" href="#news">News</a></li>

                </ul>


                <div class="tab-content">

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

                    <p>[공지] 서비스 정기 점검 (6/8, 6/13) 2016.06.07</p>

                    <p>[공지] 이용약관 및 개인정보취급방침 개정 안내 2016.06.02</p>

                    <p>[공지] TrusGuard / IPX / DPX 신규 모델 출시 2016.04.26</p>

                  </div>

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

                      <p>안랩, 가트너 매직 쿼드런트 3년 연속 등재 2016.06.10</p>

                      <p>안랩, 산업별 고객 대상 보안전략세미.. 2016.06.10</p>

                      <p>V3 모바일 시큐리티, 누적 다운로드 100만 돌파 2016.06.10</p>

                  </div>

                </div>                

            </div>

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

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

                <div class="row">

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

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

                    전문 클리닉 서비스까지

                    프리미엄 PC 보안 및

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

                    </div>

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

                        <img src="img/product03.png" width="100%">

                    </div>

                </div>

            </div>

        </div>

    </div>

    

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

       <h1 style="text-align:center;">Product</h1> 

        <div class="row">

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

                <div class="thumbnail">

                    <img src="img/product01.png" alt="product01">

                    <p>차세대APT보안</p>

                    <p>MDS</p>

                    <p>지능형 위협 대응 솔루션</p>

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

                          </div>

                          <div class="modal-body">

                            <img src="img/product01.png" alt="MDS">

                            <p>

                            AhnLab MDS는

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

                            </p>

                          </div>

                          <div class="modal-footer">

                            <a href="http://download.ahnlab.com/kr/site/brochure/MDS_Brochure_kr.pdf">브로슈어보기</a>

                          </div>

                        </div>

                      </div>

                    </div>

                    

                    

                </div>

            </div>

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

                <div class="thumbnail">

                    <img src="img/product02.png" alt="product02">

                    <p>네트워크 보안</p>

                    <p>TrusGuard</p>

                    <p>네트워크 환경을 수호하는 

                    차세대 통합 보안 시스템</p>

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

                </div>

            </div>

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

                <div class="thumbnail">

                    <img src="img/product03.png" alt="product03">

                    <p>PC보안</p>

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

                    <p>빠르다, 가볍다, 스마트하다!</p>

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

                </div>

            </div>

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

                <div class="thumbnail">

                    <img src="img/product04.png" alt="product04">

                    <p>엔드포인트 보안</p>

                    <p>V3 Internet Security 9.0</p>

                    <p>진단율, 속도, 사전 방역까지 

                    '차원'이 다르다! </p>

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

                </div>

            </div>

        </div>

    </div>  

    

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

        <h1 style="text-align:center;">Contact</h1>

        <div class="row">

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

                <p>우) 13493 경기도 성남시 분당구 판교역로 220</p> 

                <p>대표이사 : 권치중</p> 

                <p>사업자등록번호 : 214-81-83536</p> 

                <p>통신판매신고번호 : 2012-경기성남-1189</p>

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

                <p>Fax : 031-722-8901</p> 

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

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

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

            </div>

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

                <div class="row">

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

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

                    </div>

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

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

                    </div>

                </div>

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

                <div class="row">    

                    <div class="col-sm-12 form-group">

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

                    </div>

                </div>

                

            </div>

        </div>

    </div> 

          

    <div class="container-fluid bg2" id="map">

       <h1 style="text-align:center;">오시는 길</h1>

        <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.400232, 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>

    </div> 

    <footer style="text-align:center;">

       <a href=#myPage>

        <span class="glyphicon glyphicon-chevron-up"></span>

       </a>

       <p>

           © AhnLab, Inc. All rights reserved.

            회사소개 | 

            투자정보 |

            채용정보 |

            개인정보취급방침 |

            이용약관 |

            Contact Us |

            사이트맵 |

       </p>

    </footer>     

   

</body>

</html>

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

수업전체파일  (0) 2016.06.11
반응형레이아웃연습  (0) 2016.06.11
6/11 company  (0) 2016.06.11
6/4 영화소개 페이지 예제  (0) 2016.06.04
6/4 실습예제 index.html  (0) 2016.06.04
'TIS_2016/주말반_2기' Related Articles more
Comments