mycoms 2024-03-18
240318 김하영
@d4907efa1a9d1ad0f0fc0bbd4b55ef02cda13ddf
resources/css/common.css
--- resources/css/common.css
+++ resources/css/common.css
@@ -439,6 +439,9 @@
 .pd10 {
     padding: 10px;
 }
+.pd15{
+    padding: 15px;
+}
 
 .pd20 {
     padding: 20px;
 
resources/css/layout.css (deleted)
--- resources/css/layout.css
@@ -1,199 +0,0 @@
-@charset "utf-8";
-
-.dashboard-wrap {
-    width: 100%;
-    height: 100vh;
-    display: grid;
-    grid-template-columns: 270px minmax(auto, 1fr);
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-        "header header "
-        "nav  main  "
-        "nav  main  "
-}
-
-.layout-wrap {
-    width: 100%;
-    min-height: 100vh;
-    position: relative;
-
-}
-
-
-header {
-    background-color: #fff;
-    padding: 15px 30px;
-    grid-area: header;
-    position: relative;
-}
-
-.logo {
-    width: 200px;
-}
-
-.logo>a {
-    display: block;
-    width: 100%;
-}
-
-.logo>a>img {
-    display: block;
-    width: 100%;
-}
-
-.user-name {
-    font-size: 1.3rem;
-    margin-left: 5px;
-}
-
-.sms,
-.user {
-    margin-left: 10px;
-}
-
-.layout-wrap header{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-
-
-/* 메뉴 공통 */
-nav {
-    background-color: #213f99;
-    position: relative;
-}
-
-nav ul li a,
-nav ul li p {
-    padding: 5px;
-    display: block;
-    color: #fff;
-}
-
-nav.side-menu ul.sub-menu,
-nav.top-menu ul.sub-menu {
-    font-size: 1.3rem;
-    overflow: hidden;
-    transition: all 0.5s ease-in-out;
-}
-
-ul.sub-menu>li {
-    padding: 10px 20px;
-
-}
-
-p.active {
-    background-color: #fff;
-    color: #213f99;
-    border-radius: 50px
-}
-
-/* 사이드 메뉴 */
-nav.side-menu {
-    width: 100%;
-    height: 100vh;
-    border-radius: 0 70px 70px 0;
-    grid-area: nav;
-    overflow-y: auto;
-}
-
-nav.side-menu::-webkit-scrollbar {
-    display: none;
-}
-
-nav.side-menu::-ms-scrollbar {
-    display: none;
-}
-
-
-nav.side-menu>ul.main-menu {
-    padding: 50px 30px;
-}
-
-nav.side-menu>ul.main-menu>li>div>a,
-nav>ul>li {
-    padding: 10px 0;
-    font-size: 1.3rem;
-    font-weight: bold;
-}
-
-
-
-/* 상단 메뉴 */
-.top-menu{
-    position: absolute;
-    width: 100%;
-    top: 57px;
-    left: 0;
-    z-index: 2;
-}
-.top-menu>ul.main-menu {
-    display: flex;
-    justify-content: center;
-}
-
-.depth1 {
-    cursor: default;
-}
-
-.top-menu>ul>li {
-    /* min-width: 152px; */
-    /* padding: 10px 30px; */
-    text-align: center;
-    position: relative;
-}
-
-.top-menu>ul>li>p {
-    padding: 5px 47px;
-}
-
-.top-menu ul.sub-menu {
-    position: absolute;
-    width: 100%;
-    background-color: #fff;
-    z-index: 4;
-    bottom: 0;
-    left: 0;
-    transform: translateY(100%);
-    transition: max-height 1.8s ease-in-out, opacity 1.3s ease-in-out;
-}
-
-.top-menu ul.sub-menu li a {
-    text-align: center;
-    color: #213f99;
-}
-
-.navbg {
-    overflow: hidden;
-    background-color: #fff;
-    border-bottom: 2px solid #213f99;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    transform: translateY(100%);
-    width: 100%;
-    z-index: 3;
-    transition: height 0.6s ease-in-out;
-}
-
-
-
-/* 메인 */
-.main {
-    padding: 20px;
-    height: 100vh;
-    grid-area: main;
-}
-
-.layout-wrap .main {
-    padding: 123px 20px 20px;
-}
-
-.login{
-    width: 100%;
-    height: 100vh;
-}(No newline at end of file)
resources/css/reset.css
--- resources/css/reset.css
+++ resources/css/reset.css
@@ -17,7 +17,7 @@
 }
 
 body {
-    min-width: 1356px;
+    min-width: 1200px;
     background-color: #f7f6fb;
 }
 
resources/css/style.css
--- resources/css/style.css
+++ resources/css/style.css
@@ -1,480 +1,1 @@
 @charset "utf-8";
-
-/* page 추가 */
-/* 작업관리 페이지*/
-.node-zone {
-    /* height: calc(100% - 61px); */
-    margin-bottom: 10px;
-    background-color: #fff;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.text-over {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.state span {
-    font-size: 1.3rem;
-}
-
-.vue-flow__panel button {
-    margin-left: 0;
-}
-
-/* 파일관리 페이지*/
-.file-zone {
-    height: calc(100% - 55px);
-}
-
-.tree-wrap {
-    height: 100%;
-    overflow: auto;
-}
-
-.file-table th {
-    position: sticky;
-    top: 0;
-}
-
-.file-table tr .icon-btn {
-    opacity: 0;
-}
-
-.file-table tr:hover,
-.file-table tr:nth-child(even):hover {
-    background-color: var(--color-light-orange);
-}
-
-.file-table tr:hover .icon-btn {
-    opacity: 1;
-    transition: all 0.5s ease-in-out;
-}
-
-
-/* 데이터활용관리 */
-.gall-list li {
-    padding: 0 10px;
-    max-width: 24%;
-}
-
-.gall-list li>div {
-    min-height: 274px;
-    padding: 10px;
-    box-shadow: 0 0 5px #aaa;
-}
-
-.gall-list li>div a {
-    display: block;
-    width: 100%;
-}
-
-.gall-list li>div a .gall-img {
-    width: 100%;
-    height: 200px;
-    text-align: center;
-    overflow: hidden;
-    margin-bottom: 10px;
-}
-
-.gall-list li>div a .gall-img img {
-    width: 100%;
-    height: 100%;
-}
-
-.gall-list li>div a .gall-title {
-    font-size: 1.6rem;
-    font-weight: 800;
-    margin-bottom: 10px;
-}
-
-.gall-info {
-    width: 100%;
-}
-
-.gall-list li>div a .gall-detail {
-    font-size: 1.3rem;
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: break-all;
-}
-
-.custom-info {
-    position: absolute;
-    width: calc(100% - 0px);
-    z-index: 1;
-}
-
-.layout-option,
-.layout{
-    padding: 15px 0;
-    height: 100%;
-}
-
-.custom-info details summary,
-.component-zone details summary,
-.chart-zone details summary {
-    font-size: 1.6rem;
-    padding: 15px;
-    border: 1px solid #213f99;
-    background-color: rgb(243, 246, 255);
-    border-radius: 5px;
-    position: relative;
-}
-
-.component-zone details summary,
-.chart-zone details summary {
-    border: 1px solid var(--color-orange);
-    background-color: rgb(255, 249, 239);
-    color: var(--color-orange);
-}
-
-.custom-info details[open] summary,
-.component-zone details[open] summary,
-.chart-zone details[open] summary {
-    border-radius: 5px 5px 0 0;
-}
-
-
-.custom-info .info-zone {
-    border: 1px solid #eee;
-    border-radius: 0 0 5px 5px;
-    padding: 15px;
-    background-color: #fff;
-}
-
-.data-list {
-    height: 100px;
-    overflow-y: auto;
-    background-color: #f8f8f8;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-.tab-zone{
-    position: relative;
-}
-
-.tab-zone,
-.preview-zone {
-    height: 100%;
-}
-
-.column-item {
-    width: 100%;
-    font-size: 1.3rem;
-    text-align: center;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid var(--color-orange);
-    background-color: rgb(255, 249, 239);
-    color: var(--color-orange);
-    margin-bottom: 10px;
-}
-
-.column-item:last-child {
-    margin-bottom: 0;
-}
-
-.component-content {
-    padding: 10px;
-
-}
-
-.layout-content>li,
-.component-content>li {
-    margin-top: 10px;
-    margin-right: 10px;
-}
-
-.layout-content>li:nth-child(3n),
-.component-content>li:nth-child(3n) {
-    margin-right: 0px;
-}
-
-.icon-content {
-    margin-left: 10px;
-    font-size: 1.3rem;
-}
-
-.component-wrap {
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    border-radius: 5px;
-    background-color: #f8f8f8;
-}
-
-input[type="text"].com-dbZone {
-    margin-left: 0;
-}
-
-.db-input {
-    height: 100%;
-}
-
-.active-layout .vertical-icon,
-.active-layout .horizental-icon {
-    background-color: var(--color-blueE);
-    border: 3px solid var(--color-blue);
-}
-
-.active-layout .horizental-icon>span,
-.active-layout .vertical-icon>span {
-    border: 3px solid var(--color-blue);
-}
-
-.component-content li img {
-    width: 100%;
-}
-
-.page-info > .info-area,
-.layout-tree ul{
-    height: calc(100% - 40px);
-    overflow-y: auto;
-}
-
-.layout-option{
-    background-color:var(--color-skyBlue);
-
-}
-.layout-option > div:nth-child(2){
-    overflow-y: auto;
-}
-
-.section-title{
-    font-size: 1.4rem;
-    position: relative;
-}
-
-.section-title::before{
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 50%;
-    background-color: var(--color-orange);
-    left: 0;
-    bottom: 0;
-    opacity: 0.2;
-}
-
-.detail-content{
-    background-color: var(--color-white);
-    border: 1px solid var(--color-blue);
-    border-radius: 0 0 5px 5px;
-    border-top: 0;
-}
-
-.tab-box{
-    border: 1px solid #eee;
-    border-radius: 0 5px 0 0;
-}
-
-.attribute-modal{
-    position: absolute;
-    min-width: 120px;
-    max-width: 200px;
-    bottom: 0;
-    left: 0;
-    background-color: var(--color-white);
-    transform: translateY(100%);
-    border: 1px solid #ddd;
-}
-
-.attribute-modal > ul>li{
-    padding: 8px 5px;
-    border-top: 1px solid #eee;
-}
-
-.attribute-modal > ul>li:first-child{
-    border-top: 0;
-}
-
-.attribute-modal > ul>li svg,
-.attribute-modal > ul>li p{
-    color: var(--color-darkG);
-}
-
-.attribute-modal > ul>li:hover svg,
-.attribute-modal > ul>li:hover p{
-    color: var(--color-blue);
-}
-
-.editor-box{
-    background-color: var(--color-skyBlue);
-    border: 1px dashed var(--color-blue);
-}
-
-
-
-/* 알람 */
-
-.speaker {
-    text-align: center;
-    margin-bottom: 10px;
-}
-
-.speaker>span {
-    display: inline-block;
-    background-color: #eee;
-}
-
-.speaker>span:nth-of-type(1) {
-    width: 10px;
-    height: 10px;
-    border-radius: 10px;
-}
-
-.speaker>span:nth-of-type(2) {
-    width: 60px;
-    height: 10px;
-    border-radius: 10px;
-    margin-left: 10px;
-}
-
-.text-areaZone {
-    height: calc(50% - 22px);
-    margin-bottom: 10px;
-}
-
-.user-list {
-    width: 100%;
-    height: calc(100% - 50% - 22px);
-}
-
-.user-list .user-title {
-    font-size: 1.6rem;
-    font-weight: 800;
-    color: var(--color-blue);
-    margin-bottom: 10px;
-}
-
-.user-list>ul {
-    padding: 10px;
-    height: calc(100% - 29px);
-    overflow-y: auto;
-    border-top: 1px solid #eee;
-}
-
-.user-list>ul>li {
-    padding: 5px 10px;
-    margin-bottom: 10px;
-    border: 1px solid var(--color-orange);
-    background-color: rgb(255, 249, 239);
-    color: var(--color-orange);
-    border-radius: 5px;
-    font-size: 1.3rem;
-}
-
-.user-list>ul>li:last-child {
-    margin-bottom: 0;
-}
-
-.user-zone,
-.log-zone {
-    height: 100vh;
-}
-
-.all-user,
-.check-user {
-    height: 100vh;
-    border: 1px solid #eee;
-}
-
-.log-content {
-    height: 99%;
-    background-color: var(--color-blueE);
-    padding: 10px 10px 10px 25px;
-    overflow-y: auto;
-}
-
-.log-content li {
-    font-size: 1.3rem;
-    color: var(--color-blue);
-    list-style: disc;
-    padding: 5px;
-}
-
-.push-text {
-    padding: 10px;
-    font-family: 'Pretendard';
-    font-size: 15px;
-}
-
-
-/* 요소옵션 추가 240216 김하영 */
-.optionBox {
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    padding: 2rem;
-    background-color: #f9f9f9;
-
-}
-
-.optionBoxText {
-    font-size: 1.5rem;
-    color: #213f99;
-    font-family: 'Pretendard';
-    font-weight: 600;
-}
-
-.selectBoxArea select {
-    border: 0px;
-    background-color: white;
-}
-
-.optionBox {
-    font-size: 1.5rem;
-}
-
-.optionSubText {
-    text-align: center;
-}
-
-.optionSubBox {
-    background-color: white;
-    padding: 10px;
-    border-radius: 5px;
-    overflow-y: scroll;
-    height: 225px;
-}
-
-.optionSubBox li {
-    margin-bottom: 10px;
-}
-
-.cyberpunk-checkbox {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--color-blue);
-    border-radius: 5px;
-    background-color: transparent;
-    display: inline-block;
-    position: relative;
-    margin-right: 10px;
-    cursor: pointer;
-}
-
-.cyberpunk-checkbox:before {
-    content: "";
-    background-color: var(--color-blue);
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    width: 10px;
-    height: 10px;
-    border-radius: 3px;
-    transition: all 0.3s ease-in-out;
-}
-
-.cyberpunk-checkbox:checked:before {
-    transform: translate(-50%, -50%) scale(1);
-}
 
resources/img/common/DATA.png (Binary) (added)
+++ resources/img/common/DATA.png
Binary file is not shown
 
resources/img/common/healthCare.png (Binary) (added)
+++ resources/img/common/healthCare.png
Binary file is not shown
 
resources/img/common/main.png (Binary) (added)
+++ resources/img/common/main.png
Binary file is not shown
 
resources/img/common/mobility.png (Binary) (added)
+++ resources/img/common/mobility.png
Binary file is not shown
 
resources/img/common/smartCity.png (Binary) (added)
+++ resources/img/common/smartCity.png
Binary file is not shown
 
resources/img/common/smartFactory.png (Binary) (added)
+++ resources/img/common/smartFactory.png
Binary file is not shown
 
resources/img/component/logo-w.png (Binary) (added)
+++ resources/img/component/logo-w.png
Binary file is not shown
 
views/layout/Header.html (added)
+++ views/layout/Header.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- 헤더 -->
+<body>
+    <div class="header">
+        <div class="header-area flex justify-between align-center">
+            <img src="../../resources/img/component/logo-w.png" alt="">
+            <nav>
+                <ul>
+                    <li><a href="">About Us</a></li>
+                    <li><a href="">Business</a></li>
+                    <li><a href="">Solution</a></li>
+                    <li><a href="">Portfolio</a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</body>
+<style>
+    #header {
+        background-color: #213F99;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+    .header-area{
+        width: 1200px;
+        margin: 0 auto;
+        padding: 20px 0 15px 0;
+    }
+   
+
+    nav ul li{
+        margin-left: 140px;
+        display: inline-block;
+    }
+
+    nav ul li a{
+        color: white;
+        font-size: 1.5rem;
+    }
+</style>
+
+</html>(No newline at end of file)
views/main.html
--- views/main.html
+++ views/main.html
@@ -5,14 +5,323 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
-
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
+    <link rel="stylesheet" href="../../resources/css/font.css">
+    <link rel="stylesheet" href="../../resources/css/reset.css">
+    <link rel="stylesheet" href="../../resources/css/style.css">
+    <link rel="stylesheet" href="../../resources/css/component.css">
+    <link rel="stylesheet" href="../../resources/css/common.css">
+    <link rel="stylesheet" href="../../resources/css/responsive.css">
     <title>TAKENSOFT</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
-
 </head>
 
 <body>
+    <div id="header"></div>
+    <!-- Swiper -->
+    <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide">
+                <div class="slide-wrap">
+                    <div class="main-wrap">
+                        <div class="text-area flex align-end">
+                            <h2>우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="slide-wrap ">
+                    <div class="text-area slide-section">
+                        <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
+                                class="text-event">혁신으로 선도</span>합니다.</p>
+                        <p>테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="slide-wrap slide-solution">
+                    <div class="text-area ">
+                        <div style="width: 100%;" class="mb70">
+                            <p class=" solution-text pb30">테이큰 소프트는 ...</p>
+                            <p>AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
+                                스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
+                            </p>
+                        </div>
+                        <div class="flex solution-box pd15">
+                            <div class="pink-box flex-column">
+                                <img src="../resources/img/common/DATA.png" alt="">
+                                <div>
+                                    <p>데이터관리분야</p>
+                                    <p>데이터 관리 솔루현 Taken BI Manager</p>
+                                </div>
+                            </div>
+                            <div class="yellow-box flex-column">
+                                <img src="../resources/img/common/smartCity.png" alt="">
+                                <div>
+                                    <p>스마트시티 분야</p>
+                                    <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
+                                </div>
+                            </div>
+                            <div class="blue-box flex-column">
+                                <img src="../resources/img/common/mobility.png" alt="">
+                                <div>
+                                    <p>모빌리티 분야</p>
+                                    <p>AI 기반의 스마트 객체인식을 위한 CCTY</p>
+                                </div>
+                            </div>
+                            <div class="purple-box flex-column">
+                                <img src="../resources/img/common/smartFactory.png" alt="">
+                                <div>
+                                    <p>스마트팩토리 분야</p>
+                                    <p>제조기업 공정 관리 모니터링 서비스</p>
+                                </div>
+                            </div>
+                            <div class="ivory-box flex-column">
+                                <img src="../resources/img/common/healthCare.png" alt="">
+                                <div>
+                                    <p>헬스케어 분야</p>
+                                    <p>시니어 스마트 케어 모니터링 플랫폼</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="slide-wrap">
+                    <p>POTRFOLIO</p>
+
+                </div>
+            </div>
+
+        </div>
+        <div class="swiper-pagination"></div>
+    </div>
+    <div id="footer" style="border: 0px;"></div>
+
+
+
 
 </body>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+<script>
+
+    var swiper = new Swiper(".mySwiper", {
+        direction: "vertical",
+        slidesPerView: 1,
+        spaceBetween: 30,
+        mousewheel: true,
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+        }, on: {
+            reachEnd: function () {
+                swiper.mousewheel.disable();
+                $("#footer").show();
+            }
+        }
+    });
+
+    window.addEventListener('wheel', function (event) {
+        if (event.deltaY < 1) {
+            swiper.mousewheel.enable();
+        } else if (event.deltaY > 1) {
+        }
+    });
+
+    // 헤더,푸터 불러오기
+    $(function () {
+        $("#header").load("layout/header.html");
+        $("#footer").load("layout/footer.html");
+        $("#footer").hide();
+    });
+
+</script>
+
+
+
+<style scoped>
+    html,
+    body {
+        position: relative;
+        height: 100%;
+        -ms-overflow-style: none;
+
+    }
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    body {
+        background: #eee;
+        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        color: #000;
+        margin: 0;
+        padding: 0;
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .swiper-slide img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    #header {
+        position: fixed;
+        top: 0;
+        z-index: 1;
+    }
+
+    .slide-wrap {
+        width: 100%;
+        height: 100%;
+        padding: 59px 0 0 0;
+    }
+
+    .main-wrap {
+        background: url(../resources/img/common/main.png) no-repeat;
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+        background-position: bottom;
+    }
+
+    .text-area {
+        width: 1200px;
+        height: 100%;
+        margin: auto;
+        text-align: center;
+
+    }
+
+    .main-wrap .text-area h2 {
+        padding-bottom: 150px;
+        text-align: left;
+        font-size: 6rem;
+        font-weight: 600;
+        color: white;
+        font-family: 'Pretendard';
+
+    }
+
+    .main-wrap .text-area h2 span {
+        font-weight: 900;
+    }
+
+    .slide-section {
+        padding-top: 330px;
+    }
+
+    .text-main {
+        font-weight: 600;
+        color: #213f99;
+        font-family: 'Pretendard';
+        font-size: 5rem;
+
+    }
+
+    .text-main span {
+        color: #f29600;
+        font-weight: 900;
+
+    }
+
+    .text-event {
+        position: relative;
+        z-index: 3;
+    }
+
+    .text-event::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 20px;
+        background-color: #fce5bf;
+        z-index: -1;
+    }
+
+    .slide-solution {
+        padding-top: 235px;
+        font-family: 'Pretendard';
+
+    }
+
+
+
+    .solution-text {
+        font-size: 4.5rem;
+        font-weight: 900;
+
+    }
+
+    .solution-box {
+        flex-wrap: nowrap;
+        gap: 40px;
+        width: 100%;
+        
+    }
+    .pink-box{
+        width: 200px;
+        padding: 15px;
+        height: 320px;
+        background-color: #ffe2e4;
+        border-radius: 20px;
+     
+    }
+    .pink-box img , .blue-box img , .yellow-box img ,.purple-box img,.ivory-box img{
+        object-fit: contain;
+     }
+    .yellow-box{
+        width: 200px;
+        height: 320px;
+        padding: 15px;
+        background-color: #f9f9e9;
+        border-radius: 20px;
+    }
+    
+    .blue-box{
+        width: 200px;
+        height: 320px;
+        padding: 15px;
+        background-color: #d2e9ff;
+        border-radius: 20px;
+    }
+   
+     .purple-box{
+        width: 200px;
+        height: 320px;
+        padding: 15px;
+        background-color: #e9ebff;
+        border-radius: 20px;
+     }
+     .ivory-box{
+        width: 200px;
+        height: 320px;
+        padding: 15px;
+        background-color: #f8f9fa;
+        border-radius: 20px;
+     }
+</style>
 
 </html>
(No newline at end of file)
Add a comment
List