Interactive Web Development | Fab Lab - Oangle

FORTUNE COOKIE

FORTUNE COOKIE

FORTUNE COOKIE

FORTUNE COOKIE

Article Images

mockup of fortune cookie 2020

mobile mockup of fortune cookie 2020

FORTUNE COOKIE

In this Chinese New Year minigame which we designed and developed, select from 4 fortune categories to get a fortune cookie. Breaking open a cookie reveals one of many amusing fortunes, produced from the creative minds of our very own team.

EASTER EGG

EASTER EGG

EASTER EGG

EASTER EGG

Article Images

mockup of easter egg 2020

mobile mockup of easter egg 2020

EASTER EGG

Our Easter egg painter allows users to channel their inner artist and create their very own Easter eggs. Upon finishing, they get to enter their name and share their masterpiece with others.

A CALENDAR OF ADVENT SURPRISES

A CALENDAR OF ADVENT SURPRISES

A CALENDAR OF ADVENT SURPRISES

A CALENDAR OF ADVENT SURPRISES

Article Images

mockup of christmas advent calendar 2020 popup

mobile mockup of christmas advent calendar 2020

A CALENDAR OF ADVENT SURPRISES

To spark some joy and hope in the days leading up to Christmas, we designed and developed this Advent calendar. Every day from 1st December, a door would be unlocked, revealing a surprise inside. The door on Christmas Day itself even holds an extra special gift.

Reveal the surprises

2020 POSITIVE REWIND

2020 POSITIVE REWIND

2020 POSITIVE REWIND

2020 POSITIVE REWIND

Article Images

mockup of 2020 positive rewind

mobile mockup of 2020 positive rewind

2020 POSITIVE REWIND

To many, 2020 was a year full of unexpected twists and surprises. In an attempt to leave people with better memories of the year, we highlighted some of the positive events that occurred in this interactive and informative microsite.

Go down memory lane!

LYRICAL LETTERS OF LOVE

LYRICAL LETTERS OF LOVE

LYRICAL LETTERS OF LOVE

LYRICAL LETTERS OF LOVE

Article Images

LYRICAL LETTERS OF LOVE

LYRICAL LETTERS OF LOVE

LYRICAL LETTERS OF LOVE

For Valentine’s, we designed and developed this love letter generator with a twist. Fill in your words and watch as we weave them together to create a personalised message for your loved one!

WEB EVOLUTION

WEB EVOLUTION

WEB EVOLUTION

WEB EVOLUTION

Article Images

WEB EVOLUTION

With the use of interactive elements and scrolling animations, Web-Evolution is a fascinating way to learn about the history of web design. You can even challenge yourself with the quiz at the end!

Explore history

OANGLE'S WEBSITE LANDING 2017

OANGLE'S WEBSITE LANDING 2017

OANGLE'S WEBSITE LANDING 2017

OANGLE'S WEBSITE LANDING 2017

Article Images

OANGLE'S WEBSITE LANDING 2017

OANGLE'S WEBSITE LANDING 2017

OANGLE'S WEBSITE LANDING 2017

This interactive landing showcases how Oangle can be transformed through various forms of web technology. It signifies that the more you interact with us, the more you’ll discover how adaptive and unique we are. Play around with the interactive piece and watch out for surprises.

@font-face{font-family:"Arvo";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/arvo/v14/tDbD2oWUg0MKqScQ7Z7o_vo.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-cSZMdeX3rsHo.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-eCZMdeX3rsHo.woff2") format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-cyZMdeX3rsHo.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;}@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/barlow/v5/7cHpv4kjgoGqM7E_A8s5ynghnQci.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;}@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/barlow/v5/7cHpv4kjgoGqM7E_Ass5ynghnQci.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/barlow/v5/7cHpv4kjgoGqM7E_DMs5ynghnQ.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXiWtFCc.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/forum/v11/6aey4Ky-Vb8Ew8IcOpI43XnSBTM.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/forum/v11/6aey4Ky-Vb8Ew8IVOpI43XnSBTM.woff2") format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/forum/v11/6aey4Ky-Vb8Ew8IfOpI43XnSBTM.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:"Forum";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/forum/v11/6aey4Ky-Vb8Ew8IROpI43XnS.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70sSFluW44JUcz.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;}@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70sCFluW44JUcz.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url("https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf70viFluW44JQ.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Proxima Nova";src:url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/d45b9a/000000000000000077359577/30/c7f9e8666124699068c252e538e02685.l") format("woff2"),url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/d45b9a/000000000000000077359577/30/c7f9e8666124699068c252e538e02685.d") format("woff"),url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/d45b9a/000000000000000077359577/30/c7f9e8666124699068c252e538e02685.a") format("opentype");font-display:swap;font-style:normal;font-weight:400;}@font-face{font-family:"Tisa";src:url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/6f55e9/00000000000000003b9b0792/27/c7f9e8666124699068c252e538e02685.l") format("woff2"),url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/6f55e9/00000000000000003b9b0792/27/c7f9e8666124699068c252e538e02685.d") format("woff"),url("https://cdn-bofan.nitrocdn.com/ucNebnJaLaGFlILNdmhzWVVpZQKrEsXv/assets/desktop/source/rev-d94f0a5/af/6f55e9/00000000000000003b9b0792/27/c7f9e8666124699068c252e538e02685.a") format("opentype");font-display:swap;font-style:normal;font-weight:400;}.single__content figure img.img-width-auto{width:auto;}.wp-image-2264{max-width:400px !important;width:400px;}.wp-image-2265{max-width:400px !important;width:400px;}#single-section .interwoven-words{font-size:70px;}@media (min-width: 1599px){#single-section .interwoven-words{font-size:68px;width:73%;}.heading-thumbnail{max-width:27%;}}@media (max-width: 1399px) and (min-width: 768px){#single-section .interwoven-words{font-size:68px;width:73%;}.heading-thumbnail{max-width:27%;}}@media (max-width: 1299px) and (min-width: 768px){.services-term .article--title .title{line-height:.9rem;}#single-section .interwoven-words{font-size:65px;width:75%;}.heading-thumbnail{max-width:25%;}}@media (max-width: 1199px) and (min-width: 768px){#single-section .heading h2{font-size:30px;}#single-section .interwoven-words{font-size:58px;width:77%;}.heading-thumbnail{max-width:23%;}}@media (max-width: 1099px) and (min-width: 768px){#single-section .interwoven-words{font-size:55px;width:77%;}.heading-thumbnail{max-width:23%;}}@media (max-width: 991px){}@media (max-width: 767px){}@media (max-width: 575){}@media (max-width: 374px){}.funhouse-project__item:nth-child(3) .arrowRight::before{background:#f47655;}.funhouse-project__item:nth-child(3) .arrowRight span{border-color:transparent transparent transparent #f47655;}@media (max-width: 1440px){.list-clients .slick-dots{display:none !important;}@media (max-width: 991px){#header-right{overflow-y:hidden;}}.overflow-hidden{overflow-y:hidden;}.grecaptcha-badge{visibility:hidden !important;display:none;}@media (max-width:767px){img.vid-six{max-width:550px;width:510px !important;}img.vid-two{max-width:550px;width:290px !important;}img.vid-one{max-width:300px;width:290px !important;}}@media (max-width:999px){img.vid-six{max-width:550px;width:510px !important;}img.vid-two{max-width:550px;width:290px !important;}img.vid-five{max-width:320px;width:300px !important;}img.vid-four{max-width:550px;width:520px !important;}img.vid-three{max-width:300px;width:270px !important;}img.vid-one{max-width:400px;width:370px !important;}}}