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 + +
+
+ Data +
+
+ AR +
-
+
Quick wins
-
- Long-Term Project +
+ Long-Term +
+ Project