After taking break from coding for some time, I have a question about how to position my Login button at the bottom center of the screen with an image displayed over it. Any help would be appreciated, thanks!
Here is the code snippet:
<template>
<div class="container-fluid">
<img alt="Sportly logo" src="~@/assets/sportly.png">
<div class="row">
<div class="col-md-6">
<h3>Login</h3>
<button class="btn btn-primary"
@click="signIn">
<i class="fa fa-twitter"></i>
Sign In with Twitter
</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
signIn () {
this.$store.dispatch('signIn')
}
}
}
</script>
<style scoped>
h3 {
font-weight: 700;
}
button {
background-color: #1dcaff;
border: 1px solid #1dcaff;
positioning: absolute;
bottom: 0px;
}
div button:hover {
background-color: #00aced;
border: 1px solid #00aced;
}
</style>