set Intro style

@@ -2,6 +2,10 @@ body {
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
 }
 }
+* {
+    text-decoration: none;
+    color: #333;
+}
 
 
 .container {
 .container {
     display: flex;
     display: flex;
@@ -12,3 +16,8 @@ body {
     width: 100vw;
     width: 100vw;
     height: 100vh;
     height: 100vh;
 }
 }
+
+.large-title {
+    font-size: 2rem;
+    color: #333
+}
\ No newline at end of file

 .body {
 .body {
-  border: 1px solid gray;
   width: 100%;
   width: 100%;
   flex-grow: 1;
   flex-grow: 1;
   display: flex;
   display: flex;

@@ -2,9 +2,24 @@
   height: 120px;
   height: 120px;
   background-color: #f3f3f3;
   background-color: #f3f3f3;
   display: flex;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   font-size: .8rem;
   font-size: .8rem;
   width: 100%;
   width: 100%;
+
+  div {
+    padding: .3rem 1.6rem;
+    width: 90%;
+    text-align: left;
     color: #aaaaaa;
     color: #aaaaaa;
+    &:first-child {
+      font-size: 1.2rem;
+    }
+
+    a {
+      font-size: 1.2rem;
+      color: #aaaaaa;
+    }
+  }
 }
 }
\ No newline at end of file

+.intro {
+  width: 240px;
+  padding-bottom: 6rem;
+
+  #id-input {
+    border: none;
+    display: block;
+    width: calc(100% - 1.4rem);
+    border-bottom: 1px solid #aaa;
+    margin: 1.2rem 0;
+    margin-top: 2.4rem;
+    padding: 0.7rem 0.7rem;
+    color: #333;
+    border-radius: .25rem;
+    &::placeholder {
+      color: #aaaaaa;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  #search-button {
+    width: 100%;
+    margin: 0;
+    padding: .8rem .6rem;
+    border: none;
+    font-size: .8rem;
+    color : #fafafa;
+    background-color: lightskyblue;
+    border-radius: .25rem;
+
+    &:focus {
+      outline: none;
+      border: 1px solid deepskyblue;
+    }
+  }
+}
\ No newline at end of file

@@ -5,7 +5,7 @@
 **/
 **/
 
 
 import {BASE_URL} from "@src/config/url";
 import {BASE_URL} from "@src/config/url";
-import {randomTransition} from "@src/components/pageTransition";
+import {randomTransition} from "@src/components/page.transition";
 import {setState} from "@src/store/state";
 import {setState} from "@src/store/state";
 
 
 export const addEvent = async (
 export const addEvent = async (

@@ -5,9 +5,9 @@
 **/
 **/
 
 
 import App from './App';
 import App from './App';
-import {initialTrantition} from "./components/pageTransition";
+import {initialTrantition} from "./components/page.transition";
 import './assets/style/PageTransition.scss';
 import './assets/style/PageTransition.scss';
-import {addEvent} from "@src/components/addEvent";
+import {addEvent} from "@src/components/add.event";
 
 
 window.addEventListener('DOMContentLoaded', () => {
 window.addEventListener('DOMContentLoaded', () => {
     /* add div for page transitions */
     /* add div for page transitions */

@@ -6,15 +6,20 @@
  **/
  **/
 
 
 import Title from "@src/components/title";
 import Title from "@src/components/title";
+import '@src/assets/style/Intro.scss'
 
 
 const Intro = (): string =>{
 const Intro = (): string =>{
-    return `<div class="home">
-        <lable>   
-            ${Title('인스타 조회하기').Large}
-            <input id="id-input" type="text" name="insta_id" />
-            <button id="search-button">조회</button>
-            <button id="update-button">업데이</button>
-        </lable>
+    return `<div class="intro">
+        <label for="id-input">   
+            ${Title('SEARCH INSTAGRAM').Large}
+            <input 
+                id="id-input" 
+                type="text" 
+                name="insta_id" 
+                placeholder="INSTAGRAM ID"
+            />
+            <button id="search-button">SEARCH</button>
+        </label>
     </div>`
     </div>`
 }
 }
 
 

@@ -9,7 +9,18 @@ import '@src/assets/style/Footer.scss'
 const Footer = () : string => {
 const Footer = () : string => {
 
 
     return `
     return `
-        <div class="footer">Its my Footer</div>
+        <div class="footer">
+            <div>
+                <a href="mailto:goesnow831@gmail.com">WON SEOG</a> 
+                &nbsp; | &nbsp; 
+                <a href="https://github.com/1seok2">GITHUB</a>
+                &nbsp; | &nbsp; 
+                <a href="https://goeslog.github.io">BLOG</a>
+            </div>
+            <div>
+                © 2021 goesnow, All rights reserved 
+            </div>
+        </div>
     `;
     `;
 }
 }