Skip to content

Commit e28f9b6

Browse files
NiallNiallNiallNiall
authored
Merge pull request #114 from pebblecode/nh-hackday-event
Nh hackday event
2 parents 35fa4c4 + 133445c commit e28f9b6

File tree

5 files changed

+296
-4
lines changed

5 files changed

+296
-4
lines changed

‎_layouts/seminar-hubspot.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
layout: seminar-hubspot
3+
---
4+
{% include head.html %}
5+
6+
<body class="{{ page.layout }} {{ page.colour }}">
7+
8+
{% include header.html %}
9+
<section class="seminar-container grid">
10+
<article class="seminar-content">
11+
<h5 class="seminar-presents-title">{{page.seminar-intro}}</h5>
12+
<div class="seminar-titlestack">
13+
<h3 class="seminar-titlestack-top">{{page.seminar-title1}}</h3>
14+
{% if page.seminar-title2 %}<h3 class="seminar-titlestack-mid">{{page.seminar-title2}}</h3>{% endif %}
15+
<h3 class="seminar-titlestack-bottom">{{page.seminar-title3}}</h3>
16+
</div>
17+
18+
<img src="{{ site.baseurl }}/img/events/{{page.seminar-hero}}" class="seminar-machine-img" alt="pebble {code}'s process">
19+
20+
<div class="seminar-header-details">
21+
<h3 class="seminar-header-date">{{page.seminar-date}}</h3>
22+
<h3 class="seminar-header-time">{{page.seminar-time}}</h3>
23+
</div>
24+
25+
<h3 class="seminar-header-location"><a href="#location">{{page.seminar-location-shorthand}}</a></h3>
26+
27+
{% for paragraph in page.seminar-intro-paragraphs %}
28+
<p>{{paragraph}}</p>
29+
{% endfor %}
30+
31+
<!-- <div class="eventbright-register">
32+
<a href="{{page.eventbright-url}}" class="btn btn-lrg">Register</a>
33+
</div> -->
34+
35+
36+
<!--[if lte IE 8]>
37+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
38+
<![endif]-->
39+
<div id="seminar-signup">
40+
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
41+
<script>
42+
hbspt.forms.create({
43+
portalId: '{{page.hubspot-portalid}}',
44+
formId: '{{page.hubspot-formid}}'
45+
});
46+
</script>
47+
</div>
48+
49+
<div class="seminar-social-links">
50+
<span>Follow us:</span>
51+
<a class="linkedin" href="https://www.linkedin.com/company/2512247">linkedIn</a>
52+
<a class="twitter" href="https://twitter.com/pebblecode">twitter</a>
53+
<a class="vimeo" href="https://vimeo.com/pebblecode">vimeo</a>
54+
</div>
55+
56+
</article>
57+
58+
<article class="aside-container seminar-speakers-container">
59+
<!-- <div class="seminar-sprite-lightbulb"></div> -->
60+
<div class="seminar-sprite-brain"></div>
61+
<ul class="seminar-speakers">
62+
{% for speakerloop in page.speakers %}
63+
{% assign speaker = speakerloop %}
64+
{% include semi-speaker.html %}
65+
{% endfor %}
66+
</ul>
67+
</article>
68+
69+
<article id="location" class="aside-container seminar-location-container">
70+
<div class="seminar-location-wrapper">
71+
<div class="seminar-sprite-lightbulb"></div>
72+
<h3 class="seminar-info-item"><strong>{{page.seminar-time}}</strong></h3>
73+
<h3 class="seminar-info-item">{{page.seminar-date}}</h3>
74+
<h4 class="seminar-location-heading">Location:</h4>
75+
<p class="location-item">
76+
<a href="{{page.invite-map}}" title="View in Google Maps">{{page.seminar-location}}</a>
77+
</p>
78+
<a href="#seminar-signup" class="btn btn-lrg btn-center">RSVP Now</a>
79+
<!-- Map section -->
80+
<!--[if gt IE 8]><!-->
81+
<div id="{{page.invite-map-id}}" class="seminar-map-container"></div>
82+
<!--<![endif]-->
83+
</div>
84+
</article>
85+
86+
</section>
87+
<!-- /.content-container -->
88+
89+
{% include footer.html maps=true tone="light" %}
90+
91+
</body>
92+
</html>

‎_sass/components/_hs-components.scss

Lines changed: 140 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,143 @@
4646
margin-top: 45px;
4747
color: $white;
4848
}
49-
}
49+
}
50+
51+
52+
//===============================================================================
53+
// HUBSPOT FORM ELEMENTS
54+
//===============================================================================
55+
56+
//===============================================================================
57+
// FORMS
58+
//===============================================================================
59+
60+
61+
62+
.seminar-hubspot .hbspt-form {
63+
@media (min-width: $medium) {
64+
width: 50%;
65+
margin: auto;
66+
}
67+
68+
@media (max-width: $medium) {
69+
padding: 0 30px;
70+
}
71+
}
72+
73+
74+
.seminar-hubspot .hbspt-form form ul {
75+
list-style: none;
76+
}
77+
78+
.seminar-hubspot .hbspt-form label:not(.hs-form-checkbox-display, .hs-form-radio-display) {
79+
color: lighten($ink, 20);
80+
font-size: $zeta;
81+
}
82+
83+
.seminar-hubspot .hbspt-form textarea,
84+
.seminar-hubspot .hbspt-form input[type="text"],
85+
.seminar-hubspot .hbspt-form input[type="email"],
86+
.seminar-hubspot .hbspt-form input[type="tel"],
87+
.seminar-hubspot .hbspt-form input[type="number"],
88+
.seminar-hubspot .hbspt-form input[type="date"],
89+
.seminar-hubspot .hbspt-form input[type="month"],
90+
.seminar-hubspot .hbspt-form input[type="password"] {
91+
outline: 0;
92+
padding: 10px 10px 6px 10px;
93+
display: block;
94+
background-color: lighten($ink, 47);
95+
border-radius: 3px;
96+
border: $pink;
97+
width: 100%;
98+
margin-bottom: 18px;
99+
z-index: 1;
100+
transition: background-color 0.2s;
101+
position: relative;
102+
max-width: 540px;
103+
104+
&:focus { background-color: lighten($ink, 43); }
105+
}
106+
107+
.seminar-hubspot .hbspt-form select {
108+
margin-bottom: 18px;
109+
}
110+
111+
.seminar-hubspot .hbspt-form select {
112+
@extend .btn;
113+
}
114+
115+
.seminar-hubspot .hbspt-form .hs-form-checkbox-display,
116+
.seminar-hubspot .hbspt-form .hs-form-radio-display {
117+
cursor: pointer;
118+
119+
.seminar-hubspot .hbspt-form input { display: none; }
120+
}
121+
122+
.seminar-hubspot .hbspt-form input[type="radio"] + span,
123+
.seminar-hubspot .hbspt-form input[type="checkbox"] + span {
124+
position: relative;
125+
padding-left: 20px;
126+
127+
&::before {
128+
content: "";
129+
position: absolute;
130+
width: 14px;
131+
height: 14px;
132+
background-color: lighten($ink, 47);
133+
border: 1px solid lighten($ink, 40);
134+
left: 0;
135+
top: 1px;
136+
transition: background-color .2s, border .2s;
137+
}
138+
139+
&:hover::before{
140+
background-color: lighten($ink, 40);
141+
border: 1px solid lighten($ink, 33);
142+
}
143+
}
144+
145+
.seminar-hubspot .hbspt-form input[type="radio"] {
146+
& + span::before {
147+
border-radius: 50%;
148+
}
149+
150+
&:checked + span::before {
151+
border: 4px solid $pink;
152+
}
153+
}
154+
155+
.seminar-hubspot .hbspt-form input[type="checkbox"]:checked + span::after {
156+
content: "✓";
157+
color: $pink;
158+
position: absolute;
159+
left: 2px;
160+
}
161+
162+
.seminar-hubspot .hbspt-form input[type="submit"] {
163+
@extend .btn, .btn-lrg;
164+
}
165+
166+
.seminar-hubspot .hbspt-form .hs-form-required {
167+
color: $pink;
168+
}
169+
170+
171+
.seminar-hubspot .hs-form-field span {
172+
color: $pink;
173+
}
174+
175+
176+
.seminar-hubspot .hs-form .hs-button{
177+
margin-left: auto;
178+
margin-right: auto;
179+
text-shadow: none !important;
180+
&:hover, &:focus {
181+
border: 3px solid rgba(107,116,130,0.2) !important;
182+
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5),0 0 5px lighten($pink, 30%) !important;
183+
}
184+
&:active {
185+
background: $pink !important;
186+
}
187+
}
188+

‎_sass/pages/_seminar.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.seminar.pink,
22
.seminar-form.pink,
3-
.seminar-new.pink {
3+
.seminar-new.pink,
4+
.seminar-hubspot.pink {
45
background-color: $pink;
56
}
67

@@ -102,7 +103,7 @@
102103
margin: 40px auto;
103104
text-align: center;
104105
// transform: skewY(-5deg);
105-
text-shadow: 7px 8px 0 rgba(black, 0.40);
106+
106107
// -webkit-text-stroke-width: 3px;
107108
// -webkit-text-stroke-color: #ed4f7e;
108109
color: #ddd;
@@ -111,17 +112,19 @@
111112

112113
@media screen and ( max-width: $medium ) {
113114
margin: 20px auto 40px;
114-
text-shadow: 2px 3px 0 rgba(black, 0.1);
115+
115116
}
116117

117118
h3.seminar-titlestack-top,
118119
h3.seminar-titlestack-bottom {
119120
font-size: $tera + 5px;
120121
font-style: normal;
121122
line-height: 1;
123+
text-shadow: 7px 8px 0 rgba(black, 0.40);
122124

123125
@media screen and ( max-width: $large ) {
124126
font-size: $mega;
127+
text-shadow: 2px 3px 0 rgba(black, 0.40);
125128
}
126129

127130
@media screen and ( max-width: $small ) {

‎events/hackdays/hackday-july-21.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
layout: seminar-hubspot
3+
title: Hack Days
4+
permalink: /events/hackdays/july-21/
5+
colour: pink
6+
7+
seminar-eventlink: "https://www.eventbrite.com/"
8+
seminar-call-to-action: "Sign up now"
9+
10+
hubspot-portalid: 2277134
11+
hubspot-formid: 9865cef3-53aa-449e-b7a1-3caed970b6b5
12+
13+
## Seminar Details
14+
seminar-intro: pebble {code} leads an intro to
15+
seminar-title1: Hacking
16+
seminar-title2:
17+
seminar-title3:
18+
seminar-hero: hacking-header.png
19+
seminar-subtitle: In the trenches
20+
seminar-intro-paragraphs:
21+
- "pebble {code}'s Hacking Workshop introduces Digital Innovation through practical techniques that we use regularly with clients. Delegates will gain an understanding of the value of digital experimentation and the approach that organisations need to adopt for success."
22+
- "The half day workshop includes:"
23+
- "<ul>
24+
<li>An introduction to how organisations should approach digital innovation</li>
25+
<li>An introduction to the role of empathy in digital innovation</li>
26+
<li>A practical session working collaboratively on an idea</li>
27+
<li>A practical session on how constraints can fuel creativity</li>
28+
<li>A 'Show and Tell' of the work that teams have created</li>
29+
</ul>"
30+
- "Delegates will take away an opinion on how they can apply practical innovation techniques to their organisation and how they can get buy-in from senior leadership. Attendees will also work collaboratively on an idea during the session."
31+
- "This session will be led by George Ornbo, Co-founder and Managing Director at pebble {code}."
32+
eventbright-url: "https://www.eventbrite.co.uk/e/innovation-in-insurance-tickets-26147397570"
33+
34+
35+
## Location and Time
36+
seminar-time: "9:30am - 12:00am"
37+
seminar-date: "Thursday 21st July"
38+
seminar-rsvp-address: "events@pebblecode.com"
39+
seminar-location: "pebble HQ,<br>W214 Westminster Business Square<br>1-45 Durham Street<br>London,<br>London<br>SE11 5JH"
40+
seminar-location-shorthand: "pebble HQ, Vauxhall"
41+
42+
## Speakers
43+
speakers:
44+
- name: George Ornbo
45+
id: george-ornbo
46+
jobtitle: MD, pebble {code}
47+
portrait: george.jpg
48+
linkedin: http://www.linkedin.com/in/george-ornbo-942494110
49+
twitter: http://twitter.com/shapeshed
50+
bio:
51+
- "Expert developer, ex-McKinsey, author of Sam's Teach Yourself Node.js in 24 hours and writes for Guardian on technology matters."
52+
- "Clients include Shell, Cancer Research UK, Energy Saving Trust and Prince's Trust."
53+
- "Edinburgh University."
54+
55+
## Google Maps URL
56+
invite-map-id: insuremap
57+
invite-map: https://www.google.co.uk/maps/place/The+Gherkin/@51.5144918,-0.0803065,15z/data=!4m2!3m1!1s0x0:0x5c81b8a1a822fda8?sa=X&ved=0ahUKEwjJzNP_lO3LAhWJ5xoKHcemB-IQ_BIIiwEwEQ
58+
---

‎img/events/hacking-header.png

84.9 KB
Loading

0 commit comments

Comments
 (0)