diff --git a/index.css b/index.css
new file mode 100644
index 0000000..6793775
--- /dev/null
+++ b/index.css
@@ -0,0 +1,206 @@
+html,body {
+ background-color: #ffeead;
+}
+
+.wrapper {
+ display: grid;
+ grid-gap: 5px;
+ grid-template-columns: repeat(12, [col] 1fr) ;
+ /* grid-template-rows: repeat(6, [row] auto ); */
+ grid-template-rows: auto 150px 150px 150px 150px auto;
+ padding: 10px;
+ background-color: #ffeead;
+ color: #444;
+}
+
+.box {
+ padding: 10px;
+ font-size: 150%;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+ul:last-child {
+ margin-left: auto;
+}
+
+nav li {
+ list-style: none;
+}
+
+.navigation ul {
+ display: flex;
+}
+
+.topbar > li {
+ padding: 0 10px 0 10px;
+ color: #f7e6d7;
+ box-sizing: border-box;
+ list-style-type: none;
+}
+
+ul > li:last-child {
+ margin-left: auto;
+}
+
+.logo {
+ text-align: center;
+ background-color: #ffcc5c;
+ grid-column: 1 / 2;
+}
+
+header{
+ background-color: #8dcfb1;
+ grid-column: 2/ -1;
+}
+
+aside {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ background-color: #ff6f69;
+ grid-column: 1 / 2;
+ grid-row: 2 / 6;
+}
+
+aside nav ul > li:first-child {
+ margin-bottom: auto;
+}
+
+main{
+ display: grid;
+ grid-column: 2 / -1;
+ grid-row: 2 / 6;
+ grid-gap: 10px;
+ padding: 20px;
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: repeat(4, 1fr);
+ background-color: rgb(255, 182, 86);
+}
+
+main > div{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.first-content {
+ background-color: #e67b90;
+ grid-column: 1 / 3;
+ grid-row: 1 / 3;
+}
+
+.second-content {
+ background-color: #ae7ece;
+ grid-column: 3 / 8;
+ grid-row: 1 / 3;
+}
+
+.third-content {
+ background-color: #9dcf90;
+ grid-column: 8 / -1;
+ grid-row: 1 / 5;
+}
+
+.forth-content {
+ background-color: #8fdbdb;
+ grid-column: 1 / 8;
+ grid-row: 3 / 5;
+}
+
+.bottom {
+ text-align: center;
+ background-color: #a9e069;
+ grid-column: col 1 / -1;
+ grid-row: 6 / 7;
+}
+
+@media (max-width: 900px) {
+ .first-content {
+ grid-column: 1 / 5;
+ grid-row: 1 / 3;
+ }
+
+ .second-content {
+ grid-column: 5 / 9;
+ grid-row: 1 / 3;
+ }
+
+ .third-content {
+ grid-column: 9 / -1;
+ grid-row: 1 / 5;
+ }
+
+ .forth-content {
+ grid-column: 1 / 9;
+ grid-row: 3 / 5;
+ }
+
+}
+
+@media (max-width: 600px) {
+ .topbar {
+ flex-wrap: wrap;
+ }
+
+ .topbar > li {
+ flex:1 1 50%;
+ text-align: center;
+ }
+
+ .first-content {
+ grid-column: 1 / -1;
+ grid-row: 1 / 2;
+ }
+
+ .second-content {
+ grid-column: 1 / -1;
+ grid-row: 2 / 3;
+ }
+
+ .third-content {
+ grid-column: 1 / -1;
+ grid-row: 3 / 4;
+ }
+
+ .forth-content {
+ grid-column: 1 / -1;
+ grid-row: 4 / 5;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+ .logo {
+ grid-column: 1 / -1;
+ }
+
+ header{
+ grid-column: 1/ 7;
+ grid-row: 2 / 3;
+ }
+
+ aside {
+ grid-column: 7/ -1;
+ grid-row: 2 / 3;
+ }
+
+ main {
+ grid-column: 1 / -1;
+ grid-row: 3 / 6;
+ }
+
+ .bottom {
+ grid-column: 1 / -1;
+ grid-row: 6 / 7;
+ }
+}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8a8e17f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+
+
+
+ Homework-VueJS-HTML
+
+
+
+
+
+
+
+
LOGO
+
+
+
+
+
+ CONTENT 1
+ CONTENT 2
+ CONTENT 3
+ CONTENT 4
+
+
+