changed design lychee

src/components/lychee.vue

@@ -1,10 +1,13 @@
 <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');
-
+@font-face {
+  font-family: 'Happy Times';
+  src: url('../../dist/fonts/happy-times-NG_regular_master.otf');
+}
 * {
-    border: 0px black solid;
-    background-color: #F7F7F7;
+    border: 1px black solid;
+    background-color: white;
 
 }
 
@@ -29,43 +32,49 @@ a {
 
 .content {
   padding-right: 50px;
-  padding-top: 40px;
-  font-family: 'Poppins', sans-serif;;
+  padding-top: 100px;
+  font-family: 'Happy Times';
   font-size: 15px;
   padding-bottom: 40px;
   padding-left: 60px;
-  padding-right: 60px;
+  color: #1B75BC;
+  text-align: left;
 
 }
 
+.controls {
+  margin-top: 60px;
+}
+
 .title_story {
   font-size: 80px;
   font-family: 'Work Sans', sans-serif;
-  padding-top: 70px;
-  color: #333042;
+  padding-top: 20px;
+  color: #FA00FF;
   text-align: center;
 }
 
 .image_container {
 
-  padding-top: 10px;
+  padding-top: 5px;
 }
 
 .author {
   font-size: 20px;
   font-family: 'Poppins', sans-serif;;
   text-align: center;
+  color: #FA00FF;
 }
 
-.image_container img {
-  max-width: 80%
-}
 
 .small_icon {
   max-width: 60%;
   padding-top: 100px;
 }
 
+.zoom {
+  max-width: 60%;
+}
 
 @media (max-width: 575px){
      .small_icon {
@@ -86,12 +95,18 @@ a {
   <b-container fluid class="p-0">
     <MenuBar/>
     <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">
-          <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>
-        </b-col>
-      <b-col md="8">
         <p class="title_story">Have you eaten yet?</p>
         <b-row>
           <b-col md="12">
@@ -101,29 +116,8 @@ a {
         </b-row>
       </b-col>
 
-      <b-col md="1" class="small_icon">
-        <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-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" id="knifeillu" src="media/magiun2/lychee.png"> </b-img>
-
-              </b-col>
-            </div>
-
-            </b-container>
-            </b-row>
 <div class='content'>
 
 <p>Have You Eaten Yet? <br>
@@ -149,6 +143,7 @@ When you start to cry, I bring you lychees.</p>
 
       </b-col>
 
+
 </b-row>
       </b-container>
 </template>