magiun_website/src/components/SplashPage.vue

<style scoped>

@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

* {
    border: 0px black solid;
    background-color: #ffe6e6;

}

a:hover {
  color: hotpink;
  text-decoration: none;

}

a {
  color: black;
}

#magi {
  width: 60%;
  margin-top: 20px;
}

#mag_title {
  font-size: 70px;
  font-family: 'Permanent Marker', cursive;
  padding-left: 40px;
}

#icons img {
  width: 100%;
}

.container_width {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
}
</style>

<template>

<div>
  <MenuBar/>
<b-container fluid class="container_width">
  <b-row>
    <b-col md="6">
        <p id="mag_title">Magiun</p>
    </b-col>
  </b-row>
  <b-row>
    <b-col md="6">
      <b-img class="img-fluid" id="magi" center src="media/magiun.gif"></b-img>

    </b-col>
    <b-col md="6">
      <b-container fluid id="icons">
        <b-row>
          <b-col md="3">
            <a href="/leekpilaf"> <b-img class="img-fluid" center src="media/leek.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/noodles"><b-img class="img-fluid" center src="media/noodles.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/onion"><b-img class="img-fluid" center src="media/onion.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/eggs"><b-img class="img-fluid" center src="media/egg.png"></b-img></a>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="3">
            <a href="/bbq"><b-img class="img-fluid" center src="media/bbq.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/breakfast"><b-img class="img-fluid" center src="media/avo.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/pesto"><b-img class="img-fluid" center src="media/basil.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/cake"><b-img class="img-fluid" center src="media/cake.png"></b-img></a>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="3">
            <a href="/pretzel"><b-img class="img-fluid" center src="media/pretzel.png"></b-img></a>

          </b-col>
          <b-col md="3">
            <a href="/ricecooker"><b-img class="img-fluid" center src="media/rice.png"></b-img></a>

          </b-col>
          <b-col md="3">
            <a href="/cart"><b-img class="img-fluid" center src="media/cart.png"></b-img></a>
          </b-col>
          <b-col md="3">
            <a href="/scooter"><b-img class="img-fluid" center src="media/scooter.png"></b-img></a>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="3">

          </b-col>
          <b-col md="3">
          </b-col>
          <b-col md="3">
          </b-col>
          <b-col md="3">
            <a href="/recipe"><b-img class="img-fluid" center src="media/recipe.png"></b-img></a>

          </b-col>
        </b-row>
      </b-container>
    </b-col>
  </b-row>
</b-container>

<b-container fluid>

</b-container>


</div>

</template>

<script>
import MenuBar from './MenuBar'
export default {
    name: 'SplashPage',
    components: {
        MenuBar
    }
}

</script>