192 lines
5.2 KiB
HTML
192 lines
5.2 KiB
HTML
<!DOCTYPE html/>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>
|
||
Congratulations on your custom logo!
|
||
</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
@font-face {
|
||
font-family: "Avenir W01";
|
||
src:
|
||
url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix") format("eot"),
|
||
url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2") format("woff2"),
|
||
url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/4b978f72-bb48-46c3-909a-2a8cd2f8819c.woff") format("woff"),
|
||
url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/9bdf0737-f98c-477a-9365-ffc41b9d1285.ttf") format("truetype"),
|
||
url("https://s3.ca-central-1.amazonaws.com/logojoy/dist/fonts/15281d0d-e3c2-46e1-94db-cb681e00bfaa.svg#15281d0d-e3c2-46e1-94db-cb681e00bfaa") format("svg");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background-color: #f8f8f8;
|
||
font-family: "Avenir W01", sans;
|
||
font-size: 1.4rem;
|
||
line-height: 2.5rem;
|
||
color: #222;
|
||
margin: 0;
|
||
}
|
||
|
||
article {
|
||
width: 100%;
|
||
max-width: 70rem;
|
||
padding: 100px;
|
||
margin: 40px auto 75px;
|
||
background-color: #fff;
|
||
box-shadow: #c0c0c0 5px 0px 35px -8px;
|
||
}
|
||
h1, h2, h3 {
|
||
margin-top: 3rem;
|
||
margin-bottom: 0;
|
||
}
|
||
h3 {
|
||
font-size: 1.4rem;
|
||
}
|
||
p {
|
||
margin-top: .75rem;
|
||
margin-bottom: .25rem;
|
||
}
|
||
hr {
|
||
margin: 2rem auto;
|
||
height: 3px;
|
||
background-color: #f0f0f0;
|
||
border: 0;
|
||
}
|
||
svg {
|
||
width: 10em;
|
||
height: auto;
|
||
margin: 0 auto 40px;
|
||
display: block;
|
||
}
|
||
h2 {
|
||
color: #4f6df5;
|
||
}
|
||
a {
|
||
color: #4f6df5;
|
||
}
|
||
.fonts_colors {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.fonts_colors > div {
|
||
flex:1 1 50%;
|
||
}
|
||
|
||
.font {
|
||
display: block;
|
||
}
|
||
|
||
.swatch {
|
||
border: 1px solid rgba(0,0,0,.3);
|
||
border-radius: 4px;
|
||
height: 2rem;
|
||
width: 100%;
|
||
display: block;
|
||
margin-bottom: .5rem;
|
||
}
|
||
.colors_list {
|
||
display: flex;
|
||
}
|
||
.color {
|
||
margin: 1.5rem 3rem .5rem 0;
|
||
}
|
||
.color span {
|
||
white-space: nowrap;
|
||
display: block;
|
||
}
|
||
|
||
</style>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<article>
|
||
<h2>
|
||
Using your files
|
||
</h2>
|
||
<p>
|
||
Here’s a quick breakdown of where and how to use your files:
|
||
</p>
|
||
<h3>
|
||
Online
|
||
</h3>
|
||
<p>
|
||
If you’re using your logo for any digital purpose — from PowerPoint presentations to social media profiles
|
||
— choose
|
||
PNG files.
|
||
</p>
|
||
<h3>
|
||
Print
|
||
</h3>
|
||
<p>
|
||
If you’re sending your logo to be printed on business cards, brochures, clothing, and more, provide the
|
||
printer with a PDF or EPS. If the print is more technical and requires edits from the
|
||
printer, send vector files (SVG or EPS).
|
||
</p>
|
||
|
||
<h3>
|
||
Sending to a Designer
|
||
</h3>
|
||
<p>
|
||
If you’re sending your logo to a designer to make changes, use SVG or EPS files unless
|
||
they request otherwise.
|
||
</p>
|
||
|
||
<h3>
|
||
Sharing
|
||
</h3>
|
||
<p>
|
||
When sharing a logo file, send a PDF or PNG, as they’re easy-to-read file formats.
|
||
</p>
|
||
|
||
<h3>
|
||
Resizing
|
||
</h3>
|
||
<p>
|
||
Don’t see all of the file sizes you need? Use <a href="http://resizeimage.net/" target="_blank">this website</a> to adjust the file sizes of your PNG logo.
|
||
</p>
|
||
|
||
<h2>
|
||
Your Logo Font and Colors
|
||
</h2>
|
||
<section class="fonts_colors">
|
||
<div>
|
||
<h3>Fonts</h3>
|
||
<p class="font_list">
|
||
<span class="font">Avenir Heavy</span><span class="font"></span><span class="font"></span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3>Colors</h3>
|
||
<div class="colors_list">
|
||
|
||
<div class="color">
|
||
<span class="swatch" style="background-color: 3C4151"></span>
|
||
<span class="name">Bright Gray 3</span>
|
||
<span class="hex">#3C4151</span>
|
||
</div>
|
||
|
||
<div class="color">
|
||
<span class="swatch" style="background-color: FFBA00"></span>
|
||
<span class="name">Selective Yellow 1</span>
|
||
<span class="hex">#FFBA00</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<p>
|
||
Happy business-building!
|
||
</p>
|
||
</article>
|
||
</body>
|
||
|
||
</html> |