-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
380 lines (343 loc) · 18.6 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>TD Media</title>
<link rel="icon" type="image/png" href="images/logo.png">
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="TD Media, TD, Media, Web design, Logo, Logo design" />
<script>
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- //Meta tag Keywords -->
<!-- Custom-Files -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/aos.css">
<link href='css/aos-animation.css' rel='stylesheet prefetch' type="text/css" media="all" />
<!-- Style-CSS -->
<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome-icons -->
<!-- /Fonts -->
<link href="//fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Playfair+Display:400,400i,700i" rel="stylesheet">
<!-- //Fonts -->
</head>
<body>
<div class="main-content" id="home" style="background-image:url('images/blog.jpg')">
<header class="py-1">
<div class="container">
<nav class=" navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" href="index.html"><img class="header-logo" src="images/logo.png" alt="logo" style="width:3em"></a>
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-4 m-auto">
</ul>
<div class="header-right">
<style>
@media(max-width: 990px) {
.navbar-nav-small {
background-color: #fe9900;
width:100% !important;
}
.nav-item-small {
padding-left: 3%;
text-align: center;
}
.nav-link-small {
border-radius: 0.4ex !important;
}
.wwd {
margin-left: 5ex !important;
}
}
</style>
<ul class="navbar-nav navbar-nav-small ml-4 m-auto" id="top">
<li class="nav-item nav-item-small active">
<a class="nav-link nav-link-small" href="index.html" style="color: #ffffff !important; background-color:#FE9900 !important;border-radius: 0.8em;">Back to Home<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<style>
.banner-w3layouts-info a {
color:#FE9900 !important;
padding: 0% !important;
display: inline !important;
font-size: 1.0em !important;
background:none !important;
box-shadow: none !important;
}
.banner-w3layouts-info a:hover {
color:#FE9900 !important;
background:none !important;
box-shadow: none !important;
}
@media(max-width:991px) {
.container {
padding-right:4ex !important;
}
}
</style>
<section class="banner-w3layouts" id="home" style="padding-top:13ex !important;background-image: url('images/blog.jpg');">
<div class="container" style="background-color:#262631e5;padding-left:auto;padding-right:auto;">
<div class="row banner-w3layouts-grids">
<div class=" banner-w3layouts-info" style="color:#fff">
<h3 class="mb-3" data-aos="fade-up" style="text-align: center;color: #fff">ONLINE VISUAL IMAGE</h3>
<p class="mb-4" style="font-size:1.2em; text-align: center; color: #fff">The new world of marketing is increasingly visual. It's no coincidence that the newest and fastest-growing social networks on the web -- like Pinterest, Instagram, and Snapchat -- are focused primarily on visual content. <br></p>
<p class="mb-4" style="font-size:1.2em; text-align: center; color: #fff">So, how can marketers adapt to and leverage an increasingly visual social atmosphere? By implementing a strong visual branding strategy on social media.<br></p>
<p class="mb-4" style="font-size:1.2em; text-align: center; color: #fff">Visual social branding refers to what your social media content looks like -- your profile picture, your cover photo, and especially your social posts. Great visuals on social media are important because the human brain is wired to read and understand images <a href="https://blog.hubspot.com/marketing/visual-content-marketing-infographic">better and faster</a> than words. Plus, visual content increases social engagement: Did you know that, according to a <a href="https://www.socialbakers.com/blog/1749-photos-make-up-93-of-the-most-engaging-posts-on-facebook">study</a> by Socialbakers, images on Facebook constitute 93% of the most engaging posts compared with status updates, links, and even video?<br></p>
<p class="mb-4" style="font-size:1.2em; text-align: center; color: #fff">The good news is that the four key ingredients of social media success -- consistent colors, fonts, imagery, and layouts -- are within your reach.</p>
</div>
</div>
</div>
</section>
</div>
<style>
@media(max-width:991px) {
.slider {
height: 80%;
overflow-y: auto;
}
.one {
font-weight: 500;
margin: 28rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
color:#fff;
}
.two {
margin: 9rem 0 1rem;
}
.three {
margin: 14rem 0 1rem;
}
.four {
margin: 20rem 0 1rem;
}
.slider__nav {
margin: 18rem 12px;
}
}
@media (max-width:576px) {
.slider {
height: 80%;
overflow-y: auto;
}
.one {
font-weight: 500;
margin: 35rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
color:#fff;
}
.two {
margin: 15rem 0 1rem;
}
.three {
margin: 21rem 0 1rem;
}
.four {
margin: 29rem 0 1rem;
}
.slider__nav {
margin: 18rem 12px;
}
}
</style>
<section class="about py-lg-5 py-md-5 py-3" id="whatwedo" style="background-color:#262631;padding-bottom:0em !important">
<div class="container">
<div class="inner-sec-wthree py-lg-5 " >
<h3 class="tittle text-uppercase text-center mb-lg-5 mb-3" data-aos="fade-up"><span class="sub-tittle" style="font-size:0.6em !important;">The 4 Ingredients of Social Media Success</span></h3>
<div class="feature-grids" style="height:45ex; margin-top: 0em !important;">
<div class="slider" data-aos="fade-up">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav slider__nav__one"/>
<input type="radio" name="slider" title="slide2" class="slider__nav slider__nav__two"/>
<input type="radio" name="slider" title="slide3" class="slider__nav slider__nav__three"/>
<input type="radio" name="slider" title="slide4" class="slider__nav slider__nav__four"/>
<div class="slider__inner" style="padding-top: 0em !important;" >
<div class="slider__contents">
<h2 class="slider__caption one">1. A consistent color palette.</h2>
<p class="slider__txt">If you look at the colors of any well known brand, you'll see that they use the same colors over and over again. In their logo, in their text, even their images. Two to four colors used consistently throughout all social media posts and marketing. Using the same colors over and over again will help consumers become familiar with a brand. <br> For example, notice how all of Cadbury’s social posts use its iconic purple color and white across its imagery, text, and logo. <br> Understanding <a href="https://blog.hubspot.com/marketing/psychology-of-color">color psychology</a> helps to reflect the feelings evoked from your customers. For example, many tech companies -- like Facebook, Twitter, Dell, IBM, and HP -- use blue to symbolize trust, intelligence and progress. Virgin's vibrant red color scheme gives off bold and confident vibes, mirroring Richard Branson's own, distinct business methods.</p>
</div>
<div class="slider__contents">
<h2 class="slider__caption two">2. Font pairings that match a brand’s personality.</h2>
<p class="slider__txt">Like your a colourpalette, font choices should reflect a brand’s personality. A strong font or a simple one? Cute or elegant? <br> Three fonts for materials: a font for ther title/heading, a font for subtitles, and a font for body text.</p>
</div>
<div class="slider__contents">
<h2 class="slider__caption three">3. Appropriate imagery and filters</h2>
<p class="slider__txt">Pick imagery that has a consistent theme. If you’re taking your own photos, make sure you keep your theme consistent, too. <br> Another important aspect of imagery is your brand filters. They add consistency to your graphics -- a big plus on social media. Take Corona for example, which uses a sun-drenched filter to give a "summery’ feel to its marketing graphics. <br> Like your other visual aspects, consistency is key.</p>
</div>
<div class="slider__contents">
<h2 class="slider__caption four">Finally! Ready to put your skills to action?</h2>
<p class="slider__txt">Images, colors, fonts and layouts are all elements of graphic design that will play a huge role in making your brand image stand out. Considering up to 90% of information transmitted to the brain is visual, it’s no surprise that people respond well to great design. <br> In the time it took you to read this article, approximately 500,000 new posts would have appeared on Twitter, 3 million on Facebook, 15,000 on Instagram and many, many more <br> The social media advertising race is on, and your brand’s visual voice is what will get you ahead. So jump in and get started by getting your self a customized Online Image.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
@media(max-width:1023px) {
.footer {
background-position-y: 0ex !important;
background-size: 100% 100% !important;
}
}
</style>
<footer>
<section class="footer footer_1its py-5" style="background-image: url('images/footer2.jpg');background-size: cover !important;background-position-y: -30ex">
<div class="container py-md-4" style="padding-bottom: 0ex !important;" >
<div class="footer-grid_section text-center">
<div class="footer-title-w3ls mb-3" data-aos="fade-up" style="padding-top: 1.5em">
<a href="index.html"><img class="footer-logo" src="images/logo-light.png" alt="logo" style="width:2.5em"></a>
</div>
<div class="footer-text">
<style>
@media (min-width: 576px) {
.navbar-nav {
flex-direction: row;
}
.nav-item2 {
width: 20%;
}
}
@media (max-width:576px) {
.nav-link2 {
padding-left:15ex !important;
}
}
@media (max-width:991px) {
.nav-item2 {
margin-left:-10ex;
}
}
</style>
<div>
<ul class="navbar-nav ml-4 m-auto" data-aos="fade-up">
<li class="nav-item nav-item2">
<a class="nav-link nav-link2" href="index.html" style="padding-left:35ex;">Home<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<ul class="social_section_1info" data-aos="fade-up">
<li class="mb-2 facebook"><a href="https://www.facebook.com/tdmedia/"><i class="fa fa-facebook mr-1"></i> TD Media</a></li>
<li class="mb-2 twitter"><a style="color:white" href="tel:+254717887598"><i class="fa fa-phone mr-1"></i> +254717887598</a></li>
<li class="google"><a style="color:white" href="mailto:[email protected]"><i class="fa fa-envelope mr-1"></i> [email protected]</a></li>
</ul>
</div>
<div class="cpy-right text-center">
<p class="copy-w3layouts" style="color:#fff !important">© 2018 TD Media. All rights reserved | Design by
<a style="color:#fff !important" href="https://www.jackofclubs.co.ke/" target="new">Jack O' Clubs</a>
</p>
</div>
</div>
</section>
</footer>
<script src="js/jquery-2.2.3.min.js"></script>
<!--/aos -->
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<!--//aos -->
<!--/counter-->
<script src="js/counternew.js"></script>
<!--//counter-->
<!--/ start-smoth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<script>
$(document).ready(function() {
$().UItoTop({
easingType: 'easeOutQuart'
});
});
// Cache selectors
var topMenu = $("#top"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
});
$(function ()
{
$(document).scroll(function ()
{
var $nav = $(".py-1");
var $topdiv = $('.banner-w3layouts');
$nav.toggleClass('scrolled', $(this).scrollTop() > $topdiv.height()-600);
if ($(this).scrollTop() > $topdiv.height()-600)
{
$('.header-logo').attr('src','images/logo-small.png');
$('.header-logo').addClass('scrolled-transition');
}
else
{
$('.header-logo').attr('src','images/logo.png');
$('.header-logo').removeClass('scrolled-transition-blog');
}
});
});
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
</script>
<!--// end-smoth-scrolling -->
<!-- //js -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="http://tdmedia.co.ke/js/components/gmap.min.js"></script>
</body>
</html>