정세찬_우리산전

우리산전 전체 제품 소개

1. 직관적인 UI: 관련 업종 사용자가 손쉽게 원하는 제품 카테고리를 찾아 확인할 수 있도록 깔끔한 제품 네비게이션 사용

2. 주목도 향상: 마우스 HOVER시 스케일 제어로 이동하고자하는 제품 리스트 페이지 주목도 높임.

$banner_path = "product";
        $banner_title = "PRODUCTS";
        $banner_text = "THE HIGHEST QUALITY PRODUCTS";
        $category_name = "제품정보";
        $page_name = "전체 제품 소개";
        $category_page ="b1_product";
        $this_page = "b1_product";
        include_once("header.php");
        include_once("sub_banner.php");

<section class="sub_page product_group_page">
          <div class="container">
            <div class="page_wrap">
              <div class="line_gradient left_line"></div>
              <div class="contents">
                <div class="title_box">
                  <h2> echo $page_name; </h2>
                  <p>THE HIGHEST QUALITY PRODUCTS</p>
                </div>

<div class="group_list left">
                  <div class="img_box">
                    <img class="img-responsive" src="images/product/product_group_title1.png" alt="">
                    <div class="img_text">
                      <h3>PRODUCT</h3>
                      <h4>introduction</h4>
                      <h5>회로보호용 차단기</h5>
                      <span></span>
                    </div>
                  </div>
                  <div class="text_box">
                    <h3>circut protection <br><b>breaker</b></h3>
                    <ul>
                      <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=A&kind_sub=A">SCP</a></li>
                      <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=A&kind_sub=B">CP HOLDER</a></li>
                    </ul>
                    <a class="link_btn" href="product_list.php?kind=A">자세히 보기</a>
                  </div>
                </div>

<div class="group_list right">
                  <div class="img_box">
                    <img class="img-responsive" src="images/product/product_group_title2.png" alt="">
                    <div class="img_text">
                      <h3>PRODUCT</h3>
                      <h4>introduction</h4>
                      <h5>DC 컨텍트 릴레이</h5>
                      <span></span>
                    </div>
                  </div>
                  <div class="text_box">
                    <h3>dc contactor <br><b>relay</b></h3>
                    <ul>
                      <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=B&kind_sub=A">SCR</a></li>
                    </ul>
                    <a class="link_btn" href="product_list.php?kind=B">자세히 보기</a>
                  </div>
                </div>

<div class="group_list left">
                  <div class="img_box">
                    <img class="img-responsive" src="images/product/product_group_title3.png" alt="">
                    <div class="img_text">
                      <h3>PRODUCT</h3>
                      <h4>introduction</h4>
                      <h5>휴즈 홀더</h5>
                      <span></span>
                    </div>
                  </div>
                  <div class="text_box">
                    <h3>fuse <br><b>holder</b></h3>
                    <ul>
                      <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=C&kind_sub=A">WFH</a></li>
                      
                  </ul>
                  <a class="link_btn" href="product_list.php?kind=C">자세히 보기</a>
                </div>
              </div>

<div class="group_list right">
                <div class="img_box">
                  <img class="img-responsive" src="images/product/product_group_title4.png" alt="">
                  <div class="img_text">
                    <h3>PRODUCT</h3>
                    <h4>introduction</h4>
                    <h5>차단기</h5>
                    <span></span>
                  </div>
                </div>
                <div class="text_box">
                  <h3>contact <br><b>breaker</b></h3>
                  <ul>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=D&kind_sub=A">배선용 차단기(NFB)</a></li>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=D&kind_sub=B">누전 차단기(ELB)</a></li>
                  </ul>
                  <a class="link_btn" href="product_list.php?kind=D">자세히 보기</a>
                </div>
              </div>

<div class="group_list left">
                <div class="img_box">
                  <img class="img-responsive" src="images/product/product_group_title5.png" alt="">
                  <div class="img_text">
                    <h3>PRODUCT</h3>
                    <h4>introduction</h4>
                    <h5>전자개폐기</h5>
                    <span></span>
                  </div>
                </div>
                <div class="text_box">
                  <h3><b>contactor</b></h3>
                  <ul>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=E&kind_sub=A">TMC</a></li>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=E&kind_sub=B">TMR</a></li>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=E&kind_sub=C">TMS</a></li>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=E&kind_sub=D">TU(보조접점)</a></li>
                  </ul>
                  <a class="link_btn" href="product_list.php?kind=E">자세히 보기</a>
                </div>
              </div>

<div class="group_list right">
                <div class="img_box">
                  <img class="img-responsive" src="images/product/product_group_title6.png" alt="">
                  <div class="img_text">
                    <h3>PRODUCT</h3>
                    <h4>introduction</h4>
                    <h5>열동형 과부하 계전기</h5>
                    <span></span>
                  </div>
                </div>
                <div class="text_box">
                  <h3>thermal overload <br><b>relay</b></h3>
                  <ul>
                    <li><img src="images/icons/product_check_icon.png" alt=""><a href="product_list.php?kind=F&kind_sub=A">DTH</a></li>
                  </ul>
                  <a class="link_btn" href="product_list.php?kind=F">자세히 보기</a>
                </div>
              </div>

</div>
            <div class="line_gradient right_line"></div>
          </div>
        </div>

</section>
         include_once("footer.php");