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

삼성데모 index.html 본문

TIS_2018/응용sw2018_2기

삼성데모 index.html

moozi 2018. 10. 5. 10:44

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Samsung</title>

  <meta charset="utf-8">

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

          width: 100%;

      }

      #discover img {        

        width: 100%;

        height: 180px;

        opacity: 0.8;        

        transition: all 1.7s ease-out;

      }

      #discover .col-md-4{

          overflow: hidden !important;           

          padding: 0;

      }

      #discover .col-md-4:hover img{

          transform: scale(1.2);

          opacity: 1;

      } 

      

      #play{

          box-sizing: border-box;

          position: absolute;

          top:0;

          width:100%;

          height: 180px;

      }

      #play:hover .glyphicon-play-circle{

          color:#eeeeee;

      }

      .glyphicon-play-circle{ 

          display: block;          

          font-size: 45px; 

          color: #dddddd;

          line-height: 180px !important;

      }

      

      #myCarousel2{

          display: none;

      }

      #discoverImg{

          display: block;

      }

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

          #myCarousel .item:nth-child(1) img{

              content:url("img/title01_s.jpg");

          }

          #myCarousel .item:nth-child(2) img{

              content:url("img/title02_s.jpg");

          }

          #myCarousel .item:nth-child(3) img{

              content:url("img/title03_s.jpg");

          }

          #myCarousel .item:nth-child(4) img{

              content:url("img/title04_s.jpg");

          }

          #myCarousel .item:nth-child(5) img{

              content:url("img/title05_s.jpg");

          }

          #myCarousel2{

              display: block;

          }

          #discoverImg{

              display: none;

          }

      }

  </style>

</head>

<body>

   <!-- 네비게이션 ------------------------------------------->

   <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="#">SAMSUNG</a>

    </div>

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

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

        <li><a href="#skeyword">쇼핑키워드</a></li>

        <li><a href="#band">TV</a></li>

        <li><a href="#tour">가전</a></li>

        <li><a href="#contact">IT</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="#">Mobile</a></li>

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

            <li><a href="#">가전</a></li> 

          </ul>

        </li>

        <li><a href="#"><span class="glyphicon glyphicon-search"></span></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>

        <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/title01.jpg" alt="New York">

          <div class="carousel-caption">

            <h3>Galaxy Note9</h3>

            <p>The new super powerful note</p>

          </div> 

        </div>


        <div class="item">

          <img src="img/title02.jpg" alt="Chicago">

          <div class="carousel-caption">

            <h3>Galaxy Tab S4</h3>

            <p>태블릿의 새로운 시작</p>

          </div> 

        </div>


        <div class="item">

          <img src="img/title03.jpg" alt="Los Angeles">       

        </div>


        <div class="item">

          <img src="img/title04.jpg" alt="Los Angeles">

          <div class="carousel-caption">

            <h3>삼성에어드레서</h3>

            <p>새로운 바람과 스팀의 힘으로 의류 청정시대를 열다.</p>

          </div> 

        </div>


        <div class="item">

          <img src="img/title05.jpg" alt="Los Angeles">

          <div class="carousel-caption">

            <h3>2018 NEW 셰프컬렉션</h3>

            <p>신선함의 정점 자연 그대로를 요리하다.</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>

    <!-- 캐러셀.끝.-->

    

    <!-- Discover the Galaxy ----------------------------->

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

       <h3>Discover the Galaxy</h3>

        <div id="discoverImg" class="row">

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

                <img src="img/discover01.jpg">

                <div id="play"><span class="glyphicon glyphicon-play-circle"></span></div>

            </div>

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

                <img src="img/discover02.jpg">

            </div>

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

                <img src="img/discover03.jpg">

            </div>

        </div>

        

         <!-- 모바일 디스커버 캐러셀 시작 ------------------->

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

          <!-- Indicators -->

          <ol class="carousel-indicators">

            <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel2" data-slide-to="1"></li>

            <li data-target="#myCarousel2" data-slide-to="2"></li>            

          </ol>


          <!-- Wrapper for slides -->

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

            <div class="item active">

              <img src="img/discover01.jpg">              

            </div>


            <div class="item">

              <img src="img/discover02.jpg">              

            </div>


            <div class="item">

              <img src="img/discover03.jpg">       

            </div>            

          </div>

          

        </div>

        <!-- 모바일 디스커버 캐러셀.끝.-->

    </div>    

    <!-- Discover the Galaxy.끝. -->

    


    <!-- 쇼핑키워드 시작 ------------------------------------>

    <div id="skeyword" class="bg-1">

      <div class="container">       

        <h3 class="text-center">쇼핑 키워드</h3>

        <p class="text-center">트렌드를 선도하는 테마별 인기 상품들을 만나보세요.</p>

      

        <ul class="nav nav-tabs">

          <li class="active"><a data-toggle="tab" href="#best">베스트</a></li>

          <li><a data-toggle="tab" href="#ihome">인텔리전트홈</a></li>         

        </ul>


        <div class="tab-content">

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

            <!-- best 상품 ------------------------------>

            <div class="row text-center">

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product01.jpg" alt="Paris" width="400" height="300">

                  <p><strong>갤럭시노트9 자급제</strong></p>

                  <p>당신이 원하던 만큼<br> 강력해진 성능</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product02.jpg" alt="New York" width="400" height="300">

                  <p><strong>갤럭시탭s4</strong></p>

                  <p>밤새 게임을 해도 여유로운<br> 대용량 배터리</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product03.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>갤럭시 워치 46 mm (블루투스)</strong></p>

                  <p>진정한 시계에 대한<br> 새로운 정의</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product04.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>에어드레서 골드 미러 <br>+ 아로마시트 패키지</strong></p>

                  <p>총 4단계 의류 청정 관리</p>

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

                </div>

              </div>

            </div>

            

            <div class="row text-center">

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product01.jpg" alt="Paris" width="400" height="300">

                  <p><strong>갤럭시노트9 자급제</strong></p>

                  <p>당신이 원하던 만큼<br> 강력해진 성능</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product02.jpg" alt="New York" width="400" height="300">

                  <p><strong>갤럭시탭s4</strong></p>

                  <p>밤새 게임을 해도 여유로운<br> 대용량 배터리</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product03.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>갤럭시 워치 46 mm (블루투스)</strong></p>

                  <p>진정한 시계에 대한<br> 새로운 정의</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product04.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>에어드레서 골드 미러 <br>+ 아로마시트 패키지</strong></p>

                  <p>총 4단계 의류 청정 관리</p>

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

                </div>

              </div>

            </div>

           

            <!-- best 상품.끝. -->

          </div>

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

            <!-- ihome 상품 ------------------------------>

            <div class="row text-center">

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product09.jpg" alt="Paris" width="400" height="300">

                  <p><strong>갤럭시s9 자급제</strong></p>

                  <p>대화도 일처리도 더 간편하게</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product02.jpg" alt="New York" width="400" height="300">

                  <p><strong>갤럭시탭s4</strong></p>

                  <p>밤새 게임을 해도 여유로운<br> 대용량 배터리</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product03.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>갤럭시 워치 46 mm (블루투스)</strong></p>

                  <p>진정한 시계에 대한<br> 새로운 정의</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product04.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>에어드레서 골드 미러 <br>+ 아로마시트 패키지</strong></p>

                  <p>총 4단계 의류 청정 관리</p>

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

                </div>

              </div>

            </div>

            

            <div class="row text-center">

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product09.jpg" alt="Paris" width="400" height="300">

                  <p><strong>갤럭시s9 자급제</strong></p>

                  <p>대화도 일처리도 더 간편하게</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product02.jpg" alt="New York" width="400" height="300">

                  <p><strong>갤럭시탭s4</strong></p>

                  <p>밤새 게임을 해도 여유로운<br> 대용량 배터리</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product03.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>갤럭시 워치 46 mm (블루투스)</strong></p>

                  <p>진정한 시계에 대한<br> 새로운 정의</p>

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

                </div>

              </div>

              <div class="col-xs-6 col-sm-6 col-md-3">

                <div class="thumbnail">

                  <img src="img/product04.jpg" alt="San Francisco" width="400" height="300">

                  <p><strong>에어드레서 골드 미러 <br>+ 아로마시트 패키지</strong></p>

                  <p>총 4단계 의류 청정 관리</p>

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

                </div>

              </div>

            </div>                         

            <!-- ihome 상품.끝. -->

          </div>

        </div>        

      </div>

    </div>

    <!-- 쇼핑키워드.끝. -->


</body>

</html>

'TIS_2018 > 응용sw2018_2기' 카테고리의 다른 글

개인포트폴리오제작  (0) 2018.10.05
부트스트랩연습문제04  (0) 2018.10.05
10/04 samsung demo  (0) 2018.10.04
부트스트랩연습문제03  (0) 2018.10.04
imageZoom  (0) 2018.10.04
'TIS_2018/응용sw2018_2기' Related Articles more
Comments