-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (156 loc) · 13.9 KB
/
index.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
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Sat Sep 02 2023 05:19:46 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="64e94ff2f05b1f29c590d2d8" data-wf-site="5fbdcc43b52eeb08001409d3">
<head>
<meta charset="utf-8">
<title>Typogram's Brand Personality Workshop</title>
<meta content="Typogram's free brand personality workshop kit helps founders jumpstart creating their first logos and brand design. By helping you to narrow down your brand personality, our kit enables you to identify visual directions and brainstorm unique bran" name="description">
<meta content="Typogram's Brand Personality Workshop" property="og:title">
<meta content="Typogram's free brand personality workshop kit helps founders jumpstart creating their first logos and brand design. By helping you to narrow down your brand personality, our kit enables you to identify visual directions and brainstorm unique bran" property="og:description">
<meta content="Typogram's Brand Personality Workshop" property="twitter:title">
<meta content="Typogram's free brand personality workshop kit helps founders jumpstart creating their first logos and brand design. By helping you to narrow down your brand personality, our kit enables you to identify visual directions and brainstorm unique bran" property="twitter:description">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/typogram-brand-personality-workshop.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Playfair Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic"] }});</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="headersection">
<div class="menu w-clearfix">
<a href="http://typogram.co/" class="home w-inline-block"><img src="images/logo-pink.svg" loading="lazy" width="120" alt="typogram logo" class="image"></a>
<div class="nav">
<a href="#about" class="link">About</a>
<a href="#printKit" class="link">Print Kit</a>
<a href="#digitalKit" class="link">Digital Kit</a>
</div>
</div>
<div id="about" class="hero">
<div class="homepage-copy">
<h3 class="intro">Introducing</h3>
<h1 class="header"><em class="italic-text">Brand Personality Workshop Kit</em></h1>
<div class="columns w-row">
<div class="column-9 w-col w-col-5"><img src="images/homapage-svg-4.svg" loading="lazy" alt="typogram-brand-personality-workshop" class="image-6"></div>
<div class="column-8 w-col w-col-7">
<p class="homepage-copy-paragraph"><span class="emphasizecopy">Crafted from</span>
<a href="https://typogram.co/" target="_blank" class="url">Typogram's</a> product research, our Brand Personality Workshop Kit is a fun, trusted free tool for founders to jumpstart their brand design! <br><br><span class="emphasizecopy">Our workshop kit</span> enables you to find visual directions by helping you identify your brand personality. With our creative explorations, you can explore and create your own logo for your business.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="workshopsection">
<div id="printKit" class="column w-row">
<div class="column-4 w-col w-col-6">
<div data-delay="4000" data-animation="slide" class="slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
<div class="w-slider-mask">
<div class="slide w-slide"><img src="images/slider-print-pic1-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-print-pic1-2x-p-500.png 500w, images/slider-print-pic1-2x-p-800.png 800w, images/slider-print-pic1-2x-p-1080.png 1080w, images/slider-print-pic1-2x.png 1440w" alt="typogram-brand-personality-workshop pdf" class="image-4"></div>
<div class="slide-5 w-slide"><img src="images/slider-print-pic2-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-print-pic2-2x-p-500.png 500w, images/slider-print-pic2-2x-p-800.png 800w, images/slider-print-pic2-2x-p-1080.png 1080w, images/slider-print-pic2-2x.png 1440w" alt="typogram brand personality workshop pdf" class="image-4"></div>
<div class="slide-6 w-slide"><img src="images/slider-print-pic3-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-print-pic3-2x-p-500.png 500w, images/slider-print-pic3-2x-p-800.png 800w, images/slider-print-pic3-2x-p-1080.png 1080w, images/slider-print-pic3-2x.png 1440w" alt="typogram brand personality workshop pdf" class="image-4"></div>
</div>
<div class="left-arrow w-slider-arrow-left">
<div class="button-round rotate-180">➻</div>
</div>
<div class="right-arrow w-slider-arrow-right">
<div class="button-round">➻</div>
</div>
<div class="slide-nav w-slider-nav w-slider-nav-invert w-round"></div>
</div>
</div>
<div class="column-5 w-col w-col-6">
<div class="section-col-div">
<h2 class="section-header">Print Brand Personality Workshop Packet</h2>
<h3 class="label">PDF</h3>
<ul role="list" class="list">
<li class="list-item">Duration: 30 - 60 min</li>
<li class="list-item last-item-minus-margin">Solopreneur or team</li>
</ul>
<p class="paragraph">Our PDF kit features a little crafting, a list of brand personality cards, and worksheets with branding knowledge to help you get started.</p>
<div class="w-form">
<form id="email-form-1" name="email-form" data-name="Email Form" action="https://typogram.us21.list-manage.com/subscribe/post?u=524fd774e21060e9ef6f46b01&amp;id=f68e30ed33&amp;f_id=00ea5fe1f0" method="post" class="form mc-tags" data-wf-page-id="64e94ff2f05b1f29c590d2d8" data-wf-element-id="1d217b50-e406-a1b8-7525-7b07e7bdfd8c"><label class="w-checkbox hiddencheckbox"><input type="checkbox" id="group[1791][2]" name="group[1791][2]" data-name="group[1791][2]" checked="" class="w-checkbox-input"><span for="group[1791][2]" class="w-form-label">Print</span></label><input type="email" class="text-field w-input" maxlength="256" name="EMAIL" data-name="EMAIL" placeholder="Your email here" id="EMAIL-3" required=""><input type="submit" value="Subscribe" data-wait="Please wait..." class="submit-button w-button"><label class="w-checkbox checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox w--redirected-checked"></div><input type="checkbox" id="checkbox" name="checkbox" data-name="Checkbox" checked="" style="opacity:0;position:absolute;z-index:-1"><span class="checkbox-label w-form-label" for="checkbox">Subscribe to Typogram's newsletter</span>
</label></form>
<div class="postmsgstyle w-form-done">
<div class="text-block">Hooray! You will receive a download link in your email shortly : )</div>
</div>
<div class="postmsgstyle w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div><img src="images/section-Background.png" loading="lazy" sizes="(max-width: 767px) 100vw, 50vw" srcset="images/section-Background-p-500.png 500w, images/section-Background.png 720w" alt="brand personality workshop background" class="section-background-1">
</div>
</div>
<div id="digitalKit" class="column w-row">
<div class="column-6 w-col w-col-6">
<div data-delay="4000" data-animation="slide" class="slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
<div class="w-slider-mask">
<div class="slide-2 w-slide"><img src="images/slider-digital-pic1-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-digital-pic1-2x-p-500.png 500w, images/slider-digital-pic1-2x-p-800.png 800w, images/slider-digital-pic1-2x-p-1080.png 1080w, images/slider-digital-pic1-2x.png 1440w" alt="typogram-brand-personality-workshop-google-slide" class="image-4"></div>
<div class="slide-4 w-slide"><img src="images/slider-digital-pic2-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-digital-pic2-2x-p-500.png 500w, images/slider-digital-pic2-2x-p-800.png 800w, images/slider-digital-pic2-2x-p-1080.png 1080w, images/slider-digital-pic2-2x.png 1440w" alt="brand personality workshop google slide" class="image-4"></div>
<div class="slide-3 w-slide"><img src="images/slider-digital-pic3-2x.png" loading="lazy" sizes="(max-width: 1439px) 100vw, 1440.0001220703125px" srcset="images/slider-digital-pic3-2x-p-500.png 500w, images/slider-digital-pic3-2x-p-800.png 800w, images/slider-digital-pic3-2x-p-1080.png 1080w, images/slider-digital-pic3-2x.png 1440w" alt="brand personality workshop background" class="image-4"></div>
</div>
<div class="left-arrow w-slider-arrow-left">
<div class="button-round rotate-180">➻</div>
</div>
<div class="right-arrow w-slider-arrow-right">
<div class="button-round">➻</div>
</div>
<div class="slide-nav-2 w-slider-nav w-slider-nav-invert w-round"></div>
</div>
</div>
<div class="column-7 w-col w-col-6">
<div class="section-col-div">
<h2 class="section-header">Digital Brand<br>Personality<br>Workshop Kit</h2>
<h3 class="label">GOOGLE SLIDES</h3>
<ul role="list" class="list">
<li class="list-item">Duration: 30 - 60 min</li>
<li class="list-item last-item-minus-margin">Solopreneur or team</li>
</ul>
<p class="paragraph">Start learning about branding with a click with our digital workshop kit. All you have to do is duplicate the sample slide file, follow the instructions, and you are ready to begin!</p>
<div class="w-form">
<form id="email-form-2" name="email-form" data-name="Email Form" action="https://typogram.us21.list-manage.com/subscribe/post?u=524fd774e21060e9ef6f46b01&amp;id=f68e30ed33&amp;f_id=00ea5fe1f0" method="post" class="form mc-tags" data-wf-page-id="64e94ff2f05b1f29c590d2d8" data-wf-element-id="1d217b50-e406-a1b8-7525-7b07e7bdfdae"><label class="w-checkbox hiddencheckbox"><input type="checkbox" id="group[1790][1]" name="group[1790][1]" data-name="group[1790][1]" checked="" class="w-checkbox-input"><span for="group[1790][1]" class="w-form-label">Digital</span></label><input type="email" class="text-field w-input" maxlength="256" name="EMAIL" data-name="EMAIL" placeholder="Your email here" id="EMAIL-4" required=""><input type="submit" value="Subscribe" data-wait="Please wait..." class="submit-button w-button"><label class="w-checkbox checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox w--redirected-checked"></div><input type="checkbox" id="checkbox-2" name="checkbox-2" data-name="Checkbox 2" checked="" style="opacity:0;position:absolute;z-index:-1"><span class="checkbox-label w-form-label" for="checkbox-2">Subscribe to Typogram's newsletter</span>
</label></form>
<div class="postmsgstyle w-form-done">
<div>Woohoo! You will receive a download link in your email shortly : )</div>
</div>
<div class="postmsgstyle w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div><img src="images/section-Background-2.png" loading="lazy" sizes="(max-width: 767px) 100vw, 50vw" srcset="images/section-Background-2-p-500.png 500w, images/section-Background-2.png 720w" alt="brand personality workshop background
" class="section-background-2">
</div>
</div>
</div>
<div class="footersection">
<div class="footer">
<div class="copyright">Copyright © Typogram. Check us out on <a href="https://www.instagram.com/typogramco/" target="_blank" class="url">Instagram</a> & <a href="https://twitter.com/typogramco" target="_blank" class="url">Twitter</a>!</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fbdcc43b52eeb08001409d3" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<script>
function addMCtag(){
const forms = document.getElementsByClassName('mc-tags');
for (let form = 0; form < forms.length; form++){
let mc_tag = document.createElement("input");
mc_tag.type="hidden";
mc_tag.name = "tags";
mc_tag.value = "2818555";
forms[form].appendChild(mc_tag);
}
}
addMCtag();
</script>
</body>
</html>