[text] Soyon Home

Viewer

copydownloadembedprintName: Soyon Home
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="description" content="description">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.   <!-- title here -->
  10.   <title>Soyon</title>
  11.  
  12.   <!-- favicon here -->
  13.   <link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">
  14.  
  15.   <!-- all CSS here -->
  16.   <link rel="stylesheet" href="css/bootstrap.min.css">
  17.   <link rel="stylesheet" href="css/fontawesome-all.min.css">
  18.   <link rel="stylesheet" href="css/font-face.css">
  19.   <link rel="stylesheet" href="css/main.css">
  20.   <link rel="stylesheet" href="css/responsive.css">
  21.  
  22.   <!-- Global site tag (gtag.js) - Google Analytics -->
  23.   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-115647047-1"></script>
  24.   <script>
  25.     window.dataLayer = window.dataLayer || [];
  26.  
  27.     function gtag() {
  28.       dataLayer.push(arguments);
  29.     }
  30.     gtag('js', new Date());
  31.  
  32.     gtag('config', 'UA-115647047-1');
  33.  
  34.   </script>
  35.  
  36. </head>
  37.  
  38. <body>
  39.   <!--[if IE]>
  40.     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  41.   <![endif]-->
  42.  
  43.   <!-- Add your site or application content here -->
  44.  
  45.  
  46.   <!-- header area start -->
  47.   <header class="header main-header-freeze">
  48.     <div class="container-fluid">
  49.       <div class="row">
  50.         <div class="col-6">
  51.           <div class="logo">
  52.             <a href="#"><img src="img/logo.png" alt="soyon logo"></a>
  53.           </div>
  54.         </div>
  55.  
  56.         <div class="col-6">
  57.           <div class="menu-trigger">
  58.             <span></span>
  59.           </div>
  60.         </div>
  61.       </div>
  62.     </div>
  63.   </header>
  64.  
  65.   <div class="ofcanvas-menu">
  66.     <span class="menu-close"><i class="fal fa-times"></i></span>
  67.     <div class="row no-gutters">
  68.       <div class="col-md-6 menu-left">
  69.         <div class="row w-100 no-gutters">
  70.             <div  id="home-menu" class="col-md-12 d-none d-md-block active">
  71.               <div class="menu-left">
  72.                 <img src="img/logo-alt.svg" alt="">
  73.               </div>
  74.             </div>
  75.  
  76.             <div id="about-menu" class="col-md-12 d-none">
  77.                 <div class="menu-left menu-left-alt">
  78.                   <img src="img/logo-alt-2.png" alt="logo">
  79.                   <div class="menu-left-content">
  80.                     <p>We are an <br> Asia-pacific brand creation <br> and design agency.</p>
  81.                     <span>what we do</span>
  82.                   </div>
  83.                 </div>
  84.               </div>
  85.       
  86.               <div id="99-menu" class="col-md-12 d-none">
  87.                 <div class="menu-left menu-left-alt menu-left-bg menu-bg-ninety-nine">
  88.                   <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  89.                   <div class="menu-left-content">
  90.                     <p>Fire traditional <br> petrol station branding!</p>
  91.                     <div class="section-content-wrapper">
  92.                       <p class="m-0">case study</p>
  93.                       <p class="m-0 industry">Industry: <span><a href="#">design</a></span></p>
  94.                     </div>
  95.                   </div>
  96.                 </div>
  97.               </div>
  98.               
  99.  
  100.               <div id="hash-menu" class="col-md-12 d-none">
  101.                   <div class="menu-left menu-left-alt menu-left-bg menu-bg-hash">
  102.                     <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  103.                     <div class="menu-left-content">
  104.                       <p>Get the gold!</p>
  105.                       <div class="section-content-wrapper">
  106.                         <p class="m-0">case study</p>
  107.                         <p class="m-0 industry">Industry: <span><a href="#">Events</a></span></p>
  108.                       </div>
  109.                     </div>
  110.                   </div>
  111.                 </div>
  112.  
  113.                 <div id="gamuda-menu" class="col-md-12 d-none">
  114.                     <div class="menu-left menu-left-alt menu-left-bg menu-bg-gamuda">
  115.                       <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  116.                       <div class="menu-left-content">
  117.                         <p>Key visuals: A picture <br> with something to say.</p>
  118.                         <div class="section-content-wrapper">
  119.                           <p class="m-0">case study</p>
  120.                           <p class="m-0 industry">Industry: <span><a href="#">real estate</a></span></p>
  121.                         </div>
  122.                       </div>
  123.                     </div>
  124.                   </div>
  125.  
  126.               <div id="bond-menu" class="col-md-12 d-none">
  127.                   <div class="menu-left menu-left-alt menu-left-bg menu-bg-bond">
  128.                     <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  129.                     <div class="menu-left-content">
  130.                       <p>A name as big as <br> the names behind it.</p>
  131.                       <div class="section-content-wrapper">
  132.                         <p class="m-0">case study</p>
  133.                         <p class="m-0 industry">Industry: <span><a href="#">brokerage</a></span></p>
  134.                       </div>
  135.                     </div>
  136.                   </div>
  137.                 </div>
  138.  
  139.                 <div id="baristo-menu" class="col-md-12 d-none">
  140.                     <div class="menu-left menu-left-alt menu-left-bg menu-bg-baristo">
  141.                       <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  142.                       <div class="menu-left-content">
  143.                         <p>Creating a branding solution <br> for Vietnam’s newest café.</p>
  144.                         <div class="section-content-wrapper">
  145.                           <p class="m-0">case study</p>
  146.                           <p class="m-0 industry">Industry: <span><a href="#">hospitality</a></span></p>
  147.                         </div>
  148.                       </div>
  149.                     </div>
  150.                   </div>
  151.  
  152.               <div id="contact-menu" class="col-md-12 d-none">
  153.                   <div class="menu-left menu-left-alt">
  154.                     <img src="img/logo-alt-2.png" alt="logo">
  155.                     <div class="menu-left-content">
  156.                       <p>We have offices in <br> Australia and Vietnam. </p>
  157.                       <span>get in touch</span>
  158.                     </div>
  159.                   </div>
  160.                 </div>
  161.  
  162.                 <div id="lumi-menu" class="col-md-12 d-none">
  163.                     <div class="menu-left menu-left-alt menu-left-bg menu-bg-lumi">
  164.                       <!-- <img src="img/99/menu-bg.jpg" alt="logo" > -->
  165.                       <div class="menu-left-content">
  166.                         <p>Fire traditional <br> petrol station branding!</p>
  167.                         <div class="section-content-wrapper">
  168.                           <p class="m-0">case study</p>
  169.                           <p class="m-0 industry">Industry: <span><a href="#">real estate</a></span></p>
  170.                         </div>
  171.                       </div>
  172.                     </div>
  173.                   </div>
  174.         </div>
  175.       </div>
  176.       
  177.  
  178.       <div class="col-md-6">
  179.         <nav class="ofcanvas-menu-items text-center">
  180.           <ul>
  181.             <li data-target="#home-menu" class="active"><a href="#">back to home</a></li>
  182.             <li data-target="#about-menu"><a href="#aboutpage">about</a></li>
  183.             <li data-target="#contact-menu" id="contact-menu"><a href="#contactpage">contact</a></li>
  184.             <li data-target="#bond-menu"><a href="#bondpage">bond</a></li>
  185.             <li data-target="#baristo-menu"><a href="#baristopage">baristo</a></li>
  186.             <li data-target="#lumi-menu"><a href="#lumipage">lumi</a></li>
  187.             <li data-target="#99-menu"><a href="#99page">99</a></li>
  188.             <li data-target="#gamuda-menu"><a href="#gamudapage">gamuda</a></li>
  189.             <li data-target="#hash-menu"><a href="#hashpage">hash</a></li>
  190.             <li><a href="#contact"><i class="fas fa-caret-down"></i></span></a></li>
  191.           </ul>
  192.         </nav>
  193.       </div>
  194.     </div>
  195.   </div>
  196.   <!-- header area end -->
  197.  
  198.   <!-- about area start -->
  199.   <div class="parent-wrapper">
  200.     <section id="about" class="about section-bg section-height d-flex justify-content-center align-items-center">
  201.       <div class="section-content-wrapper">
  202.         <div class="section-content-hover">
  203.           <h1>about</h1>
  204.           <p>what we do</p>
  205.         </div>
  206.         <a href="#aboutpage" class="icon-group toggle-page">
  207.           <i class="far fa-angle-up to-top"></i>
  208.           <i class="far fa-angle-down to-bottom"></i>
  209.         </a>
  210.       </div>
  211.     </section>
  212.  
  213.   <section id="aboutpage" class="inner-page" style="display: none;">
  214.     <section id="about" class="about section-bg pb-5 d-flex justify-content-center align-items-center">
  215.       <div class="section-content-wrapper">
  216.         <p class="intro">We are an Asia-pacific brand <br> creation and design agency.</p>
  217.       </div>
  218.     </section>
  219.     <section class="special section-bg">
  220.       <div class="container-fluid">
  221.         <div class="special-content">
  222.           <h2 class="section-title">our speciality</h2>
  223.           <p class="section-intro">Our work spans different fields and mediums, but all shares a common goal: to create something meaningful. <br> This is something we take great pride in. Collaborating
  224.             closely, we analyse
  225.             and
  226.             understand our client’s challenges, <br> and create solutions that are both effective and memorable — carefully calibrating every minute <br> detail of every minute aspect of our execution.
  227.           </p>
  228.         </div>
  229.       </div>
  230.     </section>
  231.   
  232.     <section class="about-options">
  233.       <div class="container-fluid">
  234.         <div class="row">
  235.           <div class="col"></div>
  236.           <div class="col-xl-6 col-lg-7 d-flex justify-content-start">
  237.             <div class="single-option active">
  238.               <div class="option-heading">
  239.                 <div class="heading-wrap">
  240.                   <span class="option-cat">identity</span>
  241.                   <h3 class="option-title"><span>branding</span><br>create personality</h3>
  242.                   <span class="option-icon"><i class="fas fa-caret-right"></i></span>
  243.                 </div>
  244.                 <p>Hand-crafted brand identities shaped <br> to achieve strategic goals.</p>
  245.               </div>
  246.               <div class="option-content">
  247.                 <ul>
  248.                   <li><a href="#">Brand architecture</a></li>
  249.                   <li><a href="#">Brand positioning</a></li>
  250.                   <li><a href="#">Brand story creation</a></li>
  251.                   <li><a href="#">Nomenclature strategy</a></li>
  252.                   <li><a href="#">Touchpoint mapping</a></li>
  253.                   <li><a href="#">Brand research consulting</a></li>
  254.                   <li><a href="#">Brand auditing</a></li>
  255.                   <li><a href="#">Brand guidelines</a></li>
  256.                 </ul>
  257.               </div>
  258.             </div>
  259.           </div>
  260.           <div class="col"></div>
  261.         </div>
  262.   
  263.         <div class="row">
  264.           <div class="col"></div>
  265.           <div class="col-xl-7 col-lg-8 d-flex justify-content-end">
  266.             <div class="single-option active" id="about-option-communication">
  267.               <div class="option-heading">
  268.                 <div class="heading-wrap">
  269.                   <span class="option-cat">message</span>
  270.                   <h3 class="option-title"><span>communication</span><br>make connections</h3>
  271.                   <span class="option-icon"><i class="fas fa-caret-right"></i></span>
  272.                 </div>
  273.                 <p>Purposeful, impactful messaging <br> targeted to specific audiences.</p>
  274.               </div>
  275.               <div class="option-content">
  276.                 <ul>
  277.                   <li><a href="#">Art direction</a></li>
  278.                   <li><a href="#">Copywriting</a></li>
  279.                   <li><a href="#">Graphic design</a></li>
  280.                   <li><a href="#">Digital design</a></li>
  281.                   <li><a href="#">Signage design</a></li>
  282.                   <li><a href="#">Content planning</a></li>
  283.                   <li><a href="#">Print management</a></li>
  284.                   <li><a href="#">Photography production</a></li>
  285.                   <li><a href="#">Videography production</a></li>
  286.                 </ul>
  287.               </div>
  288.             </div>
  289.           </div>
  290.           <div class="col"></div>
  291.         </div>
  292.   
  293.         <div class="row">
  294.           <div class="col"></div>
  295.           <div class="col-xl-6 col-lg-7 d-flex justify-content-start">
  296.             <div class="single-option active">
  297.               <div class="option-heading">
  298.                 <div class="heading-wrap">
  299.                   <span class="option-cat">vision</span>
  300.                   <h3 class="option-title"><span>visualisation</span><br>showcase the future</h3>
  301.                   <span class="option-icon"><i class="fas fa-caret-right"></i></span>
  302.                 </div>
  303.                 <p>Upcoming creations visualised with evocative <br> CGI renderings.</p>
  304.               </div>
  305.               <div class="option-content">
  306.                 <ul>
  307.                   <li><a href="#">CGI</a></li>
  308.                   <li><a href="#">CG animations</a></li>
  309.                   <li><a href="#">360° renders</a></li>
  310.                 </ul>
  311.               </div>
  312.             </div>
  313.           </div>
  314.           <div class="col"></div>
  315.         </div>
  316.       </div>
  317.     </section>
  318.   
  319.     <section class="clients">
  320.       <div class="container-fluid">
  321.         <h2 class="section-title">our clients</h2>
  322.         <p class="section-intro">Our favourite clients are the ones who love to innovate and push boundaries. People who are <br> driven by their passion, and who aspire to inspire their customers and
  323.           their
  324.           employees. We love <br> clients who challenge us to do more, applying our skills to new circumstances and novel environments. <br> Below are a few of the past clients and projects we enjoyed
  325.           the most.
  326.         </p>
  327.         <div class="row align-items-center">
  328.           <div class="col-lg-2 col-md-3 col-4">
  329.             <div class="client-img">
  330.               <img src="img/about/logo-1.png" alt="client logo" class="img-fluid">
  331.             </div>
  332.           </div>
  333.           <div class="col-lg-2 col-md-3 col-4">
  334.             <div class="client-img">
  335.               <img src="img/about/logo-2.png" alt="client logo" class="img-fluid">
  336.             </div>
  337.           </div>
  338.           <div class="col-lg-2 col-md-3 col-4">
  339.             <div class="client-img">
  340.               <img src="img/about/logo-3.png" alt="client logo" class="img-fluid">
  341.             </div>
  342.           </div>
  343.           <div class="col-lg-2 col-md-3 col-4">
  344.             <div class="client-img">
  345.               <img src="img/about/logo-4.png" alt="client logo" class="img-fluid">
  346.             </div>
  347.           </div>
  348.           <div class="col-lg-2 col-md-3 col-4">
  349.             <div class="client-img">
  350.               <img src="img/about/logo-5.png" alt="client logo" class="img-fluid">
  351.             </div>
  352.           </div>
  353.           <div class="col-lg-2 col-md-3 col-4">
  354.             <div class="client-img">
  355.               <img src="img/about/logo-6.png" alt="client logo" class="img-fluid">
  356.             </div>
  357.           </div>
  358.           <div class="col-lg-2 col-md-3 col-4">
  359.             <div class="client-img">
  360.               <img src="img/about/logo-7.png" alt="client logo" class="img-fluid">
  361.             </div>
  362.           </div>
  363.           <div class="col-lg-2 col-md-3 col-4">
  364.             <div class="client-img">
  365.               <img src="img/about/logo-8.png" alt="client logo" class="img-fluid">
  366.             </div>
  367.           </div>
  368.           <div class="col-lg-2 col-md-3 col-4">
  369.             <div class="client-img">
  370.               <img src="img/about/logo-9.png" alt="client logo" class="img-fluid">
  371.             </div>
  372.           </div>
  373.           <div class="col-lg-2 col-md-3 col-4">
  374.             <div class="client-img">
  375.               <img src="img/about/logo-10.png" alt="client logo" class="img-fluid">
  376.             </div>
  377.           </div>
  378.           <div class="col-lg-2 col-md-3 col-4">
  379.             <div class="client-img">
  380.               <img src="img/about/logo-11.png" alt="client logo" class="img-fluid">
  381.             </div>
  382.           </div>
  383.           <div class="col-lg-2 col-md-3 col-4">
  384.             <div class="client-img">
  385.               <img src="img/about/logo-12.png" alt="client logo" class="img-fluid">
  386.             </div>
  387.           </div>
  388.           <div class="col-lg-2 col-md-3 col-4">
  389.             <div class="client-img">
  390.               <img src="img/about/logo-13.png" alt="client logo" class="img-fluid">
  391.             </div>
  392.           </div>
  393.           <div class="col-lg-2 col-md-3 col-4">
  394.             <div class="client-img">
  395.               <img src="img/about/logo-14.png" alt="client logo" class="img-fluid">
  396.             </div>
  397.           </div>
  398.           <div class="col-lg-2 col-md-3 col-4">
  399.             <div class="client-img">
  400.               <img src="img/about/logo-15.png" alt="client logo" class="img-fluid">
  401.             </div>
  402.           </div>
  403.           <div class="col-lg-2 col-md-3 col-4">
  404.             <div class="client-img">
  405.               <img src="img/about/logo-16.png" alt="client logo" class="img-fluid">
  406.             </div>
  407.           </div>
  408.           <div class="col-lg-2 col-md-3 col-4">
  409.             <div class="client-img">
  410.               <img src="img/about/logo-17.png" alt="client logo" class="img-fluid">
  411.             </div>
  412.           </div>
  413.           <div class="col-lg-2 col-md-3 col-4">
  414.             <div class="client-img">
  415.               <img src="img/about/logo-18.png" alt="client logo" class="img-fluid">
  416.             </div>
  417.           </div>
  418.           <div class="col-lg-2 col-md-3 col-4">
  419.             <div class="client-img">
  420.               <img src="img/about/logo-19.png" alt="client logo" class="img-fluid">
  421.             </div>
  422.           </div>
  423.           <div class="col-lg-2 col-md-3 col-4">
  424.             <div class="client-img">
  425.               <img src="img/about/logo-20.png" alt="client logo" class="img-fluid">
  426.             </div>
  427.           </div>
  428.           <div class="col-lg-2 col-md-3 col-4">
  429.             <div class="client-img">
  430.               <img src="img/about/logo-21.png" alt="client logo" class="img-fluid">
  431.             </div>
  432.           </div>
  433.           <div class="col-lg-2 col-md-3 col-4">
  434.             <div class="client-img">
  435.               <img src="img/about/logo-22.png" alt="client logo" class="img-fluid">
  436.             </div>
  437.           </div>
  438.           <div class="col-lg-2 col-md-3 col-4">
  439.             <div class="client-img">
  440.               <img src="img/about/logo-23.png" alt="client logo" class="img-fluid">
  441.             </div>
  442.           </div>
  443.           <div class="col-lg-2 col-md-3 col-4">
  444.             <div class="client-img">
  445.               <img src="img/about/logo-24.png" alt="client logo" class="img-fluid">
  446.             </div>
  447.           </div>
  448.           <div class="col-lg-2 col-md-3 col-4">
  449.             <div class="client-img">
  450.               <img src="img/about/logo-25.png" alt="client logo" class="img-fluid">
  451.             </div>
  452.           </div>
  453.           <div class="col-lg-2 col-md-3 col-4">
  454.             <div class="client-img">
  455.               <img src="img/about/logo-26.png" alt="client logo" class="img-fluid">
  456.             </div>
  457.           </div>
  458.           <div class="col-lg-2 col-md-3 col-4">
  459.             <div class="client-img">
  460.               <img src="img/about/logo-27.png" alt="client logo" class="img-fluid">
  461.             </div>
  462.           </div>
  463.           <div class="col-lg-2 col-md-3 col-4">
  464.             <div class="client-img">
  465.               <img src="img/about/logo-28.png" alt="client logo" class="img-fluid">
  466.             </div>
  467.           </div>
  468.           <div class="col-lg-2 col-md-3 col-4">
  469.             <div class="client-img">
  470.               <img src="img/about/logo-29.png" alt="client logo" class="img-fluid">
  471.             </div>
  472.           </div>
  473.           <div class="col-lg-2 col-md-3 col-4">
  474.             <div class="client-img">
  475.               <img src="img/about/logo-30.png" alt="client logo" class="img-fluid">
  476.             </div>
  477.           </div>
  478.           <div class="col-lg-2 col-md-3 col-4">
  479.             <div class="client-img">
  480.               <img src="img/about/logo-31.png" alt="client logo" class="img-fluid">
  481.             </div>
  482.           </div>
  483.           <div class="col-lg-2 col-md-3 col-4">
  484.             <div class="client-img">
  485.               <img src="img/about/logo-32.png" alt="client logo" class="img-fluid">
  486.             </div>
  487.           </div>
  488.           <div class="col-lg-2 col-md-33 col-4">
  489.             <div class="client-img">
  490.               <img src="img/about/logo-3.png" alt="client logo" class="img-fluid">
  491.             </div>
  492.           </div>
  493.           <div class="col-lg-2 col-md-3 col-4">
  494.             <div class="client-img">
  495.               <img src="img/about/logo-34.png" alt="client logo" class="img-fluid">
  496.             </div>
  497.           </div>
  498.           <div class="col-lg-2 col-md-3 col-4">
  499.             <div class="client-img">
  500.               <img src="img/about/logo-35.png" alt="client logo" class="img-fluid">
  501.             </div>
  502.           </div>
  503.           <div class="col-lg-2 col-md-3 col-4">
  504.             <div class="client-img">
  505.               <img src="img/about/logo-36.png" alt="client logo" class="img-fluid">
  506.             </div>
  507.           </div>
  508.           <div class="col-lg-2 col-md-3 col-4">
  509.             <div class="client-img">
  510.               <img src="img/about/logo-37.png" alt="client logo" class="img-fluid">
  511.             </div>
  512.           </div>
  513.           <div class="col-lg-2 col-md-3 col-4">
  514.             <div class="client-img">
  515.               <img src="img/about/logo-38.png" alt="client logo" class="img-fluid">
  516.             </div>
  517.           </div>
  518.           <div class="col-lg-2 col-md-3 col-4">
  519.             <div class="client-img">
  520.               <img src="img/about/logo-39.png" alt="client logo" class="img-fluid">
  521.             </div>
  522.           </div>
  523.           <div class="col-lg-2 col-md-3 col-4">
  524.             <div class="client-img">
  525.               <img src="img/about/logo-40.png" alt="client logo" class="img-fluid">
  526.             </div>
  527.           </div>
  528.           <div class="col-lg-2 col-md-3 col-4">
  529.             <div class="client-img">
  530.               <img src="img/about/logo-41.png" alt="client logo" class="img-fluid">
  531.             </div>
  532.           </div>
  533.           <div class="col-lg-2 col-md-3 col-4">
  534.             <div class="client-img">
  535.               <img src="img/about/logo-42.png" alt="client logo" class="img-fluid">
  536.             </div>
  537.           </div>
  538.           <div class="col-lg-2 col-md-3 col-4">
  539.             <div class="client-img">
  540.               <img src="img/about/logo-43.png" alt="client logo" class="img-fluid">
  541.             </div>
  542.           </div>
  543.           <div class="col-lg-2 col-md-3 col-4">
  544.             <div class="client-img">
  545.               <img src="img/about/logo-44.png" alt="client logo" class="img-fluid">
  546.             </div>
  547.           </div>
  548.           <div class="col-lg-2 col-md-3 col-4">
  549.             <div class="client-img">
  550.               <img src="img/about/logo-45.png" alt="client logo" class="img-fluid">
  551.             </div>
  552.           </div>
  553.           <div class="col-lg-2 col-md-3 col-4">
  554.             <div class="client-img">
  555.               <img src="img/about/logo-46.png" alt="client logo" class="img-fluid">
  556.             </div>
  557.           </div>
  558.           <div class="col-lg-2 col-md-3 col-4">
  559.             <div class="client-img">
  560.               <img src="img/about/logo-47.png" alt="client logo" class="img-fluid">
  561.             </div>
  562.           </div>
  563.           <div class="col-lg-2 col-md-3 col-4">
  564.             <div class="client-img">
  565.               <img src="img/about/logo-48.png" alt="client logo" class="img-fluid">
  566.             </div>
  567.           </div>
  568.           <div class="col-lg-2 col-md-3 col-4">
  569.             <div class="client-img">
  570.               <img src="img/about/logo-49.png" alt="client logo" class="img-fluid">
  571.             </div>
  572.           </div>
  573.           <div class="col-lg-2 col-md-3 col-4">
  574.             <div class="client-img">
  575.               <img src="img/about/logo-50.png" alt="client logo" class="img-fluid">
  576.             </div>
  577.           </div>
  578.           <div class="col-lg-2 col-md-3 col-4">
  579.             <div class="client-img">
  580.               <img src="img/about/logo-51.png" alt="client logo" class="img-fluid">
  581.             </div>
  582.           </div>
  583.           <div class="col-lg-2 col-md-3 col-4">
  584.             <div class="client-img">
  585.               <img src="img/about/logo-52.png" alt="client logo" class="img-fluid">
  586.             </div>
  587.           </div>
  588.           <div class="col-lg-2 col-md-3 col-4">
  589.             <div class="client-img">
  590.               <img src="img/about/logo-53.png" alt="client logo" class="img-fluid">
  591.             </div>
  592.           </div>
  593.           <div class="col-lg-2 col-md-3 col-4">
  594.             <div class="client-img">
  595.               <img src="img/about/logo-54.png" alt="client logo" class="img-fluid">
  596.             </div>
  597.           </div>
  598.         </div>
  599.       </div>
  600.     </section>
  601.   </section>
  602.   </div>
  603.   <!-- about area end -->
  604.  
  605.   <!-- contact area start -->
  606.   <div class="parent-wrapper">
  607.     <section id="contact" class="contact section-bg section-height d-flex justify-content-center align-items-center">
  608.       <div class="section-content-wrapper">
  609.         <div class="section-content-hover">
  610.           <h1>contact</h1>
  611.           <p>get in touch</p>
  612.         </div>
  613.         <!-- <div class="icon-group">
  614.           <i class="far fa-angle-up to-top"></i>
  615.           <i class="far fa-angle-down to-bottom"></i>
  616.         </div> -->
  617.  
  618.         <a href="#contactpage" class="icon-group toggle-page">
  619.           <i class="far fa-angle-up to-top"></i>
  620.           <i class="far fa-angle-down to-bottom"></i>
  621.         </a>
  622.  
  623.       </div>
  624.     </section>
  625.  
  626.   <section id="contactpage" class="inner-page" style="display: none;">
  627.  
  628.     <section id="contact" class="contact section-bg  pb-5  d-flex justify-content-center align-items-center">
  629.       <div class="section-content-wrapper">
  630.         <p class="intro">We have offices in <br> Australia and Vietnam. </p>
  631.       </div>
  632.     </section>
  633.  
  634.     <section class="location">
  635.       <div class="map">
  636.         <img src="img/contact/map.png" alt="map" class="img-fluid">
  637.       </div>
  638.       <div class="office-location">
  639.         <div class="container">
  640.           <div class="row">
  641.             <div class="col-sm-6 d-flex mb-5 mb-md-0 justify-content-md-center">
  642.               <div id="australia">
  643.                 <h3 class="section-title-2">Australia</h3>
  644.                 <p>Level 54/111 Eagle Street <br>
  645.                   Brisbane CBD <br>
  646.                   Brisbane <br>
  647.                   Australia <br>
  648.                   P. : +61 418 505 978 <br>
  649.                   E. [email protected]
  650.                 </p>
  651.               </div>
  652.             </div> <!-- col end -->
  653.   
  654.             <div class="col-sm-6 d-flex justify-content-md-center">
  655.               <div id="vietnam">
  656.                 <h3 class="section-title-2">Vietnam</h3>
  657.                 <p>166/34H Thich Quang Duc Street <br>
  658.                   Phu Nhuan District <br>
  659.                   Ho Chi Minh City <br>
  660.                   Vietnam <br>
  661.                   P. +84 28 6682 4206 <br>
  662.                   E. [email protected]
  663.                 </p>
  664.               </div>
  665.             </div> <!-- col end -->
  666.           </div> <!-- row end -->
  667.         </div> <!-- container end -->
  668.       </div>
  669.     </section>
  670.   
  671.     <section class="contact-form">
  672.       <div class="container">
  673.         <h3 class="section-title-2">Send us mail</h3>
  674.         <form id="contact_form">
  675.           <div class="row">
  676.             <div class="col-md-6">
  677.               <input id="name" type="text" class="form-input" placeholder="Name">
  678.             </div>
  679.             <div class="col-md-6">
  680.               <input id="email" type="text" class="form-input" placeholder="Email">
  681.             </div>
  682.             <div class="col-12">
  683.               <input type="text" class="form-input" placeholder="Phone">
  684.             </div>
  685.             <div class="col-12">
  686.               <textarea id="message" class="form-msg" placeholder="Message"></textarea>
  687.             </div>
  688.             <div class="col-12 text-center">
  689.               <button class="button form-btn">Send</button>
  690.               <div class="response"></div>
  691.             </div>
  692.           </div>
  693.         </form>
  694.       </div>
  695.     </section>
  696.   
  697.     <section class="social text-center">
  698.       <div class="container">
  699.         <h3 class="section-title-2">Follow us</h3>
  700.         <ul class="social-btn">
  701.           <li><a href="https://www.linkedin.com/company/soyon-agency/" target="_blank">in</a></li>
  702.           <li><a href="https://www.facebook.com/SoyonAgency/" target="_blank">f</a></li>
  703.         </ul>
  704.       </div>
  705.     </section>
  706.   </section>
  707.  
  708.   
  709.  
  710.   </div>
  711.   <!-- contact area end -->
  712.  
  713.   <!-- bond area start -->
  714.   <a href="bond.html">
  715.     <section id="bond" class="bond bg-overlay section-bg section-height d-flex justify-content-center align-items-center">
  716.       <div class="section-content-wrapper">
  717.         <div class="section-content-hover">
  718.           <h1>bond</h1>
  719.           <p>case study</p>
  720.           <p class="industry">Industry: <span>Brokerage</span></p>
  721.         </div>
  722.         <div class="icon-group">
  723.           <i class="far fa-angle-up to-top"></i>
  724.           <i class="far fa-angle-down to-bottom"></i>
  725.         </div>
  726.       </div>
  727.     </section>
  728.   </a>
  729.   <!-- bond area end -->
  730.  
  731.   <!-- baristo area start -->
  732.   <a href="baristo.html">
  733.     <section id="baristo" class="baristo section-bg section-height d-flex justify-content-center align-items-center">
  734.       <div class="section-content-wrapper">
  735.         <div class="section-content-hover">
  736.           <h1>baristo</h1>
  737.           <p>case study</p>
  738.           <p class="industry">Industry: <span>hostpitality</span></p>
  739.         </div>
  740.         <div class="icon-group">
  741.           <i class="far fa-angle-up to-top"></i>
  742.           <i class="far fa-angle-down to-bottom"></i>
  743.         </div>
  744.       </div>
  745.     </section>
  746.   </a>
  747.   <!-- baristo area end -->
  748.  
  749.   <!-- lumi area start -->
  750.   <a href="lumi.html">
  751.     <section id="lumi" class="lumi bg-overlay section-bg section-height d-flex justify-content-center align-items-center">
  752.       <div class="section-content-wrapper">
  753.         <div class="section-content-hover">
  754.           <h1>lumi</h1>
  755.           <p>case study</p>
  756.           <p class="industry">Industry: <span>hostpitality</span></p>
  757.         </div>
  758.         <div class="icon-group">
  759.           <i class="far fa-angle-up to-top"></i>
  760.           <i class="far fa-angle-down to-bottom"></i>
  761.         </div>
  762.       </div>
  763.     </section>
  764.   </a>
  765.   <!-- lumi area end -->
  766.  
  767.   <!-- 99 area start -->
  768.   <a href="99.html">
  769.     <section id="ninety-nine" class="ninety-nine section-height d-flex justify-content-center align-items-center">
  770.       <div class="section-content-wrapper">
  771.         <div class="section-content-hover">
  772.           <h1>99</h1>
  773.           <p>case study</p>
  774.           <p class="industry">Industry: <span>petroleum</span></p>
  775.         </div>
  776.         <div class="icon-group">
  777.           <i class="far fa-angle-up to-top"></i>
  778.           <i class="far fa-angle-down to-bottom"></i>
  779.         </div>
  780.       </div>
  781.     </section>
  782.   </a>
  783.   <!-- 99 area end -->
  784.  
  785.   <!-- gamuda area start -->
  786.   <a href="gamuda.html">
  787.     <section id="gamuda" class="gamuda bg-overlay section-bg section-height d-flex justify-content-center align-items-center">
  788.       <div class="section-content-wrapper">
  789.         <div class="section-content-hover">
  790.           <h1>gamuda</h1>
  791.           <p>case study</p>
  792.           <p class="industry">Industry: <span>real estate</span></p>
  793.         </div>
  794.         <div class="icon-group">
  795.           <i class="far fa-angle-up to-top"></i>
  796.           <i class="far fa-angle-down to-bottom"></i>
  797.         </div>
  798.       </div>
  799.     </section>
  800.   </a>
  801.   <!-- gamuda area end -->
  802.  
  803.   <!-- hash area start -->
  804.   <a href="hash.html">
  805.     <section id="hash" class="hash bg-overlay section-bg section-height d-flex justify-content-center align-items-center">
  806.       <div class="section-content-wrapper">
  807.         <div class="section-content-hover">
  808.           <h1>hash</h1>
  809.           <p>case study</p>
  810.           <p class="industry">Industry: <span>events</span></p>
  811.         </div>
  812.         <div class="icon-group">
  813.           <i class="far fa-angle-up to-top"></i>
  814.           <i class="far fa-angle-down to-bottom"></i>
  815.         </div>
  816.       </div>
  817.     </section>
  818.   </a>
  819.   <!-- hash area end -->
  820.  
  821.  
  822.  
  823.   <!-- jQuery JS -->
  824.   <script src="js/vendor/modernizr-3.8.0.min.js"></script>
  825.   <script src="js/vendor/jquery-3.4.1.min.js"></script>
  826.  
  827.   <!-- bootstrap JS -->
  828.   <script src="js/popper.min.js"></script>
  829.   <script src="js/bootstrap.min.js"></script>
  830.  
  831.   <!-- slick JS -->
  832.  
  833.  
  834.   <!-- main JS -->
  835.   <script src="js/about.js"></script>
  836.   <script src="js/contact.js"></script>
  837.   <script src="js/bond.js"></script>
  838.   <script src="js/baristo.js"></script>
  839.   <script src="js/lumi.js"></script>
  840.   <script src="js/99.js"></script>
  841.   <script src="js/gamuda.js"></script>
  842.   <script src="js/hash.js"></script>
  843.   <script src="js/main.js"></script>
  844.   <script>
  845.     "use strict";
  846.     $(window).scroll(function () {
  847.       if ($(window).scrollTop() == $(document).height() - $(window).height()) {
  848.         $("body").append(about + contact + bond + baristo + lumi + ninety + gamuda + hash);
  849.       }
  850.     });
  851.   </script>
  852. </body>
  853.  
  854. </html>
  855.  

Editor

You can edit this paste and save as new:


File Description
  • Soyon Home
  • Paste Code
  • 29 Oct-2020
  • 33.59 Kb
You can Share it: