diff --git a/sesame-vitejs/sesame/img/arrow.svg b/sesame-vitejs/sesame/img/arrow.svg
new file mode 100644
index 0000000..e27d2a0
--- /dev/null
+++ b/sesame-vitejs/sesame/img/arrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/sesame-vitejs/sesame/img/phone_shoe.png b/sesame-vitejs/sesame/img/phone_shoe.png
new file mode 100644
index 0000000..9ccc792
Binary files /dev/null and b/sesame-vitejs/sesame/img/phone_shoe.png differ
diff --git a/sesame-vitejs/sesame/src/assets/styles/0-general.scss b/sesame-vitejs/sesame/src/assets/styles/0-general.scss
index e9b7999..02239e9 100644
--- a/sesame-vitejs/sesame/src/assets/styles/0-general.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/0-general.scss
@@ -14,7 +14,7 @@ main {
height: 100vh;
min-height: 100vh;
width: 100vw;
- position: absolute;
+ //position: absolute;
h2 {
color: #fffdfc;
@@ -41,7 +41,7 @@ main {
}
#sprint_4 {
- background: #ccc;
+ background: #333;
}
.primary-color{
diff --git a/sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss b/sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss
index 00ca3b5..aac2b1b 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss
@@ -1,9 +1,16 @@
#we_develop {
- background: blue;
- min-height: 2000px;
- min-width: 2000px;
+ height: 100vh;
+ width: 100vw;
+ display: block;
+ position: relative;
+ background: url("img/line.png") fixed center no-repeat;
+ background-color: #fff;
+
+ text-align: center;
.title {
+ padding-top: 4rem;
+ padding-bottom: 2rem;
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
@@ -11,14 +18,15 @@
line-height: 110%;
text-align: center;
letter-spacing: -0.04em;
-
+ max-width: 54rem;
+ margin: 0 auto;
}
.description {
}
- .asides {
+ .quick, .long_term {
font-family: 'GT Walsheim';
font-style: normal;
font-weight: 700;
@@ -26,19 +34,105 @@
line-height: 150%;
}
+ .quick {
+
+ position: absolute;
+ left: 104px;
+ top: 690px;
+ }
+
+ .long_term {
+ font-family: 'GT Walsheim';
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 150%;
+ text-align: right;
+ margin-right: 6rem;
+ margin-top: -40rem;
+ }
+
.light-text {
+ margin-top: -20rem;
+
font-family: 'GT Walsheim Pro';
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 100%;
-
text-align: center;
letter-spacing: -0.04em;
-
color: #B62F22;
-
opacity: 0.2;
filter: blur(2px);
}
+
+ .phone-container-2 {
+ margin: 0 auto;
+ background: blue;
+ min-height: 700px;
+ padding: 70px 0;
+ width: 450px;
+ background: rgba(99, 49, 27, 0.2);
+ backdrop-filter: blur(5px);
+ border-radius: 70px;
+ z-index: 20;
+ }
+
+ .picture {
+ margin-left: 5px;
+ height: 820px;
+ width: 438px;
+ background: url("img/phone_shoe.png");
+ background-size: contain;
+ overflow: hidden;
+ }
+
+
+ .line {
+ background: url("img/line.png");
+ position: absolute;
+ width: 100vw;
+ height: 50vh;
+ left: 0;
+ top: 15rem;
+ z-index: -1;
+ float: left;
+ background-size: contain;
+ }
+
+ .container-arrows {
+ margin: 0 auto;
+ width: 30rem;
+
+ img {
+ margin-top: 1.25rem;
+ }
+ }
+
+ .circle {
+ border: solid 2px $secondary-color;
+ border-radius: 100%;
+ height: 4rem;
+ width: 4rem;
+ position: absolute;
+ top: 50vh;
+ left: 28vw;
+ }
+
+ .circle-right {
+ left: auto;
+ right: 28vw;
+ }
+
+ .arrow-right-2 {
+ position: absolute;
+ left: auto;
+ right: 28vw;
+ }
+
+ .rotated {
+ transform: rotate(180deg);
+
+ }
+
}
diff --git a/sesame-vitejs/sesame/src/assets/styles/main.scss b/sesame-vitejs/sesame/src/assets/styles/main.scss
index 72bb9a5..48fc568 100644
--- a/sesame-vitejs/sesame/src/assets/styles/main.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/main.scss
@@ -10,7 +10,7 @@ libs
custom
*/
@import "./0-variables.scss";
-@import "0-general";
+@import "0-general.scss";
@import "./0-1-nav.css";
@import "./1-cover.css";
@import "./1-2-main_title.css";
diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index c982859..00fdf7d 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -4,29 +4,49 @@
+
hello
We develop custom-made innovative e-commerce features based on your
brand stakes.
-
+
-
-
-
- Data
+
+
+
+
+
+
+
-
- AR
+
+
-
+
Quick wins
-
- Long-Term Project
+
+ Long-Term
+
+ Project