<link rel="stylesheet" href="https://use.typekit.net/udp8bva.css">
<body>
<div id="wrapper">
<header>
<div id="frost">
<h1>Client Hero Story</h1>
<h2>Stories That Build Trust and Sell</h2>
</div>
</header>
<main>
<h3 id="hook">Did you know that client hero stories influence 97% of consumer purchase decisions?</h3>
<p>Yet most companies don’t take full advantage of the marketing influence and power of their current client base. And when they do tap into their client’s stories, they make mistakes which make them appear similar to their competitors rather than showcasing how they are different. However, when you get your client stories right, you’ll draw people in and clearly demonstrate how your product or service is unique. They will quickly trust you and be more compelled to buy.</p>
<section id="freeGuide">
<section>
<div id="winter">
<h3>Download this free guide:</h3>
<h5>How To Create An Irresistible Client Hero Story That Increases Trust, Sways Purchasing Decisions In Your Favor and Leads To Referrals</h5>
<h4>to discover:</h4>
</div>
</section>
</section>
<section id="content">
<ul>
<li>What most companies get totally <span class="bold">WRONG</span> when telling their company story and what to do instead.</li>
<li>How a client hero story is different from a case study – and why client hero stories are more effective when targeting affluent consumers.</li>
<li>The <span class="bold">12 steps</span> to creating client hero stories that sell your products and services.</li>
<li>Why 97% of consumers say client hero stories are one of the most influential pieces of content that affect their purchase decisions.</li>
<li>How to prepare for an interview so you get <span class="bold">EXACTLY</span> what you need (<span class="bold">PLUS</span>, 13 sample questions you can use during your customer/client/patient interview.)</li>
<li>And much, much more...</li>
</ul>
<h3>YES! I Want To Increase Trust, Sway Purchasing Decisions & Increase Referrals!</h3>
<p>Enter your name and email to receive your FREE Guide:</p>
<form method="get" action="https://assets.codepen.io/5257275/Guide_To_Creating_An_Irresistible_Client_Hero_Story.pdf">
<input type="text" id="name" name="name" placeholder="Your Name">
<input type="email" id="email" name="emailaddress" placeholder="Your Email Address">
<input type="button" id="downloadGuide" value="Download Your Free Guide Now">
</form>
</section>
</main>
<footer>
<img src="https://assets.codepen.io/5257275/favicon.png" id="favicon" alt="CHS Favicon">
<p>© Cindy Cyr 2020 cincyrcopywriting.com</p>
</footer>
</div>
</body>
@charset "utf-8";
@font-face {
font-family: 'atocha', 'Brush Script MT', sans-serif;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'anisette-std', 'Didot', sans-serif;
font-weight: 400;
font-style: normal;
}
/*@font-face {
font-family: 'anisette-exbold', 'Impact', sans-serif;
font-weight: 700;
font-style: normal;
}*/
@font-face {
font-family: 'brandon-grotesque', 'Trebuchet MS', sans-serif;
font-weight: 400;
font-style: normal;
}
/*@font-face {
font-family: 'brandon-grotesque-light', 'Trebuchet MS', sans-serif;
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'brandon-grotesque-black', 'Trebuchet MS', sans-serif;
font-weight: 900;
font-style: normal;
}*/
header {
padding-top: 4em;
}
header, #frost::before {
background: url(https://assets.codepen.io/5257275/hero_banner.jpg) 0 / cover no-repeat;
height: 250px;
}
#frost {
position: relative;
margin: 0 auto;
max-width: 600px;
max-height: 200px;
text-align: center;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .4em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 8px hsla(0,0%,100%,.3);
}
#frost::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: -30px;
z-index: -1;
-webkit-filter: blur(30px);
filter: blur(30px);
}
/*#glow {
box-shadow:
0 0 10px 5px #fff,
0 0 20px 5px #f0f,
0 0 30px 10px #0ff;
}*/
body {
background-color: #333;
max-width: 1280px;
min-width: 960px;
margin: auto;
font-family: 'brandon-grotesque', 'Trebuchet MS', sans-serif;
}
#wrapper {
background-color: #fff;
margin-left: auto;
margin-right: auto;
width: 80%;
}
main {
padding-left: 5em;
padding-right: 5em;
}
#hook {
text-align: center;
font-size: 290%;
}
h1 {
font-family: 'atocha', 'Brush Script MT', sans-serif;
font-size: 6em;
background-color: #086DB9;
background: linear-gradient(45deg, #086DB9, #5049A3, #AF2B93);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
overflow: hidden;
margin-top: 20px;
}
h2 {
font-family: 'anisette-std', 'Didot', sans-serif;
font-size: 115%;
margin-top: -4em;
color: #086DB9;
text-transform: uppercase;
}
h3 {
font-family: 'brandon-grotesque', 'Trebuchet MS', sans-serif;
font-weight: 900;
font-size: 220%;
}
h4 {
font-size: 220%;
margin-top: -30px;
}
h5 {
font-style: italic;
font-size: 140%;
max-width: 600px;
}
p {
font-size: 140%;
max-width: 750px;
text-align: center;
margin: 0 auto;
}
.bold {
font-weight: 900;
}
ul {
font-size: 130%;
}
/*.col1 {
float: left;
padding-left: 3em;
padding-right:5em;
padding-top: 3em;
position: relative;
}
.col2 {
float: right;
position: relative;
}*/
#freeGuide {
color: #333;
display: inline-block;
margin-left: -80px;
text-shadow: 1px 1px #ededed;
padding-top: 3em;
}
#freeGuide, #winter::before {
background: url(https://assets.codepen.io/5257275/download_banner_1869.jpg) 0 / cover no-repeat;
background-position: bottom;
background-size: 150%;
width: 1024px;
height: 345px;
margin-top: 40px;
}
#winter {
position: relative;
margin: 0 auto;
max-width: 600px;
max-height: 280px;
text-align: center;
margin: 0 auto;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.6) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 6px 8px hsla(0,0%,100%,.3);
border-radius: 8px;
}
#winter::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: -30px;
z-index: -1;
-webkit-filter: blur(100px);
filter: blur(100px);
}
#guidePreview {
margin-top: -19em;
}
ul {
list-style-type: circle;
margin-top: 40px;
}
#content p {
text-align: center;
}
#content h3 {
font-size: 230%;
max-width: 650px;
text-align: center;
margin-left: 3.1em;
color: #5049A3;
}
form {
width: 520px;
padding: 10px;
box-sizing: border-box;
margin: 0 auto;
}
input {
margin-top:10px;
min-width: 500px;
display: block;
font-family: 'brandon-grotesque', 'Trebuchet MS', sans-serif;
font-size: 18px;
padding: 10px 0 10px 10px;
background-color: rgba(1, 112, 188, .15);
}
#downloadGuide {
padding: 0.9em;
margin-top: 25px;
margin-left: 7px;
font-weight: 900;
font-size: 34px;
background-color: rgb(1, 112, 188);
color: #fff;
line-height: 20px;
cursor: pointer;
border-radius: .4em;
border-style: none;
background-image: linear-gradient(60deg, #086DB9, #5049A3, #AF2B93);
}
#downloadGuide:hover {
background-color: #086DB9;
background: linear-gradient(45deg, #086DB9, #5049A3, #AF2B93);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
overflow: hidden;
border-style: solid;
border-color: #5049A3 #086DB9 #AF2B93;
}
footer {
height: 50px;
padding-top: 50px;
}
footer p {
font-size: 90%;
color: #333;
margin-left: 20px;
position: absolute;
margin-left: 350px;
}
#favicon {
float: right;
margin-right: 320px;
margin-top: -18px;
z-index: -1;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.