Supermal Karawaci

2013

Responsive Website Design, Frontend & Backend Website Development

Client

Work

Responsive Website Design, Frontend & Backend Website Development.

Supermal Karawaci is a well-established, crowded mall located in Karawaci, Tangerang, Indonesia. For the website, we are heavily focused on what visitors' needs are: tenant lists, active promotions, and maps.

The Work

<div class="imgDesc"> <p class="stickem">HTML 5 animation for logo.</p> </div> </li> <li class="stickem-container"> <iframe height="400" src="https://www.youtube.com/embed/hK8S4eURDho" frameborder="0" allowfullscreen style="width: 55%; float: right; margin-left: 40px; "/> <div class="imgDesc"> <p class="stickem">HTML 5 animation for the footer.</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/megamenu-explorer.jpg" alt="Megamenu" class="lazyload"> <div class="imgDesc"> <p class="stickem">Mega menu for Explore section overview.</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/social-footer-hover.jpg" alt="Social Footer Hover" class="lazyload"> <div class="imgDesc"> <p class="stickem">Big social media engagement at pre-footer. Hovering at the buttons will change the background colour ( in this example: twitter ).</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/search1.jpg" alt="Search" class="lazyload"> <div class="imgDesc"> <p class="stickem">Activating the search ...</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/search2.jpg" alt="Search 2" class="lazyload"> <div class="imgDesc"> <p class="stickem">The search form will slide from top.</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/contact.jpg" alt="Contact" class="lazyload"> <div class="imgDesc"> <p class="stickem">Contact page.</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/inner-page.jpg" alt="Inner page" class="lazyload"> <div class="imgDesc"> <p class="stickem">Directory page.</p> </div> </li> <li class="stickem-container"> <img src="images/client/supermall-karawaci/gallery.jpg" alt="Gallery" class="lazyload"> <div class="imgDesc"> <p class="stickem">Gallery page.</p> </div> </li> </ul> </div> </div> </section> <section class="closing"> <div class="row"> <div class="small-12 medium-12 medium-centered columns"> <div class="makeCenter"> <h2 class="subHeader"> Want to work with us?<br> <a href="." class="plannernostyle">Let's get started</a> </h2> </div> </div> </div> </section> <footer> <div class="row"> <div class="small-12 medium-3 large-4 columns stucel-logo-footer"> <img itemprop="image" src="images/logo-stucel.svg" width="100" alt="Stucel Digital Agency Jakarta" class="lazyload"> <p class="txt-light lighten">Digital Marketing Agency <br> Jakarta, Indonesia</p> </div> <div class="small-12 medium-5 large-4 columns"> <h4 class="darken txt-spacing txt-normal txt-smaller text-uppercase">About Us</h4> <p class="txt-lead txt-light lighten"> We are <span class="semi-light txt-normal txt-leader">passionate</span> about helping any business, or companies and organisations, to have a better online presence. <a href="about.html" class="link">View our story</a> </p> </div> <div class="small-12 medium-3 large-3 columns"> <h4 class="darken txt-spacing txt-normal txt-smaller text-uppercase">We are social</h4> <ul class="social-nav"> <li> <a target="_blank" href="https://www.facebook.com/stucel"> <div class="icon socicon-facebook semi-light"> <span>Stucel Facebook</span></div> </a> </li> <li> <a target="_blank" href="https://www.instagram.com/stucel"> <div class="icon socicon-instagram semi-light"> <span>Stucel Instagram</span></div> </a> </li> <li> <a target="_blank" href="https://twitter.com/stucel"> <div class="icon socicon-twitter semi-light"> <span>Stucel Twitter</span></div> </a> </li> </ul> </div> </div> <div class="row"> <div class="padding-horizontal footer-partnership"> <div class="footer-content d-flex justify-content-center align-items-center flex-lg-row flex-column"> <div class="text-left"> <p class="fw-bold">We are open for partnership</p> </div> <div class="text-left"> <p>We value new partnerships and collaboration. Let us hear you at <a href="mailto:hello@stucel.com">hello@stucel.com</a> </p> </div> </div> </div> </div> <div class="row padding-horizontal"> <div class="small-12 medium-4 large-4 columns"> <h4 class="darken txt-spacing txt-normal txt-smaller line-height-smaller text-uppercase">Career</h4> <p class="txt-smaller">We are always in need for creative people.<br/>Grow with us. <br> <a href="jobs.html" class="txt-xxsmaller link">Visit Career section</span></a> </p> <h4 class="darken txt-spacing txt-normal txt-smaller line-height-smaller text-uppercase">Visit us</h4> <address class="txt-smaller"> <strong itemprop="name" class="darken">PT Stucel Media Kreatif</strong> <div class="address-tabs"> <ul class="address-nav-tabs"/> <div class="tab_content_container"> <div class="tab_content" id="sales-office"> <p> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">Cluster Rukan GSOC no. 8</span><br /> <span itemprop="addressLocality">Sedayu City @ Kelapa Gading</span><br /> <span itemprop="addressRegion">Cakung, Jakarta</span> <span itemprop="postalCode">13910</span><br /> <span itemprop="addressCountry">Indonesia</span> </span> </p> </div> </div> </div> <p>Phone: +62-878-09882-789 <br/> Monday-Friday, 9am to 5pm <br> <a href="contact.html" class="txt-xxsmaller link">Map & Inquiry </span></a> </p> </address> </div> <div class="small-12 medium-3 large-4 columns"> <h4 class="darken txt-spacing txt-normal txt-smaller line-height-smaller text-uppercase">Sitemap</h4> <ul class="menu-footer-parent"> <li> <a href="https://www.stucel.com/">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="service.html">Our Services</a> <ul class="menu-footer-child"> <li> <a href="web-designer-and-web-development.html">Web Design and Development</a> </li> <li> <a href="digital-marketing-agency.html">Digital Marketing</a> </li> <li> <a href="seo-services.html">Search Engine Optimization</a> </li> <li> <a href="sem-services.html">Search Engine Marketing</a> </li> <li> <a href="social-media-marketing.html">Social Media Marketing</a> </li> <li> <a href="youtube-ads.html">Youtube Ads</a> </li> </ul> </li> <li> <a href="work.html">Our Work</a> </li> <li> <a href="contact.html">Contact Us</a> </li> <li> <a href="https://www.stucel.com/blog/">Blog</a> </li> </ul> </div> <div class="small-12 medium-5 large-4 columns bg-white"> <h4 class="darken txt-spacing txt-normal txt-smaller line-height-smaller text-uppercase">Words</h4> <p class="txt-smaller">Our office is located on the sunny city Jakarta, the capital city of Indonesia.</p> <p class="txt-smaller" style="margin: 0 0 40px 0;">Copyright 2005 - <span id="this-year"></span>. All rights reserved.</p> <p> <a href="https://www.google.com/partners/agency?id=4824753290" target="_blank"><img src="https://www.gstatic.com/partners/badge/images/2023/PartnerBadgeClickable.svg" alt="Google Partner badge" width="100"/></a>   <a href="apec-ceo-summit-2013.html"><img data-src="images/apec-ceo-summit-2013-official-partner.png" srcset="images/apec-ceo-summit-2013-official-partner@2x.png 2x" alt="Apec CEO Summit 2013" width="160" class="lazyload"/></a> </p> <p><a href="https://www.dmca.com/Protection/Status.aspx?ID=07c5d1bd-d43d-4d29-acac-aeb971385988" target="_blank" title="DMCA.com Protection Status" class="dmca-badge"><img src ="https://images.dmca.com/Badges/dmca_protected_sml_120m.png?ID=07c5d1bd-d43d-4d29-acac-aeb971385988" alt="DMCA.com Protection Status" /></a>  <a target="_blank" href="https://pse.kominfo.go.id/tdpse-detail/2139"><img src="images/kominfo-logo.webp" alt="Kominfo PSE certificate: 001352.02/DJAI.PSE/10/2021" width="100" class="lazyload"/></a></p> </div> </div> </footer> </div> <div class="whatsappFloating"> <a href="https://wa.me/6287809882789" class="whatsappLink" target="_blank"> <img src="images/whatsapp-mobile-button.png" alt="Whatsapp" title="Click to chat with us"> </a> </div> <span itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification"> <span itemprop="dayOfWeek" itemscope itemtype="http://schema.org/DayOfWeek"> <meta itemprop="name" content="Monday - Friday"> </span> <meta itemprop="opens" content="2006-07-27T09:00"> <meta itemprop="closes" content="2100-07-27T18:00"> </span> <meta itemprop="email" content="hello@stucel.com"> <meta itemprop="telephone" content="+62-21-22453991"> <meta itemprop="priceRange" content="RpRpRpRp"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "PT Stucel Media Kreatif", "url": "https://www.stucel.com", "sameAs": ["https://www.facebook.com/stucel", "https://www.twitter.com/stucel"] } </script> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> <script> window.jQuery || document.write('<script src="scripts/vendor/jquery-1.9.1.min.js"><\/script>') </script> <script type="text/javascript" src="scripts/plugins.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.3/pulltorefresh.min.js"></script> <script type="text/javascript" src="scripts/main.min.js"></script>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TG63RJM" height="0" width="0" style="display:none;visibility:hidden"/></noscript>  </body> </html>