You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

117 lines
2.4 KiB
Vue

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
* {
border: 0px black solid;
background-color: #ffe6e6;
}
.title_story {
font-size: 80px;
font-family: 'Viga', sans-serif;
padding-left: 20px;
padding-top: 20px;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
.content {
padding-right: 50px;
padding-top: 40px;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
padding-left: 20px;
}
#egg_images img {
width: 100%;
padding-top: 40px;
}
.container_width {
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
}
</style>
<template>
<b-container fluid class="container_width">
<MenuBar/>
<b-row>
<b-col md="8">
<p class="title_story">Breakfasts</p>
</b-col>
<b-col md="2">
<a href="/cart"><b-img class="img-fluid" src="media/cart.png"> </b-img></a>
</b-col>
<b-col md="2" class="small_icon">
<a href="/noodles"><b-img class="img-fluid" src="media/noodles.png"> </b-img></a>
</b-col>
</b-row>
<b-row>
<b-col md="5">
<div class='content'>
<p>I have started eating in the morning, actually eating, not just chugging sugarless coffee on an empty stomach and calling it intermittent fasting.
</p>
<p>
I have also started to cook more without any recipe, just by following my proverbial and literal gut, and the results are surprisingly good.
</p>
<p>
I know I am a good cook for most of the time but I also feel the need for validation, so eating alone, though not unprecedented, is something I have yet to get accustomed to.
</p>
<p>
I've attached some photos in hopes that I would somewhat get the validation I was mentioning earlier.</p>
</div>
</b-col>
<b-col md="7">
<b-container fluid id="egg_images">
<b-row>
<b-col md="6">
<b-img class="img-fluid" src="media/breakfast/breakfast2.jpg"> </b-img>
</b-col>
<b-col md="6">
<b-img class="img-fluid" src="media/breakfast/breakfast1.jpg"> </b-img>
</b-col>
</b-row>
</b-container>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'breakfast',
data: function() {
return {
}
},
components: {
MenuBar
}
}
</script>