source: ReserveNGo-frontend/src/components/Project/Footer_.vue

<script setup>

</script>

<template>
      <footer>
        <div class="slogan">
          <h3>ReserveNGo</h3>
          <p>Why not make your life easier?</p>

        </div>

        <div class="contact">
            <p>Contact:</p>
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-instagram"></a>
          <a href="#" class="fa fa-google"></a>
        </div>
      </footer>



</template>

<style scoped>

/*hr{
  height: 50px;
  width: auto;
}*/

footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.slogan{
  font-size: 30px;
  margin: 20px 0;
}
.slogan h3{
  text-align: center;
}

.contact{
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.contact p{
  margin: auto;
  font-size: 20px;
}

.fa {
  padding: 20px;
  margin-left: 15px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  box-sizing: content-box;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}

</style>