changed design lychee

master
alicestrt 3 years ago
parent 936860efa1
commit 4ff3a7d1f3

@ -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: 1px black solid;
background-color: #F7F7F7; background-color: white;
} }
@ -29,43 +32,49 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 100px;
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 {
@ -86,12 +95,18 @@ 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">
<div class="zoom"> <div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_prev.png"> </b-img></a> <a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img></a>
</div> </div>
</b-col>
<b-col md="8">
<p class="title_story">Have you eaten yet?</p> <p class="title_story">Have you eaten yet?</p>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
@ -101,29 +116,8 @@ 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="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_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" id="knifeillu" src="media/magiun2/lychee.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'> <div class='content'>
<p>Have You Eaten Yet? <br> <p>Have You Eaten Yet? <br>
@ -149,6 +143,7 @@ When you start to cry, I bring you lychees.</p>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>

Loading…
Cancel
Save