PROJECTS
Vue.js and Webpack
FURTHER LEARNING
RESOURCESTo learn more about Vue, you don’t have to go much further
than the documentation itself (https://vuejs.org/v2/guide/) –
it’s a comprehensive guide that is updated and it’s certainly a great
place to start. However, you can find some great free video
tutorials on Vue.js by looking on websites such as:Ohttps://www.vuemastery.com/
Ohttps://egghead.io/browse/frameworks/vueAnd if video isn’t your thing and you would rather follow written
tutorials, then you can find some great tutorials on:Ohttps://scotch.io/
Ohttps://css-tricks.com/tag/vue/You can also take a look on GitHub (https://github.com/vuejs/),
where you will find snippets of information on various apps that
people have built using Vue. But that’s not all; you can clone or
download these apps and take a good look at the source code to
get a better idea of how things are done.font-size: 1.16rem;
color: $white;
animation: animateRight 1.2s ease-out;
margin-bottom: 4rem;
margin-left: 0rem;
font-family: $font;
}
}BUTTON STYLES
The most important thing about landing pages or
head sections of a web page is the call to action
button (CTA). Our CTA is going to be a big white
button centred underneath our page title. To give
our CTA button some life, we can create a hover
animation that gives us a nice ripple-like effect.
Again, we have added in an animation property but
haven’t yet defined that using keyframes – which
we are pleased to say is what we will be doing in the
next few steps.header__text-box {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
.btn:link,
.btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.2rem 2.9rem;
display: inline-block;
text-align: center;
transition: all 0.2s;
position: relative;
&:hover {
transform: translateY(-0.3rem);
box-shadow: 0 1rem 2rem rgba(59, 105, 124, 0.4);
}
&:active {
transform: translateY(-0.1rem);
box-shadow: 0 0.5rem 1rem rgba(59, 105, 124, 0.4);
}
}
.btn--white {
color: $mainFontColor;
background: #fff;
border-radius: 10rem;
animation: animateUp 0.8s ease-out;
margin-left: -1rem;
font-size: 1rem;
font-family: $font;
}