-
Notifications
You must be signed in to change notification settings - Fork 0
/
Bean Buildout Template.html
180 lines (169 loc) · 8.56 KB
/
Bean Buildout Template.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta >
<title> Bean Template </title>
<meta name="robots" content="index, follow" />
<meta charset="UTF-8">
<link rel="canonical" href="Other Bean Thing" />
<meta name="keywords" content=" ">
<meta name = "description" content = "T">
<meta name="author" content="???">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<link rel = "stylesheet" href = "bootstrap.min.css">
<link rel="stylesheet" type = "text/css" href = "BeanStylesheet.css">
</head>
<body>
<header class = "container-fluid bg-black text-white">
<div class = "row" style = "height:50px;">
<img src = "gpartner.jpg" alt = "Partnered with Google" class = "image-thumbnail h-100 img-fluid m-1">
</div>
<div class = "row h-100 justify-content-center" >
<img src = "Bean_logo_black.png" alt = "Bean Logo" class = "image-thumbnail h-100 img-fluid">
</div>
<div class = "row justify-content-between">
<a class = "m-3 ml-4">beanmediaproductions.com</a>
<p class = "m-3 mr-4"> 716.898.8074</p>
</div>
</header>
<div class = container-fluid>
<div class = "row m-4">
</div>
<div class = "row m-4">
</div>
<div class = "row mt-4 mb-4">
<div class = "col-sm-5 col-md-4 bg-black p-0 justify-content-center align-content-center d-inline-flex position-relative">
<h2 class = "p-3 m-0 display-4 f-s-4 f-s-lg-5 f-s-xl-04 text-uppercase font-weight-bold align-self-center text-white position-relative"> <div class = "box-border-1"></div>video production</h2>
</div>
<div class = "mt-4 mt-sm-0 col-sm-6 col-md-7 offset-sm-1 pr-sm-0">
<img class = "img-fluid" src = "top_right.png">
</div>
</div>
<div class = "d-flex justify-content-around">
<div >
</div>
<div>
<p class = "d-inline text-uppercase f-s-md-3 font-weight-bold">
we are always thinking about
</p>
<svg class = svg-line style="display:inline">
<line x1="0" y1="0" x2="9000" y2="00" style="stroke:#6dc835;stroke-width:3" />
</svg>
</div>
</div>
<div class = "row bg-black">
<div class = m-3>
</div>
</div>
<div class = "d-flex justify-content-around">
<div>
<svg class= svg-line style="display:inline">
<line x1="0" y1="0" x2="9000" y2="00" style="stroke:#6dc835;stroke-width:3" />
</svg>
<p class = "d-inline text-uppercase f-s-md-3 font-weight-bold">
HOW TO MAKE YOUR MARKETING EASIER
</p>
</div>
<div >
</div>
</div>
</div>
<div class = "container-fluid mw-1200 mt-4">
<div class = "row overflow-hidden">
<div class = "col-md-8">
<p class = "pl-0 pl-sm-3 col-sm-11">
When we opened shop almost 15 years ago, the world of Video Production was much different than it is today. That being said, having professional video is more essential than every for companies of all sizes. Very early on, we saw YouTube as a way to reach potential customers for our clients.
</p>
<h2 class="display-4 pl-sm-3 text-uppercase shadow-left-green">
High production. <br> high value.
</h2>
<p class = "pl-0 pl-sm-3 col-sm-11">
Creating a high level video requires experience, equipment, and preparation.
We consider ourselves specialists in taking your message, and crafting it in a way that you’re proud of. This philosophy has held true in the video industry, and has really helped us to refine other areas of what we do too.
</p>
<p class = "pl-0 pl-sm-3 col-sm-11">
Sitting down and being in front of the camera isn’t easy. We aim to help you craft your message in a simple, conversational manner. Just like having a coffee shop conversation. We take those bits of raw passion and fortitude that you represent and can create a core video, multiple videos, and whatever else you may need.
</p>
<div class = "row pl-3 bg-green mt-4 mb-4">
<h2 class = "shadow-left-down-white text-uppercase pl-sm-3 p-1 mb-0 display-4 text-white">
Video Optimization
</h2>
</div>
<p class = "pl-0 pl-sm-3 col-sm-11">
Using many of the techniques of Search Engine Optimization, Video SEO has been a pillar of Bean Media’s success over the years, and always provides a solid addition to drawing organic traffic.
</p>
<h3 class = "pl-sm-3 font-weight-bold f-s-5">
VIDEO ANIMATION
</h3>
<p class = "pl-0 pl-sm-3 col-sm-11">
With changes to how your consumer interacts with media, specifically the amount of time spent on mobile devices and social media, attention spans aren’t what they used to be. Crafting quick messages using text and animation can get your point accross quickly, and provide subliminal reminders of who you are to your targeted consumer.
</p>
<h3 class = "pl-sm-3 font-weight-bold text-uppercase position-relative">
<span class= "f-s-3">Custom AUDIENCE <br class="d-none d-inline-400-500"> TARGETING</span> <span class = "pl-1 f-s-2 position-absolute top-0">WITH VIDEO</span>
</h3>
<p class = "pl-0 pl-sm-3 col-sm-11 font-weight-bold text-uppercase f-s-2 text-green">
What message do you want to deliver? </br>Who do you want that message to go to?
</p>
<div class = "container col-md-11 ml-0 pl-0 pl-sm-3 ">
<p>
These are the most important questions for us. We can craft a video program that is best suited for your marketing needs. Using both organic and paid concepts, we can custom tailor a targeting method to get the right eyeballs on your video.<br>
If you’re interested in talking about a video project, or would like to hear more about how we can help you use video to promote your business, just give us a call at the office, or reach out via contact form!
</p>
</div>
</div>
<div class = "d-none pr-0 d-md-flex align-items-center col-md-4 col-lg-3 offset-lg-1">
<div class= "w-100 h-auto" >
<img src="graphic.gif" class= "w-100 h-auto" >
<div>
</div>
</div>
</div>
<div class = "container-fluid ">
<div class = "col-12 p-4 p-md-0 border-top-1 border-top-md-0">
<div class ="d-flex justify-content-flext-start justify-content-between-md align-content-center flex-wrap">
<div class = "col-12 col-md-5 justify-content-center">
<img class = "img-fluid align-self-center" src = "looking_to_grow.gif">
</div>
<div class = "col-md-7 col-xl-6 line-height-small f-s-3 f-s-md-2 f-s-lg-3 mt-4 mt-md-0">
<p class = "font-weight-bold">
Let’s talk about some things we can do with your brand!
</p>
<p class = "font-weight-lightest">
We’ve worked with both small and large budgets, in a vast variety of industries. Each company deserves their own attention, and that’s why we work closely with you to establish expectations to provide results for the areas that YOU want to focus your energy and resources on.
</p>
</div>
</div>
<p class = "pt-2 pt-lg-3 col-12 shadow-around-black text-green font-weight-bold text-uppercase text-center">
Don’t just tell your audience who to work with, Show them why they should work with you
</p>
</div>
<div class = "m-0 m-s-3 p-0 w-100 pt-md-3 pt-lg-4 gradient">
<div class = "col-12 d-flex justify-content-center">
<div class = "col-12 col-sm-10 col-md-7 mt-4 w-100 bg-white p-3 .position-relative mb-4" action="/action_page.php">
<form class ="position-relative m-lg-4 p-xl-4" style="z-index: 2">
<h4 class = "shadow-around-black-2 text-white text-uppercase heading display-4">
let's talk
</h4>
<p>
about what we can do to for your brand or your culture
</p>
<input class = "p-1 mb-3 w-100 bg-black text-lightgrey font-italic font-weight-lightest border-green" type = "text" name = "name" value = "name">
<input class = "p-1 mb-3 w-100 bg-black text-lightgrey font-italic font-weight-lightest border-green" type = "text" name = "company name" value = "company name">
<input class = "p-1 mb-3 w-100 bg-black text-lightgrey font-italic font-weight-lightest border-green" type = "email" name = "email" value = "email">
<textarea class = "p-1 mb-3 w-100 bg-black text-lightgrey font-italic font-weight-lightest border-green tall" name = "message" rows="8" cols="30">message</textarea>
<div class = text-center>
<input class = "very-rounded bg-black text-black display-4 heading text-uppercase shadow-around-green" type = "submit">
</div>
</form>
<div class = box-border-2 style = "z-index: 1">
</div>
</div>
</div>
</div>
</div>
<footer class = "text-center w-100">
<img class = "col-4 col-lg-3 col-xl-2 img-fluid m-4" src = "bean_logo_green.gif">
</footer>
</body>
</html>