alicestrt
/
magiun_website
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implemented design changes

Browse Source
master
alicestrt 3 years ago
parent 4ff3a7d1f3
commit d42315ff5f
8 changed files with 254 additions and 211 deletions
Show Stats Download Patch File Download Diff File

3
src/components/MenuBar.vue
Unescape Escape View File

@ -37,8 +37,7 @@ a:hover {
} }
.navbar { .navbar {
background-color: white; background-color: #C4C4C4;
border-bottom: 2px #ffcccc solid;
} }
@media (max-width: 575px) { @media (max-width: 575px) {

51
src/components/anise.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -28,42 +31,49 @@ a {
} }
.content { .content {
padding-right: 50px;
padding-top: 20px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 10px; padding-bottom: 40px;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; color: #1B75BC;
text-align: left;
} }
.controls {
margin-top: 60px;
}
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 20px;
color: #FA00FF;
text-align: center; text-align: center;
padding-top: 70px;
color: #333042
} }
.image_container {
padding-top: 5px;
}
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img {
max-width: 50%;
margin-bottom: 10px;
}
.small_icon { .small_icon {
max-width: 20%; max-width: 60%;
padding-top: 100px; padding-top: 100px;
}
.zoom {
max-width: 60%;
} }
.recipe_block { .recipe_block {
@ -103,6 +113,15 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="2" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-col md="1" offset-md="1" class="small_icon">
<div class="zoom"> <div class="zoom">

85
src/components/knife.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -28,35 +31,37 @@ a {
} }
.content { .content {
padding-right: 50px;
padding-top: 20px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; color: #1B75BC;
text-align: left;
} }
.controls {
margin-top: 60px;
}
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 20px;
color: #FA00FF;
text-align: center; text-align: center;
padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 10px;
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img { .image_container img {
@ -69,6 +74,10 @@ a {
padding-top: 100px; padding-top: 100px;
} }
.zoom {
max-width: 60%;
}
#knife { #knife {
margin-top: 10px; margin-top: 10px;
@ -100,13 +109,29 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-col md="2" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_prev.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife.png"> </b-img>
</div> </div>
</b-col> </b-col>
<b-col md="8"> </b-row>
<b-row>
<b-col md="12">
<p class="title_story">Paper Thin</p> <p class="title_story">Paper Thin</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Yoana Buzova</p> <p class="author">an essay by Yoana Buzova</p>
@ -115,28 +140,9 @@ a {
</b-row> </b-row>
</b-col> </b-col>
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_next.png"> </b-img></a>
</div>
</b-col>
</b-row>
<b-col md="4">
<b-row>
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knifeillu" src="media/magiun2/knife.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'> <div class='content'>
<p>The first time I was allowed to use a knife was at my grandparents house. Perhaps not so allowed, as encouraged and maybe even obliged to. It felt so empowering, I felt so trusted, so weirdly and preciously mature. Grown-ups have an inability to perceive especially important things. My parents did not understand how important it was to be given the chance to use a knife by myself as early as possible. Luckily, grandparents are such creatures who can easily deviate from the grown-up mentality. </p> <p>The first time I was allowed to use a knife was at my grandparents house. Perhaps not so allowed, as encouraged and maybe even obliged to. It felt so empowering, I felt so trusted, so weirdly and preciously mature. Grown-ups have an inability to perceive especially important things. My parents did not understand how important it was to be given the chance to use a knife by myself as early as possible. Luckily, grandparents are such creatures who can easily deviate from the grown-up mentality. </p>
@ -149,18 +155,19 @@ At present day I own a potato peeler, because as everyone else I must do everyth
<p> <p>
My parents emptied out the house of my grandparents and it got sold. I kept the knife my grandmother would always give me to peel. I sometimes try using it to peel a potato, or even a cucumber. And I always cut the potatoes in long odd looking pieces that have more than four corners.</p> My parents emptied out the house of my grandparents and it got sold. I kept the knife my grandmother would always give me to peel. I sometimes try using it to peel a potato, or even a cucumber. And I always cut the potatoes in long odd looking pieces that have more than four corners.</p>
</div> </div>
<b-row> </b-col>
<b-col md="4">
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img> <b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img>
</b-col>
</div> </div>
</b-container> </b-container>
</b-row> </b-col>
</b-col>
</b-row> </b-row>
</b-container> </b-container>

15
src/components/lychee.vue
Unescape Escape View File

@ -6,7 +6,7 @@
src: url('../../dist/fonts/happy-times-NG_regular_master.otf'); src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
} }
* { * {
border: 1px black solid; border: 0px black solid;
background-color: white; background-color: white;
} }
@ -32,7 +32,7 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 100px; padding-top: 40px;
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
@ -102,12 +102,21 @@ a {
<p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
</div> </div>
</b-col>
</b-row>
<b-row>
<b-col md="12">
<p class="title_story">Have you eaten yet?</p> <p class="title_story">Have you eaten yet?</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Witold van Ratingen</p> <p class="author">an essay by Witold van Ratingen</p>

77
src/components/phone.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -30,19 +33,24 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; padding-left: 60px;
color: #1B75BC;
text-align: left;
}
.controls {
margin-top: 60px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 70px; padding-top: 20px;
color: #333042; color: #FA00FF;
text-align: center; text-align: center;
} }
@ -55,8 +63,7 @@ a {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img { .image_container img {
@ -69,6 +76,10 @@ a {
} }
.zoom {
max-width: 60%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
@ -89,45 +100,36 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-col md="2" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_prev.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone.png"> </b-img>
</div> </div>
</b-col> </b-col>
<b-col md="8"> </b-row>
<p class="title_story">Christmas Dinner</p>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">a poem by Valentina Vella</p> <p class="title_story">Christmas Dinner</p>
</b-col>
</b-row>
</b-col>
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row>
<b-col md="8" offset-md="2">
<b-row> <b-row>
<b-container fluid> <b-col md="12">
<div class="image_container"> <p class="author">a poem by Valentina Vella</p>
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/phone.png"> </b-img>
</b-col> </b-col>
</div>
</b-container>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
<p> <p>
@ -169,8 +171,9 @@ a {
no, he’s dead, he’s dead,<br> no, he’s dead, he’s dead,<br>
sea salt and ground black pepper, to taste.</p> sea salt and ground black pepper, to taste.</p>
</div> </div>
</b-col>
</b-col>
</b-row> </b-row>
</b-container> </b-container>

78
src/components/simmered.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -28,36 +31,37 @@ a {
} }
.content { .content {
padding-right: 50px;
padding-top: 20px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; color: #1B75BC;
text-align: left;
} }
.controls {
margin-top: 60px;
}
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 20px;
color: #FA00FF;
text-align: center; text-align: center;
padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 10px;
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img { .image_container img {
@ -70,6 +74,9 @@ a {
padding-top: 100px; padding-top: 100px;
} }
.zoom {
max-width: 60%;
}
#knife { #knife {
margin-top: 30px; margin-top: 30px;
@ -94,14 +101,24 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/knife"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife_prev.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini.png"> </b-img>
</div> </div>
</b-col> </b-col>
<b-col md="8"> </b-row>
<b-row>
<b-col md="12">
<p class="title_story">Simmered Egg <br>(Hakka style)</p> <p class="title_story">Simmered Egg <br>(Hakka style)</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Dorothy Cheung</p> <p class="author">an essay by Dorothy Cheung</p>
@ -110,28 +127,8 @@ a {
</b-row> </b-row>
</b-col> </b-col>
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_next.png"> </b-img></a>
</div>
</b-col>
</b-row>
<b-col md="4">
<b-row>
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knifeillu" src="media/magiun2/porcini.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'> <div class='content'>
<p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my <p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my
@ -166,7 +163,8 @@ cuisine at all.</p>
After all, “Simmered Egg” is an adaptation made with the spirit of being a Hakka woman - After all, “Simmered Egg” is an adaptation made with the spirit of being a Hakka woman -
adapting to changes (and leftover food). </p> adapting to changes (and leftover food). </p>
</div> </div>
</b-col>
<b-col md="4">
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
@ -199,7 +197,9 @@ adapting to changes (and leftover food). </p>
</b-container> </b-container>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>

79
src/components/soulsoup.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -30,42 +33,49 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; color: #1B75BC;
text-align: left;
}
.controls {
margin-top: 60px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 70px; padding-top: 20px;
color: #333042; color: #FA00FF;
text-align: center; text-align: center;
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 5px;
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img {
max-width: 80%
}
.small_icon { .small_icon {
max-width: 60%; max-width: 60%;
padding-top: 100px; padding-top: 100px;
} }
.zoom {
max-width: 60%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -85,15 +95,29 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="2" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
</b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-row>
<b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_prev.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower.png"> </b-img>
</div> </div>
</b-col> </b-col>
</b-row>
<b-col md="8"> <b-row>
<b-col md="12">
<p class="title_story">Chicken Soup for Soul</p> <p class="title_story">Chicken Soup for Soul</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Patricia Cîrtog</p> <p class="author">an essay by Patricia Cîrtog</p>
@ -102,28 +126,9 @@ a {
</b-row> </b-row>
</b-col> </b-col>
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_next.png"> </b-img></a>
</div>
</b-col>
</b-row>
<b-col md="5">
<b-row>
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/cauliflower.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'> <div class='content'>
<p>Morning… As a commuter, my morning used to be a colorful bustle of to-go coffee, endless <p>Morning… As a commuter, my morning used to be a colorful bustle of to-go coffee, endless
@ -181,9 +186,7 @@ crying, maybe quietly, but the company of cooking has offered me peace.</p>
</div> </div>
</b-col> </b-col>
<b-col md="7"> </b-row>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>

77
src/components/whatwecan.vue
Unescape Escape View File

@ -1,10 +1,13 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -30,42 +33,49 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Poppins', sans-serif;; font-family: 'Happy Times';
font-size: 15px; font-size: 15px;
padding-bottom: 40px; padding-bottom: 40px;
padding-left: 60px; padding-left: 60px;
padding-right: 60px; color: #1B75BC;
text-align: left;
}
.controls {
margin-top: 60px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
padding-top: 70px; padding-top: 20px;
color: #333042; color: #FA00FF;
text-align: center; text-align: center;
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 5px;
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'Poppins', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF;
} }
.image_container img {
max-width: 80%
}
.small_icon { .small_icon {
max-width: 60%; max-width: 60%;
padding-top: 100px; padding-top: 100px;
} }
.zoom {
max-width: 60%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -85,14 +95,29 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="1" offset-md="1" class="small_icon"> <b-col md="2" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col>
</b-row>
<b-row>
<b-col md="4">
<b-row>
<b-col md="10" offset-md="3">
<div class="zoom"> <div class="zoom">
<a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_prev.png"> </b-img></a> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes.png"> </b-img>
</div> </div>
</b-col> </b-col>
<b-col md="8"> </b-row>
<b-row>
<b-col md="12">
<p class="title_story">We do what we can <br> with what we have</p> <p class="title_story">We do what we can <br> with what we have</p>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Raluca Chereji</p> <p class="author">an essay by Raluca Chereji</p>
@ -101,28 +126,7 @@ a {
</b-row> </b-row>
</b-col> </b-col>
<b-col md="1" class="small_icon"> <b-col md="5">
<div class="zoom">
<a href="/lychee"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee_next.png"> </b-img></a>
</div>
</b-col>
</b-row>
<b-row>
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/clothes.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'> <div class='content'>
<p>This became our house motto during quarantine. Devised at first as a way to rationalize the situation <p>This became our house motto during quarantine. Devised at first as a way to rationalize the situation
@ -204,9 +208,8 @@ is already there.</p>
</div> </div>
</b-col> </b-col>
<b-col md="7"> </b-row>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>

Write Preview
Loading…
Cancel
Save