From 0591790b7c792b2af960ad23b4d0663188b26810 Mon Sep 17 00:00:00 2001 From: "k_95.21" Date: Tue, 21 Nov 2023 17:20:37 +0900 Subject: [PATCH 1/2] add about resuponsive design --- .../organisms/styles/About.module.scss | 8 +- .../organisms/styles/News.module.scss | 2 +- .../organisms/styles/Service.module.scss | 102 ++++++++++++++++++ 3 files changed, 106 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/styles/About.module.scss b/src/components/organisms/styles/About.module.scss index 65b873e..84cb0df 100644 --- a/src/components/organisms/styles/About.module.scss +++ b/src/components/organisms/styles/About.module.scss @@ -90,15 +90,14 @@ } } -@media screen and (max-width: 1026px) { +@media screen and (max-width: 1024px) { .about { position: relative; width: 100%; - height: 1300px; + height: 1400px; margin-top: -90px; border-radius: 30px 30px 0 0; background-color: var(--main-red-color); - z-index: -1; .container { width: 90%; max-width: 1900px; @@ -123,7 +122,6 @@ .enTitle { font-size: 55px; line-height: 60px; - margin-top: 30px; font-weight: 700; color: var(--main-white-color); } @@ -155,7 +153,7 @@ .rightBox { width: 100%; .image { - width: 100%; + height: 100%; } } } diff --git a/src/components/organisms/styles/News.module.scss b/src/components/organisms/styles/News.module.scss index 8abd9fd..91bd856 100644 --- a/src/components/organisms/styles/News.module.scss +++ b/src/components/organisms/styles/News.module.scss @@ -99,7 +99,7 @@ width: 90%; height: 100%; margin: 0 auto; - background-color: #0051CB; + background-color: var(--main-red-color); border-radius: 20px; padding: 20px 20px; .subTitle { diff --git a/src/components/organisms/styles/Service.module.scss b/src/components/organisms/styles/Service.module.scss index 23cad0c..6ddab86 100644 --- a/src/components/organisms/styles/Service.module.scss +++ b/src/components/organisms/styles/Service.module.scss @@ -95,4 +95,106 @@ } } } +} + +@media screen and (max-width: 1024px) { + .service { + display: none; + width: 100%; + height: 800px; + .container { + width: 70%; + max-width: 1400px; + margin: 0 auto; + padding: 200px 0px; + box-sizing: border-box; + .flexBox { + display: flex; + justify-content: space-between; + align-items: center; + .leftBox { + position: relative; + width: 600px; + height: 450px; + z-index: 1; + border-radius: 10px; + .image { + height: 100%; + border-radius: 10px; + } + &::after { + position: absolute; + top: 40px; + right: 40px; + content: ''; + width: 600px; + height: 450px; + border-radius: 10px; + background-color: var(--main-red-color); + z-index: -1; + } + } + .rightBox { + text-align: right; + .subTitle { + color: var(--main-red-color); + font-size: 16px; + font-weight: 700; + display: block; + } + .title { + font-size: 70px; + font-weight: 700; + color: var(--main-black-color); + margin-bottom: 30px; + } + .mainText { + display: block; + font-size: 20px; + line-height: 35px; + color: var(--main-black-color); + margin-bottom: 40px; + } + .link { + width: 170px; + height: 60px; + text-decoration: none; + font-size: 16px; + font-weight: 700; + display: flex; + align-items: center; + margin-left: 700px; + .arrow { + display: block; + width: 40px; + height: 40px; + margin-right: 20px; + border-radius: 30px; + text-align: center; + background-color: var(--main-red-color); + // text + font-size:20px; + line-height: 35px; + font-weight: 700; + color: var(--main-white-color); + font-size: 25px; + height: 40px; + line-height: 35px; + font-weight: 700; + color: var(--main-white-color); + } + &:hover { + transform: all 0.5s ease-in-out; + .arrow{ + width: 50px; + height: 50px; + transition: all 0.3s ease-in-out; + line-height: 45px; + } + } + } + } + } + } + } } \ No newline at end of file From 8e51988e44413231724521b19754f118ccc55b41 Mon Sep 17 00:00:00 2001 From: "k_95.21" Date: Tue, 21 Nov 2023 17:29:13 +0900 Subject: [PATCH 2/2] add service responsive desing --- .../organisms/styles/Service.module.scss | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/components/organisms/styles/Service.module.scss b/src/components/organisms/styles/Service.module.scss index 6ddab86..4e5259e 100644 --- a/src/components/organisms/styles/Service.module.scss +++ b/src/components/organisms/styles/Service.module.scss @@ -99,36 +99,35 @@ @media screen and (max-width: 1024px) { .service { - display: none; width: 100%; height: 800px; .container { - width: 70%; + width: 90%; max-width: 1400px; + height: 100%; margin: 0 auto; - padding: 200px 0px; + padding: 100px 0px; box-sizing: border-box; .flexBox { - display: flex; - justify-content: space-between; - align-items: center; + display: block; .leftBox { position: relative; - width: 600px; - height: 450px; + width: 330px; + height: 230px; z-index: 1; border-radius: 10px; + margin: 0 auto; .image { - height: 100%; + width: 100%; border-radius: 10px; } &::after { position: absolute; - top: 40px; - right: 40px; + top: 20px; + right: 20px; content: ''; - width: 600px; - height: 450px; + width: 330px; + height: 230px; border-radius: 10px; background-color: var(--main-red-color); z-index: -1; @@ -136,22 +135,24 @@ } .rightBox { text-align: right; + margin-top: 80px; .subTitle { color: var(--main-red-color); - font-size: 16px; + font-size: 14px; font-weight: 700; display: block; } .title { - font-size: 70px; + font-size: 60px; + line-height: 65px; font-weight: 700; color: var(--main-black-color); margin-bottom: 30px; } .mainText { display: block; - font-size: 20px; - line-height: 35px; + font-size: 14px; + line-height: 26px; color: var(--main-black-color); margin-bottom: 40px; } @@ -163,7 +164,7 @@ font-weight: 700; display: flex; align-items: center; - margin-left: 700px; + margin-left:200px; .arrow { display: block; width: 40px;