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

5/31 안랩 데모사이트 본문

TIS_2016/HTML5_2기

5/31 안랩 데모사이트

moozi 2016. 5. 31. 12:20

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

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

    <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.2/jquery.min.js"></script>

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

    <style type="text/css">

        .container-fluid{

            padding:100px 120px;

        }


        .thumbnail{

            min-height: 300px;

        }


        .carousel-inner img {

            -webkit-filter: grayscale(30%);

            filter: grayscale(30%); /* 흑백사진으로 변환 */ 

            width: 100%; 

            margin: auto;

        }

        .bg-1 {

            background: #C3C4C6;

        }

       

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

        }

        

    </style>

</head>

<body>

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

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

<!--

      <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/slide02.png" alt="slide02">

<!--

      <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/slide03.png" alt="slide03">

<!--

      <div class="carousel-caption">

        <h3>LA</h3>

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

      </div> 

-->

    </div>

    <div class="item">

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

<!--

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

        <h1>AhnLab</h1>

        <p>안전해서 더욱 자유로운 세상 | 안랩</p>

    </div>

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

        <h2>Products</h2>

        <div class="row">

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

               <div class="thumbnail">

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

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

                    <p>MDS</p>

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

                    <button class="btn" 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">

                        <!-- 닫기(X)버튼 -------------------------->

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

                         <!-- 닫기(X)버튼.끝 ------------------------>

                          <h4>MDS</h4>

                      </div>

                      <div class="modal-body">

                       <img src="img/product01.png" width="90%">

                        <h5>AhnLab MDS는

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

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

                      </div>

                      <div class="modal-footer">

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

                      </div>

                    </div>

                    </div>

                    </div>

                    <!-- 모달창. 끝. ------------------------------------->

                </div>

            </div>

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

               <div class="thumbnail">

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

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

                    <p>TrusGuard</p>

                    <p>네트워크 환경을 수호하는 차세대 통합 보안 시스템</p>

                </div>

            </div>

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

               <div class="thumbnail">

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

                    <p>PC보안</p>

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

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

                </div>

            </div>

        </div>

    </div>

    <div class="container-fluid">

       <div class="row">

           <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="#news">News</a></li>

                </ul>

                <div class="tab-content">

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

                        <h5>[공지] 5/6 고객지원센터 휴무 안내 2016.05.02</h5>

                        <h5>[안내] '안랩 엔드포인트 플랫폼' 페이스북 오픈 2016.04.28</h5>

                        <h5>[공지] TrusGuard / IPX / DPX 신규모델</h5>

                    </div>

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

                        <h5>안랩, 랜섬웨어 ‘CryptXXX 2.x’ 버전에..2016.05.30</h5>

                        <h5>안랩, 네트워크 파트너 대상 ‘Partner..2016.05.30</h5>

                        <h5>안랩, ‘ISF 스퀘어’에서 유통분야 고..2016.05.30</h5>

                    </div>        

                </div>

           </div>

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

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

               <p>  

               <img src="img/product03.png" width="150px" style="float:right;">                

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

                전문 클리닉 서비스까지

                프리미엄 PC 보안 및

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

               </p>

           </div>

       </div>        

    </div>

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

       <h2>오시는 길</h2>

        <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.400236, 127.110741);


        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>

    

</body>

</html>











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

6/1 수업예제  (0) 2016.06.01
javascript연습문제01  (0) 2016.06.01
html 연습문제 풀이  (0) 2016.05.30
5/30 부트스트랩 레이아웃  (0) 2016.05.30
반응형 레이아웃 샘플  (0) 2016.05.28
'TIS_2016/HTML5_2기' Related Articles more
Comments