Skip to content

Commit 0c0650a

Browse files
nicodevsnicodevs
committed
Add Vue School Free Weekend banner (October 2022)
1 parent 3671ac9 commit 0c0650a

19 files changed

+743
-1215
lines changed

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

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
1-
<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/price-increase-22?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">
7-
</div>
8-
<div class="vs-core">
9-
<div class="vs-slogan">
10-
<div class="vs-slogan-up">
11-
Get up to <strong>40% off</strong> your Vue School Subscription
1+
<a
2+
id="vs"
3+
href="https://vueschool.io/free-weekend?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner"
4+
target="_blank"
5+
rel="noreferrer"
6+
class="vs-hidden">
7+
<div
8+
class="vs-background-wrapper">
9+
<div class="vs-logo">
10+
<img src="/images/banners/vs-iso.svg" class="logo-small">
11+
<img src="/images/banners/vs-logo.svg" class="logo-big">
12+
</div>
13+
<div class="vs-core">
14+
<div class="vs-slogan-wrapper">
15+
<div class="vs-slogan">
16+
Free Weekend 1st & 2nd of October
17+
</div>
18+
<div class="vs-subline">
19+
Get Access to ALL Vue School premium courses
20+
</div>
1221
</div>
13-
<div class="vs-slogan-down">
14-
Time Limited Offer
22+
<div class="vs-button-wrapper">
23+
<div class="vs-button">
24+
Book my spot
25+
</div>
1526
</div>
1627
</div>
17-
<div class="vs-button">
18-
<div class="vs-button-inside">
19-
GET OFFER
20-
</div>
28+
<div
29+
id="vs-close"
30+
class="vs-close"
31+
@click.stop.prevent="close">
32+
<img src="/images/banners/close.svg" alt="Close">
2133
</div>
2234
</div>
23-
<div id="vs-close" class="vs-close">
24-
<img src="/images/banners/close.svg" alt="Close">
25-
</div>
26-
</a>
35+
</a>

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

Lines changed: 178 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
@import "_settings"
22
$mobile-bar-height = 40px
3-
$vs-banner-height-desktop = 80px
4-
$vs-banner-height-mobile = 50px
3+
$vs-banner-height-desktop = 72px
4+
$vs-banner-height-mobile = 72px
55
$menu-height = 63px
66

77
body.has-vs-banner
8-
9-
#v3-banner
10-
margin-top: $vs-banner-height-mobile
11-
@media (min-width: 680px)
12-
margin-top: $vs-banner-height-desktop
13-
@media (min-width: 900px)
14-
margin-top: 0
8+
padding-top: $vs-banner-height-mobile
9+
@media (min-width: 680px)
10+
padding-top: $vs-banner-height-desktop
1511

1612
#mobile-bar
1713
top: $vs-banner-height-mobile
@@ -48,114 +44,176 @@ body.has-vs-banner
4844
@media (min-width: 900px)
4945
top: 160px
5046

51-
#vs
52-
font-family "Roboto", sans-serif
53-
z-index: 8
54-
box-sizing: border-box
55-
color: #fff
56-
background-size: cover
57-
background-color: #1E204D
58-
background-repeat: no-repeat
59-
background-position: top right
60-
background-image: url(../images/banners/vs-fw-bg-small.svg)
61-
display: flex
62-
justify-content: center
63-
align-items: center
64-
position: fixed
65-
left: 0
66-
right: 0
67-
padding: 0 10px
68-
min-height: $vs-banner-height-mobile
69-
top: 0
70-
background-position: bottom right
71-
@media (min-width: 680px)
72-
min-height: $vs-banner-height-desktop
73-
background-image: url(../images/banners/vs-fw-bg.svg)
74-
@media (min-width: 900px)
75-
background-position: top right
76-
position: static
77-
78-
&.vs-hidden
79-
display: none
80-
81-
&:hover
82-
.vs-core
83-
.vs-button
84-
.vs-button-inside
85-
background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%)
86-
87-
.vs-iso
88-
position: absolute
89-
left: 20px
90-
height: 26px
91-
img
92-
height: 26px
93-
@media (min-width: 680px)
94-
left: 40px
95-
height: 40px
96-
img
97-
height: 40px
98-
@media (min-width: 900px)
99-
display: none
100-
101-
.vs-logo
102-
position: absolute
103-
display: none
104-
left: 40px
105-
@media (min-width: 900px)
106-
display: block
107-
108-
.vs-core
109-
display: flex
110-
align-items: center
111-
112-
.vs-slogan
113-
text-align: center
114-
115-
.vs-slogan-up
116-
color: #FFF
117-
font-size: 14px
118-
font-weight: bold
119-
width: 170px
120-
@media (min-width: 680px)
121-
font-size: 18px
122-
width: 220px
123-
@media (min-width: 1024px)
124-
width: auto
125-
font-size: 24px
126-
strong
127-
color: #fdc722
128-
129-
.vs-slogan-down
130-
color: #cdc5dc
131-
font-size: 12px
132-
@media (min-width: 680px)
133-
font-size: 16px
134-
135-
.vs-button
136-
margin-left: 43px
137-
color: #fff
138-
padding: 2px
139-
border-radius: 40px
140-
display: none
141-
background: linear-gradient(0deg, #ffdf4c, #e29d0a)
142-
@media (min-width: 680px)
143-
display: inline-block
144-
.vs-button-inside
145-
color: #000
146-
border-radius: 40px
147-
background: linear-gradient(90deg, #FFC828, #E19C0E)
148-
padding: 8px 24px
149-
font-size: 22px
150-
white-space: nowrap
151-
border-radius: 30px
152-
font-weight: bold
153-
154-
.vs-close
155-
right: 10px
156-
position: absolute
157-
padding: 10px
158-
@media (min-width: 680px)
159-
right: 20px
160-
&:hover
161-
color: #56D8FF
47+
#vs.vs-hidden {
48+
display: none;
49+
}
50+
51+
/*******************************************************/
52+
53+
54+
#vs {
55+
background-color: #0A1124;
56+
box-sizing: border-box;
57+
color: #fff;
58+
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
59+
position: fixed;
60+
left: 0;
61+
right: 0;
62+
top: 0;
63+
z-index: 100;
64+
height: 72px;
65+
background: linear-gradient(to left, #161a35, #283065);
66+
}
67+
68+
#vs .vs-background-wrapper {
69+
align-items: center;
70+
justify-content: center;
71+
display: flex;
72+
padding: 0 10px;
73+
height: 100%;
74+
width: 100%;
75+
background-image: url(/images/banners/bg-mobile.png);
76+
background-repeat: no-repeat;
77+
background-size: cover;
78+
background-position: top right;
79+
}
80+
81+
#vs:hover {
82+
text-decoration: none;
83+
}
84+
85+
#vs:hover .vs-core .vs-button {
86+
background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b);
87+
}
88+
89+
#vs .vs-logo {
90+
position: absolute;
91+
left: 10px;
92+
}
93+
94+
#vs .vs-logo .logo-big {
95+
display: none;
96+
}
97+
98+
#vs .vs-core {
99+
display: flex;
100+
align-items: center;
101+
width: 288px;
102+
}
103+
104+
#vs .vs-core .vs-slogan-wrapper {
105+
text-align: center;
106+
width: 170px;
107+
margin: 0 auto;
108+
}
109+
110+
#vs .vs-core .vs-slogan {
111+
color: #fff;
112+
font-weight: bold;
113+
font-size: 10px;
114+
}
115+
116+
#vs .vs-core .vs-subline {
117+
color: #c6cdf7;
118+
font-size: 10px;
119+
margin-top: 4px;
120+
}
121+
122+
#vs .vs-core .vs-button-wrapper {
123+
padding: 2px;
124+
background-image: linear-gradient(to bottom, #388f26, #50b83b);
125+
border-radius: 60px;
126+
overflow: hidden;
127+
}
128+
129+
#vs .vs-core .vs-button {
130+
border-radius: 60px;
131+
color: #FFF;
132+
padding: 8px 6px;
133+
background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
134+
font-weight: bold;
135+
text-transform: uppercase;
136+
text-align: center;
137+
font-size: 10px;
138+
letter-spacing: 0.3px;
139+
white-space: nowrap;
140+
}
141+
142+
#vs .vs-close {
143+
right: 0;
144+
position: absolute;
145+
padding: 10px;
146+
}
147+
148+
#vs .vs-close:hover {
149+
color: #56d8ff;
150+
}
151+
152+
@media (min-width: 680px) {
153+
#vs .vs-background-wrapper {
154+
background-image: url(/images/banners/bg-tablet.svg);
155+
}
156+
157+
#vs .vs-logo {
158+
left: 20px;
159+
}
160+
161+
#vs .vs-logo .logo-small {
162+
display: none;
163+
}
164+
165+
#vs .vs-logo .logo-big {
166+
display: inline-block;
167+
width: 90px;
168+
}
169+
170+
#vs .vs-core {
171+
width: auto;
172+
margin-right: -60px;
173+
}
174+
175+
#vs .vs-core .vs-slogan-wrapper {
176+
margin: 0 12px 0 0;
177+
width: auto;
178+
}
179+
180+
#vs .vs-core .vs-slogan {
181+
font-size: 16px;
182+
}
183+
184+
#vs .vs-core .vs-subline {
185+
font-size: 15px;
186+
text-align: left;
187+
}
188+
189+
#vs .vs-core .vs-button {
190+
font-size: 13px;
191+
padding: 8px 15px;
192+
}
193+
194+
#vs .vs-close {
195+
right: 20px;
196+
}
197+
}
198+
199+
@media (min-width: 900px) {
200+
#vs .vs-background-wrapper {
201+
background-image: url(/images/banners/bg-desktop.svg);
202+
background-position: top right -300px;
203+
}
204+
205+
#vs .vs-logo .logo-big {
206+
display: inline-block;
207+
width: auto;
208+
}
209+
210+
#vs .vs-core {
211+
margin-right: 0;
212+
}
213+
}
214+
215+
@media (min-width: 1280px) {
216+
#vs .vs-background-wrapper {
217+
background-position: top right;
218+
}
219+
}

0 commit comments

Comments
 (0)