>
diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs
new file mode 100644
index 0000000000..69afb3fceb
--- /dev/null
+++ b/themes/vue/layout/partials/vuemastery_banner.ejs
@@ -0,0 +1,99 @@
+
+
+
diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl
new file mode 100644
index 0000000000..49494ca5d2
--- /dev/null
+++ b/themes/vue/source/css/_vuemastery-banner.styl
@@ -0,0 +1,198 @@
+.vuemastery-banner
+ display none
+ background #4fc08d
+ background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
+ overflow hidden
+ position relative
+
+ &:before
+ content ''
+ background #35495E
+ background-image linear-gradient(to right, #4fc08d, #4fc08d 80%, #35495E 100%)
+ position absolute
+ top 0
+ bottom 0
+ left 0
+ width 0
+ transition width .15s ease-out .1s
+
+ &:hover
+ &:before
+ transition width .15s ease-in
+ width 50%
+ p
+ transition-delay 0
+ color #fff
+
+ .vuemastery-banner--wrapper::before
+ width 100vw
+ transition width .15s ease-in .10s
+
+ a
+ display flex
+ height 80px
+ justify-content center
+
+.vuemastery-banner--wrapper
+ display flex
+ height 100%
+ align-items center
+ background #4fc08d
+ margin-left -50px
+ padding-left 50px
+ position relative
+
+ &:before
+ content ''
+ pointer-events none
+ background #35495E
+ background-image linear-gradient(to right, #35495E, #35495E 80%, #4fc08d 100%)
+ position absolute
+ top 0
+ bottom 0
+ left 0
+ width 0
+ transition width .15s ease-out
+
+ &:hover
+ + .vuemastery-banner--close
+ &:before,
+ &:after
+ transform-origin 100%
+
+ p
+ margin -3px 50px 0 20px
+ font-size 1.17rem
+ font-weight 600
+ color #2c3e50
+ position relative
+ transition-delay .15s
+
+ span
+ font-size 1rem
+ display block
+ color #fff
+
+.vuemastery-banner--logo
+ height 102%
+ margin-top: -1px
+ margin-left 125px
+ position relative
+ z-index 2
+
+.vuemastery-banner--close
+ position absolute
+ top 20px
+ right 25px
+ height 40px
+ width 40px
+ -webkit-tap-highlight-color transparent
+ border-radius 50%
+ cursor pointer
+
+ &:before,
+ &:after
+ content ''
+ position absolute
+ top 19px
+ left 14px
+ width 25px
+ height 2px
+ background-color #fff
+ transform-origin 50%
+ transform rotate(-45deg)
+ transition all .2s ease-out
+
+ &:after
+ transform rotate(45deg)
+
+ &:hover
+ &:before,
+ &:after
+ transform rotate(180deg)
+
+.vuemastery-weekend-promo
+ #mobile-bar,
+ #mobile-bar.top
+ position relative
+ background-color #fff
+
+ &.docs:not(.vuemastery-menu-fixed)
+ padding-top 0
+ #header
+ position relative
+ width auto
+ #nav
+ position absolute
+
+ &.vuemastery-menu-fixed
+ #mobile-bar
+ position fixed
+
+@media screen and (min-width: 901px)
+ .vuemastery-weekend-promo
+ &.docs:not(.vuemastery-menu-fixed)
+ #main.fix-sidebar .sidebar
+ position absolute
+ top 141px
+
+ #sidebar-sponsors-platinum-right
+ position absolute
+ top: 170px;
+
+ &.vuemastery-menu-fixed.docs
+ .vuemastery-banner
+ margin-bottom 0
+
+@media screen and (max-width: 900px)
+ .vuemastery-banner
+ .vuemastery-banner--logo
+ margin-left 0
+
+ .vuemastery-weekend-promo
+ &.vuemastery-menu-fixed
+ .vuemastery-banner
+ margin-bottom 40px
+
+
+@media screen and (max-width: 700px)
+ .vuemastery-banner
+ a
+ height 40px
+ overflow hidden
+
+ .vuemastery-banner--logo
+ margin-left 0
+ justify-content flex-start
+
+ p, span
+ font-size .8rem
+ color #fff
+
+ .vuemastery-banner--close
+ top 0px
+ right 0px
+
+ &:before,
+ &:after
+ top 19px
+ left 14px
+ width 15px
+ height 2px
+
+@media screen and (max-width: 465px)
+ .vuemastery-banner
+ p
+ max-width 185px
+ span
+ display none
+
+@media screen and (max-width 330px)
+ .vuemastery-banner p
+ font-size 0.6rem
+ margin -3px 28px 0 0px
+ max-width 140px
+
+@media print
+ .vuemastery-banner
+ display none
\ No newline at end of file
diff --git a/themes/vue/source/css/_vue-mastery.styl b/themes/vue/source/css/_vuemastery.styl
similarity index 100%
rename from themes/vue/source/css/_vue-mastery.styl
rename to themes/vue/source/css/_vuemastery.styl
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
index 7cc81bddd3..bcbe5ec6a9 100644
--- a/themes/vue/source/css/index.styl
+++ b/themes/vue/source/css/index.styl
@@ -3,6 +3,7 @@
@import "_sidebar"
@import "_sponsors-index"
@import "_modal"
+@import "_vuemastery-banner"
@import "_themes"
$width = 900px
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index 0c695f7d92..8592dfff7c 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -14,6 +14,7 @@
@import "_style-guide"
@import "_modal"
@import "_scrimba"
+@import "_vuemastery-banner"
@import "_vue-mastery"
@import "_themes"
+