Skip to content

Commit b73ab9c

Browse files
nicodevsnicodevs
authored
Add Vue School Black Friday 21 banners (#2908)
* Add Vue School Black Friday 21 banners * Update Black Friday Vue School banner
1 parent c9d23a3 commit b73ab9c

14 files changed

+368
-77
lines changed

‎themes/vue/layout/layout.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<% var isIndex = page.path === 'index.html' %>
22
<% var isThemes = page.path === 'resources/themes.html' %>
3-
<% var hasVueSchoolBanner = false %>
3+
<% var hasVueSchoolBanner = true %>
44

55
<!DOCTYPE html>
66
<html lang="en" class="with-v3-banner">
@@ -55,7 +55,7 @@
5555
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
5656
<link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin>
5757

58-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet">
58+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Archivo:400,600|Roboto Mono&display=swap" rel="stylesheet">
5959
<link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet">
6060

6161
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

‎themes/vue/layout/partials/vueschool_banner.ejs‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,42 @@
1-
<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/summer-vue?friend=vuejs" target="_blank" rel="noreferrer">
2-
<div class="vs-iso">
3-
<img src="/images/banners/vs-iso.svg">
4-
</div>
5-
<div class="vs-logo">
6-
<img src="/images/banners/vs-logo.svg">
1+
<%
2+
3+
const coins = [
4+
{ id: 'js', direction: 'left' },
5+
{ id: 'ts', direction: 'right' },
6+
{ id: 'vue', direction: 'left' },
7+
{ id: 'vuex', direction: 'left' },
8+
{ id: 'nuxt', direction: 'right' }
9+
]
10+
11+
%>
12+
13+
<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/blackfriday?friend=vuejs" target="_blank" rel="noreferrer">
14+
<div class="vs-blackfriday-coins">
15+
<% for (let i = 0; i < coins.length; i++) { %>
16+
<% const coin = coins[i] %>
17+
<img
18+
alt="<%- coin.id %>"
19+
src="<%- `/images/banners/tech-coin-${coin.id}.png` %>"
20+
class="<%- ['vs-blackfriday-coin', coin.id, coin.direction].join(' ') %>">
21+
<% } %>
722
</div>
823
<div class="vs-core">
9-
<div class="vs-backpack">
10-
<img src="/images/banners/vs-backpack.png" alt="Backpack">
24+
<div class="vs-logo">
25+
<img src="/images/banners/vueschool_blackfriday_logo.svg">
1126
</div>
1227
<div class="vs-slogan">
13-
Less than <span class="vs-slogan-light">48 hours</span> left for the Vue School offer
28+
<div class="vs-slogan-subtitle">
29+
Access to all Vue Courses at Vue School
30+
</div>
31+
<div class="vs-slogan-title">
32+
Black Friday <strong>40% OFF</strong>
33+
</div>
1434
</div>
1535
<div class="vs-button">
16-
GET ACCESS
36+
Get Discount
1737
</div>
1838
</div>
1939
<div id="vs-close" class="vs-close">
20-
<img src="/images/banners/close.svg" alt="Close">
40+
<img src="/images/banners/vueschool_close.svg" alt="Close">
2141
</div>
2242
</a>

‎themes/vue/source/css/_vueschool.styl‎

Lines changed: 115 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "_settings"
22
$mobile-bar-height = 40px
33
$vs-banner-height-desktop = 80px
4-
$vs-banner-height-mobile = 50px
4+
$vs-banner-height-mobile = 80px
55
$menu-height = 63px
66

77
body.has-vs-banner
@@ -49,11 +49,11 @@ body.has-vs-banner
4949
top: 160px
5050

5151
#vs
52-
font-family "Roboto", sans-serif
52+
font-family "Archivo", sans-serif
5353
z-index: 8
5454
box-sizing: border-box
5555
color: #FFF
56-
background: #202A5A
56+
background-color: #000c19
5757
display: flex
5858
align-items: center
5959
position: fixed
@@ -66,86 +66,140 @@ body.has-vs-banner
6666
justify-content: center
6767
min-height: $vs-banner-height-desktop
6868
@media (min-width: 900px)
69-
position: static
69+
position: relative
70+
background-image: none
7071

7172
&.vs-hidden
7273
display: none
7374

7475
&:hover
7576
.vs-core
7677
.vs-button
77-
background: #f22606
78-
79-
.vs-iso
80-
display: none
81-
position: absolute
82-
left: 20px
83-
height: 26px
84-
img
85-
height: 26px
86-
@media (min-width: 680px)
87-
display: inline-block
88-
height: 40px
89-
img
90-
height: 40px
91-
@media (min-width: 900px)
92-
display: none
93-
94-
.vs-logo
95-
position: absolute
96-
display: none
97-
left: 40px
98-
@media (min-width: 900px)
99-
display: block
78+
background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
10079

10180
.vs-core
10281
display: flex
10382
align-items: center
10483

105-
.vs-backpack
106-
margin-right: 14px
107-
img
108-
height: 50px
109-
@media (min-width: 680px)
110-
height: 74px
111-
11284
.vs-slogan
85+
font-family: Archivo
11386
color: #FFF
114-
font-weight: bold
115-
font-size: 14px
116-
width: 150px
117-
text-align: center
118-
margin-left: 40px
119-
@media (min-width: 400px)
120-
margin-left: 60px
87+
margin-left: 8px
12188
@media (min-width: 680px)
122-
margin-left: 0
123-
width: auto
124-
text-align: left
125-
font-size: 18px
126-
> .vs-slogan-light
127-
color: #ff5338
128-
text-align: left
129-
@media (min-width: 900px)
130-
text-align: center
131-
display: inline
89+
margin-left: 24px
90+
.vs-slogan-subtitle
91+
font-size: 12px
92+
@media (min-width: 680px)
93+
font-size: 14px
94+
.vs-slogan-title
95+
margin-top: 6px
96+
font-size: 16px
97+
font-weight: 600
98+
@media (min-width: 680px)
99+
font-size: 18px
100+
strong
101+
color: #ffae29
102+
font-weight: 600
132103

133104
.vs-button
134-
margin-left: 43px
105+
margin-left: 16px
135106
color: #FFF
136-
padding: 13px 24px
137-
border-radius: 40px
138-
display: none
139-
background: #ff5338
140-
font-weight: bold
107+
padding: 7px 10px
108+
border-radius: 4px
109+
background: linear-gradient(to left, #e61b60, #dd4a4c)
110+
font-weight: 600
111+
white-space: nowrap
112+
margin-right: 30px
113+
@media (min-width: 680px)
114+
margin-right: 0
115+
padding: 8px 24px
116+
margin-left: 32px
141117
@media (min-width: 680px)
142-
display: inline-block
118+
margin-left: 69px
143119

144120
.vs-close
145-
right: 10px
121+
right: 6px
146122
position: absolute
147-
padding: 10px
148123
@media (min-width: 680px)
124+
right: 10px
125+
padding: 10px
149126
right: 20px
150127
&:hover
151-
color: #56D8FF
128+
color: #56D8FF
129+
130+
.vs-blackfriday-coins {
131+
overflow: hidden;
132+
position: absolute;
133+
bottom: 0;
134+
right: 0;
135+
top: 0;
136+
left: 0;
137+
z-index: 0;
138+
}
139+
140+
.vs-blackfriday-coin {
141+
display: none;
142+
}
143+
144+
@media (min-width: 768px) {
145+
.vs-blackfriday-coins {
146+
background-image: url(/images/banners/vueschool_blackfriday_background_tablet.svg);
147+
background-position: center;
148+
background-size: cover;
149+
}
150+
}
151+
152+
@media (min-width: 1024px) {
153+
.vs-blackfriday-coins {
154+
background: transparent;
155+
}
156+
157+
#vs:hover .vs-blackfriday-coin.left {
158+
transform: translateX(-600px);
159+
transition: transform 30s linear;
160+
}
161+
162+
#vs:hover .vs-blackfriday-coin.right {
163+
transform: translateX(600px);
164+
transition: transform 30s linear;
165+
}
166+
167+
.vs-blackfriday-coin {
168+
display: inline-block;
169+
position: absolute;
170+
transition: transform 5s linear;
171+
transform: translateX(0);
172+
}
173+
174+
.vs-blackfriday-coin.js {
175+
width: 43px;
176+
top: 32px;
177+
left: calc(50% - 341px);
178+
}
179+
180+
.vs-blackfriday-coin.ts {
181+
top: 0;
182+
left: 0;
183+
width: 54px;
184+
left: calc(50% + 457px);
185+
}
186+
187+
.vs-blackfriday-coin.vue {
188+
top: 18px;
189+
width: 60px;
190+
left: calc(50% + 586px);
191+
}
192+
193+
.vs-blackfriday-coin.vuex {
194+
top: 23px;
195+
left: 0;
196+
width: 56px;
197+
left: calc(50% - 620px);
198+
}
199+
200+
.vs-blackfriday-coin.nuxt {
201+
top: 10px;
202+
width: 48px;
203+
left: calc(50% - 474px);
204+
}
205+
}

‎themes/vue/source/css/index.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "_sponsors-index"
55
@import "_modal"
66
@import "_themes"
7+
@import "_vueschool.styl"
78

89
$width = 900px
910
$space = 40px

‎themes/vue/source/css/page.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@import "_scrimba"
1717
@import "_vue-mastery"
1818
@import "_themes"
19+
@import "_vueschool.styl"
1920

2021
#header
2122
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/images/banners/tech-coin-js.png‎

4.44 KB
Loading

‎themes/vue/source/images/banners/tech-coin-nuxt.png‎

5.29 KB
Loading

‎themes/vue/source/images/banners/tech-coin-ts.png‎

3.4 KB
Loading

‎themes/vue/source/images/banners/tech-coin-vue.png‎

4.28 KB
Loading

‎themes/vue/source/images/banners/tech-coin-vuex.png‎

3.63 KB
Loading

0 commit comments

Comments
 (0)