반응형 이미지 질문

반응형 이미지 질문

QA

반응형 이미지 질문

본문

3419553698_1524369197.1901.jpg

 

www.fgmolle.com    참조 싸이트

 

그누보드5에서 위에 있는 싸이트 처럼 반응형으로 만들고 싶어서 자세한 설명과 소스을 어디에 넣어야 하는지 소스 좀 적어주세요

 

3419553698_1524369229.6515.jpg

이 질문에 댓글 쓰기 :

답변 1

<!DOCTYPE html>
<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortlink" href="/en/node/1" />
<link rel="canonical" href="/en/content/home" />
   <title>Home | FG Spring Factory</title>
   <meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1, user-scalable=no">
   <link type="text/css" rel="stylesheet" href="http://www.fgmolle.com/sites/default/files/css/css_Vts0XjaQXkIwBk9HNAoJwrvmmE9lw6S9oxqJuhh0OB0.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.fgmolle.com/sites/default/files/css/css_zOl2ermK4xpX4ufMk3eytgWUMq-FjAcNc6scevEzLzk.css" media="all" />
 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body class="html front not-logged-in one-sidebar sidebar-first page-node page-node- page-node-1 node-type-page i18n-en" >
    <div id="main-wrapper">
  <div id="main-header-wrapper" class="">
    <header id="main-header" class="main-header">
     <div class="container">
            <div id="header-top">
                <div class="menu-toggler btn visible-xs">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <a href="#" class="sprite img logo"><img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/commons/logo.png"  alt="MiLoft" /></a>
                <nav class="lang-nav">
                                    </nav>
            </div>
            <nav id="block-system-main-menu" class="main-nav hidden-xs block block-system block-menu">
  <div class="main-menu">
    <ul class="menu"><li class="first leaf"><a href="/en" class="active">Home</a></li>
<li class="leaf"><a href="/en/products">Products</a></li>
<li class="leaf"><a href="/en/company">Company</a></li>
<li class="leaf"><a href="/en/contacts">Contacts</a></li>
<li class="last expanded"><a href="http://www.fgmolle.com/en">Languages</a><ul class="menu"><li class="first leaf"><a href="http://www.fgmolle.com/en">ENGLISH</a></li>
<li class="last leaf"><a href="http://www.fgmolle.com/it">ITALIANO</a></li>
</ul></li>
</ul>  </div>
</nav>
      
     </div>
    </header>

</div>
<div class="clearfix"></div>
<div id="main-content-wrapper">
   <div class="region region-content">
    <div id="block-system-main" class="block block-system">

   
  <div class="content">
   
<section id="home-container" class="page-content js-nav-step">
 
 <div class="relative intro">
  <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/molle.jpg" width="2500" height="720" />
  <div class="descrizione">
   <div class="container">
    <h1>MICRO-SPRINGS</h1>
    <h2>more than 6.500.000 springs a day</h2>
   </div>
  </div>
 </div>
 
 <article class="boxes">
  <div class="container">
   <div class="row">
    <div class="col-sm-4">
     <div class="box prodotto molle-alta-precisione">
      <h3>HIGH-PRECISION SPRINGS</h3>
      <p>
       Production of high precision springs: <br />from <b>0.08mm</b> to <b>0.15mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#molle-precisione" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-4">
     <div class="box prodotto micro-molle">
      <h3>MICRO-SPRINGS</h3>
      <p>
       Production of micro-springs: <br />from <b>0.15mm</b> to <b>0.30mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#micro-molle" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-4">
     <div class="box prodotto molle-compressione">
      <h3>THRUST SPRINGS</h3>
      <p>
       Production of thrust springs: <br />from <b>0.30mm</b> to <b>3.00mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#molle-compressione" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-4">
     <div class="box prodotto molle-torsionali">
      <h3>TORSION SPRINGS</h3>
      <p>
       Production of torsion springs: <br />from <b>0.40mm</b> to <b>2.00mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#molle-torsionali" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-4">
     <div class="box prodotto bobine">
      <h3>COPPER WIRE COILS</h3>
      <p>
       Production of copper wire coils: <br />from <b>0.30mm</b> to <b>3.00mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#bobine" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-4">
     <div class="box prodotto particolari-filo">
      <h3>WIRE FORMS</h3>
      <p>
       Production of wire forms: <br />from <b>0.30mm</b> to <b>3.00mm</b>
      </p>
      <div class="clear"></div>
      <div class="go">
       <a href="/en/products#particolari-filo" >
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-go.png" />
       </a>
      </div>
     </div>
    </div>
    <div class="col-sm-12">
     <div class="box story">
      <h3>PRODUCTION</h3>
      <h4>6.500.000 SPRINGS A DAY </h4>
      <div class="stat">
       <div class="myStat" data-dimension="140" data-text="80%" data-percent="80" data-fgcolor="#f47920" data-bgcolor="#eee" data-fill="#ddd" data-total="100"></div>
       MICRO-SPRINGS
      </div>
      <div class="stat">
       <div class="myStat" data-dimension="140" data-text="10%" data-percent="10" data-fgcolor="#f47920" data-bgcolor="#eee" data-fill="#ddd" data-total="100"></div>
       SPRINGS
      </div>
      <div class="stat">
       <div class="myStat" data-dimension="140" data-text="10%" data-percent="10" data-fgcolor="#f47920" data-bgcolor="#eee" data-fill="#ddd" data-total="100"></div>
       COILS
      </div>
      <div class="clear"></div>
     </div>
    </div>
   </div>
  </div>
 </article>
 
 
 <article class="keys">
  <div class="container">
   <div class="row">
    <div class="col-sm-4">
     <a href="/en/company">
      <div class="key">
       <div class="key-content">
        <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-azienda.png" />
        <h3>FG GROUP</h3>
        <p>
         Production of micro-springs, compression springs, torsion springs, coils.
        </p>
       </div>
      </div>
     </a>
    </div>
    <div class="col-sm-4">
     <a href="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/pdf/quality.pdf" target="_blank">
      <div class="key">
       <img  src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-quality.png" />
       <h3>QUALITY</h3>
       <p>
        Quality Certificate<br />
        ISO 9001:2008
       </p>
      </div>
     </a>
    </div>
    <div class="col-sm-4">
     <a href="/en/contacts">
      <div class="key">
       <img src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/ico-produzione.png" />
       <h3>CONTACTS</h3>
       <p>
        FG s.r.l. Bellagio - Italia <br />
        FG o.o.d. Plovdiv - Bulgaria
       </p>
      </div>
     </a>
    </div>
   </div>
  </div>
 </article>
 
 <article class="map">
  <div class="container">
   <div id="map-locations">
    <img class="img-responsive" src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/map.png" />
    <div class="pointer" id="pointer-italia"><img class="img-100 img-responsive tooltip" title="FG s.r.l." src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/pointer.png" /></div>
    <div class="pointer" id="pointer-bulgaria"><img class="img-100 img-responsive tooltip" title="FG Bulgaria o.o.d." src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/imgs/home/pointer.png" /></div>
   </div>
  </div>
 </article>

</section>

  </div>
</div>
  </div>
</div>
<footer id="main-footer-wrapper" class="main-footer">
 <div class="info">
        <section class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="company-info" itemscope itemtype="http://data-vocabulary.org/Organization">
                        <div class="company-name">
                            <span itemprop="name">FG s.r.l.</span>
                            <span class="pay-off"></span>
                        </div>
                        <div class="company-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">via dell’industria, 5/7</span>
                            <span itemprop="postalCode">22021 </span>
                            <span itemprop="addressLocality">Bellagio</span>
                            <span itemprop="addressRegion">(Co)</span>
                            <span itemprop="addressCountry">Italy</span>
                        </div>
                        <div class="company-contacts">
                            <span class="telephone">T. <span itemprop="telephone">+39.031.950558</span></span>
                            <span class="telephone"> - <span itemprop="telephone">+39.031.950559</span></span><br />
                            <span class="fax">F. <span itemprop="faxNumber">+39.*** 개인정보보호를 위한 전화번호 노출방지 ***</span></span><br />
                            <span class="email"><span itemprop="email"><a href="mailto:*** 개인정보보호를 위한 이메일주소 노출방지 ***">*** 개인정보보호를 위한 이메일주소 노출방지 ***</a></span></span>
                            <span class="email"> - <span itemprop="email"><a href="mailto:*** 개인정보보호를 위한 이메일주소 노출방지 ***">*** 개인정보보호를 위한 이메일주소 노출방지 ***</a></span></span>
                        </div>
                   
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="company-info" itemscope itemtype="http://data-vocabulary.org/Organization">
                        <div class="company-name">
                            <span itemprop="name">FG Bulgaria O.o.d.</span>
                            <span class="pay-off"></span>
                        </div>
                        <div class="company-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                            <span itemprop="streetAddress">Kniaz Alexander I</span>
                            <span itemprop="postalCode">4000</span>
                            <span itemprop="addressLocality">Plovdiv</span><br />
                            <span itemprop="addressRegion">Plovdiv</span>
                            <span itemprop="addressCountry">Bulgaria</span>
                        </div>
                        <div class="company-contacts">
                            <span class="email"><span itemprop="email"><a href="mailto:*** 개인정보보호를 위한 이메일주소 노출방지 ***">*** 개인정보보호를 위한 이메일주소 노출방지 ***</a></span></span>
                        </div>
                   
                    </div>
                </div>
            </div>
        </section>
 </div>
 <div class="disclaimer">
  <div class="container">
   <div class="row">
       <div class="col-xs-12">
        <div class="legal-info">
                        FG Molle s.r.l. | SEDE LEGALE via Larga, 8 - 20122 Milano (Mi) | REA MI - 188772 | C.S. i.v. € 119.000,00 | P.I. 0123456789
        </div>
        <div class="credits hidden-xs">
            <a href="http://www.verganiegasco.it" target="_blank">Vergani&Gasco WebDesign</a>
        </div>
    </div>
   </div>
  </div>
 </div> 
</footer>  </div>
    <script type="text/javascript" src="http://www.fgmolle.com/sites/default/files/js/js_Ee0kP4kZthQHeB9gNawIxEcp89hSh5W_PRB8WfHdbkU.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"en\/","ajaxPageState":{"theme":"fgmolle","theme_token":"zuB0U6LQSFIQL2juBsSuu3R_Fvdmdbap3ItJgrRzgdU","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.messages.css":1,"sites\/all\/themes\/fgmolle\/assets\/fonts\/stylesheet.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/reset.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/commons.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/bootstrapxlg.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/style.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/main-menu.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/home.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/rooms.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/products.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/partners.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/partner.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/contacts.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/location.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/company.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/nav-xs.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/socials.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/tooltipster-comp.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/flexslider-comp.css":1,"sites\/all\/themes\/fgmolle\/assets\/css\/overlaycontent-comp.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/app\/overlaycontent\/css\/overlaycontent.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/swiper\/plugins\/3dflow\/idangerous.swiper.3dflow.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/swiper\/idangerous.swiper.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/jsreject\/css\/jquery.reject.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/fancybox\/jquery.fancybox.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/tooltipster\/css\/tooltipster.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/circliful\/jquery.circliful.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/cookie-policy-banner\/cookie-policy-banner.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/cookie-policy-banner\/cookie-policy-page.css":1,"sites\/all\/themes\/fgmolle\/assets\/js\/libs\/mcustomscrollbar\/jquery.mCustomScrollbar.css":1}}});
//--><!]]>
</script>
  <script>
    var App = App || {};
    // var $ = jQuery;
    App.THEME = 'http://www.fgmolle.com/sites/all/themes/fgmolle';
    App.ASSETS_IMGS = App.THEME+'/assets/imgs';
    App.BASE_URL = "http://www.fgmolle.com";
    App.PAGE_ID = "home";     App.LANG = "en";
    App.PAGE_ID = "home";
  </script>
   <script src="http://www.fgmolle.com/sites/all/themes/fgmolle/assets/js/libs/requirejs/require.min.js"></script>
    <script>
        App.VERSION = "0.1";
        App.VERSION = (new Date()).getTime();
        require.config({
            urlArgs : "bust="+App.VERSION,
            baseUrl: "http://www.fgmolle.com/sites/all/themes/fgmolle/assets/js"
        });
        require(["http://www.fgmolle.com/sites/all/themes/fgmolle/assets/js-build/main.js"]);
    </script>
</body>
</html>

위 사이트 소스를 참조해 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 49
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT