<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 !important;

}

body {
  background-color: #ffe6e6;
  min-height: 100vh;
}

a:hover {
  color: #333042;
  text-decoration: none;

}

a {
  color: black;
}

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

#mag_title {
  font-size: 80px;
  font-family: 'Permanent Marker', cursive;
  padding-left: 50px;
  color: #333042;
}

#mag_subtitle {
  font-size: 30px;
  font-family: 'Permanent Marker', cursive;
  margin-top: 40px;
  padding-left: 40px;
  color: #333042;



}

#icons img {
  width: 100%;
}

.zoom {
 transition: transform 1s;
}

.zoom:hover {
   transform: scale(1.1);}

.container_width {
  max-width: 100%;
}

#sparkle {
  padding-top: 80px;
}

@media (max-width: 575px) {
  #mag_title {
    font-size: 60px;
    padding-top: 20px;
    padding-left: 20px;
  }
  #mag_subtitle {
    font-size: 18px;
    padding-left: 20px;
margin-top: 20px;
}
}

</style>

<template>

<div>
  <MenuBar/>
<b-container fluid class="p-0">
<b-row>
  <b-col md="12" id="sparkle">
    <b-img class="img-fluid" center src="media/print.gif"></b-img>

  </b-col>
</b-row>
  <b-row>
    <b-col md="6">
        <a href="/about"><p id="mag_title">Magiun</p></a>
    </b-col>

    <b-col md="6">
        <p id="mag_subtitle">#1 On eating in isolation</p>
    </b-col>

  </b-row>

  <b-row>
    <b-col md="6">
      <a href="/about"><b-img class="img-fluid" id="magi" center src="media/magiun_gimp.gif"></b-img></a>

    </b-col>
    <b-col md="6">
      <b-container fluid id="icons">
        <b-row>
          <b-col md="3">
              <div class="zoom">

            <a href="/eggs"> <b-img class="img-fluid" center  alt="Responsive image" src="media/egg_small.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">

            <a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">

            <a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
            <div class="zoom">
          <a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
            </div>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="3">
              <div class="zoom">
            <a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
              </div>
          </b-col>
        </b-row>
        <b-row>
          <b-col md="3">
              <div class="zoom">
            <a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
              </div>
          </b-col>
          <b-col md="3">
              <div class="zoom">
            <a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
              </div>
          </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">
              <div class="zoom">
            <a href="/pretzel"><b-img class="img-fluid" center alt="Responsive image" src="media/pretzel_small.png"></b-img></a>
              </div>
          </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>
