charc-1

index.html

@@ -35,17 +35,13 @@
 
     <!-- part 2 -->
     <!-- characters -->
-    <div>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis necessitatibus natus vitae amet tempora non ratione reprehenderit molestiae soluta, ipsam tempore dignissimos maiores impedit inventore? Modi molestiae ipsum odio aliquid.
-        Labore adipisci, nostrum vero repellat sed culpa quidem, et a consectetur vitae sunt dignissimos est nihil odio illo veniam tenetur in aliquid minima necessitatibus esse sequi error. Veniam, iure numquam.
-        Facere, ipsa. Doloribus sit possimus, commodi voluptatum quaerat veritatis cum quo velit, expedita ut quod molestiae ea sint non distinctio voluptatem porro dicta quidem iste ducimus nam eligendi provident. Odit!
-        Maiores harum laborum molestiae, odit explicabo magnam accusantium magni odio ab vitae amet natus dolor a quaerat beatae expedita, deleniti voluptas illo quia! Exercitationem assumenda et maxime, debitis doloremque quod!
-        Praesentium aspernatur necessitatibus, dolore vel eum iure optio impedit, vero natus a quibusdam deleniti aperiam, velit ducimus expedita nisi! Et distinctio quaerat adipisci iusto, dolore repellendus id autem alias nam.
-        Ducimus repellendus iure magni porro, provident nisi deleniti labore eaque aperiam earum nobis obcaecati voluptatum vitae molestiae qui officia cum sed, impedit saepe veniam eos illo? At autem ipsam dolor.
-        Illum inventore vel dolorum deserunt neque perspiciatis nobis ipsum facere explicabo ex, quae quaerat ratione cumque dolorem quas dicta. Earum, eligendi placeat eaque corrupti veniam temporibus beatae quae repudiandae commodi!
-        Pariatur nulla iure modi deserunt, ipsum necessitatibus, dignissimos dicta laborum explicabo a eius, voluptate excepturi incidunt fuga nam mollitia delectus dolor illum maiores voluptatum ratione asperiores cumque minus. Consectetur, quae.
-        Minima sed consectetur ab, sequi, atque, quam adipisci qui nesciunt error a accusantium sint. Blanditiis, voluptatem quibusdam commodi voluptas nesciunt dolore quis asperiores ipsa quo laudantium vero provident perferendis! Ut.
-        Consequuntur, aperiam cum officia, at quam id dignissimos dolor placeat, hic libero quidem quasi! Ipsam aliquid veniam earum enim fuga possimus, ea adipisci odit veritatis laborum blanditiis! Officia, unde aspernatur?
+    <div class="characters">
+        <div class="left left_char">
+            <img src="./public/img/chac.png" alt="characters" id="char_img">
+        </div>
+        <div class="right right_char">
+            Want to meet the <br> <span>Characters</span>
+        </div>
     </div>
 
     <script src="./public/js/main.js"></script>

public/style/style.scss

@@ -5,6 +5,10 @@ $yellow: #ffe93e;
 $font1: 'Patrick Hand', cursive;
 $font2: 'Ubuntu', sans-serif;
 
+@mixin flex() {
+    display: flex;
+}
+
 
 *{
     margin: 0;
@@ -13,11 +17,6 @@ $font2: 'Ubuntu', sans-serif;
 }
 
 body{
-    width: 100vw;
-    height: 100vh;
-    display:flex;
-    justify-content: space-between;
-    flex-direction: column;
     background-image: url(../img/bg1.png);
     background-repeat: no-repeat;
     background-position: right;
@@ -27,8 +26,8 @@ body{
 
 // navbar
 .navbar{
+    @include flex();
     padding: 3vh;
-    display: flex;
     align-items: center;
     justify-content: space-between;
     font-family: $font1;
@@ -61,7 +60,7 @@ body{
     width: 100vw;
     margin-top: 20vh;
     height: 60vh;
-    display: flex;
+    @include flex();
     font-family: $font1;
     .left{
         font-size: 5vw;
@@ -84,4 +83,18 @@ body{
             height: 60vh;
         }
     }
+}
+
+// characters
+.characters{
+    margin-top: 10vh;
+    .left_char{
+        img{
+            height: 90vh;
+        }
+    }
+    .right_char{
+        width: 90vw;
+        border: 2px solid green
+    }
 }