diff --git a/src/App.vue b/src/App.vue
index b2f0798..3744696 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,35 @@
-
-
+
+
+
\ No newline at end of file
+
diff --git a/src/assets/images/home/home-headerIcon.svg b/src/assets/images/home/home-headerIcon.svg
new file mode 100644
index 0000000..00c7176
--- /dev/null
+++ b/src/assets/images/home/home-headerIcon.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/assets/images/home/home-icon-apple.svg b/src/assets/images/home/home-icon-apple.svg
new file mode 100644
index 0000000..4821847
--- /dev/null
+++ b/src/assets/images/home/home-icon-apple.svg
@@ -0,0 +1,17 @@
+
diff --git a/src/assets/images/home/home-icon-square.svg b/src/assets/images/home/home-icon-square.svg
new file mode 100644
index 0000000..b45e5ab
--- /dev/null
+++ b/src/assets/images/home/home-icon-square.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/images/home/home-topic.svg b/src/assets/images/home/home-topic.svg
new file mode 100644
index 0000000..fd6ff55
--- /dev/null
+++ b/src/assets/images/home/home-topic.svg
@@ -0,0 +1,53 @@
+
diff --git a/src/assets/scss/home/header.scss b/src/assets/scss/home/header.scss
index 3f1a996..e12bc99 100644
--- a/src/assets/scss/home/header.scss
+++ b/src/assets/scss/home/header.scss
@@ -1,15 +1,12 @@
@import "../color.scss";
.header {
- // position: fixed;
position: relative;
z-index: 99;
left: 6%;
top: 60px;
width: 88%;
height: 62px;
- // margin: 0 0 98px;
- // padding: 18px 26px 0 46.4px;
border-radius: 73px;
box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
background-color: $white;
@@ -27,14 +24,13 @@
&-logo {
position: absolute;
- left: 40px;
+ left: 35px;
top: 50%;
transform: translateY(-50%);
}
&__right {
float: right;
- // background-color: violet;
width: 80%;
}
@@ -42,34 +38,29 @@
float: right;
width: 600px;
margin-right: 92px;
- // background-color: turquoise;
height: 100%;
height: 50px;
top: 6px;
- // width: 85%;
ul {
- // background-color: yellowgreen;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
li {
- // background-color: lightpink;
float: left;
margin: 0;
padding: 0;
- width: 20%;
+ padding: 22px 20px;
height: 100%;
display: block;
+ text-align: left;
a {
font-size: 12pt;
color: $black;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ padding-bottom: 15px;
}
}
}
@@ -78,8 +69,6 @@
&-apply {
width: 92px;
height: 38px;
- // margin: 0 0 11px 58px;
- // padding: 9px 27px 10px;
border-radius: 38px;
background-color: $indigo-blue;
position: absolute;
diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss
index 7d5dbea..515c116 100644
--- a/src/assets/scss/home/home.scss
+++ b/src/assets/scss/home/home.scss
@@ -1,3 +1,46 @@
-.home {
- height: 900px;
+.section {
+ &-title {
+ margin-top: 150px;
+ height: 500px;
+ // background-color: chartreuse;
+ }
+}
+
+.home {
+ position: relative;
+ text-align: center;
+ &__title {
+ width: 500px;
+ // background-color: cornflowerblue;
+ margin: 0 auto;
+ position: relative;
+
+ &-box1 {
+ position: relative;
+
+ margin-top: 100px;
+ // background-color: chocolate;
+ height: 80px;
+ width: 500px;
+ span {
+ font-size: 16pt;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ }
+ }
+
+ &-topic {
+ }
+
+ &-box2 {
+ // background-color: chocolate;
+ height: 80px;
+ width: 500px;
+ p {
+ font-size: 16pt;
+ }
+ }
+ }
}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 672e8a8..95141bd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,17 +3,23 @@