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

8/16 bmw 본문

TIS_2017/응용sw_2기

8/16 bmw

moozi 2017. 8. 16. 18:01

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BMW</title>

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

    

    <!-- Latest compiled and minified CSS -->

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


    <!-- jQuery library -->

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


    <!-- Latest compiled JavaScript -->

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

    <style>

        #myCarousel,#models{

            padding-top: 50px;

        }

        .carousel-caption{

            top:0;

            text-align: left;

        }

        .carousel-caption h3{

            font-size: 45px;

        }

        #models div{

            color: white;

        }

        

        #models .col-sm-2{

            padding-right:5px;

            padding-left: 5px;

        }

        #models .col-sm-2 div{

            position: relative;

            background-color: gray;

            height:90px;

            padding-top: 70px;

            margin-top: 10px;

            overflow: hidden;

        }

        #models .col-sm-2 div:hover{

            background-color: white;

            color: royalblue;

            border: 1px solid gray;

        }

        #models .col-sm-2 div span{

            position: absolute;

            right:-7px;

            bottom: -20px;

            font-size: 70px;

            

            

        }

        #test .col-sm-6{

            margin-top: 15px;

        }

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

   <!-- navigation --------------------------------------->

    <nav class="navbar navbar-inverse 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">BMW</a>

        </div>

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

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

            <li><a href="#myPage">HOME</a></li>

            <li><a href="#models">BMW모델</a></li>           

            <li><a href="#testForm">시승신청</a></li>

            <li><a href="#dealer">딜러위치</a></li>

            <li class="dropdown">

              <a class="dropdown-toggle" data-toggle="dropdown" href="#">BMW오너

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

              </a>

              <ul class="dropdown-menu">

                <li><a href="#">서비스센터</a></li>

                <li><a href="#">라이프스타일</a></li>

                <li><a href="#">Recall</a></li> 

              </ul>

            </li>

            <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>

          </ul>

        </div>

      </div>

    </nav>

    <!-- navigation.끝. -->

    

    <!-- carousel ---------------------------------------->

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

        <li data-target="#myCarousel" data-slide-to="4"></li>

      </ol>


      <!-- Wrapper for slides -->

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

        <div class="item active">

          <img src="img/pic01.jpg" alt="BMW">

          <div class="carousel-caption">

            <h3>BMW X RANGE</h3>

            <p>ANY TIME, ANY WHERE</p>

          </div> 

        </div>


        <div class="item">

          <img src="img/pic02.jpg" alt="BMW">

          <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/pic03.jpg" alt="BMW">

          <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/pic04.jpg" alt="BMW">

          <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/pic05.jpg" alt="BMW">

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

    <!-- carousel.끝. -->

    

    <!-- model ------------------------------------------->

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

       <h3 style="margin-top: 30px;">BMW모델</h3>

        <div class="row">

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

              <div id="model0">All Models</div>

          </div>

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

              <div id="model1">BMW 1 Series<span>1</span></div>

          </div>

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

              <div id="model2">BMW 2 Series<span>2</span></div>

          </div>

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

              <div id="model3">BMW 3 Series<span>3</span></div>

          </div>

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

              <div id="model4">BMW 4 Series<span>4</span></div>

          </div>

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

              <div id="model5">BMW 5 Series<span>5</span></div>

          </div>  

        </div>

        <div class="row">

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

              <div id="model6">BMW 6 Series<span>6</span></div>

          </div>

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

              <div id="model7">BMW 7 Series<span>7</span></div>

          </div>

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

              <div id="model8">BMW X Series</div>

          </div>

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

              <div id="model9">BMW GT Series</div>

          </div>

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

              <div id="model10">BMW B Series</div>

          </div>

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

              <div id="model11">BMW i Series</div>

          </div>  

        </div>

    </div>

    <!-- model.끝. -->

    

    <!-- 시승 Text  --------------------------------------->

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

        <div class="row">

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

                <div class="thumbnail">

                  <a href="img/pic06.jpg">

                    <img src="img/pic06.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>BMW가 선사하는 진정한 드라이빙의 즐거움을 직접 경험해 보십시오.

                       <br>

                       <a href="#" class="btn btn-success">바로가기</a>

                        </p>

                    </div>

                  </a>

                </div>

            </div>

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

                <div class="thumbnail">

                  <a href="img/pic07.jpg">

                    <img src="img/pic07.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>3년간 ½ 할부금, 3년 무상 보증, 3년 후 신차 교환. 더 많은 구매 혜택이 스마트하게 하나로.

                      <br>

                       <a href="#myModal" class="btn btn-success" data-toggle="modal">바로가기</a>

                       

                       <!-- Modal -->

                        <div id="myModal" class="modal fade" 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 class="modal-title">BMW SMART-UP 프로그램</h4>

                              </div>

                              <div class="modal-body">

                                <p>

                                    <img src="img/pic12.jpg" width="100%" alt="smart-up 프로그램 이미지">

                                </p>

                              </div>

                              <div class="modal-footer">

                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                              </div>

                            </div>


                          </div>

                        </div>

                      </p>

                    </div>

                  </a>

                </div>

            </div>

        </div>

    </div>

    <!-- 시승 Test.끝. -->

    

    <!-- information ------------------------------------->

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

        <div class="row">

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

                <div class="thumbnail">

                  <a href="img/pic07.jpg">

                    <img src="img/pic07.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>다양한 소식을 가까이에서 만나실 수 있습니다.

                       <br>

                       <a href="#" class="btn btn-default">바로가기</a>

                        </p>

                    </div>

                  </a>

                </div>

            </div>

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

                <div class="thumbnail">

                  <a href="img/pic08.jpg">

                    <img src="img/pic08.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>다양한 소식을 가까이에서 만나실 수 있습니다.

                       <br>

                       <a href="#" class="btn btn-default">바로가기</a>

                        </p>

                    </div>

                  </a>

                </div>

            </div>

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

                <div class="thumbnail">

                  <a href="img/pic09.jpg">

                    <img src="img/pic09.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>다양한 소식을 가까이에서 만나실 수 있습니다.

                       <br>

                       <a href="#" class="btn btn-default">바로가기</a>

                        </p>

                    </div>

                  </a>

                </div>

            </div>

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

                <div class="thumbnail">

                  <a href="img/pic10.jpg">

                    <img src="img/pic10.jpg" alt="Lights" style="width:100%">

                    <div class="caption">

                      <p>다양한 소식을 가까이에서 만나실 수 있습니다.

                       <br>

                       <a href="#" class="btn btn-default">바로가기</a>

                        </p>

                    </div>

                  </a>

                </div>

            </div>

        </div>

    </div>

    <!-- information.끝. -->

    

    

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

        <h3 style="padding-top: 50px;">시승신청</h3>

        <form action="testJoin.jsp" method="post">

            <input type="text" name="name" class="form-control" placeholder="name" style="width: 350px;"><br>

            <input type="text" name="birth" class="form-control" placeholder="birth" style="width: 350px;"><br>

            <input type="text" name="tel" class="form-control" placeholder="telephone number" style="width: 350px;"><br>

            <div class="form-group">

                <input type="radio" name="gender">남

                <input type="radio" name="gender">여

            </div>

            <input type="text" name="location" class="form-control" placeholder="전시장" style="width: 350px;"><br>

            <input type="submit" class="btn btn-primary" value="신청하기">

            

        </form>

    </div>

        

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

        <h3 style="padding-top:50px;">딜러위치</h3>

        <!-- Add Google Maps -->

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

    </div>

    

    

    

    <!-- Add Google Maps -->

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

    <script>

        var myCenter = new google.maps.LatLng(37.521973, 127.034156);


        function initialize() {

            var mapProp = {

            center:myCenter,

            zoom:14,

            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 class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">

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

      </a><br><br>

      <p>© BMW Korea 2016 </p> 

    </footer>

</body>

</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

반응형웹 미니프로젝트  (0) 2017.08.17
ajax연습문제01  (0) 2017.08.17
Bootstrap연습문제01  (0) 2017.08.16
jQuery연습문제02  (0) 2017.08.11
아코디언  (0) 2017.08.11
'TIS_2017/응용sw_2기' Related Articles more
Comments