957
88
6
Dashboard Sample Page
957
0
untitled
3
33
46
3
0
0
0
0
false
5
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<style>
.btn {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.button4:hover {background-color: #e7e7e7;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style><h2><span style="font-size: 14pt; line-height: 18.6667px;">Hoverable Buttons</span></h2><p>Use the :hover selector to change the style of the button when you move the mouse over it.</p><p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p><div class="btn button1">Green</div><div class="btn button2">Blue</div><div class="btn button3">Red</div><div class="btn button4">Gray</div><div class="btn button5">Black</div>
MediaImageUrl
MediaVideoUrl
Chart_Height
216
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
589
957
1
untitled
33
5
21
55
0
0
0
0
false
6
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<h2 style="scrollbar-color: var(--text-non-clickable) var(--application-background);"><span style="font-size: 14pt; line-height: 18.6667px;">Hoverable Dropdown</span></h2>
MediaImageUrl
MediaVideoUrl
Chart_Height
33
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
269
957
2
untitled
106
10
22
4
0
0
0
0
false
8
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<p>More learning resource:</p><p><a href="https://www.w3schools.com/css/" target="_blank"><span style="color: rgb(68, 114, 196); text-decoration: inherit;">https://www.w3schools.com/css/</span></a></p><p></p>
MediaImageUrl
MediaVideoUrl
NavigationLink
Chart_Height
65
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
282
957
3
untitled
46
34
26
2
0
0
0
0
false
10
false
Text
BackgroundColour
rgba(255, 255, 255, 0.5)
HtmlContent
<style>.slide1,.slide2,.slide3{
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(https://cdn.pixabay.com/photo/2019/09/06/05/49/dark-4455554__340.jpg)no-repeat center;
background-color: #ebebeb;
background-size: cover;
animation:fade1 16s infinite;
-webkit-animation:fade1 16s infinite;
}
.slide2 {
background: url(https://cdn.pixabay.com/photo/2019/09/08/14/26/dunes-4461128__480.jpg)no-repeat center;
background-size: cover;
animation:fade2 16s infinite;
-webkit-animation:fade2 16s infinite;
}
.slide3 {
background: url(https://cdn.pixabay.com/photo/2019/08/08/11/33/stingray-4392776__480.jpg)no-repeat center;
background-size: cover;
animation:fade3 16s infinite;
-webkit-animation:fade3 16s infinite;
}
@keyframes fade1
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
</style>
<div><div class="slide1"></div><div class="slide2"></div><div class="slide3"></div></div>
MediaImageUrl
MediaVideoUrl
Chart_Height
222
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
333
957
4
untitled
36
2
48
3
0
0
0
0
false
2
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<style>
div.HDivider{
border-top: 5px solid black;
}
</style>
<div class="HDivider"><br>
</div>
MediaImageUrl
MediaVideoUrl
Chart_Height
13
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
614
957
5
untitled
41
6
20
77
0
0
0
0
false
42
false
Text
BackgroundColour
rgba(255, 255, 255, 1)
HtmlContent
<style>
/* Make Text Container Content Overflow Visible */
/*
.ITL_EditSection, .ITL_EditSection.k-widget.k-editor {
overflow: visible;
}
*/
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
/* Top Main NaviLink */
.mainnav {
margin: 0 auto;
padding-left: 0;
height: 100%;
}
li.hassubs {
height: 100%;
}
li {
list-style: none;
}
.itl-dashboard-info-container .e-rte-content li a {
text-decoration: none;
}
.dropdown1,
.dropdown2,
.dropdown3 {
position: absolute;
left: 0;
background-color: #fff;
border-radius: 2px;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
padding-left: 0;
}
.mainnav li {
text-align: left;
color: #ffffff;
}
.itl-dashboard-info-container .e-rte-content .mainnav li a {
display: block;
padding: 4% 2% 4% 6%;
color: #4a4a4a;
font-family: 'FuturaStdBook', sans-serif;
font-size: 0.8vw;
text-decoration: none;
}
.mainnav li:hover {
/* text-decoration: underline; */
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.e-rte-content .mainnav li:hover a {
/*text-decoration: underline;*/
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.e-rte-content .mainnav li a.L1 {
display: block;
padding: 4% 2% 4% 6%;
color: #4a4a4a;
background-color: #ffffff;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1vw;
height: 100%;
box-sizing: border-box;
text-decoration: none;
}
.mainnav li.hassubs a.L1:hover {
color: #4a4a4a;
background-color: #f2f2f2;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
border-bottom: 2px solid #FFC600;
text-decoration: none;
}
.mainnav li.hassubs a.L2:hover {
color: #4a4a4a;
background-color: #f2f2f2;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
text-decoration: underline;
}
.mainnav li.hassubs a.L3:hover {
color: #4a4a4a;
background-color: #f2f2f2;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
text-decoration: underline;
}
.mainnav li.hassubs a.L4:hover {
color: #4a4a4a;
background-color: #f2f2f2;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
text-decoration: underline;
}
.e-rte-content .mainnav li a.L1-A {
display: block;
padding: 4% 2% 4% 6%;
border-bottom: 2px solid #FFC600;
color: #4a4a4a;
background-color: #ffffff;
background-color: none;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1vw;
height: 100%;
box-sizing: border-box;
text-decoration: none;
}
.e-rte-content .mainnav li a.L1-A:hover {
display: block;
padding: 4% 2% 4% 6%;
border-bottom: 2px solid #FFC600;
color: #4a4a4a;
background-color: #f2f2f2;
background-color: none;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1vw;
height: 100%;
box-sizing: border-box;
text-decoration: none;
}
.e-rte-content ul.dropdown1 li.hassubs a.L2-A {
color: #4a4a4a;
background-color: #FFC600;
font-family: Arial, sans-serif;
text-decoration: none;
}
.e-rte-content ul.dropdown1 li.subs a.L2-A {
color: #4a4a4a;
background-color: #FFC600;
font-family: Arial, sans-serif;
text-decoration: none;
}
.e-rte-content ul.dropdown2 li.subs a.L3-A {
color: #4a4a4a;
background-color: #FFC600;
font-family: Arial, sans-serif;
text-decoration: none;
}
.e-rte-content ul.dropdown3 li.subs a.L4-A {
color: #4a4a4a;
background-color: #FFC600;
font-family: Arial, sans-serif;
text-decoration: none;
}
/*First Level*/
.subs {
left: 0;
position: relative;
top: 0px;
width: 100%;
border-left: none !important;
border-bottom: 1px dotted rgba(255, 255, 255, 0.5) !important;
}
.subs:last-child {
border: none !important;
}
.hassubs:hover .dropdown1 {
opacity: 1;
visibility: visible;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
ul.dropdown1 .hassubs:hover .dropdown2 {
opacity: 1;
visibility: visible;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
ul.dropdown2 .hassubs:hover .dropdown3 {
opacity: 1;
visibility: visible;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.e-rte-content .mainnav li ul li:hover a,
.e-rte-content .mainnav li ul li ul li:hover a,
.e-rte-content .mainnav li ul li ul li ul li:hover a {
/*text-decoration: underline; */
transition: ease-in-out .35s;
-moz-transition: ease-in-out .35s;
-webkit-transition: ease-in-out .35s;
}
/*Second Level*/
.hassubs .hassubs .dropdown2 .subs {
left: 0;
position: relative;
width: 100%;
top: 0px;
}
.hassubs .hassubs .dropdown2 {
position: absolute;
width: 100%;
left: 100%;
top: 0px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
padding-left: 0;
}
.hassubs .hassubs .hassubs .dropdown3 .subs {
left: 0;
position: relative;
width: 100%;
top: 0px;
}
.hassubs .hassubs .hassubs .dropdown3 {
position: absolute;
width: 100%;
left: 100%;
top: 0px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
padding-left: 0;
}
</style> <ul class="mainnav"> <li class="hassubs"> <a href="#" class="L1-A">Dropdown with Sub-Category</a> <ul class="dropdown1"> <li class="subs hassubs"> <a href="#" class="L2">Brand Performance +</a> <ul class="dropdown2"> <li class="subs"><a href="#" class="L3">Brand Awareness</a></li> <li class="subs"><a href="#" class="L3">Customer Loyalty</a></li> <li class="subs"><a href="#" class="L3">Market Share</a></li> </ul> </li> <li class="subs hassubs"> <a href="#" class="L2">Product Categories +</a> <ul class="dropdown2"> <li class="subs"><a href="#" class="L3">Electronics</a></li> <li class="subs"><a href="#" class="L3">Clothing</a></li> <li class="subs"><a href="#" class="L3">Home Goods</a></li> <li class="subs"><a href="#" class="L3">Sports</a></li> <li class="subs"><a href="#" class="L3">Entertainments</a></li> </ul> </li> <li class="subs hassubs"> <a href="#" class="L2">Sales Performance +</a> <ul class="dropdown2"> <li class="subs"> <a href="../Shell%20GBT/#/dashboard/39" class="L3">Key Performance Indicators (KPIs)</a> </li> <li class="subs"><a href="#" class="L3">Revenue Growth</a></li> <li class="subs"><a href="#" class="L3">Conversion Rate</a></li> <li class="subs"><a href="#" class="L3">Average Order Value</a></li> <li class="subs"><a href="#" class="L3">Loyalty Programs</a></li> <li class="subs"><a href="#" class="L3">Digital Engagement</a></li> </ul> </li> <li class="subs hassubs"> <a href="#" class="L2">Marketing Channels +</a> <ul class="dropdown2"> <li class="subs"><a href="#" class="L3">Social Media</a></li> <li class="subs"><a href="#" class="L3">Email Marketing</a></li> <li class="subs"><a href="#" class="L3">Paid Advertising</a></li> <li class="subs"><a href="#" class="L3">Content Marketing</a></li> <li class="subs"> <a href="#" class="L3">Search Engine Optimization (SEO)</a> </li> <li class="subs"><a href="#" class="L3">Influencer Marketing</a></li> </ul> </li> <li class="subs hassubs"> <a href="#" class="L2">Market Analysis +</a> <ul class="dropdown2"> <li class="subs"><a href="#" class="L3">Market Summary</a></li> <li class="subs"><a href="#" class="L3">Economic Indicators</a></li> <li class="subs"><a href="#" class="L3">Industry Trends</a></li> </ul> </li> </ul> </li> </ul>
MediaImageUrl
MediaVideoUrl
ProjectLink
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
256
957
6
untitled
1
117
19
100
0
0
0
0
false
4
false
Text
BackgroundColour
rgba(37, 79, 116, 1)
HtmlContent
<style>/* V-dropdown menu */
/*VERTICAL MENU*/
nav.vertical{
position:relative;
}
.e-richtexteditor .e-rte-content .e-content a, .e-richtexteditor .e-source-content .e-content a{
color: white;}
.L1-a a{
color: #ffffff;
}
/* ALL UL */
nav.vertical ul{
list-style: none;
padding: 0;
margin: 0;
}
/* ALL LI */
nav.vertical li{
position:relative;
}
/* ALL A */
nav.vertical a{
display:block;
color:#eee;
text-decoration:none;
padding:0.6rem 1rem;
transition:0.2s;
font-size: 0.8vw;
font-weight: 700;
}
/* ALL L1 HOVER */
nav.vertical li a.L1:hover {
background:#349CE0;
transition: 0.3s ease-in-out;
}
/* ALL L2 HOVER */
nav.vertical li a.L2:hover{
color: #349CE0;
transition: 0.3s ease-in-out;
}
/* INNER UL HIDE */
nav.vertical ul ul{
background:rgba(0,0,0,0.2);
padding-left:1rem;
transition: max-height 0.3s ease-out;
max-height:0;
overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
max-height: 500px;
transition: max-height 1s ease-in;
}
/* L1 active */
nav.vertical li a.L1-a {
background:#349CE0;
}
/* L1 deactive */
nav.vertical li a.L1-de {
color:rgba(255,255,255,0.5);
}
/* L2 active */
nav.vertical li a.L2-a {
color: #349CE0;
}
/* L2 deactive */
nav.vertical li a.L2-de {
color: rgba(255,255,255,0.5);
}
/* INNER UL SHOW */
nav.vertical li.expand > ul{
max-height: 500px;
}
.ch-grid {
margin: 0px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
</style><nav class="vertical"><ul> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_landing" class="L1">Home</a></li> <li class="expand"><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_oc_profile" class="L1-a">Our customers +</a> <ul> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_oc_profile" class="L2-a">Profile</a></li> <li><a href="#" class="L2-de">Frequency of use</a></li> </ul> </li> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_pfmt_where" class="L1">Planning for my trip +</a> <ul> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_pfmt_where" class="L2">Where am I going?</a></li> <li><a href="#" class="L2">Why am I using PT?</a></li> <li><a href="#" class="L2-de">How do I use PT?</a></li> <li><a href="#" class="L2-de">What could affect my experience?</a></li> </ul> </li> <li><a href="#" class="L1">Paying for my ride +</a> <ul> <li><a href="#" class="L2">My payment mode</a></li> <li><a href="#" class="L2">My payment experience</a></li> </ul> </li> <li><a href="#" class="L1">Getting to PT</a> <ul> <li><a href="#" class="L2">My first leg experience</a> </li> </ul> </li> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_wfpt_think" class="L1">Waiting for PT +</a> <ul> <li><a href="#" class="L2">What do I think of the stop/station?</a></li> <li><a href="#" class="L2">Do I feel safe waiting?</a></li> <li><a href="../Auckland%20Transport%20Customer%20Journey%20Navigation/index.html#!#at_bus_wfpt_ride" class="L2">My ride is here</a></li> </ul> </li> <li><a href="#" class="L1">On board experience +</a> <ul> <li><a href="#" class="L2">Do I feel comfortable and safe?</a></li> <li><a href="#" class="L2">What do I think of the vehicle?</a></li> <li><a href="#" class="L2">My satisfaction with this trip</a></li> </ul> </li> <li><a href="#" class="L1">Getting off PT</a> <ul> <li><a href="#" class="L2">Continuing my journey</a></li> </ul> </li> <li><a href="#" class="L1">The PT network +</a> <ul> <li><a href="#" class="L2">My satisfaction with the network</a></li> <li><a href="#" class="L2">Is it available when I want to use it?</a></li> <li><a href="#" class="L2">Does it go where I want to go?</a></li> </ul> </li> </ul> </nav>
MediaImageUrl
MediaVideoUrl
ProjectLink
Chart_Height
764
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
243
957
7
untitled
41
6
20
55
0
0
0
0
false
33
false
Text
BackgroundColour
rgba(255,255,255,1)
HtmlContent
<style>
.imgdropdown-Story {
box-sizing: border-box;
position: relative;
display: inline-block;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: visible;
}
.dropbtn-Story {
font-family: Ariel, sans-serif;
font-size: 1vw;
color: #404040;
padding: 0.6vw;
height: auto;
text-align:center;
box-sizing: border-box;
background-color: transparent;
border-radius: 4px;
}
.dropdown-content-Story {
box-sizing: border-box;
display: none;
position: absolute;
background-color: #ffffff;
width:100%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 1;
overflow-y: auto;
max-height: 300px;
}
.e-richtexteditor .e-rte-content .e-content .dropdown-content-Story a {
font-family: Arial, sans-serif;
font-size: 0.8vw;
color: #121B5A;
padding: 0.6vw;
height:auto;
text-align: center;
text-decoration: none;
display: block;
}
.e-richtexteditor .e-rte-content .e-content .dropdown-content-Story a:hover {
color: #121B5A;
background-color: #BDEDE4;
transition: 0.3s ease-in-out;
}
.imgdropdown-Story:hover .dropdown-content-Story {
display: block;
transition: 0.3s ease-in-out;
}
.imgdropdown-Story:hover .dropbtn-Story {
color: #A5CEE3;
padding: 0.6vw;
height: auto;
text-align: center;
box-sizing: border-box;
cursor: pointer;
background-color: #121B5A;
font-weight: bold;
}
</style><div class="imgdropdown-Story"> <div class="dropbtn-Story"><strong>Single Level Dropdown</strong></div> <div class="dropdown-content-Story"> <a href="#">Brand KPIs</a> <a href="#">Brand Funnel</a> <a href="#">Brand Associations</a> </div></div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
256
957
8
untitled
46
57
22
29
0
0
0
0
false
19
false
Text
HtmlContent
<style>
/* Flip Box */
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
.LegacyBoxWrap {
background-color: #ffc600;
width: 100%;
height: 100%;
}
.e-richtexteditor .e-rte-content .e-content .LegacyBoxWrap a:hover {
text-decoration: none;
}
.flip-box {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
overflow: hidden;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
cursor: pointer;
}
.flip-box-front-5,
.flip-box-back-5 {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front-5 {
background-color: #336094;
color: #ffffff;
padding-bottom: 1rem;
box-sizing: border-box;
background-image: url('../Your Dashboard/itl_data/Resources/LandingTile_CB.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-position-y: top;
border-radius: 8px;
}
.flip-box-back-5 {
background-color: #336094;
color: white;
transform: rotateY(180deg);
padding-bottom: 1rem;
border-radius: 8px;
}
.flip-box-back-6 {
background-color: #743a1e;
color: white;
transform: rotateY(180deg);
padding-bottom: 1rem;
border-radius: 8px;
}
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-1 h2,
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-2 h2,
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-4 h2,
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-5 h2 {
text-align: left;
padding-left: 2rem;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1.4vw;
margin-top: 6rem;
padding-right: 2rem;
line-height: 1.2;
}
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-3 h2,
.e-richtexteditor .e-rte-content .e-content div.flip-box-front-6 h2 {
text-align: left;
padding-left: 2rem;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1.4vw;
margin-top: 12rem;
padding-right: 2rem;
color: #ffffff;
line-height: 1.2;
}
.flip-box-front-1-Landing p,
.flip-box-front-2-Landing p,
.flip-box-front-3-Landing p,
.flip-box-front-4-Landing p,
.flip-box-front-5-Landing p,
.flip-box-front-6-Landing p {
text-align: left;
padding-left: 2rem;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1vw;
}
.flip-box-front-1-Landing p.Scopy,
.flip-box-front-2-Landing p.Scopy,
.flip-box-front-3-Landing p.Scopy,
.flip-box-front-4-Landing p.Scopy,
.flip-box-front-5-Landing p.Scopy,
.flip-box-front-6-Landing p.Scopy {
text-align: left;
padding-right: 2rem;
font-family: 'FuturaStdBook', sans-serif;
font-weight: 400;
font-size: 0.8vw;
color: #ffffff;
}
.e-richtexteditor .e-rte-content .e-content .flip-box-back-1 h2,
.e-richtexteditor .e-rte-content .e-content .flip-box-back-2 h2,
.e-richtexteditor .e-rte-content .e-content .flip-box-back-3 h2,
.e-richtexteditor .e-rte-content .e-content .flip-box-back-4 h2,
.e-richtexteditor .e-rte-content .e-content .flip-box-back-5 h2,
.e-richtexteditor .e-rte-content .e-content .flip-box-back-6 h2 {
text-align: left;
padding: 2rem;
padding-bottom: 0rem;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1.3vw;
}
.flip-box-back-1 p,
.flip-box-back-2 p,
.flip-box-back-3 p,
.flip-box-back-4 p,
.flip-box-back-5 p,
.flip-box-back-6 p {
text-align: left;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-family: 'FuturaStdBold', sans-serif;
font-weight: 700;
font-size: 1vw;
color: white;
clear: both;
padding-top: 1rem;
}
.itl-dashboard-info-container .e-rte-content .flip-box-back-1 a,
.itl-dashboard-info-container .e-rte-content .flip-box-back-2 a,
.itl-dashboard-info-container .e-rte-content .flip-box-back-4 a,
.itl-dashboard-info-container .e-rte-content .flip-box-back-5 a,
.itl-dashboard-info-container .e-rte-content .flip-box-back-6 a {
display: block;
font-family: 'FuturaStdBook', sans-serif;
font-weight: 400;
font-style: normal;
color: rgba(255, 255, 255, 0.7);
font-size: 0.75vw;
padding-bottom: 0.2rem;
/* padding-left: 0.3rem; */
}
.itl-dashboard-info-container .e-rte-content .flip-box-back-5 a:hover {
color: white;
text-decoration: underline;
cursor: pointer;
}
div.ColumnL {
float: left;
width: 50%;
padding-left: 0;
}
div.ColumnR {
float: right;
width: 50%;
padding-right: 1rem;
}
.e-richtexteditor .e-rte-content .e-content ul li{
margin-block-start: 0;
margin-block-end: 0;
}
.e-richtexteditor .e-rte-content .e-content ul.S li {
list-style-type: square;
margin-left: 1rem;
}
</style><div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front-5"> <h2>Flip Box Menu</h2> <div class="flip-box-front-5-Landing"> <p class="Scopy"> Key metrics regarding brand reputation, including Trust, Familiarity, and Mission Objectives. </p> </div> </div> <div class="flip-box-back-5"> <h2>Corporate Brand</h2> <br> <div class="ColumnL"> <ul class="S"> <li><a href="#">Country Reputation Snapshot</a></li> <li><a href="#">Trust</a></li> <li><a href="#">Influencers of Trust</a></li> <li><a href="#">Familiarity</a></li> </ul> </div> <div class="ColumnR"> <ul class="S"> <li><a href="#">Advocacy & Supportive Behaviours</a></li> <li><a href="#">Perceptions</a></li> <li><a href="#">Interest in Brand Activities</a></li> </ul> </div> </div> </div> </div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
372
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
282
957
9
untitled
3
6
23
55
0
0
0
0
false
21
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<h2 style="scrollbar-color: var(--text-non-clickable) var(--application-background);"><span style="font-size: 14pt; line-height: 18.6667px;">Dropdown Mega Menu</span></h2>
MediaImageUrl
MediaVideoUrl
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
294
957
10
untitled
92
14
45
54
0
0
0
0
false
28
false
Text
HtmlContent
<style>
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
.navbar {
background-color: #009D9C;
color: white;
width: 100%;
height: 100%;
font-size: 16px;
display: flex;
}
.navbtn{
padding: 14px 16px;
}
.navbar:hover {
color: white;
height: 100%;
padding: 0px 0px;
}
.subnav{
position: relative;
display: inline-block;
}
.subnav:hover{
position: relative;
background-color: #045959;
color: white;
height: 100%;
width: auto;
padding: 0px 0px;
}
.triangle-down {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
vertical-align: -50%;
}
.subnav-content{
display: none;
position: relative;
}
.subnav:hover .subnav-content {
padding: 0px 0px;
display: flex;
}
.e-richtexteditor .e-rte-content .e-content .navbtn a {
color: white;
padding: 0px;
}
.e-richtexteditor .e-rte-content .e-content .navbtn .subnav-content a {
color: #1DAFAD;
padding: 0px 12px;
width: 100%;
}
.e-richtexteditor .e-rte-content .e-content .navbtn a:hover {
color:#A5CEE3 ;
}
</style><div class="navbar"> <div class="subnav"><div class="navbtn"><a href="#home">Home</a></div></div> <div class="subnav"> <div class="navbtn">About <span class="triangle-down">​</span> <div class="subnav-content"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> </div> <div class="subnav"> <div class="navbtn">Services <span class="triangle-down">​</span> <div class="subnav-content"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> </div> <div class="subnav"><div class="navbtn"><a href="#contact">Contact</a></div></div> </div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
91
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
576
957
11
untitled
13
6
20
77
0
0
0
0
false
46
false
Text
HtmlContent
<style>
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
/*---------------GBT Top Menu--------------------*/
.GBT-Cimgdropdown {
box-sizing: border-box;
position: relative;
display: inline-block;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: visible;
}
.GBT-Cdropbtn {
font-family: 'FuturaStdBold', sans-serif;
font-size: 1vw;
color: #231f20;
font-weight: 400;
font-style: normal;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 4px;
background-color: white;
}
/* Top menu with a tag */
.itl-dashboard-info-container .e-rte-content .GBT-Cdropbtn a {
font-family: 'FuturaStdBook', sans-serif;
font-size: 0.9vw;
color: #231f20;
font-weight: 400;
font-style: normal;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.itl-dashboard-info-container .e-rte-content .GBT-Cdropbtn a:hover {
font-family: 'FuturaStdBook', sans-serif;
font-size: 0.9vw;
color: #231f20;
font-weight: 400;
font-style: normal;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-decoration: underline;
/* background-color: #fafafa; */
}
.GBT-Cdropdown-content {
box-sizing: border-box;
display: none;
position: absolute;
background-color: #fff;
min-width: 100px;
width: 400%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 16px;
margin-left: -300%;
}
.GBT-Cdropdown-content .flexC {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.GBT-Cdropdown-content .flexC .wrapper {
width: 20% !important;
float: left;
}
.GBT-Cdropdown-content p.Yellow {
font-family: 'FuturaStdBold', sans-serif;
font-size: 0.8vw;
color: #ffffff;
font-weight: 700;
font-style: normal;
background-color: #FFC600;
padding: 0.4vw;
}
.GBT-Cdropdown-content p.Green {
font-family: 'FuturaStdBold', sans-serif;
font-size: 0.8vw;
color: #ffffff;
font-weight: 700;
font-style: normal;
background-color: #008557;
padding: 0.4vw;
}
.GBT-Cdropdown-content p.Blue {
font-family: 'FuturaStdBold', sans-serif;
font-size: 0.8vw;
color: #ffffff;
font-weight: 700;
font-style: normal;
background-color: #336094;
padding: 0.4vw;
}
.GBT-Cdropdown-content p.Orange {
font-family: 'FuturaStdBold', sans-serif;
font-size: 0.8vw;
color: #ffffff;
font-weight: 700;
font-style: normal;
background-color: #ED8A00;
padding: 0.4vw;
}
.GBT-Cdropdown-content p.Brown {
font-family: 'FuturaStdBold', sans-serif;
font-size: 0.8vw;
color: #ffffff;
font-weight: 700;
font-style: normal;
background-color: #743A1E;
padding: 0.4vw;
}
.itl-dashboard-info-container .e-rte-content .GBT-Cdropdown-content div.wrapper a.dp2L-A {
font-family: 'FuturaStdBook', sans-serif;
font-size: 0.9vw;
font-weight: 300;
font-style: normal;
color: #231f20;
padding: 8px 16px;
text-decoration: none;
display: block;
box-sizing: border-box;
background-color: #f2f2f2;
}
.itl-dashboard-info-container .e-rte-content .GBT-Cdropdown-content div.wrapper a {
font-family: 'FuturaStdBook', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 0.9vw;
color: #231f20;
padding: 8px 16px;
text-decoration: none;
display: block;
box-sizing: border-box;
}
.itl-dashboard-info-container .e-rte-content .GBT-Cdropdown-content div.wrapper a:hover {
box-sizing: border-box;
/*border-bottom: 2px solid #7f7f7f; */
background-color: #f2f2f2;
}
.GBT-Cimgdropdown:hover .GBT-Cdropdown-content {
display: block;
transition: 0.3s ease-in-out;
}
.GBT-Cimgdropdown:hover .GBT-Cdropbtn {
text-decoration: underline;
box-sizing: border-box;
border-bottom: 8px solid #121B5A;
}
div.flexC .wrapper {
display: inline-block;
padding-top: 1rem;
padding-right: 1rem;
margin-left: 1rem;
}
</style><div class="GBT-Cimgdropdown"> <div class="GBT-Cdropbtn">Global Brand Tracker</div> <div class="GBT-Cdropdown-content"> <div class="flexC"> <div class="wrapper"> <p class="Yellow">Market Overview</p> <a href="#">Brand cross-tracker KPIs</a> <a href="#">Competitive Analysis</a> <a href="#">Trends and Opportunities</a> <a href="#">Economic Indicators</a> </div> <div class="wrapper"> <p class="Green">Product Performance</p> <a href="#">Sales & Revenue</a> <a href="#">Product Usage</a> <a href="#">Customer Feedback</a> <a href="#">Product A</a> <a href="#">Product B</a> <a href="#">Product C</a> <a href="#">Product Lifecycle Management</a> </div> <div class="wrapper"> <p class="Blue">Services Overview</p> <a href="#">Service Performance</a> <a href="#">Service Usage</a> <a href="#">Customer Support</a> <a href="#">Service Innovation</a> </div> <div class="wrapper"> <p class="Orange">Customer Demographics</p> <a href="#">Customer Segmentation</a> <a href="#">Customer Behavior</a> <a href="#">Customer Lifetime Value</a> <a href="#">Store Visitors</a> <a href="#">Digital Engagement</a> <a href="#">Customer Feedback</a> </div> <div class="wrapper"> <p class="Brown">Financial Performance</p> <a href="#"> Revenue & Expenses</a> <a href="#">Profitability</a> <a href="#">Cash Flow</a> <a href="#"> Investment Performance</a> </div> </div> </div> </div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
256
957
12
untitled
65
5
31
55
0
0
0
0
false
37
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<h2 style="scrollbar-color: var(--text-non-clickable) var(--application-background);"><span style="font-size: 14pt; line-height: 18.6667px;">Navigation Bar with Dropdown</span></h2>
MediaImageUrl
MediaVideoUrl
Chart_Height
33
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
397
957
13
untitled
39
6
22
3
0
0
0
0
false
38
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<h2 style="scrollbar-color: var(--text-non-clickable) var(--application-background);"><span style="font-size: 14pt; line-height: 18.6667px;">Animated Slideshow</span></h2>
MediaImageUrl
MediaVideoUrl
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
282
957
14
untitled
75
7
45
54
0
0
0
0
false
41
false
Text
HtmlContent
<style>
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
.menubar {
overflow: visible;
background-color: #121B5A;
color: white;
width: 100%;
height: 100%;
}
.menubar:hover{
color: #009D9C;
}
.itl-dashboard-info-container .e-rte-content .menubar a{
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor: pointer;
}
.itl-dashboard-info-container .e-rte-content .menubar a:hover{
background-color: #E7EBF0;
color: #009D9C;
padding: 14px 16px;
}
.subbtn {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
cursor: pointer;
}
.subbtn:hover{
background-color: #E7EBF0;
color: #009D9C;
padding: 14px 16px;
}
.itl-dashboard-info-container .e-rte-content .subbtn a:hover{
background-color: #E7EBF0;
color: #009D9C;
padding: 14px 16px;
}
.triangle-down {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ffffff;
vertical-align: -50%;
height: 100%;
}
.submenu-content {
display: none;
position: absolute;
background-color: #A5CEE3;
color: #009D9C;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 2.5rem;
}
.itl-dashboard-info-container .e-rte-content .submenu-content a{
color: #121B5A;
}
.submenu:hover .submenu-content {
display: flex;
height: fit-content;
transition: max-height 3s ease-in;
}
</style> <div class="menubar"> <div class="subbtn"><a href="#home">Home</a></div> <div class="submenu"> <div class="subbtn">About <span class="triangle-down"></span></div> <div class="submenu-content"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="submenu"> <div class="subbtn">Services <span class="triangle-down"></span></div> <div class="submenu-content"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> <div class="subbtn"><a href="#contact">Contact</a></div> </div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
46
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
576
957
15
untitled
28
2
43
55
0
0
0
0
false
3
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<style>
div.HDivider{
border-top: 5px solid black;
}
</style>
<div class="HDivider"><br>
</div>
MediaImageUrl
MediaVideoUrl
Chart_Height
13
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
550
957
16
untitled
59
2
43
55
0
0
0
0
false
4
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<style>
div.HDivider{
border-top: 5px solid black;
}
</style>
<div class="HDivider"><br>
</div>
MediaImageUrl
MediaVideoUrl
Chart_Height
13
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
550
957
17
untitled
13
6
20
55
0
0
0
0
false
44
false
Text
HtmlContent
<style>
.e-content,
.itl-DB-embed-container,
.itl-dashboard-info-container,
.e-rte-content {
overflow: unset !important;
}
@import url("https://use.typekit.net/hsj6riz.css");
.Cimgdropdown {
box-sizing: border-box;
position: relative;
display: inline-block;
position: relative;
display: inline-block;
width: 100%;
min-width: 120px;
height: 100%;
min-height: 30px;
max-height: 200px;
overflow: visible;
}
/* Img drop down menu Green */
.Cdropbtn-green {
font-family: 'futura-pt', sans-serif;
font-size: 1.2vw;
color: #231f20;
font-weight: 400;
font-style: normal;
padding-left: 26px;
padding-top: 8px;
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: left;
min-width: 120px;
box-sizing: border-box;
background-color: #fff;
padding-bottom: 1rem;
text-align: center;
}
.Cdropbtn-green-A {
font-family: 'futura-pt', sans-serif;
font-size: 1.2vw;
color: #231f20;
font-weight: 400;
font-style: normal;
padding-left: 26px;
padding-top: 8px;
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: left;
min-width: 120px;
box-sizing: border-box;
border-bottom: 8px solid #008443;
padding-bottom: 1rem;
background-color: #fff;
}
.Cdropdown-content-green {
box-sizing: border-box;
display: none;
position: absolute;
background-color: #fff;
min-width: 100px;
width: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 16px;
}
.Cdropdown-content-green .flexC {
display: flex;
flex-direction: row;
}
.Cdropdown-content-green div.wrapper {
padding: 12px 16px;
margin: 20px;
}
.Cdropdown-content-green div.wrapper img {
padding-top: 8px;
padding-left: 12px;
}
.Cdropdown-content-green div.wrapper h3 {
font-family: 'futura-pt', sans-serif;
font-size: 1vw;
color: #000;
font-weight: 700;
font-style: normal;
padding-left: 12px;
}
.itl-dashboard-info-container .e-rte-content .Cdropdown-content-green div.wrapper a {
font-family: 'futura-pt', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 0.9vw;
color: #231f20;
padding: 8px 16px;
text-decoration: none;
display: block;
box-sizing: border-box;
}
.Cdropdown-content-green div.wrapper a.dp2L-A {
font-family: 'futura-pt', sans-serif;
font-size: 0.9vw;
font-weight: 300;
font-style: normal;
color: #231f20;
padding: 8px 16px;
text-decoration: none;
display: block;
box-sizing: border-box;
border-bottom: 2px solid #7f7f7f;
}
.itl-dashboard-info-container .e-rte-content .Cdropdown-content-green div.wrapper a:hover {
box-sizing: border-box;
border-bottom: 2px solid #7f7f7f;
}
.Cimgdropdown:hover .Cdropdown-content-green {
display: block;
transition: 0.3s ease-in-out;
}
.Cimgdropdown:hover .Cdropbtn-green {
color: #231f20;
border-bottom: 8px solid #008443;
box-sizing: border-box;
}
</style><div class="Cimgdropdown"> <div class="Cdropbtn-green">Influences on Reputation</div> <div class="Cdropdown-content-green"> <div class="flexC"> <div class="wrapper"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjA4IiBoZWlnaHQ9IjIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3ZlcmZsb3c9ImhpZGRlbiI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc4MSAtNTkwKSI+PHBhdGggZD0iTTg3My40NDQgNjIwLjVDODIxLjMxMyA2MjAuNSA3NzkuNSA2NjYuMTE0IDc4NS40NzMgNzE5LjMzMSA3ODkuODE4IDc2MC4wNTggODIyLjk0MiA3OTMuMTgyIDg2My42NjkgNzk3LjUyNiA5MTYuODg2IDgwMy41IDk2Mi41IDc2MS42ODcgOTYyLjUgNzA5LjU1NiA4NzMuNDQ0IDcwOS41NTYgODczLjQ0NCA3MDkuNTU2IDg3My40NDQgNzA5LjU1Nkw4NzMuNDQ0IDYyMC41WiIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjYuODc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTkwMC41IDY4Mi41Qzk4OC41IDY4Mi41IDk4OC41IDY4Mi41IDk4OC41IDY4Mi41IDk4OC41IDYzMy4zNTkgOTQ5LjA4OSA1OTMuNSA5MDAuNSA1OTMuNUw5MDAuNSA2ODIuNVoiIHN0cm9rZT0iIzAwMjA2MCIgc3Ryb2tlLXdpZHRoPSI2Ljg3NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=" width="40" height="auto" class="e-rte-image e-imginline"> <h3>Views of The Sector</h3> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_vots_hhce!btlir_vots_hhce">Help/ Hinder Clean Energy</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_vots_wtl!btlir_vots_wtl">Willingness to Listen</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_vots_ba!btlir_vots_ba">Broader Attitudes</a> </div> <div class="wrapper"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjE3NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3ZlcmZsb3c9ImhpZGRlbiI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTExNjYgLTU3OCkiPjxwYXRoIGQ9Ik0xMjkyLjUgNzIyLjVDMTI4Ni40NiA3NDEuMTMzIDEyODYuNDYgNzQxLjEzMyAxMjg2LjQ2IDc0MS4xMzMgMTI4NS4xNyA3NDUuOSAxMjc5Ljk5IDc0OC41IDEyNzUuNjggNzQ3LjIgMTIzMS4yNiA3MzQuMiAxMjMxLjI2IDczNC4yIDEyMzEuMjYgNzM0LjIgMTIyNi4wOSA3MzIuOSAxMjIzLjUgNzI3LjI2NyAxMjI1LjY2IDcyMi41IDEyMzAuODMgNzA5LjUgMTIzMC44MyA3MDkuNSAxMjMwLjgzIDcwOS41IiBzdHJva2U9IiMwMDIwNjAiIHN0cm9rZS13aWR0aD0iNi44NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTM1Mi4yOSA1ODQuMDg1QzEzNDUuODMgNTkwLjU0NiAxMzQ1LjgzIDU5MC41NDYgMTM0NS44MyA1OTAuNTQ2IDExOTYuMTcgNjM0LjQ4NSAxMTk2LjE3IDYzNC40ODUgMTE5Ni4xNyA2MzQuNDg1IDExNzguNTMgNjM0LjQ4NSAxMTc4LjUzIDYzNC40ODUgMTE3OC41MyA2MzQuNDg1IDExNzMuMzcgNjM0LjQ4NSAxMTY5LjUgNjM4LjM2MiAxMTY5LjUgNjQzLjUzMSAxMTY5LjUgNjg3LjQ2OSAxMTY5LjUgNjg3LjQ2OSAxMTY5LjUgNjg3LjQ2OSAxMTY5LjUgNjkyLjYzOCAxMTczLjM3IDY5Ni41MTUgMTE3OC41MyA2OTYuNTE1IDExOTYuMTcgNjk2LjUxNSAxMTk2LjE3IDY5Ni41MTUgMTE5Ni4xNyA2OTYuNTE1IDEzNDUuODMgNzQwLjQ1NCAxMzQ1LjgzIDc0MC40NTQgMTM0NS44MyA3NDAuNDU0IDEzNTIuMjkgNzQ2LjkxNSAxMzUyLjI5IDc0Ni45MTUgMTM1Mi4yOSA3NDYuOTE1IDEzNTQuMDEgNzQ4LjYzOCAxMzU2LjE2IDc0OS41IDEzNTguMzEgNzQ5LjUgMTM2My40NyA3NDkuNSAxMzYzLjQ3IDc0OS41IDEzNjMuNDcgNzQ5LjUgMTM2OC42MyA3NDkuNSAxMzcyLjUgNzQ1LjYyMyAxMzcyLjUgNzQwLjQ1NCAxMzcyLjUgNTkwLjU0NiAxMzcyLjUgNTkwLjU0NiAxMzcyLjUgNTkwLjU0NiAxMzcyLjUgNTg1LjM3NyAxMzY4LjYzIDU4MS41IDEzNjMuNDcgNTgxLjUgMTM1OC4zMSA1ODEuNSAxMzU4LjMxIDU4MS41IDEzNTguMzEgNTgxLjUgMTM1Ni4xNiA1ODEuNSAxMzU0LjAxIDU4Mi4zNjIgMTM1Mi4yOSA1ODQuMDg1WiIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjYuODc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTExOTUuNSA2MzQuNSAxMTk1LjUgNjk2LjUiIHN0cm9rZT0iIzAwMjA2MCIgc3Ryb2tlLXdpZHRoPSI2Ljg3NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=" width="40" height="auto" class="e-rte-image e-imginline"> <h3>Familiarity & Experiences</h3> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_fe_f!btlir_fe_f">Familiarity</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_fe_ba!btlir_fe_ba">Business Areas</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_fe_bb!btlir_fe_bb">Brand Buzz</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_fe_a!btlir_fe_a">Announcements</a> </div> <div class="wrapper"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIG92ZXJmbG93PSJoaWRkZW4iPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NTkgLTE2OSkiPjxwYXRoIGQ9Ik0wIDAgMTIuMDQyMyAxMi4wNDIzIiBzdHJva2U9IiMwMDIwNjAiIHN0cm9rZS13aWR0aD0iMS44Mzk4NCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgNDg2LjQzIDE5OC44MzgpIi8+PHBhdGggZD0iTTUxNS4wNjMgMTc3LjE1MSA1MDUuNTUyIDE4Ni43OTYgNDk4LjQ3MiAxODYuNzk2IDQ5OC40NzIgMTc5LjU4MSA1MDcuOTQ4IDE2OS45MzcgNTA3Ljk0OCAxNzcuMTUxIDUxNS4wNjMgMTc3LjE1MVoiIHN0cm9rZT0iIzAwMjA2MCIgc3Ryb2tlLXdpZHRoPSIxLjgzOTg0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTUxMi42NTUgMTk4LjY2N0M1MTIuNjU1IDIxMy4yNTkgNTAwLjg1IDIyNS4wNjMgNDg2LjMzMiAyMjUuMDYzIDQ3MS43NDIgMjI1LjA2MyA0NTkuOTM3IDIxMy4yNTkgNDU5LjkzNyAxOTguNjY3IDQ1OS45MzcgMTg0LjE0OSA0NzEuNzQyIDE3Mi4zNDUgNDg2LjMzMiAxNzIuMzQ1IiBzdHJva2U9IiMwMDIwNjAiIHN0cm9rZS13aWR0aD0iMS44Mzk4NCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik01MTAuNjAyIDE4OC40MDFDNTExLjkyMiAxOTEuNTU2IDUxMi42NTUgMTk1LjA3NSA1MTIuNjU1IDE5OC42NjcgNTEyLjY1NSAyMDIuMzMzIDUxMS45MjIgMjA1Ljc4IDUxMC42MDIgMjA4LjkzMiA1MDkuMjgyIDIxMi4wODUgNTA3LjM3NiAyMTQuOTQ1IDUwNC45NTYgMjE3LjM2NCA1MDIuNTM2IDIxOS43MTEgNDk5Ljc1IDIyMS42OTIgNDk2LjU5OCAyMjMuMDExIDQ5My40NDUgMjI0LjMzIDQ4OS45MjUgMjI1LjA2MyA0ODYuMzMyIDIyNS4wNjMgNDgyLjY2NyAyMjUuMDYzIDQ3OS4yMiAyMjQuMzMgNDc2LjA2NyAyMjMuMDExIDQ3Mi45MTUgMjIxLjY5MiA0NzAuMDU1IDIxOS43MTEgNDY3LjYzNSAyMTcuMzY0IDQ2NS4yODkgMjE0Ljk0NSA0NjMuMzEgMjEyLjA4NSA0NjEuOTkgMjA4LjkzMiA0NjAuNjcgMjA1Ljc4IDQ1OS45MzcgMjAyLjMzMyA0NTkuOTM3IDE5OC42NjcgNDU5LjkzNyAxOTUuMDc1IDQ2MC42NyAxOTEuNTU2IDQ2MS45OSAxODguNDAxIDQ2My4zMSAxODUuMjQ5IDQ2NS4yODkgMTgyLjQ2MyA0NjcuNjM1IDE4MC4wNDQgNDcwLjA1NSAxNzcuNjI1IDQ3Mi45MTUgMTc1LjcxNyA0NzYuMDY3IDE3NC4zOTggNDc5LjIyIDE3My4wNzggNDgyLjY2NyAxNzIuMzQ1IDQ4Ni4zMzIgMTcyLjM0NSA0ODkuOTI1IDE3Mi4zNDUgNDkzLjQ0NSAxNzMuMDc4IDQ5Ni41OTggMTc0LjM5OCIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjEuODM5ODQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNNDk4LjUxOSAxOTMuNTAyQzQ5OS4xNzcgMTk1LjEyNiA0OTkuNTQyIDE5Ni44OTUgNDk5LjU0MiAxOTguNjY3IDQ5OS41NDIgMjAwLjUxMyA0OTkuMTc3IDIwMi4yODIgNDk4LjUxOSAyMDMuODM0IDQ5Ny44NjIgMjA1LjQ1NiA0OTYuOTEzIDIwNi44NTggNDk1Ljc0NCAyMDguMTEzIDQ5NC41NzUgMjA5LjI5MyA0OTMuMTE0IDIxMC4yNTQgNDkxLjU4IDIxMC45MTggNDg5Ljk3MyAyMTEuNTgxIDQ4OC4yMTkgMjExLjk1MSA0ODYuNDY2IDIxMS45NTEgNDg0LjY0IDIxMS45NTEgNDgyLjg4NiAyMTEuNTgxIDQ4MS4zNTMgMjEwLjkxOCA0NzkuNzQ1IDIxMC4yNTQgNDc4LjM1OCAyMDkuMjkzIDQ3Ny4xMTYgMjA4LjExMyA0NzUuOTQ3IDIwNi44NTggNDc0Ljk5NyAyMDUuNDU2IDQ3NC4zNCAyMDMuODM0IDQ3My42ODIgMjAyLjI4MiA0NzMuMzE3IDIwMC41MTMgNDczLjMxNyAxOTguNjY3IDQ3My4zMTcgMTk2Ljg5NSA0NzMuNjgyIDE5NS4xMjYgNDc0LjM0IDE5My41MDIgNDc0Ljk5NyAxOTEuOTUzIDQ3NS45NDcgMTkwLjQ3NSA0NzcuMTE2IDE4OS4yOTUgNDc4LjM1OCAxODguMTE1IDQ3OS43NDUgMTg3LjE1NCA0ODEuMzUzIDE4Ni40OTEgNDgyLjg4NiAxODUuODI3IDQ4NC42NCAxODUuNDU4IDQ4Ni40NjYgMTg1LjQ1OCA0ODguMjE5IDE4NS40NTggNDg5Ljk3MyAxODUuODI3IDQ5MS41OCAxODYuNDkxIiBzdHJva2U9IiMwMDIwNjAiIHN0cm9rZS13aWR0aD0iMS44Mzk4NCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=" width="40" height="auto" class="e-rte-image e-imginline"> <h3>Brand Performance</h3> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_rd!btlir_pb_rd">Trust Drivers</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_et!btlir_pb_et">Energy Transition</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_slto!btlir_pb_slto">Societal Licence to Operate</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_bpro!btlir_pb_bpro">Brand Promises</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_bpso!btlir_pb_bpso">Brand Personality</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_pb_ba!btlir_pb_ba">Brand Associations</a> </div> <div class="wrapper"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iNTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIG92ZXJmbG93PSJoaWRkZW4iPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01NTAgLTE3MykiPjxwYXRoIGQ9Ik05NTEuMjY4IDM2MC44NDJDOTA5LjkxNiAzNjAuODQyIDkwOS45MTYgMzYwLjg0MiA5MDkuOTE2IDM2MC44NDIgOTA4LjYyMyAzNjAuODQyIDkwNy4zMzEgMzYyLjEzNCA5MDcuMzMxIDM2My40MjcgOTA3LjMzMSAzOTEuODU1IDkwNy4zMzEgMzkxLjg1NSA5MDcuMzMxIDM5MS44NTUgOTA3LjMzMSAzOTMuMTQ4IDkwOC42MjMgMzk0LjQ0MSA5MDkuOTE2IDM5NC40NDEgOTE3LjY2OSAzOTQuNDQxIDkxNy42NjkgMzk0LjQ0MSA5MTcuNjY5IDM5NC40NDEgOTE3LjY2OSA0MDcuMzY0IDkxNy42NjkgNDA3LjM2NCA5MTcuNjY5IDQwNy4zNjQgOTM1Ljc2MiAzOTQuNDQxIDkzNS43NjIgMzk0LjQ0MSA5MzUuNzYyIDM5NC40NDEgOTUxLjI2OCAzOTQuNDQxIDk1MS4yNjggMzk0LjQ0MSA5NTEuMjY4IDM5NC40NDEgOTUyLjU2IDM5NC40NDEgOTUzLjg1MyAzOTMuMTQ4IDk1My44NTMgMzkxLjg1NSA5NTMuODUzIDM2My40MjcgOTUzLjg1MyAzNjMuNDI3IDk1My44NTMgMzYzLjQyNyA5NTMuODUzIDM2Mi4xMzQgOTUyLjU2IDM2MC44NDIgOTUxLjI2OCAzNjAuODQyWiIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjIuMDI0MzQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjgiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDc0OSAwIDAgMSAtMzYzLjA5MSAtMTg2LjgxMSkiLz48cGF0aCBkPSJNOTM4LjU0MiA0MDIuMzQxQzk0My42OCA0MDIuMzQxIDk0My42OCA0MDIuMzQxIDk0My42OCA0MDIuMzQxIDk1Ni41MjkgNDEyLjY2NCA5NTYuNTI5IDQxMi42NjQgOTU2LjUyOSA0MTIuNjY0IDk1Ni41MjkgNDAyLjM0MSA5NTYuNTI5IDQwMi4zNDEgOTU2LjUyOSA0MDIuMzQxIDk2NC4yMzggNDAyLjM0MSA5NjQuMjM4IDQwMi4zNDEgOTY0LjIzOCA0MDIuMzQxIDk2NS41MjUgNDAyLjM0MSA5NjYuODA4IDQwMS4wNTEgOTY2LjgwOCAzOTkuNzYxIDk2Ni44MDggMzcxLjM3MSA5NjYuODA4IDM3MS4zNzEgOTY2LjgwOCAzNzEuMzcxIDk2Ni44MDggMzcwLjA4MSA5NjUuNTI1IDM2OC43OTIgOTY0LjIzOCAzNjguNzkyIDk2MS42NyAzNjguNzkyIDk2MS42NyAzNjguNzkyIDk2MS42NyAzNjguNzkyIiBzdHJva2U9IiMwMDIwNjAiIHN0cm9rZS13aWR0aD0iMi4wMjQzNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iOCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjAwNzQ5IDAgMCAxIC0zNjMuMDkxIC0xODYuODExKSIvPjwvZz48L3N2Zz4=" width="40" height="auto" class="e-rte-image e-imginline"> <h3>Communications</h3> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_c_aa!btlir_c_aa">Advertising Awareness & Themes</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_c_mc!btlir_c_mc">MTF Campaign</a> <a href="../Infotools%20Harmoni%20Shell%20Corporate/index.html#!#breadcrumb!!spir_c_is!btlir_c_is">Initiatives/ Sponsorships</a> </div> </div> </div> </div>
NavigationLink
NavigationLinkId
ProjectLink
Chart_Height
39
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
256
957
18
untitled
39
7
20
30
0
0
0
0
false
45
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<h2 style="scrollbar-color: var(--text-non-clickable) var(--application-background);"><span style="font-size: 14pt; line-height: 18.6667px;">Animated Flip Box</span></h2>
MediaImageUrl
MediaVideoUrl
Chart_Height
46
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
256
957
19
untitled
82
21
24
3
0
0
0
0
false
47
false
Text
BackgroundColour
rgba(255, 255, 255, 0)
HtmlContent
<style>.cube {
margin: 30px auto;
position: relative;
width: auto;
height: 100%;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
text-shadow: 1px 1px 1px #383737;
color: #FFF;
text-align:center;
}
.cube h1 {
font-size: 30px;
font-weight: bold;
line-height:98px;
margin:0;
padding:0;
}
.cube h2 {
font-size: 21px;
font-weight: bold;
margin: 0;
padding: 16px 0 2px;
}
.cube p {
font-size: 13px;
padding: 5px 10px;
margin: 0;
}
.default-state, .active-state {
height: 100px;
position: absolute;
left: 0;
top: 0;
transition: transform 0.4s ease;
transform-origin: center center -50px;
-webkit-transform-origin: center center -50px;
width: 100%;
}
.default-state {
background-color: #03a9f4;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.active-state {
background: #1976d2;
transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.cube:hover .default-state {
transform: perspective(1000px) rotateX(90deg) rotateY(0) rotateZ(0deg);
}
.cube:hover .active-state {
z-index: 99999;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}
</style><div class="cube"><div class="active-state"><h2>CSS 3D Flip Box</h2> <p>No JavaScript, pure CSS. Download CSS file. You can use every content inside the box.</p> </div><div class="default-state"><h1>Hover Me </h1> </div></div>
MediaImageUrl
MediaVideoUrl
Chart_Height
137
Chart_Scale
1
Chart_Size_Locked
false
Chart_Width
307
New