Commit 0ad3ed4de81376279db1fcfe6b744a60c4821197
1 parent
97338adf3d
Exists in
admin
adin panel changes
Showing
8 changed files
with
865 additions
and
554 deletions
Show diff stats
config/dev.env.js
| 1 | 'use strict' | 1 | 'use strict' |
| 2 | const merge = require('webpack-merge') | 2 | const merge = require('webpack-merge') |
| 3 | const prodEnv = require('./prod.env') | 3 | const prodEnv = require('./prod.env') |
| 4 | 4 | ||
| 5 | module.exports = merge(prodEnv, { | 5 | module.exports = merge(prodEnv, { |
| 6 | NODE_ENV: '"development"', | 6 | NODE_ENV: '"development"', |
| 7 | // APIurl: '"https://cors-anywhere.herokuapp.com/https://www.gigsfor.me/_functions"', | 7 | // APIurl: '"https://cors-anywhere.herokuapp.com/https://www.gigsfor.me/_functions"', |
| 8 | // APIurl: '"https://stg-api.gigsfor.me/api"', | 8 | // APIurl: '"https://stg-api.gigsfor.me/api"', |
| 9 | APIurl: '"https://stg-api.gigsfor.me/api"', | 9 | APIurl: '"https://stg-api.gigsfor.me/api"', |
| 10 | siteUrl: '"http://localhost:8080"', | 10 | siteUrl: '"http://localhost:8081"', |
| 11 | imageUrl: '"https://stg-api.gigsfor.me/"', | 11 | imageUrl: '"https://stg-api.gigsfor.me/"', |
| 12 | fileUploadKey: '"AYqgvDoo4RyBC0STV6og2z"', | 12 | fileUploadKey: '"AYqgvDoo4RyBC0STV6og2z"', |
| 13 | landbotUrl: '"https://landbot.io/u/H-347617-SIJESECF8DSSQ06L/index.html"', | 13 | landbotUrl: '"https://landbot.io/u/H-347617-SIJESECF8DSSQ06L/index.html"', |
| 14 | courseId1: '"5e4b77e8f77376502a616cd2"', | 14 | courseId1: '"5e4b77e8f77376502a616cd2"', |
| 15 | courseId2: '"5e4b77f5f77376502a616cd9"', | 15 | courseId2: '"5e4b77f5f77376502a616cd9"', |
| 16 | courseId3: '"5e4b76155d6509dfec06e109"' | 16 | courseId3: '"5e4b76155d6509dfec06e109"' |
| 17 | }) | 17 | }) |
config/index.js
| 1 | 'use strict' | 1 | 'use strict' |
| 2 | // Template version: 1.3.1 | 2 | // Template version: 1.3.1 |
| 3 | // see http://vuejs-templates.github.io/webpack for documentation. | 3 | // see http://vuejs-templates.github.io/webpack for documentation. |
| 4 | 4 | ||
| 5 | const path = require('path') | 5 | const path = require('path') |
| 6 | 6 | ||
| 7 | module.exports = { | 7 | module.exports = { |
| 8 | dev: { | 8 | dev: { |
| 9 | 9 | ||
| 10 | // Paths | 10 | // Paths |
| 11 | assetsSubDirectory: 'static', | 11 | assetsSubDirectory: 'static', |
| 12 | assetsPublicPath: '/', | 12 | assetsPublicPath: '/', |
| 13 | proxyTable: {}, | 13 | proxyTable: {}, |
| 14 | 14 | ||
| 15 | // Various Dev Server settings | 15 | // Various Dev Server settings |
| 16 | host: 'localhost', // can be overwritten by process.env.HOST | 16 | host: 'localhost', // can be overwritten by process.env.HOST |
| 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined | 17 | port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined |
| 18 | autoOpenBrowser: false, | 18 | autoOpenBrowser: false, |
| 19 | errorOverlay: true, | 19 | errorOverlay: true, |
| 20 | notifyOnErrors: true, | 20 | notifyOnErrors: true, |
| 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- | 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- |
| 22 | 22 | ||
| 23 | // Use Eslint Loader? | 23 | // Use Eslint Loader? |
| 24 | // If true, your code will be linted during bundling and | 24 | // If true, your code will be linted during bundling and |
| 25 | // linting errors and warnings will be shown in the console. | 25 | // linting errors and warnings will be shown in the console. |
| 26 | useEslint: false, | 26 | useEslint: false, |
| 27 | // If true, eslint errors and warnings will also be shown in the error overlay | 27 | // If true, eslint errors and warnings will also be shown in the error overlay |
| 28 | // in the browser. | 28 | // in the browser. |
| 29 | showEslintErrorsInOverlay: false, | 29 | showEslintErrorsInOverlay: false, |
| 30 | 30 | ||
| 31 | /** | 31 | /** |
| 32 | * Source Maps | 32 | * Source Maps |
| 33 | */ | 33 | */ |
| 34 | 34 | ||
| 35 | // https://webpack.js.org/configuration/devtool/#development | 35 | // https://webpack.js.org/configuration/devtool/#development |
| 36 | devtool: 'cheap-module-eval-source-map', | 36 | devtool: 'cheap-module-eval-source-map', |
| 37 | 37 | ||
| 38 | // If you have problems debugging vue-files in devtools, | 38 | // If you have problems debugging vue-files in devtools, |
| 39 | // set this to false - it *may* help | 39 | // set this to false - it *may* help |
| 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting | 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting |
| 41 | cacheBusting: true, | 41 | cacheBusting: true, |
| 42 | 42 | ||
| 43 | cssSourceMap: true | 43 | cssSourceMap: true |
| 44 | }, | 44 | }, |
| 45 | 45 | ||
| 46 | build: { | 46 | build: { |
| 47 | // Template for index.html | 47 | // Template for index.html |
| 48 | index: path.resolve(__dirname, '../dist/index.html'), | 48 | index: path.resolve(__dirname, '../dist/index.html'), |
| 49 | 49 | ||
| 50 | // Paths | 50 | // Paths |
| 51 | assetsRoot: path.resolve(__dirname, '../dist'), | 51 | assetsRoot: path.resolve(__dirname, '../dist'), |
| 52 | assetsSubDirectory: 'static', | 52 | assetsSubDirectory: 'static', |
| 53 | assetsPublicPath: '/', | 53 | assetsPublicPath: '/', |
| 54 | 54 | ||
| 55 | /** | 55 | /** |
| 56 | * Source Maps | 56 | * Source Maps |
| 57 | */ | 57 | */ |
| 58 | 58 | ||
| 59 | productionSourceMap: true, | 59 | productionSourceMap: true, |
| 60 | // https://webpack.js.org/configuration/devtool/#production | 60 | // https://webpack.js.org/configuration/devtool/#production |
| 61 | devtool: '#source-map', | 61 | devtool: '#source-map', |
| 62 | 62 | ||
| 63 | // Gzip off by default as many popular static hosts such as | 63 | // Gzip off by default as many popular static hosts such as |
| 64 | // Surge or Netlify already gzip all static assets for you. | 64 | // Surge or Netlify already gzip all static assets for you. |
| 65 | // Before setting to `true`, make sure to: | 65 | // Before setting to `true`, make sure to: |
| 66 | // npm install --save-dev compression-webpack-plugin | 66 | // npm install --save-dev compression-webpack-plugin |
| 67 | productionGzip: false, | 67 | productionGzip: false, |
| 68 | productionGzipExtensions: ['js', 'css'], | 68 | productionGzipExtensions: ['js', 'css'], |
| 69 | 69 | ||
| 70 | // Run the build command with an extra argument to | 70 | // Run the build command with an extra argument to |
| 71 | // View the bundle analyzer report after build finishes: | 71 | // View the bundle analyzer report after build finishes: |
| 72 | // `npm run build --report` | 72 | // `npm run build --report` |
| 73 | // Set to `true` or `false` to always turn it on or off | 73 | // Set to `true` or `false` to always turn it on or off |
| 74 | bundleAnalyzerReport: process.env.npm_config_report | 74 | bundleAnalyzerReport: process.env.npm_config_report |
| 75 | } | 75 | } |
| 76 | } | 76 | } |
| 77 | 77 |
src.zip
No preview for this file type
src/assets/css/custom.css
| 1 | html, | 1 | html, |
| 2 | body { | 2 | body { |
| 3 | height: 100%; | 3 | height: 100%; |
| 4 | } | 4 | } |
| 5 | 5 | ||
| 6 | body { | 6 | body { |
| 7 | display: -ms-flexbox; | 7 | display: -ms-flexbox; |
| 8 | display: flex; | 8 | display: flex; |
| 9 | -ms-flex-align: center; | 9 | -ms-flex-align: center; |
| 10 | align-items: center; | 10 | align-items: center; |
| 11 | padding-top: 0px; | 11 | padding-top: 0px; |
| 12 | padding-bottom: 0px; | 12 | padding-bottom: 0px; |
| 13 | background-color:#DFE7EF; | 13 | background-color:#DFE7EF; |
| 14 | } | 14 | } |
| 15 | #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} | 15 | #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} |
| 16 | /* heading */ | 16 | /* heading */ |
| 17 | h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} | 17 | h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} |
| 18 | 18 | ||
| 19 | /* spaces */ | 19 | /* spaces */ |
| 20 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } | 20 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } |
| 21 | 21 | ||
| 22 | 22 | ||
| 23 | .h-100{height: 100%;} | 23 | .h-100{height: 100%;} |
| 24 | .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; | 24 | .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; |
| 25 | background-size: 45%;} | 25 | background-size: 45%;} |
| 26 | /* navbar */ | 26 | /* navbar */ |
| 27 | .spotLight-nav{ padding-top: 20px; z-index: 5;} | 27 | .spotLight-nav{ padding-top: 20px; z-index: 5;} |
| 28 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; | 28 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; |
| 29 | font-size: 16px; | 29 | font-size: 16px; |
| 30 | font-style: normal; | 30 | font-style: normal; |
| 31 | font-weight: 400; | 31 | font-weight: 400; |
| 32 | line-height: 22px; | 32 | line-height: 22px; |
| 33 | letter-spacing: -0.7470597624778748px; | 33 | letter-spacing: -0.7470597624778748px; |
| 34 | text-align: left; color:#000; opacity: 0.6; | 34 | text-align: left; color:#000; opacity: 0.6; |
| 35 | } | 35 | } |
| 36 | .spotLight-nav li {margin-right: 14px;} | 36 | .spotLight-nav li {margin-right: 14px;} |
| 37 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} | 37 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} |
| 38 | .spotLight-nav li.spotLight-img a{opacity: 1;} | 38 | .spotLight-nav li.spotLight-img a{opacity: 1;} |
| 39 | .navbar-brand{ margin-right: 57px;} | 39 | .navbar-brand{ margin-right: 57px;} |
| 40 | 40 | ||
| 41 | /* ul list style */ | 41 | /* ul list style */ |
| 42 | .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; | 42 | .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; |
| 43 | font-size: 20px; | 43 | font-size: 20px; |
| 44 | font-style: normal; | 44 | font-style: normal; |
| 45 | font-weight: 500; | 45 | font-weight: 500; |
| 46 | line-height: 24px; float: left; margin-top: 24px; } | 46 | line-height: 24px; float: left; margin-top: 24px; } |
| 47 | .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} | 47 | .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} |
| 48 | .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} | 48 | .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} |
| 49 | .sign-in-up-list li span{ float: left;} | 49 | .sign-in-up-list li span{ float: left;} |
| 50 | /* form */ | 50 | /* form */ |
| 51 | .form-layout{ width: 100%; display: block; float: left;} | 51 | .form-layout{ width: 100%; display: block; float: left;} |
| 52 | .form-layout form{ display:block; float: left; width: 100%;} | 52 | .form-layout form{ display:block; float: left; width: 100%;} |
| 53 | .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | 53 | .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} |
| 54 | .form-layout .social-login{ display: block; width: 339px; | 54 | .form-layout .social-login{ display: block; width: 339px; |
| 55 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } | 55 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } |
| 56 | .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} | 56 | .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} |
| 57 | .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} | 57 | .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} |
| 58 | .form-layout .social-login ul li:nth-child(2){margin:0 37px;} | 58 | .form-layout .social-login ul li:nth-child(2){margin:0 37px;} |
| 59 | .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} | 59 | .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} |
| 60 | 60 | ||
| 61 | form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; | 61 | form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; |
| 62 | 62 | ||
| 63 | font-family: 'Montserrat', sans-serif; | 63 | font-family: 'Montserrat', sans-serif; |
| 64 | font-size: 13px; | 64 | font-size: 13px; |
| 65 | font-style: normal; | 65 | font-style: normal; |
| 66 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} | 66 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} |
| 67 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} | 67 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} |
| 68 | 68 | ||
| 69 | /* placeholder */ | 69 | /* placeholder */ |
| 70 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ | 70 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ |
| 71 | line-height: 18px; | 71 | line-height: 18px; |
| 72 | color: #000000; | 72 | color: #000000; |
| 73 | opacity: 0.5; | 73 | opacity: 0.5; |
| 74 | font-family: 'Montserrat', sans-serif; | 74 | font-family: 'Montserrat', sans-serif; |
| 75 | font-size: 13px; | 75 | font-size: 13px; |
| 76 | font-style: normal; | 76 | font-style: normal; |
| 77 | font-weight: 600; | 77 | font-weight: 600; |
| 78 | } | 78 | } |
| 79 | 79 | ||
| 80 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 80 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 81 | line-height: 18px; | 81 | line-height: 18px; |
| 82 | color: #000000; | 82 | color: #000000; |
| 83 | opacity: 0.5; | 83 | opacity: 0.5; |
| 84 | font-family: 'Montserrat', sans-serif; | 84 | font-family: 'Montserrat', sans-serif; |
| 85 | font-size: 13px; | 85 | font-size: 13px; |
| 86 | font-style: normal; | 86 | font-style: normal; |
| 87 | font-weight: 600; | 87 | font-weight: 600; |
| 88 | } | 88 | } |
| 89 | 89 | ||
| 90 | form input::-ms-input-placeholder { /* Microsoft Edge */ | 90 | form input::-ms-input-placeholder { /* Microsoft Edge */ |
| 91 | line-height: 18px; | 91 | line-height: 18px; |
| 92 | color: #000000; | 92 | color: #000000; |
| 93 | opacity: 0.5; | 93 | opacity: 0.5; |
| 94 | font-family: 'Montserrat', sans-serif; | 94 | font-family: 'Montserrat', sans-serif; |
| 95 | font-size: 13px; | 95 | font-size: 13px; |
| 96 | font-style: normal; | 96 | font-style: normal; |
| 97 | font-weight: 600; | 97 | font-weight: 600; |
| 98 | } | 98 | } |
| 99 | /* placeholder */ | 99 | /* placeholder */ |
| 100 | .sb-button{ background: #514DA7; | 100 | .sb-button{ background: #514DA7; |
| 101 | height: 50px; | 101 | height: 50px; |
| 102 | line-height: 35px; | 102 | line-height: 35px; |
| 103 | color: #fff; | 103 | color: #fff; |
| 104 | font-family: 'Montserrat', sans-serif; | 104 | font-family: 'Montserrat', sans-serif; |
| 105 | font-size: 13px; | 105 | font-size: 13px; |
| 106 | font-style: normal; | 106 | font-style: normal; |
| 107 | font-weight: 600; | 107 | font-weight: 600; |
| 108 | width: 100%;} | 108 | width: 100%;} |
| 109 | .sb-button img{ margin-right: 10px; width: 20px;} | 109 | .sb-button img{ margin-right: 10px; width: 20px;} |
| 110 | .sb-button:hover{ color:#fff;} | 110 | .sb-button:hover{ color:#fff;} |
| 111 | .form-layout p{margin-top:17px ;} | 111 | .form-layout p{margin-top:17px ;} |
| 112 | .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | 112 | .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} |
| 113 | .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} | 113 | .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} |
| 114 | .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} | 114 | .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} |
| 115 | .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; | 115 | .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; |
| 116 | } | 116 | } |
| 117 | .form-layout p a:hover{ color:#000;} | 117 | .form-layout p a:hover{ color:#000;} |
| 118 | .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} | 118 | .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} |
| 119 | .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} | 119 | .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} |
| 120 | .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} | 120 | .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} |
| 121 | .welcome-hd-back{ | 121 | .welcome-hd-back{ |
| 122 | font-family: 'Bebas Neue', cursive; | 122 | font-family: 'Bebas Neue', cursive; |
| 123 | font-style: normal; | 123 | font-style: normal; |
| 124 | font-weight: 600; | 124 | font-weight: 600; |
| 125 | font-size: 106px; | 125 | font-size: 106px; |
| 126 | line-height: 106px; | 126 | line-height: 106px; |
| 127 | color: #000000; | 127 | color: #000000; |
| 128 | } | 128 | } |
| 129 | .form-layout .go-back span{ font-weight: 500 !important;} | 129 | .form-layout .go-back span{ font-weight: 500 !important;} |
| 130 | .reset-pass-spc{ margin-top: 110px;} | 130 | .reset-pass-spc{ margin-top: 110px;} |
| 131 | 131 | ||
| 132 | /* profile */ | 132 | /* profile */ |
| 133 | .inner-wrp { | 133 | .inner-wrp { |
| 134 | height: 100%; | 134 | height: 100%; |
| 135 | padding-left: 88px; | 135 | padding-left: 88px; |
| 136 | padding-right: 37px; | 136 | padding-right: 37px; |
| 137 | background:#fff;; | 137 | background:#fff;; |
| 138 | font-family: 'Montserrat', sans-serif; | 138 | font-family: 'Montserrat', sans-serif; |
| 139 | 139 | ||
| 140 | } | 140 | } |
| 141 | .user-profile-photo{ width: 40px; position: relative; | 141 | .user-profile-photo{ width: 40px; position: relative; |
| 142 | height: 40px; | 142 | height: 40px; |
| 143 | border-radius: 100px; | 143 | border-radius: 100px; |
| 144 | padding: 1px;} | 144 | padding: 1px;} |
| 145 | .user-profile-photo a, img{ width: 100%;} | 145 | .user-profile-photo a, img{ width: 100%;} |
| 146 | .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} | 146 | .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} |
| 147 | .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} | 147 | .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} |
| 148 | .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} | 148 | .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} |
| 149 | .user-profile{ display: block; | 149 | .user-profile{ display: block; |
| 150 | float: left; | 150 | float: left; |
| 151 | margin-left:30px; | 151 | margin-left:30px; |
| 152 | position: relative; | 152 | position: relative; |
| 153 | width: 760px;} | 153 | width: 760px;} |
| 154 | .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} | 154 | .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} |
| 155 | .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} | 155 | .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} |
| 156 | .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} | 156 | .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} |
| 157 | .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} | 157 | .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} |
| 158 | .talk-to-me ul li{ display: block; float: left;margin-right:3px;} | 158 | .talk-to-me ul li{ display: block; float: left;margin-right:3px;} |
| 159 | .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} | 159 | .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} |
| 160 | .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } | 160 | .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } |
| 161 | .joined-info li a{ color:#000; opacity: 0.5;} | 161 | .joined-info li a{ color:#000; opacity: 0.5;} |
| 162 | .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} | 162 | .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} |
| 163 | .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} | 163 | .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} |
| 164 | .joined-info li{ float: left;} | 164 | .joined-info li{ float: left;} |
| 165 | 165 | ||
| 166 | /* list style */ | 166 | /* list style */ |
| 167 | .list-style-group{ width: 100%; display: block; float: left;} | 167 | .list-style-group{ width: 100%; display: block; float: left;} |
| 168 | .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} | 168 | .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} |
| 169 | .list-style{list-style-type: none; margin:0px; padding: 0px;} | 169 | .list-style{list-style-type: none; margin:0px; padding: 0px;} |
| 170 | .list-style li{ float: left;} | 170 | .list-style li{ float: left;} |
| 171 | .list-style li a{ display: block; float: left;} | 171 | .list-style li a{ display: block; float: left;} |
| 172 | .list-style li a img{ width: 48px; display: block; float: left; } | 172 | .list-style li a img{ width: 48px; display: block; float: left; } |
| 173 | .list-spc-top{ margin-top:15px ;} | 173 | .list-spc-top{ margin-top:15px ;} |
| 174 | 174 | ||
| 175 | /* social connects */ | 175 | /* social connects */ |
| 176 | .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} | 176 | .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} |
| 177 | .social-connects li{ float: left; margin-right:0px ;} | 177 | .social-connects li{ float: left; margin-right:0px ;} |
| 178 | .social-connects li a{ display: block; float: left; padding: 11px;} | 178 | .social-connects li a{ display: block; float: left; padding: 11px;} |
| 179 | .social-connects li a img.twitter{ margin-top:3px;} | 179 | .social-connects li a img.twitter{ margin-top:3px;} |
| 180 | .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} | 180 | .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} |
| 181 | .social-connects li a img{ width: 19px; display: block; float: left;} | 181 | .social-connects li a img{ width: 19px; display: block; float: left;} |
| 182 | .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; | 182 | .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; |
| 183 | float: left;} | 183 | float: left;} |
| 184 | .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} | 184 | .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} |
| 185 | 185 | ||
| 186 | /* profile tab */ | 186 | /* profile tab */ |
| 187 | .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} | 187 | .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} |
| 188 | .top-brd{border-top: 1px solid #DFE7EF;} | 188 | .top-brd{border-top: 1px solid #DFE7EF;} |
| 189 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} | 189 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} |
| 190 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} | 190 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} |
| 191 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} | 191 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} |
| 192 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } | 192 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } |
| 193 | 193 | ||
| 194 | /* profile data wrp */ | 194 | /* profile data wrp */ |
| 195 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} | 195 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} |
| 196 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;} | 196 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;} |
| 197 | .card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} | 197 | .card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} |
| 198 | .company-detail{ width: 100%; | 198 | .company-detail{ width: 100%; |
| 199 | display: block; | 199 | display: block; |
| 200 | float: left; | 200 | float: left; |
| 201 | position: relative; | 201 | position: relative; |
| 202 | margin-top: -63px; | 202 | margin-top: -63px; |
| 203 | margin-bottom: 21px;} | 203 | margin-bottom: 21px;} |
| 204 | .company-detail .c-logo{ width: 82px; display: block; float: left;} | 204 | .company-detail .c-logo{ width: 82px; display: block; float: left;} |
| 205 | .company-detail .c-logo img{ width: 100%;} | 205 | .company-detail .c-logo img{ width: 100%;} |
| 206 | .company-detail .c-tag img{ width: 100%;} | 206 | .company-detail .c-tag img{ width: 100%;} |
| 207 | .company-detail .c-tag { width: 89px; display: block; float: right;} | 207 | .company-detail .c-tag { width: 89px; display: block; float: right;} |
| 208 | .card-warpper h1{width: 198px; padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} | 208 | .card-warpper h1{width: 198px; padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} |
| 209 | .card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;} | 209 | .card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;} |
| 210 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} | 210 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} |
| 211 | .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} | 211 | .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} |
| 212 | .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } | 212 | .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } |
| 213 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;} | 213 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;} |
| 214 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} | 214 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} |
| 215 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} | 215 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} |
| 216 | /* colors */ | 216 | /* colors */ |
| 217 | .cape-honey{ background: #fde2a3;} | 217 | .cape-honey{ background: #fde2a3;} |
| 218 | .rose-bud{ background: #fba29a;} | 218 | .rose-bud{ background: #fba29a;} |
| 219 | .pattens-blue{ background: #ceeced;} | 219 | .pattens-blue{ background: #ceeced;} |
| 220 | 220 | ||
| 221 | /* add new card */ | 221 | /* add new card */ |
| 222 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} | 222 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} |
| 223 | .add-card-warpper a{ display: block; | 223 | .add-card-warpper a{ display: block; |
| 224 | width: 86px; | 224 | width: 86px; |
| 225 | margin: 0 auto; | 225 | margin: 0 auto; |
| 226 | margin-top: 92px;} | 226 | margin-top: 92px;} |
| 227 | 227 | ||
| 228 | /* New Profile Buttons */ | 228 | /* New Profile Buttons */ |
| 229 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} | 229 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} |
| 230 | /* button sm */ | 230 | /* button sm */ |
| 231 | .profile-sm-bt{ width: 180px; | 231 | .profile-sm-bt{ width: 180px; |
| 232 | height: 54px; | 232 | height: 54px; |
| 233 | border-radius: 5px; | 233 | border-radius: 5px; |
| 234 | border: 1px solid #514DA7; | 234 | border: 1px solid #514DA7; |
| 235 | color: #514DA7; | 235 | color: #514DA7; |
| 236 | font-size: 16px; | 236 | font-size: 16px; |
| 237 | font-weight: 500; | 237 | font-weight: 500; |
| 238 | display: block; | 238 | display: block; |
| 239 | line-height: 55px; | 239 | line-height: 55px; |
| 240 | text-align: center;} | 240 | text-align: center;} |
| 241 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 241 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 242 | /* button md */ | 242 | /* button md */ |
| 243 | .profile-md-bt{ width:233px; | 243 | .profile-md-bt{ width:233px; |
| 244 | height: 54px; | 244 | height: 54px; |
| 245 | border-radius: 5px; | 245 | border-radius: 5px; |
| 246 | border: 1px solid #514DA7; | 246 | border: 1px solid #514DA7; |
| 247 | color: #514DA7; | 247 | color: #514DA7; |
| 248 | font-size: 16px; | 248 | font-size: 16px; |
| 249 | font-weight: 500; | 249 | font-weight: 500; |
| 250 | display: block; | 250 | display: block; |
| 251 | line-height: 55px; | 251 | line-height: 55px; |
| 252 | text-align: center;} | 252 | text-align: center;} |
| 253 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 253 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 254 | /* button lg */ | 254 | /* button lg */ |
| 255 | .profile-lg-bt{ width:261px; | 255 | .profile-lg-bt{ width:261px; |
| 256 | height: 54px; | 256 | height: 54px; |
| 257 | border-radius: 5px; | 257 | border-radius: 5px; |
| 258 | border: 1px solid #514DA7; | 258 | border: 1px solid #514DA7; |
| 259 | color: #514DA7; | 259 | color: #514DA7; |
| 260 | font-size: 16px; | 260 | font-size: 16px; |
| 261 | font-weight: 500; | 261 | font-weight: 500; |
| 262 | display: block; | 262 | display: block; |
| 263 | line-height: 55px; | 263 | line-height: 55px; |
| 264 | text-align: center;} | 264 | text-align: center;} |
| 265 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 265 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 266 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} | 266 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} |
| 267 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} | 267 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 268 | /* Replies */ | 268 | /* Replies */ |
| 269 | .replies{ display: block; float: left;} | 269 | .replies{ display: block; float: left;} |
| 270 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} | 270 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} |
| 271 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} | 271 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} |
| 272 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; | 272 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; |
| 273 | font-size: 12px; | 273 | font-size: 12px; |
| 274 | font-style: normal; | 274 | font-style: normal; |
| 275 | font-weight: 400; | 275 | font-weight: 400; |
| 276 | line-height: 14px; color:#000; opacity: 0.5;} | 276 | line-height: 14px; color:#000; opacity: 0.5;} |
| 277 | .comment-spc{ margin-left:9px ;} | 277 | .comment-spc{ margin-left:9px ;} |
| 278 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} | 278 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} |
| 279 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} | 279 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} |
| 280 | 280 | ||
| 281 | /* team */ | 281 | /* team */ |
| 282 | .verified-team{ width: 129px; | 282 | .verified-team{ width: 129px; |
| 283 | display: inline-table; | 283 | display: inline-table; |
| 284 | margin-top: 7px; | 284 | margin-top: 7px; |
| 285 | position: absolute; | 285 | position: absolute; |
| 286 | margin-left: 10px;} | 286 | margin-left: 10px;} |
| 287 | .verified-team img{ width: 100%; display: block; float: left;} | 287 | .verified-team img{ width: 100%; display: block; float: left;} |
| 288 | .active-company{ border-bottom: 4px solid #ef484f;} | 288 | .active-company{ border-bottom: 4px solid #ef484f;} |
| 289 | .active-company a{ font-weight: 700 !important;} | 289 | .active-company a{ font-weight: 700 !important;} |
| 290 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} | 290 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} |
| 291 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} | 291 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} |
| 292 | .c-social li a img{ width: auto !important;} | 292 | .c-social li a img{ width: auto !important;} |
| 293 | .company-footer{ width: 100%; display: block; float: left;} | 293 | .company-footer{ width: 100%; display: block; float: left;} |
| 294 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} | 294 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} |
| 295 | .company-footer ul li{float: left; margin-right: 10px;} | 295 | .company-footer ul li{float: left; margin-right: 10px;} |
| 296 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} | 296 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} |
| 297 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} | 297 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} |
| 298 | .company-footer .next{float: right; margin-top: -25px; | 298 | .company-footer .next{float: right; margin-top: -25px; |
| 299 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} | 299 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} |
| 300 | .company-footer .next img{ width: 25px; | 300 | .company-footer .next img{ width: 25px; |
| 301 | margin-top: 17px; | 301 | margin-top: 17px; |
| 302 | margin-left: 16px;} | 302 | margin-left: 16px;} |
| 303 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} | 303 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} |
| 304 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; | 304 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; |
| 305 | border-radius: 4px; | 305 | border-radius: 4px; |
| 306 | padding: 23px; } | 306 | padding: 23px; } |
| 307 | /* members */ | 307 | /* members */ |
| 308 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} | 308 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} |
| 309 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} | 309 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} |
| 310 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} | 310 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} |
| 311 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} | 311 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} |
| 312 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} | 312 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} |
| 313 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} | 313 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} |
| 314 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} | 314 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} |
| 315 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} | 315 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} |
| 316 | .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; | 316 | .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; |
| 317 | margin-left: 8px !important; | 317 | margin-left: 8px !important; |
| 318 | margin-top: 6px; | 318 | margin-top: 6px; |
| 319 | border-radius: 5px;} | 319 | border-radius: 5px;} |
| 320 | 320 | ||
| 321 | /* popup */ | 321 | /* popup */ |
| 322 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} | 322 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} |
| 323 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} | 323 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} |
| 324 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ | 324 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ |
| 325 | filter: blur(8px); | 325 | filter: blur(8px); |
| 326 | -webkit-filter: blur(8px);} | 326 | -webkit-filter: blur(8px);} |
| 327 | .popup-set{ width: 530px; | 327 | .popup-set{ width: 530px; |
| 328 | background-color: #fff; | 328 | background-color: #fff; |
| 329 | border-radius: 0 40px 40px 40px; | 329 | border-radius: 0 40px 40px 40px; |
| 330 | padding: 30px; | 330 | padding: 30px; |
| 331 | position: relative; | 331 | position: relative; |
| 332 | margin: 0 auto; | 332 | margin: 0 auto; |
| 333 | margin-top: 80px;} | 333 | margin-top: 80px;} |
| 334 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} | 334 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} |
| 335 | .popup-header img{ width: 109px; display: block; float: left;} | 335 | .popup-header img{ width: 109px; display: block; float: left;} |
| 336 | .popup-header ul{ display: block; | 336 | .popup-header ul{ display: block; |
| 337 | list-style-type: none; | 337 | list-style-type: none; |
| 338 | margin: 0px; | 338 | margin: 0px; |
| 339 | padding: 0px; | 339 | padding: 0px; |
| 340 | margin-top: 75px; | 340 | margin-top: 75px; |
| 341 | margin-left: 20px; | 341 | margin-left: 20px; |
| 342 | float: left;} | 342 | float: left;} |
| 343 | .popup-header ul li{ float: left; margin-right: 31px;} | 343 | .popup-header ul li{ float: left; margin-right: 31px;} |
| 344 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} | 344 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} |
| 345 | .popup-header ul li a{color:#514DA7;} | 345 | .popup-header ul li a{color:#514DA7;} |
| 346 | .popup-header ul li a span{ display: block; | 346 | .popup-header ul li a span{ display: block; |
| 347 | float: left; | 347 | float: left; |
| 348 | margin-left: 10px; | 348 | margin-left: 10px; |
| 349 | width: 50px; | 349 | width: 50px; |
| 350 | font-size: 14px; | 350 | font-size: 14px; |
| 351 | line-height: 17px; | 351 | line-height: 17px; |
| 352 | margin-top: -10px;} | 352 | margin-top: -10px;} |
| 353 | .popup-body{ width: 100%; | 353 | .popup-body{ width: 100%; |
| 354 | display: block; | 354 | display: block; |
| 355 | float: left; | 355 | float: left; |
| 356 | max-height: 450px; | 356 | max-height: 450px; |
| 357 | overflow-y: auto; | 357 | overflow-y: auto; |
| 358 | padding-right: 16px;} | 358 | padding-right: 16px;} |
| 359 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} | 359 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} |
| 360 | 360 | ||
| 361 | 361 | ||
| 362 | .popup-forms .floating-label label{font-size: 11px; | 362 | .popup-forms .floating-label label{font-size: 11px; |
| 363 | line-height: 19px; | 363 | line-height: 19px; |
| 364 | font-size: 16px; | 364 | font-size: 16px; |
| 365 | font-weight: 400; | 365 | font-weight: 400; |
| 366 | color: #000; | 366 | color: #000; |
| 367 | position: absolute; | 367 | position: absolute; |
| 368 | margin: 0px 10px 0 10px; | 368 | margin: 0px 10px 0 10px; |
| 369 | background: #fff; | 369 | background: #fff; |
| 370 | padding: 0 3px; | 370 | padding: 0 3px; |
| 371 | position: absolute; | 371 | position: absolute; |
| 372 | pointer-events: none; | 372 | pointer-events: none; |
| 373 | top: 15px; opacity: 0.5; | 373 | top: 15px; opacity: 0.5; |
| 374 | transition: 0.2s ease all; | 374 | transition: 0.2s ease all; |
| 375 | -moz-transition: 0.2s ease all; | 375 | -moz-transition: 0.2s ease all; |
| 376 | -webkit-transition: 0.2s ease all; | 376 | -webkit-transition: 0.2s ease all; |
| 377 | } | 377 | } |
| 378 | 378 | ||
| 379 | .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 379 | .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} |
| 380 | .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} | 380 | .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} |
| 381 | 381 | ||
| 382 | .popup-forms .floating-input input:focus{ outline: none;} | 382 | .popup-forms .floating-input input:focus{ outline: none;} |
| 383 | .popup-forms .floating-label input:focus~label{ | 383 | .popup-forms .floating-label input:focus~label{ |
| 384 | top: -11px; | 384 | top: -11px; |
| 385 | color: #514DA7; | 385 | color: #514DA7; |
| 386 | font-size: 14px;background:#fff; | 386 | font-size: 14px;background:#fff; |
| 387 | opacity:1; | 387 | opacity:1; |
| 388 | } | 388 | } |
| 389 | .popup-forms .floating-label input:not(:placeholder-shown)~label { | 389 | .popup-forms .floating-label input:not(:placeholder-shown)~label { |
| 390 | position: absolute; | 390 | position: absolute; |
| 391 | top: -11px; | 391 | top: -11px; |
| 392 | background:#fff; | 392 | background:#fff; |
| 393 | 393 | ||
| 394 | font-size: 14px; | 394 | font-size: 14px; |
| 395 | color: #514DA7;opacity:1; | 395 | color: #514DA7;opacity:1; |
| 396 | } | 396 | } |
| 397 | /* textarea */ | 397 | /* textarea */ |
| 398 | .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 398 | .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} |
| 399 | .popup-forms .floating-input textarea:focus{ outline: none;} | 399 | .popup-forms .floating-input textarea:focus{ outline: none;} |
| 400 | .popup-forms .floating-label textarea:focus~label{ | 400 | .popup-forms .floating-label textarea:focus~label{ |
| 401 | top: -11px; | 401 | top: -11px; |
| 402 | color: #514DA7; | 402 | color: #514DA7; |
| 403 | font-size: 14px;background:#fff; | 403 | font-size: 14px;background:#fff; |
| 404 | opacity:1; | 404 | opacity:1; |
| 405 | } | 405 | } |
| 406 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { | 406 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { |
| 407 | position: absolute; | 407 | position: absolute; |
| 408 | top: -11px; | 408 | top: -11px; |
| 409 | background:#fff; | 409 | background:#fff; |
| 410 | 410 | ||
| 411 | font-size: 14px; | 411 | font-size: 14px; |
| 412 | color: #514DA7;opacity:1; | 412 | color: #514DA7;opacity:1; |
| 413 | } | 413 | } |
| 414 | .popup-forms .form-group{ margin-bottom: 20px;} | 414 | .popup-forms .form-group{ margin-bottom: 20px;} |
| 415 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} | 415 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} |
| 416 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} | 416 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} |
| 417 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } | 417 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } |
| 418 | .interests li{ float: left; margin-right: 20px; position: relative;} | 418 | .interests li{ float: left; margin-right: 20px; position: relative;} |
| 419 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; | 419 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; |
| 420 | border-radius: 5px;} | 420 | border-radius: 5px;} |
| 421 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; | 421 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; |
| 422 | border-radius: 5px; background-color: #fff !important; width: 125px;} | 422 | border-radius: 5px; background-color: #fff !important; width: 125px;} |
| 423 | .interests li a{ width: 20px; | 423 | .interests li a{ width: 20px; |
| 424 | display: block; | 424 | display: block; |
| 425 | float: right; | 425 | float: right; |
| 426 | margin: 6px 0px 0 114px; | 426 | margin: 6px 0px 0 114px; |
| 427 | position: absolute;} | 427 | position: absolute;} |
| 428 | /* color codes */ | 428 | /* color codes */ |
| 429 | .silver{background-color: #C4C4C4;} | 429 | .silver{background-color: #C4C4C4;} |
| 430 | .milk-punch{background-color: #FFF6D7;} | 430 | .milk-punch{background-color: #FFF6D7;} |
| 431 | .french-pass{background-color: #BDDBFF;} | 431 | .french-pass{background-color: #BDDBFF;} |
| 432 | .cyan-french-pass{background-color: #C0FAFE;} | 432 | .cyan-french-pass{background-color: #C0FAFE;} |
| 433 | .cosmos{background-color: #FFDBDC;} | 433 | .cosmos{background-color: #FFDBDC;} |
| 434 | .cape-Honey{background-color: #FEE6AC;} | 434 | .cape-Honey{background-color: #FEE6AC;} |
| 435 | .snuff{background-color: #E5DFF0;} | 435 | .snuff{background-color: #E5DFF0;} |
| 436 | .catskillWhite{background-color: #DFE7EF;} | 436 | .catskillWhite{background-color: #DFE7EF;} |
| 437 | .white{background-color: #fff;} | 437 | .white{background-color: #fff;} |
| 438 | /* color codes */ | 438 | /* color codes */ |
| 439 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 439 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 440 | .colors li{ display: block; float: left; margin-right: 14px;} | 440 | .colors li{ display: block; float: left; margin-right: 14px;} |
| 441 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} | 441 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} |
| 442 | .colors li a.active{border: 2px solid #514DA7;} | 442 | .colors li a.active{border: 2px solid #514DA7;} |
| 443 | .popup-forms .next-bt{ width: 99px; | 443 | .popup-forms .next-bt{ width: 99px; |
| 444 | height: 54px; | 444 | height: 54px; |
| 445 | background: #514DA7; | 445 | background: #514DA7; |
| 446 | display: block; | 446 | display: block; |
| 447 | text-align: center; | 447 | text-align: center; |
| 448 | border-radius: 5px; | 448 | border-radius: 5px; |
| 449 | color: #fff; | 449 | color: #fff; |
| 450 | font-size: 16px; | 450 | font-size: 16px; |
| 451 | line-height: 54px; | 451 | line-height: 54px; |
| 452 | font-weight: 600; | 452 | font-weight: 600; |
| 453 | position: absolute; | 453 | position: absolute; |
| 454 | right: 50px; | 454 | right: 50px; |
| 455 | bottom: -80px;} | 455 | bottom: -80px;} |
| 456 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} | 456 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} |
| 457 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} | 457 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} |
| 458 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; | 458 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; |
| 459 | display: block; | 459 | display: block; |
| 460 | width: 270px; | 460 | width: 270px; |
| 461 | float: right; | 461 | float: right; |
| 462 | margin-top: 10px;} | 462 | margin-top: 10px;} |
| 463 | .select-arrow{ display: block; | 463 | .select-arrow{ display: block; |
| 464 | float: right; | 464 | float: right; |
| 465 | position: absolute; | 465 | position: absolute; |
| 466 | top: 13px; | 466 | top: 13px; |
| 467 | right: 17px; | 467 | right: 17px; |
| 468 | background: #fff; | 468 | background: #fff; |
| 469 | width: 31px; | 469 | width: 31px; |
| 470 | height: 17px;} | 470 | height: 17px;} |
| 471 | .select-arrow img{width: 15px;} | 471 | .select-arrow img{width: 15px;} |
| 472 | .popup-forms .save-bt{ width: 150px; | 472 | .popup-forms .save-bt{ width: 150px; |
| 473 | height: 54px; | 473 | height: 54px; |
| 474 | background: #514DA7; | 474 | background: #514DA7; |
| 475 | display: block; | 475 | display: block; |
| 476 | text-align: center; | 476 | text-align: center; |
| 477 | border-radius: 5px; | 477 | border-radius: 5px; |
| 478 | color: #fff; | 478 | color: #fff; |
| 479 | font-size: 16px; | 479 | font-size: 16px; |
| 480 | line-height: 54px; | 480 | line-height: 54px; |
| 481 | font-weight: 600; | 481 | font-weight: 600; |
| 482 | position: absolute; | 482 | position: absolute; |
| 483 | right: 50px; | 483 | right: 50px; |
| 484 | bottom: -80px;} | 484 | bottom: -80px;} |
| 485 | /* insights */ | 485 | /* insights */ |
| 486 | .insights-wrp{ background-image: url(../images/insights-bg.svg); | 486 | .insights-wrp{ background-image: url(../images/insights-bg.svg); |
| 487 | background-color: #DFE7EF; | 487 | background-color: #DFE7EF; |
| 488 | height: 100%; | 488 | height: 100%; |
| 489 | background-repeat: no-repeat; | 489 | background-repeat: no-repeat; |
| 490 | background-position: top center; | 490 | background-position: top center; |
| 491 | background-size: contain; padding: 0 50px 0 100px;} | 491 | background-size: contain; padding: 0 50px 0 100px;} |
| 492 | .insights-profile{width: 32px; | 492 | .insights-profile{width: 32px; |
| 493 | height: 32px; | 493 | height: 32px; |
| 494 | float: right; | 494 | float: right; |
| 495 | display: block; | 495 | display: block; |
| 496 | position: absolute; | 496 | position: absolute; |
| 497 | right: 0;} | 497 | right: 0;} |
| 498 | .insights-searh a{ width: 21px; | 498 | .insights-searh a{ width: 21px; |
| 499 | height: 25px; | 499 | height: 25px; |
| 500 | display: block; | 500 | display: block; |
| 501 | position: absolute; | 501 | position: absolute; |
| 502 | right: 24px; | 502 | right: 24px; |
| 503 | top: 23px;} | 503 | top: 23px;} |
| 504 | .insights-searh a img{ width: 100%;} | 504 | .insights-searh a img{ width: 100%;} |
| 505 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} | 505 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} |
| 506 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 506 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 507 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 507 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 508 | } | 508 | } |
| 509 | 509 | ||
| 510 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 510 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 511 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 511 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 512 | } | 512 | } |
| 513 | 513 | ||
| 514 | .insights-searh input::placeholder { | 514 | .insights-searh input::placeholder { |
| 515 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 515 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 516 | } | 516 | } |
| 517 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 517 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 518 | /* insights 2 */ | 518 | /* insights 2 */ |
| 519 | .back-to-lib{ font-size: 12px; | 519 | .back-to-lib{ font-size: 12px; |
| 520 | line-height: 14px; | 520 | line-height: 14px; |
| 521 | color: #000000; | 521 | color: #000000; |
| 522 | font-weight: 500; | 522 | font-weight: 500; |
| 523 | display: block; | 523 | display: block; |
| 524 | float: left;} | 524 | float: left;} |
| 525 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} | 525 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} |
| 526 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} | 526 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} |
| 527 | .insights-list li{ display: block; float: left;} | 527 | .insights-list li{ display: block; float: left;} |
| 528 | .insights-list li a{ display: block; | 528 | .insights-list li a{ display: block; |
| 529 | float: left; | 529 | float: left; |
| 530 | margin: 0px; | 530 | margin: 0px; |
| 531 | padding: 5px 14px; | 531 | padding: 5px 14px; |
| 532 | background: #70A853; | 532 | background: #70A853; |
| 533 | font-size: 15px;text-transform:uppercase; | 533 | font-size: 15px;text-transform:uppercase; |
| 534 | font-weight: 700; | 534 | font-weight: 700; |
| 535 | font-style: normal; | 535 | font-style: normal; |
| 536 | color: #fff; | 536 | color: #fff; |
| 537 | border-radius: 50px;} | 537 | border-radius: 50px;} |
| 538 | .insights-details{ width: 850px;display:block; float: left;} | 538 | .insights-details{ width: 850px;display:block; float: left;} |
| 539 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} | 539 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} |
| 540 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} | 540 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} |
| 541 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} | 541 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} |
| 542 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} | 542 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} |
| 543 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} | 543 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} |
| 544 | .features-group-list li a:hover{ text-decoration: none;} | 544 | .features-group-list li a:hover{ text-decoration: none;} |
| 545 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} | 545 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} |
| 546 | .features-group-list li a img{ width: 9px; } | 546 | .features-group-list li a img{ width: 9px; } |
| 547 | .insights-rply img{ width: 14px;} | 547 | .insights-rply img{ width: 14px;} |
| 548 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} | 548 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} |
| 549 | .insights-rply:hover{color: #70A853;} | 549 | .insights-rply:hover{color: #70A853;} |
| 550 | .active-green{border-bottom: 4px solid #70A853;} | 550 | .active-green{border-bottom: 4px solid #70A853;} |
| 551 | .insights-spc{padding: 0 100px;} | 551 | .insights-spc{padding: 0 100px;} |
| 552 | 552 | ||
| 553 | /* insight page 1 */ | 553 | /* insight page 1 */ |
| 554 | .insights-border{height: 1px; | 554 | .insights-border{height: 1px; |
| 555 | text-align: center; | 555 | text-align: center; |
| 556 | display: block; | 556 | display: block; |
| 557 | background: #FFFFFF; | 557 | background: #FFFFFF; |
| 558 | clear: both; | 558 | clear: both; |
| 559 | width: 100%; | 559 | width: 100%; |
| 560 | margin-top: 30px;} | 560 | margin-top: 30px;} |
| 561 | .insights-border span{ text-align: center; | 561 | .insights-border span{ text-align: center; |
| 562 | position: relative; | 562 | position: relative; |
| 563 | top: -13px; | 563 | top: -13px; |
| 564 | background: #DFE7EF; | 564 | background: #DFE7EF; |
| 565 | margin: 0 11px; | 565 | margin: 0 11px; |
| 566 | padding: 0px 10px;} | 566 | padding: 0px 10px;} |
| 567 | .insights-list-filter{display:table;float:left;width:100%;} | 567 | .insights-list-filter{display:table;float:left;width:100%;} |
| 568 | .insights-list-filter ul{ list-style-type: none; text-align: center; | 568 | .insights-list-filter ul{ list-style-type: none; text-align: center; |
| 569 | margin-top:40px; | 569 | margin-top:40px; |
| 570 | padding: 0px; | 570 | padding: 0px; |
| 571 | display: block; | 571 | display: block; |
| 572 | float: left; | 572 | float: left; |
| 573 | width: 100%;} | 573 | width: 100%;} |
| 574 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} | 574 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} |
| 575 | .insights-list-filter li a{padding: 5px 20px;color: #fff; | 575 | .insights-list-filter li a{padding: 5px 20px;color: #fff; |
| 576 | float: left; | 576 | float: left; |
| 577 | text-transform: uppercase; | 577 | text-transform: uppercase; |
| 578 | line-height: 26px; | 578 | line-height: 26px; |
| 579 | text-align: center; | 579 | text-align: center; |
| 580 | font-weight: 600; | 580 | font-weight: 600; |
| 581 | font-size: 20px; | 581 | font-size: 20px; |
| 582 | border-radius:30px; | 582 | border-radius:30px; |
| 583 | } | 583 | } |
| 584 | .insights-list-filter li a:hover{text-decoration:none;} | 584 | .insights-list-filter li a:hover{text-decoration:none;} |
| 585 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} | 585 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} |
| 586 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} | 586 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} |
| 587 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} | 587 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} |
| 588 | .insights-products p{font-size:15px; margin-bottom: 0px;} | 588 | .insights-products p{font-size:15px; margin-bottom: 0px;} |
| 589 | .insights-products span{float:right;} | 589 | .insights-products span{float:right;} |
| 590 | .insight-mb-spc{margin-bottom:34px;} | 590 | .insight-mb-spc{margin-bottom:34px;} |
| 591 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} | 591 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} |
| 592 | .insights-products a{ width: 18px; display: block; float: right;} | 592 | .insights-products a{ width: 18px; display: block; float: right;} |
| 593 | 593 | ||
| 594 | /* colors */ | 594 | /* colors */ |
| 595 | .lavender-blue-bg{background:#C1C0FE;} | 595 | .lavender-blue-bg{background:#C1C0FE;} |
| 596 | .golden-tainoi-bg{background:#FBC647;} | 596 | .golden-tainoi-bg{background:#FBC647;} |
| 597 | .red-orange-bg{background:#F74536;} | 597 | .red-orange-bg{background:#F74536;} |
| 598 | .morning-glory-bg{background:#9DDADB;} | 598 | .morning-glory-bg{background:#9DDADB;} |
| 599 | .dark-green-copper-bg{background:#477970;} | 599 | .dark-green-copper-bg{background:#477970;} |
| 600 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} | 600 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} |
| 601 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} | 601 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} |
| 602 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} | 602 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} |
| 603 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} | 603 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} |
| 604 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} | 604 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} |
| 605 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} | 605 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} |
| 606 | .radical-red-col{color:#EF484F;} | 606 | .radical-red-col{color:#EF484F;} |
| 607 | .selective-yellow-col{color:#FABB05;} | 607 | .selective-yellow-col{color:#FABB05;} |
| 608 | .lavender-blue-col{color:#C1C0FE;} | 608 | .lavender-blue-col{color:#C1C0FE;} |
| 609 | .dark-green-copper-col{color:#477970;} | 609 | .dark-green-copper-col{color:#477970;} |
| 610 | .purple-heart-col{color:#673AB7;} | 610 | .purple-heart-col{color:#673AB7;} |
| 611 | .silver-col{color:#C4C4C4;} | 611 | .silver-col{color:#C4C4C4;} |
| 612 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} | 612 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} |
| 613 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} | 613 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} |
| 614 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} | 614 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} |
| 615 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} | 615 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} |
| 616 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} | 616 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} |
| 617 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} | 617 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} |
| 618 | /* button */ | 618 | /* button */ |
| 619 | .switch-btn { | 619 | .switch-btn { |
| 620 | position: relative; | 620 | position: relative; |
| 621 | display: inline-block; | 621 | display: inline-block; |
| 622 | width: 60px; | 622 | width: 60px; |
| 623 | height: 24px; | 623 | height: 24px; |
| 624 | } | 624 | } |
| 625 | .switch-btn input { | 625 | .switch-btn input { |
| 626 | opacity: 0; | 626 | opacity: 0; |
| 627 | width: 0; | 627 | width: 0; |
| 628 | height: 0; | 628 | height: 0; |
| 629 | } | 629 | } |
| 630 | .rounded-toggle { | 630 | .rounded-toggle { |
| 631 | position: absolute; | 631 | position: absolute; |
| 632 | cursor: pointer; | 632 | cursor: pointer; |
| 633 | top: 0; | 633 | top: 0; |
| 634 | left: 0; | 634 | left: 0; |
| 635 | right: 0; | 635 | right: 0; |
| 636 | bottom: 0; | 636 | bottom: 0; |
| 637 | background: #DFE7EF; | 637 | background: #DFE7EF; |
| 638 | -webkit-transition: .4s; | 638 | -webkit-transition: .4s; |
| 639 | transition: .4s; | 639 | transition: .4s; |
| 640 | border-radius: 34px; | 640 | border-radius: 34px; |
| 641 | } | 641 | } |
| 642 | .rounded-toggle:before { | 642 | .rounded-toggle:before { |
| 643 | position: absolute; | 643 | position: absolute; |
| 644 | content: ""; | 644 | content: ""; |
| 645 | height: 14px; | 645 | height: 14px; |
| 646 | width: 13px; | 646 | width: 13px; |
| 647 | left: 10px; | 647 | left: 10px; |
| 648 | bottom: 5px; | 648 | bottom: 5px; |
| 649 | background-color: #514DA7; | 649 | background-color: #514DA7; |
| 650 | -webkit-transition: .4s; | 650 | -webkit-transition: .4s; |
| 651 | transition: .4s; | 651 | transition: .4s; |
| 652 | border-radius: 50%; | 652 | border-radius: 50%; |
| 653 | } | 653 | } |
| 654 | .toggle-btn:checked + .rounded-toggle { | 654 | .toggle-btn:checked + .rounded-toggle { |
| 655 | background: #DFE7EF; | 655 | background: #DFE7EF; |
| 656 | } | 656 | } |
| 657 | 657 | ||
| 658 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} | 658 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} |
| 659 | .toggle-btn:focus + .rounded-toggle{ | 659 | .toggle-btn:focus + .rounded-toggle{ |
| 660 | box-shadow: 0 0 1px #2196F3; | 660 | box-shadow: 0 0 1px #2196F3; |
| 661 | } | 661 | } |
| 662 | .toggle-btn:checked + .rounded-toggle:before { | 662 | .toggle-btn:checked + .rounded-toggle:before { |
| 663 | -webkit-transform: translateX(26px); | 663 | -webkit-transform: translateX(26px); |
| 664 | -ms-transform: translateX(26px); | 664 | -ms-transform: translateX(26px); |
| 665 | transform: translateX(26px); | 665 | transform: translateX(26px); |
| 666 | } | 666 | } |
| 667 | .switch-bt-wrp{margin-top: 15px; width: 111px; | 667 | .switch-bt-wrp{margin-top: 15px; width: 111px; |
| 668 | float: right; | 668 | float: right; |
| 669 | text-align: right; } | 669 | text-align: right; } |
| 670 | .switch-btn{float: left ;} | 670 | .switch-btn{float: left ;} |
| 671 | .onoff{ margin-top: -3px; float: right;} | 671 | .onoff{ margin-top: -3px; float: right;} |
| 672 | 672 | ||
| 673 | /* intro Episode */ | 673 | /* intro Episode */ |
| 674 | .episode-intro{ padding: 0 50px 0 30px; height: 100%;} | 674 | .episode-intro{ padding: 0 50px 0 30px; height: 100%;} |
| 675 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; | 675 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; |
| 676 | bottom: 50px; z-index: 2; | 676 | bottom: 50px; z-index: 2; |
| 677 | right: 0; | 677 | right: 0; |
| 678 | left: 0;} | 678 | left: 0;} |
| 679 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} | 679 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} |
| 680 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; | 680 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; |
| 681 | display: block; margin-top: 28px; | 681 | display: block; margin-top: 28px; |
| 682 | } | 682 | } |
| 683 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} | 683 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} |
| 684 | .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} | 684 | .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} |
| 685 | .bottom-startup .title{ font-size: 48px; | 685 | .bottom-startup .title{ font-size: 48px; |
| 686 | font-family: 'Zuume'; | 686 | font-family: 'Zuume'; |
| 687 | font-weight: 400; | 687 | font-weight: 400; |
| 688 | line-height: 144px; | 688 | line-height: 144px; |
| 689 | color: #514DA7; | 689 | color: #514DA7; |
| 690 | width: 440px; | 690 | width: 440px; |
| 691 | height: 100%; float: left; | 691 | height: 100%; float: left; |
| 692 | border-right: 0.8px solid #514DA7; | 692 | border-right: 0.8px solid #514DA7; |
| 693 | text-align: center;} | 693 | text-align: center;} |
| 694 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; | 694 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; |
| 695 | } | 695 | } |
| 696 | .bottom-startup .author-sec .top{ width: 100%; | 696 | .bottom-startup .author-sec .top{ width: 100%; |
| 697 | display: block; | 697 | display: block; |
| 698 | float: left; | 698 | float: left; |
| 699 | padding: 20px 10px 10px 10px; | 699 | padding: 20px 10px 10px 10px; |
| 700 | height: 72px;} | 700 | height: 72px;} |
| 701 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 701 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 702 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; | 702 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; |
| 703 | font-family: 'Zuume'; | 703 | font-family: 'Zuume'; |
| 704 | font-weight: 400;} | 704 | font-weight: 400;} |
| 705 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; | 705 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; |
| 706 | border-top: 0.8px solid #514DA7; | 706 | border-top: 0.8px solid #514DA7; |
| 707 | display: block; | 707 | display: block; |
| 708 | float: left; | 708 | float: left; |
| 709 | padding: 0px 10px 0px 10px; | 709 | padding: 0px 10px 0px 10px; |
| 710 | height: 72px;} | 710 | height: 72px;} |
| 711 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} | 711 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} |
| 712 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} | 712 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} |
| 713 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 713 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 714 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; | 714 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; |
| 715 | font-family: 'Zuume'; | 715 | font-family: 'Zuume'; |
| 716 | font-weight: 400;} | 716 | font-weight: 400;} |
| 717 | .bottom-startup .author-sec.info{ width: 90px;} | 717 | .bottom-startup .author-sec.info{ width: 90px;} |
| 718 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } | 718 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } |
| 719 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} | 719 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} |
| 720 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} | 720 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} |
| 721 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} | 721 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} |
| 722 | .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} | 722 | .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} |
| 723 | .bottom-startup .start a img{ width: 24px; | 723 | .bottom-startup .start a img{ width: 24px; |
| 724 | display: block; | 724 | display: block; |
| 725 | margin: 0 auto; | 725 | margin: 0 auto; |
| 726 | margin-bottom: 10px;} | 726 | margin-bottom: 10px;} |
| 727 | 727 | ||
| 728 | /* compare */ | 728 | /* compare */ |
| 729 | .compare-c{ width: 475px; | 729 | .compare-c{ width: 475px; |
| 730 | display: block; | 730 | display: block; |
| 731 | margin: 0 auto; | 731 | margin: 0 auto; |
| 732 | bottom: 50%; | 732 | bottom: 50%; |
| 733 | position: absolute; | 733 | position: absolute; |
| 734 | left: 0; | 734 | left: 0; |
| 735 | right: 0; | 735 | right: 0; |
| 736 | z-index: 2;} | 736 | z-index: 2;} |
| 737 | .compare-c .logo-1{ width: 200px; display: block; float: left;} | 737 | .compare-c .logo-1{ width: 200px; display: block; float: left;} |
| 738 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; | 738 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; |
| 739 | margin-top: 25px;} | 739 | margin-top: 25px;} |
| 740 | .compare-c .logo-2{ width: 200px; display: block; float: left;} | 740 | .compare-c .logo-2{ width: 200px; display: block; float: left;} |
| 741 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} | 741 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} |
| 742 | .epi-bg{ position: absolute; | 742 | .epi-bg{ position: absolute; |
| 743 | bottom: -152px; | 743 | bottom: -152px; |
| 744 | left: 18%; width: 1920px; | 744 | left: 18%; width: 1920px; |
| 745 | z-index: 1;} | 745 | z-index: 1;} |
| 746 | /* intro startup */ | 746 | /* intro startup */ |
| 747 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } | 747 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } |
| 748 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } | 748 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } |
| 749 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} | 749 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} |
| 750 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } | 750 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } |
| 751 | .intro-startup .footer-bottom ul li{ height: 5px; | 751 | .intro-startup .footer-bottom ul li{ height: 5px; |
| 752 | display: block; | 752 | display: block; |
| 753 | float: left; | 753 | float: left; |
| 754 | width: 49%; | 754 | width: 49%; |
| 755 | background: #fff;} | 755 | background: #fff;} |
| 756 | .intro-startup .footer-top{ width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} | 756 | .intro-startup .footer-top{ width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} |
| 757 | .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } | 757 | .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } |
| 758 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} | 758 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} |
| 759 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} | 759 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} |
| 760 | .intro-startup .footer-top .top-intro-bt li a{ height: 30px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 15px; padding: 6px 10px; display: block; float: left;} | 760 | .intro-startup .footer-top .top-intro-bt li a{ height: 30px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 15px; padding: 6px 10px; display: block; float: left;} |
| 761 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 3px; margin-right: 4px;} | 761 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 3px; margin-right: 4px;} |
| 762 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} | 762 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} |
| 763 | .smasung-g-10wrp{ width: 404px; display: block; height: 838px; position: absolute; background-image:url('../images/Samsung-Galaxy-S10.svg'); background-repeat: no-repeat; left: 0; | 763 | .smasung-g-10wrp{ width: 404px; display: block; height: 838px; position: absolute; background-image:url('../images/Samsung-Galaxy-S10.svg'); background-repeat: no-repeat; left: 0; |
| 764 | right: 0; | 764 | right: 0; |
| 765 | margin: 0 auto; | 765 | margin: 0 auto; |
| 766 | bottom: 0; | 766 | bottom: 0; |
| 767 | top: unset; | 767 | top: unset; |
| 768 | background-position: bottom;} | 768 | background-position: bottom;} |
| 769 | .samsung-compare-c{ width: 211px; | 769 | .samsung-compare-c{ width: 211px; |
| 770 | display: block; | 770 | display: block; |
| 771 | margin: 0 auto; | 771 | margin: 0 auto; |
| 772 | position: absolute; | 772 | position: absolute; |
| 773 | bottom: 25%; | 773 | bottom: 25%; |
| 774 | left: 0; | 774 | left: 0; |
| 775 | right: 0;} | 775 | right: 0;} |
| 776 | .samsung-compare-c img{ width: 100%;} | 776 | .samsung-compare-c img{ width: 100%;} |
| 777 | .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} | 777 | .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} |
| 778 | 778 | ||
| 779 | /* comment wrapper */ | 779 | /* comment wrapper */ |
| 780 | .smasung-g-10wrp .comment-box{ width: 428px; | 780 | .smasung-g-10wrp .comment-box{ width: 428px; |
| 781 | display: block; | 781 | display: block; |
| 782 | float: left; right: -394px; | 782 | float: left; right: -394px; |
| 783 | position: absolute; | 783 | position: absolute; |
| 784 | bottom: 50px;} | 784 | bottom: 50px;} |
| 785 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; | 785 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; |
| 786 | border: 1px solid #201E6A; | 786 | border: 1px solid #201E6A; |
| 787 | box-sizing: border-box; | 787 | box-sizing: border-box; |
| 788 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 788 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 789 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} | 789 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} |
| 790 | .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} | 790 | .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} |
| 791 | .comment-box-s-1 .footer{background: #F7F9FB; | 791 | .comment-box-s-1 .footer{background: #F7F9FB; |
| 792 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; | 792 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; |
| 793 | box-sizing: border-box; | 793 | box-sizing: border-box; |
| 794 | border-radius: 0px 0px 0px 25px;} | 794 | border-radius: 0px 0px 0px 25px;} |
| 795 | .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} | 795 | .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} |
| 796 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} | 796 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} |
| 797 | .key-arrow{ width: 50px; float: left; margin-top:5px;} | 797 | .key-arrow{ width: 50px; float: left; margin-top:5px;} |
| 798 | .comment-w-397{ width: 397px; float: right;} | 798 | .comment-w-397{ width: 397px; float: right;} |
| 799 | .comment-box .user-photo{ width: 200px; display: block; float: right;} | 799 | .comment-box .user-photo{ width: 200px; display: block; float: right;} |
| 800 | .spot-light-top{ width: 927px; | 800 | .spot-light-top{ width: 927px; |
| 801 | height: 100%; position: absolute; | 801 | height: 100%; position: absolute; |
| 802 | top: 0px; | 802 | top: 0px; |
| 803 | overflow: hidden; | 803 | overflow: hidden; |
| 804 | left: -350px; | 804 | left: -350px; |
| 805 | right: 0; | 805 | right: 0; |
| 806 | margin: 0 auto; } | 806 | margin: 0 auto; } |
| 807 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); | 807 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); |
| 808 | border: 1px solid #000000; | 808 | border: 1px solid #000000; |
| 809 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} | 809 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} |
| 810 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; | 810 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; |
| 811 | margin-top: -63px;} | 811 | margin-top: -63px;} |
| 812 | .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} | 812 | .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} |
| 813 | .app-discovery h1{font-size: 60px; | 813 | .app-discovery h1{font-size: 60px; |
| 814 | font-family: 'Zuume'; margin-top: 136px; | 814 | font-family: 'Zuume'; margin-top: 136px; |
| 815 | font-weight: 400; | 815 | font-weight: 400; |
| 816 | line-height: 66px; width: 100%; display: block; text-align: center; | 816 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 817 | color: #000;} | 817 | color: #000;} |
| 818 | .app-discovery h2{font-size: 60px; | 818 | .app-discovery h2{font-size: 60px; |
| 819 | font-family: 'Zuume'; | 819 | font-family: 'Zuume'; |
| 820 | font-weight: 300; | 820 | font-weight: 300; |
| 821 | line-height: 66px; width: 100%; display: block; text-align: center; | 821 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 822 | color: #000;} | 822 | color: #000;} |
| 823 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} | 823 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} |
| 824 | .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} | 824 | .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} |
| 825 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } | 825 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } |
| 826 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} | 826 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} |
| 827 | .ft-comments-group{display: block; | 827 | .ft-comments-group{display: block; |
| 828 | float: left; | 828 | float: left; |
| 829 | padding-top: 23px; width: 100%; | 829 | padding-top: 23px; width: 100%; |
| 830 | height: 100%; padding-right: 15px; | 830 | height: 100%; padding-right: 15px; |
| 831 | } | 831 | } |
| 832 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} | 832 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} |
| 833 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 833 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 834 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} | 834 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} |
| 835 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } | 835 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } |
| 836 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} | 836 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} |
| 837 | .ft-comments-group .comments-detail p{ margin-top: 2px; | 837 | .ft-comments-group .comments-detail p{ margin-top: 2px; |
| 838 | font-size: 12px; | 838 | font-size: 12px; |
| 839 | line-height: 14px; | 839 | line-height: 14px; |
| 840 | font-weight: 400; | 840 | font-weight: 400; |
| 841 | color: #000000; | 841 | color: #000000; |
| 842 | margin-bottom: 0px; | 842 | margin-bottom: 0px; |
| 843 | width: 100%; | 843 | width: 100%; |
| 844 | display: block; | 844 | display: block; |
| 845 | float: left;} | 845 | float: left;} |
| 846 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} | 846 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} |
| 847 | .white-bg{ background-color: #fff;} | 847 | .white-bg{ background-color: #fff;} |
| 848 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} | 848 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} |
| 849 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } | 849 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } |
| 850 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } | 850 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } |
| 851 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ | 851 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ |
| 852 | color: #514DA7; font-size: 12px; line-height: 14px; | 852 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 853 | } | 853 | } |
| 854 | 854 | ||
| 855 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 855 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 856 | color: #514DA7; font-size: 12px; line-height: 14px; | 856 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 857 | } | 857 | } |
| 858 | 858 | ||
| 859 | .comment-frm .frm-wdth input::placeholder { | 859 | .comment-frm .frm-wdth input::placeholder { |
| 860 | color: #514DA7; font-size: 12px; line-height: 14px; | 860 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 861 | } | 861 | } |
| 862 | .comment-frm .add-comment{background: #514DA7; | 862 | .comment-frm .add-comment{background: #514DA7; |
| 863 | border-radius: 5px; | 863 | border-radius: 5px; |
| 864 | font-size: 13px; | 864 | font-size: 13px; |
| 865 | line-height: 29px; | 865 | line-height: 29px; |
| 866 | color: #fff; | 866 | color: #fff; |
| 867 | padding: 5px 10px; | 867 | padding: 5px 10px; |
| 868 | display: block; | 868 | display: block; |
| 869 | width:111px; | 869 | width:111px; |
| 870 | float: right; text-align: center; | 870 | float: right; text-align: center; |
| 871 | height: 39px; | 871 | height: 39px; |
| 872 | } | 872 | } |
| 873 | .comment-frm .add-comment img{ width: 14px; | 873 | .comment-frm .add-comment img{ width: 14px; |
| 874 | 874 | ||
| 875 | } | 875 | } |
| 876 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} | 876 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} |
| 877 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} | 877 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} |
| 878 | .single-author-li-comments{ width: 100%; display: block; float: left;} | 878 | .single-author-li-comments{ width: 100%; display: block; float: left;} |
| 879 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; | 879 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; |
| 880 | border: 1px solid #201E6A; | 880 | border: 1px solid #201E6A; |
| 881 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 881 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 882 | border-radius: 25px 25px 25px 0px; } | 882 | border-radius: 25px 25px 25px 0px; } |
| 883 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} | 883 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} |
| 884 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} | 884 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} |
| 885 | .rly-comment-set li{ float: left; margin-right: 15px;} | 885 | .rly-comment-set li{ float: left; margin-right: 15px;} |
| 886 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} | 886 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} |
| 887 | .rly-comment-set li img{ width: 13px; | 887 | .rly-comment-set li img{ width: 13px; |
| 888 | float: left; | 888 | float: left; |
| 889 | display: block; | 889 | display: block; |
| 890 | margin-top: 8px; | 890 | margin-top: 8px; |
| 891 | margin-right: 6px;} | 891 | margin-right: 6px;} |
| 892 | .comments-a-wrp{ width: 629px; | 892 | .comments-a-wrp{ width: 629px; |
| 893 | display: block; | 893 | display: block; |
| 894 | float: right; | 894 | float: right; |
| 895 | position: absolute; | 895 | position: absolute; |
| 896 | bottom: 160px; | 896 | bottom: 160px; |
| 897 | right: 0;} | 897 | right: 0;} |
| 898 | /* thnaks Wrapper */ | 898 | /* thnaks Wrapper */ |
| 899 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} | 899 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} |
| 900 | .thanks-l-wrp{ display: block; float: left; width: 504px; margin-bottom: 90px; position: relative; } | 900 | .thanks-l-wrp{ display: block; float: left; width: 504px; margin-bottom: 90px; position: relative; } |
| 901 | .thanks-img{ width: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -271px;} | 901 | .thanks-img{ width: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -271px;} |
| 902 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; | 902 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; |
| 903 | box-sizing: border-box; | 903 | box-sizing: border-box; |
| 904 | border-radius: 15px; position: relative; | 904 | border-radius: 15px; position: relative; |
| 905 | z-index: 2;} | 905 | z-index: 2;} |
| 906 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; | 906 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; |
| 907 | margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} | 907 | margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} |
| 908 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} | 908 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} |
| 909 | .thanks-pay-wrp ul{ display: block; | 909 | .thanks-pay-wrp ul{ display: block; |
| 910 | margin-top: 50px; | 910 | margin-top: 50px; |
| 911 | margin: 32px 0 0 67px; | 911 | margin: 32px 0 0 67px; |
| 912 | padding: 0px; | 912 | padding: 0px; |
| 913 | list-style-type: none; | 913 | list-style-type: none; |
| 914 | width: 370px; | 914 | width: 370px; |
| 915 | float: left;} | 915 | float: left;} |
| 916 | .thanks-pay-wrp ul li{ float: left; width: 72px;} | 916 | .thanks-pay-wrp ul li{ float: left; width: 72px;} |
| 917 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} | 917 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} |
| 918 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} | 918 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} |
| 919 | .thanks-pay-wrp ul li a span img{ width: 8px; | 919 | .thanks-pay-wrp ul li a span img{ width: 8px; |
| 920 | display: block; | 920 | display: block; |
| 921 | float: left; | 921 | float: left; |
| 922 | margin-left: 3px; | 922 | margin-left: 3px; |
| 923 | margin-top: 4px; | 923 | margin-top: 4px; |
| 924 | margin-right: 5px;} | 924 | margin-right: 5px;} |
| 925 | .thanks-pay-wrp ul li a span{ font-size: 10px; | 925 | .thanks-pay-wrp ul li a span{ font-size: 10px; |
| 926 | line-height: 13px; | 926 | line-height: 13px; |
| 927 | color: #06034C; | 927 | color: #06034C; |
| 928 | width: 100%; | 928 | width: 100%; |
| 929 | display: block; | 929 | display: block; |
| 930 | float: left; | 930 | float: left; |
| 931 | margin-top: 4px;} | 931 | margin-top: 4px;} |
| 932 | .payments-spc-57{ margin:0 76px;} | 932 | .payments-spc-57{ margin:0 76px;} |
| 933 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} | 933 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} |
| 934 | .thanks-r-section{ width: 444px; | 934 | .thanks-r-section{ width: 444px; |
| 935 | display: block; | 935 | display: block; |
| 936 | float: right; | 936 | float: right; |
| 937 | position: absolute; | 937 | position: absolute; |
| 938 | right: 0; | 938 | right: 0; |
| 939 | bottom: 70px;} | 939 | bottom: 70px;} |
| 940 | .logo-common-wrp { | 940 | .logo-common-wrp { |
| 941 | width: 101px; | 941 | width: 101px; |
| 942 | display: block; | 942 | display: block; |
| 943 | margin: 0 auto; | 943 | margin: 0 auto; |
| 944 | } | 944 | } |
| 945 | .logo-common-wrp a{ width: 100%; display: block;} | 945 | .logo-common-wrp a{ width: 100%; display: block;} |
| 946 | .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} | 946 | .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} |
| 947 | .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} | 947 | .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} |
| 948 | .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} | 948 | .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} |
| 949 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 949 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 950 | left: -10px; | 950 | left: -10px; |
| 951 | top: -10px;} | 951 | top: -10px;} |
| 952 | .back-bt img{ width: 20px; margin-right: 5px;} | 952 | .back-bt img{ width: 20px; margin-right: 5px;} |
| 953 | .back-bt:hover{ text-decoration: none; color:#514DA7;} | 953 | .back-bt:hover{ text-decoration: none; color:#514DA7;} |
| 954 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 954 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 955 | left: -10px; | 955 | left: -10px; |
| 956 | bottom: -10px;} | 956 | bottom: -10px;} |
| 957 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 957 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 958 | right: -10px; | 958 | right: -10px; |
| 959 | bottom: -10px;} | 959 | bottom: -10px;} |
| 960 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 960 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 961 | right: -10px; | 961 | right: -10px; |
| 962 | top: -10px;} | 962 | top: -10px;} |
| 963 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; | 963 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; |
| 964 | box-sizing: border-box; margin-top: 25px;} | 964 | box-sizing: border-box; margin-top: 25px;} |
| 965 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} | 965 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} |
| 966 | .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} | 966 | .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} |
| 967 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; | 967 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; |
| 968 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} | 968 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} |
| 969 | .rating-section li p.wdth{ width: 154px;} | 969 | .rating-section li p.wdth{ width: 154px;} |
| 970 | .rating-list{ display: block; float: right;} | 970 | .rating-list{ display: block; float: right;} |
| 971 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} | 971 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} |
| 972 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} | 972 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} |
| 973 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} | 973 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} |
| 974 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} | 974 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} |
| 975 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} | 975 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} |
| 976 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} | 976 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} |
| 977 | .p-follows li a{ width: 100%; display: block; float: left;} | 977 | .p-follows li a{ width: 100%; display: block; float: left;} |
| 978 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} | 978 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} |
| 979 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } | 979 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } |
| 980 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} | 980 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} |
| 981 | /* single mobile */ | 981 | /* single mobile */ |
| 982 | .single-mobileInsight{ width: 441px; display: block; height: 910px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat; left: 0; | 982 | .single-mobileInsight{ width: 441px; display: block; height: 910px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat; left: 0; |
| 983 | right: 0; | 983 | right: 0; |
| 984 | margin: 0 auto; | 984 | margin: 0 auto; |
| 985 | bottom: 0; | 985 | bottom: 0; |
| 986 | top: unset; | 986 | top: unset; |
| 987 | background-position: bottom;} | 987 | background-position: bottom;} |
| 988 | .slide-img{ width: 402px; | 988 | .slide-img{ width: 402px; |
| 989 | position: absolute; | 989 | position: absolute; |
| 990 | bottom: 1px; | 990 | bottom: 1px; |
| 991 | left: 0; | 991 | left: 0; |
| 992 | right: 0; | 992 | right: 0; |
| 993 | margin: 0 auto;} | 993 | margin: 0 auto;} |
| 994 | 994 | ||
| 995 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; | 995 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; |
| 996 | top: 294px; | 996 | top: 294px; |
| 997 | right: -357px;} | 997 | right: -357px;} |
| 998 | .single-left-Insight-comments{position: absolute; | 998 | .single-left-Insight-comments{position: absolute; |
| 999 | width: 423px; | 999 | width: 423px; |
| 1000 | display: block; | 1000 | display: block; |
| 1001 | top: 183px; | 1001 | top: 183px; |
| 1002 | left: -332px;} | 1002 | left: -332px;} |
| 1003 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; | 1003 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; |
| 1004 | margin-bottom: -20px;} | 1004 | margin-bottom: -20px;} |
| 1005 | .custom-c-style{border-radius:0px 25px 25px 25px;} | 1005 | .custom-c-style{border-radius:0px 25px 25px 25px;} |
| 1006 | .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000; | 1006 | .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000; |
| 1007 | border-radius: 25px 25px 0 0; | 1007 | border-radius: 25px 25px 0 0; |
| 1008 | bottom: 0; | 1008 | bottom: 0; |
| 1009 | top: unset; | 1009 | top: unset; |
| 1010 | background-position: bottom;} | 1010 | background-position: bottom;} |
| 1011 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} | 1011 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} |
| 1012 | .m-screen-comments{ width: 370px; | 1012 | .m-screen-comments{ width: 370px; |
| 1013 | display: block; | 1013 | display: block; |
| 1014 | position: absolute; | 1014 | position: absolute; |
| 1015 | left: 0; | 1015 | left: 0; |
| 1016 | z-index: 1; | 1016 | z-index: 1; |
| 1017 | margin-left: -230px; | 1017 | margin-left: -230px; |
| 1018 | margin-top: 50px;} | 1018 | margin-top: 50px;} |
| 1019 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} | 1019 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} |
| 1020 | .p-left{ left: 0;} | 1020 | .p-left{ left: 0;} |
| 1021 | .p-right{ right: 0;} | 1021 | .p-right{ right: 0;} |
| 1022 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%; bottom: 2px;} | 1022 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%; bottom: 2px;} |
| 1023 | .m-screen-right { | 1023 | .m-screen-right { |
| 1024 | width: 370px; | 1024 | width: 370px; |
| 1025 | display: block; | 1025 | display: block; |
| 1026 | position: absolute; | 1026 | position: absolute; |
| 1027 | right: 0; | 1027 | right: 0; |
| 1028 | z-index: 1; | 1028 | z-index: 1; |
| 1029 | margin-right: -207px; | 1029 | margin-right: -207px; |
| 1030 | margin-top: 50px; | 1030 | margin-top: 50px; |
| 1031 | } | 1031 | } |
| 1032 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; | 1032 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; |
| 1033 | bottom: 125px;} | 1033 | bottom: 125px;} |
| 1034 | /* no comments */ | 1034 | /* no comments */ |
| 1035 | .no-comment-count{ width: 100%;} | 1035 | .no-comment-count{ width: 100%;} |
| 1036 | 1036 | ||
| 1037 | 1037 | ||
| 1038 | 1038 | ||
| 1039 | .no-comments-img{ width: 40px; display: block; float: left;} | 1039 | .no-comments-img{ width: 40px; display: block; float: left;} |
| 1040 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} | 1040 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} |
| 1041 | .h-100p{ height: 100%;} | 1041 | .h-100p{ height: 100%;} |
| 1042 | .bord-r{ border-right: 1px solid #A8C2DC;} | 1042 | .bord-r{ border-right: 1px solid #A8C2DC;} |
| 1043 | .ft-comments-group .comments-detail{ position: absolute; | 1043 | .ft-comments-group .comments-detail{ position: absolute; |
| 1044 | padding-left: 50px;} | 1044 | padding-left: 50px;} |
| 1045 | .c-with-photos{ display: block; float: left; margin-left: -120px;} | 1045 | .c-with-photos{ display: block; float: left; margin-left: -120px;} |
| 1046 | .addfrm-spc{ padding-right: 50px;} | 1046 | .addfrm-spc{ padding-right: 50px;} |
| 1047 | .c-product-insight-wrp{ width: 350px; | 1047 | .c-product-insight-wrp{ width: 350px; |
| 1048 | display: block; | 1048 | display: block; |
| 1049 | float: right; | 1049 | float: right; |
| 1050 | position: absolute; | 1050 | position: absolute; |
| 1051 | top: unset; | 1051 | top: unset; |
| 1052 | bottom: 74px; | 1052 | bottom: 74px; |
| 1053 | right: -310px;} | 1053 | right: -310px;} |
| 1054 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} | 1054 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} |
| 1055 | .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1055 | .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} |
| 1056 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} | 1056 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1057 | .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1057 | .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} |
| 1058 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} | 1058 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} |
| 1059 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} | 1059 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} |
| 1060 | .cit-16:hover{color: #EF484F;} | 1060 | .cit-16:hover{color: #EF484F;} |
| 1061 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} | 1061 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} |
| 1062 | .ft-share img{ width: 14px; | 1062 | .ft-share img{ width: 14px; |
| 1063 | display: block; | 1063 | display: block; |
| 1064 | float: left; | 1064 | float: left; |
| 1065 | margin: 8px 7px 0 0px;} | 1065 | margin: 8px 7px 0 0px;} |
| 1066 | .ft-share:hover{color: #EF484F;} | 1066 | .ft-share:hover{color: #EF484F;} |
| 1067 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; | 1067 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; |
| 1068 | left: 0;} | 1068 | left: 0;} |
| 1069 | /* single web screen */ | 1069 | /* single web screen */ |
| 1070 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; | 1070 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; |
| 1071 | left: 0; | 1071 | left: 0; |
| 1072 | right: 0; bottom: 210px; | 1072 | right: 0; bottom: 210px; |
| 1073 | margin: 0 auto;} | 1073 | margin: 0 auto;} |
| 1074 | .web-comment-spc{top: 63px;left: -206px;} | 1074 | .web-comment-spc{top: 63px;left: -206px;} |
| 1075 | .web-ps-insight-spc{ top: 130px; | 1075 | .web-ps-insight-spc{ top: 130px; |
| 1076 | right: -260px;} | 1076 | right: -260px;} |
| 1077 | 1077 | ||
| 1078 | /* screen grab */ | 1078 | /* screen grab */ |
| 1079 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} | 1079 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} |
| 1080 | .screengrab-lspc{top: 113px;} | 1080 | .screengrab-lspc{top: 113px;} |
| 1081 | .screengrab-rspc{top: 92px;right: -362px;} | 1081 | .screengrab-rspc{top: 92px;right: -362px;} |
| 1082 | .view-ticket-wrp-ps{ width: 302px; | 1082 | .view-ticket-wrp-ps{ width: 302px; |
| 1083 | position: absolute; | 1083 | position: absolute; |
| 1084 | z-index: 1; | 1084 | z-index: 1; |
| 1085 | right: -224px; | 1085 | right: -224px; |
| 1086 | top: 82px;} | 1086 | top: 82px;} |
| 1087 | .bc-transparent{ background-image: none !important; border: 0px;} | 1087 | .bc-transparent{ background-image: none !important; border: 0px;} |
| 1088 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} | 1088 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} |
| 1089 | .comments-right-without-bc{ right: -255px;} | 1089 | .comments-right-without-bc{ right: -255px;} |
| 1090 | .screenGrb-comments-wrp{width: 752px;} | 1090 | .screenGrb-comments-wrp{width: 752px;} |
| 1091 | .spc-grbscreen1{ margin-top: 40px;} | 1091 | .spc-grbscreen1{ margin-top: 40px;} |
| 1092 | /* two webscreen */ | 1092 | /* two webscreen */ |
| 1093 | .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; | 1093 | .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; |
| 1094 | right: 0; | 1094 | right: 0; |
| 1095 | margin: 0 auto; | 1095 | margin: 0 auto; |
| 1096 | bottom: 0; | 1096 | bottom: 0; |
| 1097 | top: unset; | 1097 | top: unset; |
| 1098 | background-position: top;} | 1098 | background-position: top;} |
| 1099 | .two-webs-l-spc{ margin-left: -342px; | 1099 | .two-webs-l-spc{ margin-left: -342px; |
| 1100 | margin-top: 37px;} | 1100 | margin-top: 37px;} |
| 1101 | .two-screen-user-photo-bottom { | 1101 | .two-screen-user-photo-bottom { |
| 1102 | width: 127px; | 1102 | width: 127px; |
| 1103 | display: block; | 1103 | display: block; |
| 1104 | position: absolute; | 1104 | position: absolute; |
| 1105 | bottom: 76px; | 1105 | bottom: 76px; |
| 1106 | left: -254px; | 1106 | left: -254px; |
| 1107 | } | 1107 | } |
| 1108 | .two-webscreen-r-insight { | 1108 | .two-webscreen-r-insight { |
| 1109 | width: 423px; | 1109 | width: 423px; |
| 1110 | display: block; | 1110 | display: block; |
| 1111 | position: absolute; | 1111 | position: absolute; |
| 1112 | top: 51px; | 1112 | top: 51px; |
| 1113 | right: 3px; | 1113 | right: 3px; |
| 1114 | } | 1114 | } |
| 1115 | .custom-selected-author-style { | 1115 | .custom-selected-author-style { |
| 1116 | border-radius: 0px 25px 25px 25px; | 1116 | border-radius: 0px 25px 25px 25px; |
| 1117 | border: 2px solid #F9CF35; position: relative; | 1117 | border: 2px solid #F9CF35; position: relative; |
| 1118 | } | 1118 | } |
| 1119 | .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1119 | .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} |
| 1120 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} | 1120 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1121 | .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1121 | .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} |
| 1122 | .custom-selected-author-style .rect { | 1122 | .custom-selected-author-style .rect { |
| 1123 | width: 25px; | 1123 | width: 25px; |
| 1124 | display: block; | 1124 | display: block; |
| 1125 | position: absolute; | 1125 | position: absolute; |
| 1126 | top: 0; | 1126 | top: 0; |
| 1127 | left: 0; | 1127 | left: 0; |
| 1128 | } | 1128 | } |
| 1129 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} | 1129 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} |
| 1130 | .author-two .author-two-photo{ width: 200px; display: block;} | 1130 | .author-two .author-two-photo{ width: 200px; display: block;} |
| 1131 | .two-author-desktop{ width: 913px; | 1131 | .two-author-desktop{ width: 913px; |
| 1132 | display: block; | 1132 | display: block; |
| 1133 | height: 525px; | 1133 | height: 525px; |
| 1134 | position: absolute; | 1134 | position: absolute; |
| 1135 | background-image:url('../images/two-author-desktop.svg'); | 1135 | background-image:url('../images/two-author-desktop.svg'); |
| 1136 | background-repeat: no-repeat; | 1136 | background-repeat: no-repeat; |
| 1137 | left: 0; | 1137 | left: 0; |
| 1138 | right: 0; | 1138 | right: 0; |
| 1139 | margin: 0 auto; | 1139 | margin: 0 auto; |
| 1140 | bottom: 0; | 1140 | bottom: 0; |
| 1141 | top: unset; | 1141 | top: unset; |
| 1142 | background-position: bottom;} | 1142 | background-position: bottom;} |
| 1143 | .author-two-desktop{ position: absolute; | 1143 | .author-two-desktop{ position: absolute; |
| 1144 | top: -130px; | 1144 | top: -130px; |
| 1145 | left: -134px; | 1145 | left: -134px; |
| 1146 | width: 428px;} | 1146 | width: 428px;} |
| 1147 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} | 1147 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} |
| 1148 | .author-one-desktop{ position: absolute; | 1148 | .author-one-desktop{ position: absolute; |
| 1149 | top: -163px; | 1149 | top: -163px; |
| 1150 | right: -201px; | 1150 | right: -201px; |
| 1151 | width: 428px;} | 1151 | width: 428px;} |
| 1152 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} | 1152 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} |
| 1153 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} | 1153 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} |
| 1154 | .desktop-two-logo-spc{ bottom: 40%;} | 1154 | .desktop-two-logo-spc{ bottom: 40%;} |
| 1155 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} | 1155 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} |
| 1156 | .author-two-head-spc{ margin-top: 56px !important;} | 1156 | .author-two-head-spc{ margin-top: 56px !important;} |
| 1157 | .sign-wrp{ width: 100%; display: block; float: left;} | 1157 | .sign-wrp{ width: 100%; display: block; float: left;} |
| 1158 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } | 1158 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } |
| 1159 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} | 1159 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} |
| 1160 | .cust-user2-style{ border-radius:25px 0 25px 25px} | 1160 | .cust-user2-style{ border-radius:25px 0 25px 25px} |
| 1161 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} | 1161 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} |
| 1162 | .single-chat-c-left{left: -405px;} | 1162 | .single-chat-c-left{left: -405px;} |
| 1163 | .single-chat-c-right{top: 244px;right: -404px;} | 1163 | .single-chat-c-right{top: 244px;right: -404px;} |
| 1164 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} | 1164 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} |
| 1165 | .help-view-ticket-right{display: block; | 1165 | .help-view-ticket-right{display: block; |
| 1166 | float: right; | 1166 | float: right; |
| 1167 | right: -84px; | 1167 | right: -84px; |
| 1168 | position: absolute; | 1168 | position: absolute; |
| 1169 | z-index: 1; | 1169 | z-index: 1; |
| 1170 | top: 51px; | 1170 | top: 51px; |
| 1171 | width: 423px;} | 1171 | width: 423px;} |
| 1172 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} | 1172 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} |
| 1173 | .two-author-all-comments{width: 100%; display: block; float:left;} | 1173 | .two-author-all-comments{width: 100%; display: block; float:left;} |
| 1174 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} | 1174 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} |
| 1175 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} | 1175 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} |
| 1176 | .a2-set{ width: 282px; | 1176 | .a2-set{ width: 282px; |
| 1177 | height: 258px; | 1177 | height: 258px; |
| 1178 | position: absolute; | 1178 | position: absolute; |
| 1179 | left: -370px; | 1179 | left: -370px; |
| 1180 | bottom: -50px;} | 1180 | bottom: -50px;} |
| 1181 | .a2true-set{ width: 268px; | 1181 | .a2true-set{ width: 268px; |
| 1182 | height: 319px; | 1182 | height: 319px; |
| 1183 | position: absolute; | 1183 | position: absolute; |
| 1184 | right: -440px; | 1184 | right: -440px; |
| 1185 | bottom: -103px;} | 1185 | bottom: -103px;} |
| 1186 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} | 1186 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} |
| 1187 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } | 1187 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } |
| 1188 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; | 1188 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; |
| 1189 | float: right;} | 1189 | float: right;} |
| 1190 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; right: 0; top: 0px; z-index: 50;} | 1190 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; |
| 1191 | transition-property: right; | ||
| 1192 | -webkit-transition-property: right; | ||
| 1193 | -moz-transition-property: right; | ||
| 1194 | -o-transition-property: right; | ||
| 1195 | |||
| 1196 | transition-duration: 0.3s; | ||
| 1197 | -webkit-transition-duration: 0.3s; | ||
| 1198 | -moz-transition-duration: 0.3s; | ||
| 1199 | -o-transition-duration: 0.3s; | ||
| 1200 | |||
| 1201 | transition-timing-function: linear; | ||
| 1202 | -webkit-transition-timing-function: linear; | ||
| 1203 | -moz-transition-timing-function: linear; | ||
| 1204 | -o-transition-timing-function: linear; | ||
| 1205 | right: -500px; | ||
| 1206 | |||
| 1207 | } | ||
| 1191 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} | 1208 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} |
| 1192 | .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} | 1209 | .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} |
| 1193 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} | 1210 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} |
| 1194 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} | 1211 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} |
| 1195 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} | 1212 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} |
| 1196 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} | 1213 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} |
| 1197 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } | 1214 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } |
| 1198 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} | 1215 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} |
| 1199 | .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} | 1216 | .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} |
| 1200 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} | 1217 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} |
| 1201 | .user-photo{width: 109px; | 1218 | .user-photo{width: 109px; |
| 1202 | display: block; | 1219 | display: block; |
| 1203 | float: left;} | 1220 | float: left;} |
| 1204 | .cat-minus{ right: -11px !important; | 1221 | .cat-minus{ right: -11px !important; |
| 1205 | margin-left: unset !important;} | 1222 | margin-left: unset !important;} |
| 1206 | .mt-50{ margin-top: 50px;} | 1223 | .mt-50{ margin-top: 50px;} |
| 1207 | .sub-menu-user{ width: 150px; | 1224 | .sub-menu-user{ width: 150px; |
| 1208 | display: block; | 1225 | display: block; |
| 1209 | position: absolute; | 1226 | position: absolute; |
| 1210 | background: #fff; | 1227 | background: #fff; |
| 1211 | right: 0px; | 1228 | right: 0px; |
| 1212 | border: 1px solid #eaeaea; | 1229 | border: 1px solid #eaeaea; |
| 1213 | border-radius: 5px; | 1230 | border-radius: 5px; |
| 1214 | padding: 5px; | 1231 | padding: 5px; |
| 1215 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1232 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1216 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1233 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1217 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1234 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1218 | } | 1235 | } |
| 1219 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } | 1236 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } |
| 1220 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} | 1237 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} |
| 1221 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} | 1238 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} |
| 1222 | .sub-menu-user ul li a:hover{color:#514DA7;} | 1239 | .sub-menu-user ul li a:hover{color:#514DA7;} |
| 1223 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} | 1240 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} |
| 1224 | .bounced-user-comments li{ display: block; float: left; position: relative;} | 1241 | .bounced-user-comments li{ display: block; float: left; position: relative;} |
| 1225 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} | 1242 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} |
| 1226 | .bounced-user-comments .b-user-head img{ width: 26px; | 1243 | .bounced-user-comments .b-user-head img{ width: 26px; |
| 1227 | display: block; | 1244 | display: block; |
| 1228 | float: left; | 1245 | float: left; |
| 1229 | position: absolute; | 1246 | position: absolute; |
| 1230 | left:-13px;} | 1247 | left:-13px;} |
| 1231 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} | 1248 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} |
| 1232 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} | 1249 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} |
| 1233 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} | 1250 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} |
| 1234 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} | 1251 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} |
| 1235 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; | 1252 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; |
| 1236 | height: 3px; | 1253 | height: 3px; |
| 1237 | display: block; | 1254 | display: block; |
| 1238 | background: #ccc; | 1255 | background: #ccc; |
| 1239 | float: left; | 1256 | float: left; |
| 1240 | } | 1257 | } |
| 1241 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; | 1258 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; |
| 1242 | width: auto; | 1259 | width: auto; |
| 1243 | height: auto; | 1260 | height: auto; |
| 1244 | padding: 3px 7px; | 1261 | padding: 3px 7px; |
| 1245 | display: block; | 1262 | display: block; |
| 1246 | border-radius: 3px; | 1263 | border-radius: 3px; |
| 1247 | margin-top: -2px;} | 1264 | margin-top: -2px;} |
| 1248 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} | 1265 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} |
| 1249 | .bc_border{} | 1266 | .bc_border{} |
| 1250 | .info_bc_spc{ float: left;} | 1267 | .info_bc_spc{ float: left;} |
| 1251 | .info_bc_spc li{ padding:0px; color: #514DA7;} | 1268 | .info_bc_spc li{ padding:0px; color: #514DA7;} |
| 1252 | .info_bc_spc li a{color: #514DA7; opacity: 1;} | 1269 | .info_bc_spc li a{color: #514DA7; opacity: 1;} |
| 1253 | .info_bc_spc li img{ margin-top: 4px;} | 1270 | .info_bc_spc li img{ margin-top: 4px;} |
| 1254 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} | 1271 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} |
| 1255 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} | 1272 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} |
| 1256 | .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} | 1273 | .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} |
| 1257 | .ft-normal{ font-weight: 500 !important;} | 1274 | .ft-normal{ font-weight: 500 !important;} |
| 1258 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} | 1275 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} |
| 1259 | 1276 | ||
| 1260 | /* placeholder */ | 1277 | /* placeholder */ |
| 1261 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ | 1278 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ |
| 1262 | font-size: 10px; color: #000; opacity: 0.7; | 1279 | font-size: 10px; color: #000; opacity: 0.7; |
| 1263 | } | 1280 | } |
| 1264 | 1281 | ||
| 1265 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 1282 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 1266 | font-size: 10px; color: #000; opacity: 0.7; | 1283 | font-size: 10px; color: #000; opacity: 0.7; |
| 1267 | } | 1284 | } |
| 1268 | 1285 | ||
| 1269 | .joined_wrapper .add_rply input::placeholder { | 1286 | .joined_wrapper .add_rply input::placeholder { |
| 1270 | font-size: 10px; color: #000; opacity: 0.7; | 1287 | font-size: 10px; color: #000; opacity: 0.7; |
| 1271 | } | 1288 | } |
| 1272 | 1289 | ||
| 1273 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} | 1290 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} |
| 1274 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } | 1291 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } |
| 1275 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} | 1292 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} |
| 1276 | .full-width{ width: 100%; display: block; float: left;} | 1293 | .full-width{ width: 100%; display: block; float: left;} |
| 1277 | .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} | 1294 | .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} |
| 1278 | .child-full-width .b-user-head{ padding-left: 70px;} | 1295 | .child-full-width .b-user-head{ padding-left: 70px;} |
| 1279 | .child-full-width .b-user-head img{ left:33px;} | 1296 | .child-full-width .b-user-head img{ left:33px;} |
| 1280 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} | 1297 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} |
| 1281 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} | 1298 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} |
| 1282 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} | 1299 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} |
| 1283 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} | 1300 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} |
| 1284 | .comments-footer{ width: 100%; display: block; float: left;} | 1301 | .comments-footer{ width: 100%; display: block; float: left;} |
| 1285 | .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} | 1302 | .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} |
| 1286 | .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} | 1303 | .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} |
| 1287 | .add_comments_chat img{ width: 15px;} | 1304 | .add_comments_chat img{ width: 15px;} |
| 1288 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} | 1305 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} |
| 1289 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} | 1306 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} |
| 1290 | button:focus{ border:0px; outline: none;} | 1307 | button:focus{ border:0px; outline: none;} |
| 1291 | .short_by{left: -100px !important;} | 1308 | .short_by{left: -100px !important;} |
| 1292 | input:focus{ outline: none;} | 1309 | input:focus{ outline: none;} |
| 1293 | .comments-footer textarea:focus{ outline: none;} | ||
| 1310 | .comments-footer textarea:focus{ outline: none;} | ||
| 1311 | .close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;} | ||
| 1312 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} | ||
| 1313 | .close_chat_bx:hover{ background-color: #ccc;} | ||
| 1314 | /* chat box close */ | ||
| 1315 | .cht_close{ | ||
| 1316 | transition-property: right; | ||
| 1317 | -webkit-transition-property: right; | ||
| 1318 | -moz-transition-property: right; | ||
| 1319 | -o-transition-property: right; | ||
| 1320 | |||
| 1321 | transition-duration: 0.3s; | ||
| 1322 | -webkit-transition-duration: 0.3s; | ||
| 1323 | -moz-transition-duration: 0.3s; | ||
| 1324 | -o-transition-duration: 0.3s; | ||
| 1325 | |||
| 1326 | transition-timing-function: linear; | ||
| 1327 | -webkit-transition-timing-function: linear; | ||
| 1328 | -moz-transition-timing-function: linear; | ||
| 1329 | -o-transition-timing-function: linear; | ||
| 1330 | right: 0px; | ||
| 1331 | } | ||
| 1332 |
src/assets/images/close.png
195 Bytes
src/components/LandingPage.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid main-wrp"> | 3 | <div class="container-fluid main-wrp"> |
| 4 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 4 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 5 | <a class="navbar-brand" href="#" | 5 | <a class="navbar-brand" href="#" |
| 6 | ><img src="../assets/images/logo.png" | 6 | ><img src="../assets/images/logo.png" |
| 7 | /></a> | 7 | /></a> |
| 8 | <button | 8 | <button |
| 9 | class="navbar-toggler" | 9 | class="navbar-toggler" |
| 10 | type="button" | 10 | type="button" |
| 11 | data-toggle="collapse" | 11 | data-toggle="collapse" |
| 12 | data-target="#navbarsExample03" | 12 | data-target="#navbarsExample03" |
| 13 | aria-controls="navbarsExample03" | 13 | aria-controls="navbarsExample03" |
| 14 | aria-expanded="false" | 14 | aria-expanded="false" |
| 15 | aria-label="Toggle navigation" | 15 | aria-label="Toggle navigation" |
| 16 | > | 16 | > |
| 17 | <span class="navbar-toggler-icon"></span> | 17 | <span class="navbar-toggler-icon"></span> |
| 18 | <span class="navbar-toggler-icon"></span> | 18 | <span class="navbar-toggler-icon"></span> |
| 19 | <span class="navbar-toggler-icon"></span> | 19 | <span class="navbar-toggler-icon"></span> |
| 20 | </button> | 20 | </button> |
| 21 | 21 | ||
| 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 23 | <ul class="navbar-nav mr-auto"> | 23 | <ul class="navbar-nav mr-auto"> |
| 24 | <li class="nav-item active"> | 24 | <li class="nav-item active"> |
| 25 | <a class="nav-link" href="#">About</a> | 25 | <a class="nav-link" href="#">About</a> |
| 26 | </li> | 26 | </li> |
| 27 | <li class="nav-item"> | 27 | <li class="nav-item"> |
| 28 | <a class="nav-link" href="#">Masterclass</a> | 28 | <a class="nav-link" href="#">Masterclass</a> |
| 29 | </li> | 29 | </li> |
| 30 | <li class="nav-item"> | 30 | <li class="nav-item"> |
| 31 | <a class="nav-link" href="#">Stories</a> | 31 | <a class="nav-link" href="#">Stories</a> |
| 32 | </li> | 32 | </li> |
| 33 | <li class="nav-item spotLight-img"> | 33 | <li class="nav-item spotLight-img"> |
| 34 | <a class="nav-link" href="#" | 34 | <a class="nav-link" href="#" |
| 35 | ><img src="../assets/images/SPOTLight.svg" | 35 | ><img src="../assets/images/SPOTLight.svg" |
| 36 | /></a> | 36 | /></a> |
| 37 | </li> | 37 | </li> |
| 38 | <li class="nav-item"> | 38 | <li class="nav-item"> |
| 39 | <a class="nav-link" href="#">Library</a> | 39 | <a class="nav-link" href="#">Library</a> |
| 40 | </li> | 40 | </li> |
| 41 | </ul> | 41 | </ul> |
| 42 | </div> | 42 | </div> |
| 43 | </nav> | 43 | </nav> |
| 44 | <!-- menu wrapper --> | 44 | <!-- menu wrapper --> |
| 45 | <div class="sign-wrp"> | 45 | <div class="sign-wrp"> |
| 46 | <div class="row col-reverse"> | 46 | <div class="row col-reverse"> |
| 47 | <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | 47 | <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> |
| 48 | <!-- users land image --> | 48 | <!-- users land image --> |
| 49 | <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | 49 | <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> |
| 50 | <h1 class="welcome-hd-back"> | 50 | <h1 class="welcome-hd-back"> |
| 51 | Welcome <br /> | 51 | Welcome <br /> |
| 52 | back | 52 | back |
| 53 | </h1> | 53 | </h1> |
| 54 | </div> | 54 | </div> |
| 55 | <!-- users land image --> | 55 | <!-- users land image --> |
| 56 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 56 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 57 | <div class="form-layout signup-frm-spc"> | 57 | <div class="form-layout signup-frm-spc"> |
| 58 | <form> | 58 | <form> |
| 59 | <h5>LogIn using</h5> | 59 | <h5> LogIn with email</h5> |
| 60 | <div class="social-login"> | ||
| 61 | <ul> | ||
| 62 | <li> | ||
| 63 | <a @click="login"><img src="../assets/images/google.svg" /></a> | ||
| 64 | </li> | ||
| 65 | <li> | ||
| 66 | <a @click="login"><img src="../assets/images/linkdin.svg" /></a> | ||
| 67 | </li> | ||
| 68 | <li> | ||
| 69 | <a @click="login"><img src="../assets/images/twitter.svg" /></a> | ||
| 70 | </li> | ||
| 71 | </ul> | ||
| 72 | </div> | ||
| 73 | <h5>or LogIn with email</h5> | ||
| 74 | <div class="fill-form"> | 60 | <div class="fill-form"> |
| 75 | <label for="inputEmail" class="sr-only">Email address</label> | 61 | <label for="inputEmail" class="sr-only">Email address</label> |
| 76 | <input | 62 | <input |
| 77 | type="email" | 63 | type="email" |
| 78 | id="inputEmail" | 64 | id="inputEmail" |
| 79 | class="form-control" | 65 | class="form-control" |
| 80 | placeholder="Your Email ID" | 66 | placeholder="Your Email ID" |
| 81 | v-model="userData.email" | 67 | v-model="userData.email" |
| 82 | /> | 68 | /> |
| 83 | <label for="inputPassword" class="sr-only">Password</label> | 69 | <label for="inputPassword" class="sr-only">Password</label> |
| 84 | <input | 70 | <input |
| 85 | type="password" | 71 | type="password" |
| 86 | id="inputPassword" | 72 | id="inputPassword" |
| 87 | class="form-control" | 73 | class="form-control" |
| 88 | placeholder="Password" | 74 | placeholder="Password" |
| 89 | v-model="userData.password" | 75 | v-model="userData.password" |
| 90 | /> | 76 | /> |
| 91 | 77 | ||
| 92 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="loginWIthEmail"> | 78 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="loginWIthEmail"> |
| 93 | <img src="../assets/images/key.svg" /> Log In to your account | 79 | <img src="../assets/images/key.svg" /> Log In to your account |
| 94 | </a> | 80 | </a> |
| 95 | <p class="forget-pass light-font-weight"> | ||
| 96 | Forgot Password? <a @click="goToReset">Reset</a> | ||
| 97 | </p> | ||
| 98 | <h3 class="ft-normal">Don’t have an account? <a @click="goToSignUp">SignUp</a></h3> | ||
| 99 | </div> | 81 | </div> |
| 100 | </form> | 82 | </form> |
| 101 | </div> | 83 | </div> |
| 102 | </div> | 84 | </div> |
| 103 | <!-- sign up --> | 85 | <!-- sign up --> |
| 104 | </div> </div> | 86 | </div> </div> |
| 105 | <!-- body wrapper --> | 87 | <!-- body wrapper --> |
| 106 | </div> | 88 | </div> |
| 107 | </main> | 89 | </main> |
| 108 | </template> | 90 | </template> |
| 109 | 91 | ||
| 110 | <script> | 92 | <script> |
| 111 | 93 | ||
| 112 | import Vue from "vue"; | 94 | import Vue from "vue"; |
| 113 | import router from "../router"; | 95 | import router from "../router"; |
| 114 | import $ from "jquery"; | 96 | import $ from "jquery"; |
| 115 | import axios from "axios"; | 97 | import axios from "axios"; |
| 116 | 98 | ||
| 117 | export default { | 99 | export default { |
| 118 | name: "LandingPage", | 100 | name: "LandingPage", |
| 119 | 101 | ||
| 120 | data() { | 102 | data() { |
| 121 | return { | 103 | return { |
| 122 | loggedinFlag: false, | 104 | loggedinFlag: false, |
| 123 | userData:{}, | 105 | userData:{}, |
| 124 | }; | 106 | }; |
| 125 | }, | 107 | }, |
| 126 | mounted() { | 108 | mounted() { |
| 127 | this.$auth.logout(); | ||
| 128 | localStorage.removeItem("spotlight_usertoken"); | 109 | localStorage.removeItem("spotlight_usertoken"); |
| 129 | localStorage.removeItem("spotlight_email"); | 110 | localStorage.removeItem("spotlight_email"); |
| 130 | }, | 111 | }, |
| 131 | methods: { | 112 | methods: { |
| 132 | login() { | ||
| 133 | this.$auth.loginWithRedirect(); | ||
| 134 | }, | ||
| 135 | goToSignUp(){ | ||
| 136 | this.$router.push("/signup"); | ||
| 137 | }, | ||
| 138 | goToReset() { | ||
| 139 | this.$router.push("/reset"); | ||
| 140 | }, | ||
| 141 | loginWIthEmail(){ | 113 | loginWIthEmail(){ |
| 142 | axios | 114 | axios |
| 143 | .post("/login", this.userData) | 115 | .post("/superAdmin/login", this.userData) |
| 144 | .then((response) => { | 116 | .then((response) => { |
| 145 | console.log("login- response",response) | 117 | console.log("login- response",response) |
| 146 | this.$toaster.success(response.data.message) | 118 | this.$toaster.success(response.data.message) |
| 147 | if(response.data.status == 'success'){ | 119 | if(response.data.status == 'success'){ |
| 148 | localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) | 120 | localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) |
| 149 | this.$router.push("/profile"); | 121 | this.$router.push("/profile"); |
| 150 | } | 122 | } |
| 151 | }) | 123 | }) |
| 152 | .catch( (error) =>{ | 124 | .catch( (error) =>{ |
| 153 | if (error.response) { | 125 | if (error.response) { |
| 154 | this.$toaster.error(error.response.data.message) | 126 | this.$toaster.error(error.response.data.message) |
| 155 | if(error.response.data.message == 'Email Not Verified'){ | 127 | if(error.response.data.message == 'Email Not Verified'){ |
| 156 | localStorage.setItem('spotlight_email', this.userData.email); | 128 | localStorage.setItem('spotlight_email', this.userData.email); |
| 157 | this.$router.push({ name: 'Otp', params: { flag: true }}); | 129 | this.$router.push({ name: 'Otp', params: { flag: true }}); |
| 158 | } | 130 | } |
| 159 | } | 131 | } |
| 160 | }); | 132 | }); |
| 161 | } | 133 | } |
| 162 | }, | 134 | }, |
| 163 | }; | 135 | }; |
| 164 | </script> | 136 | </script> |
| 165 | <style> | 137 | <style> |
| 166 | .light-font-weight { | 138 | .light-font-weight { |
| 167 | font-weight: 400 !important; | 139 | font-weight: 400 !important; |
| 168 | } | 140 | } |
| 169 | 141 | ||
| 170 | 142 | ||
| 171 | </style> | 143 | </style> |
| 172 | 144 |
src/components/Profile.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <!-- profile --> | 3 | <!-- profile --> |
| 4 | <div class="popup-wrp" style="display: none"> | 4 | <div class="container-fluid inner-wrp" style="background: transparent"> |
| 5 | <div class="overlay" @click="hideDialog"></div> | ||
| 6 | <div class="popup-set" id="add-profile" style="display: none"> | ||
| 7 | <div class="popup-header"> | ||
| 8 | <div class="user-photo common_color"> | ||
| 9 | <img src="../assets/images/m-user.svg" /> | ||
| 10 | </div> | ||
| 11 | <!-- header user --> | ||
| 12 | |||
| 13 | <ul> | ||
| 14 | <li> | ||
| 15 | <a href="#" | ||
| 16 | ><img src="../assets/images/replace.svg" /><span | ||
| 17 | >Replace Avatar</span | ||
| 18 | ></a | ||
| 19 | > | ||
| 20 | </li> | ||
| 21 | <li> | ||
| 22 | <a href="#" | ||
| 23 | ><img src="../assets/images/randomise.svg" /><span | ||
| 24 | >Randomise Avatar</span | ||
| 25 | ></a | ||
| 26 | > | ||
| 27 | </li> | ||
| 28 | </ul> | ||
| 29 | </div> | ||
| 30 | <!-- header --> | ||
| 31 | <div class="popup-body"> | ||
| 32 | <form class="popup-forms"> | ||
| 33 | <div class="row"> | ||
| 34 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | ||
| 35 | <div class="form-group floating-label"> | ||
| 36 | <input | ||
| 37 | type="text" | ||
| 38 | class="form-control" | ||
| 39 | v-model="userData.firstName" | ||
| 40 | placeholder=" " | ||
| 41 | id="fname" | ||
| 42 | /> | ||
| 43 | <label for="fname">First Name</label> | ||
| 44 | </div> | ||
| 45 | </div> | ||
| 46 | <!-- input --> | ||
| 47 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | ||
| 48 | <div class="form-group floating-label"> | ||
| 49 | <input | ||
| 50 | type="text" | ||
| 51 | class="form-control" | ||
| 52 | value="" | ||
| 53 | placeholder=" " | ||
| 54 | id="lname" | ||
| 55 | v-model="userData.lastName" | ||
| 56 | /> | ||
| 57 | <label for="lname" class="lname">Last Name</label> | ||
| 58 | </div> | ||
| 59 | </div> | ||
| 60 | <!-- input --> | ||
| 61 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | ||
| 62 | <div class="form-group floating-label"> | ||
| 63 | <input | ||
| 64 | type="text" | ||
| 65 | class="form-control" | ||
| 66 | value="" | ||
| 67 | v-model="userData.designation" | ||
| 68 | placeholder=" " | ||
| 69 | id="designation" | ||
| 70 | /> | ||
| 71 | <label for="designation">Designation</label> | ||
| 72 | </div> | ||
| 73 | </div> | ||
| 74 | <!-- input --> | ||
| 75 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | ||
| 76 | <div class="form-group floating-label"> | ||
| 77 | <input | ||
| 78 | type="text" | ||
| 79 | class="form-control" | ||
| 80 | v-model="userData.organisation" | ||
| 81 | id="company" | ||
| 82 | placeholder=" " | ||
| 83 | /> | ||
| 84 | <label for="company">Company</label> | ||
| 85 | </div> | ||
| 86 | </div> | ||
| 87 | <!-- input --> | ||
| 88 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | ||
| 89 | <div class="form-group floating-label"> | ||
| 90 | <textarea | ||
| 91 | type="text" | ||
| 92 | class="form-control" | ||
| 93 | value="" | ||
| 94 | v-model="userData.bio" | ||
| 95 | id="yourself" | ||
| 96 | placeholder=" " | ||
| 97 | ></textarea> | ||
| 98 | <label for="yourself" | ||
| 99 | >Tell others a little about yourself</label | ||
| 100 | > | ||
| 101 | </div> | ||
| 102 | </div> | ||
| 103 | <!-- input --> | ||
| 104 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | ||
| 105 | <p class="things">Three things that you talk more about</p> | ||
| 106 | |||
| 107 | <ul class="interests"> | ||
| 108 | <li v-for="(interest, i) in userData.interests" :key="i"> | ||
| 109 | <span>{{ interest }}</span> | ||
| 110 | <a | ||
| 111 | href="javascript:void(0);" | ||
| 112 | @click="removeInterest(i)" | ||
| 113 | class="cat-minus" | ||
| 114 | ><img src="../assets/images/minus.svg" | ||
| 115 | /></a> | ||
| 116 | </li> | ||
| 117 | <li> | ||
| 118 | <input | ||
| 119 | class="" | ||
| 120 | placeholder="Add interest" | ||
| 121 | v-model="interestName" | ||
| 122 | /> | ||
| 123 | <a href="javascript:void(0);" @click="addInterest()" | ||
| 124 | ><img src="../assets/images/plus-circle.svg" | ||
| 125 | /></a> | ||
| 126 | </li> | ||
| 127 | </ul> | ||
| 128 | </div> | ||
| 129 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | ||
| 130 | <p class="things">Choose Background color</p> | ||
| 131 | |||
| 132 | <ul class="colors"> | ||
| 133 | <li> | ||
| 134 | <a | ||
| 135 | href="javascript:void(0);" | ||
| 136 | id="#C4C4C4" | ||
| 137 | class="silver" | ||
| 138 | @click="changeColor('#C4C4C4')" | ||
| 139 | ></a> | ||
| 140 | </li> | ||
| 141 | <li> | ||
| 142 | <a | ||
| 143 | href="javascript:void(0);" | ||
| 144 | id="#FFF6D7" | ||
| 145 | class="milk-punch" | ||
| 146 | @click="changeColor('#FFF6D7')" | ||
| 147 | ></a> | ||
| 148 | </li> | ||
| 149 | <li> | ||
| 150 | <a | ||
| 151 | href="javascript:void(0);" | ||
| 152 | id="#BDDBFF" | ||
| 153 | class="french-pass" | ||
| 154 | @click="changeColor('#BDDBFF')" | ||
| 155 | ></a> | ||
| 156 | </li> | ||
| 157 | <li> | ||
| 158 | <a | ||
| 159 | href="javascript:void(0);" | ||
| 160 | id="#C0FAFE" | ||
| 161 | class="cyan-french-pass" | ||
| 162 | @click="changeColor('#C0FAFE')" | ||
| 163 | ></a> | ||
| 164 | </li> | ||
| 165 | <li> | ||
| 166 | <a | ||
| 167 | href="javascript:void(0);" | ||
| 168 | id="#FFDBDC" | ||
| 169 | class="cosmos" | ||
| 170 | @click="changeColor('#FFDBDC')" | ||
| 171 | ></a> | ||
| 172 | </li> | ||
| 173 | <li> | ||
| 174 | <a | ||
| 175 | href="javascript:void(0);" | ||
| 176 | id="#FEE6AC" | ||
| 177 | class="cape-Honey" | ||
| 178 | @click="changeColor('#FEE6AC')" | ||
| 179 | ></a> | ||
| 180 | </li> | ||
| 181 | <li> | ||
| 182 | <a | ||
| 183 | href="javascript:void(0);" | ||
| 184 | id="#E5DFF0" | ||
| 185 | class="snuff" | ||
| 186 | @click="changeColor('#E5DFF0')" | ||
| 187 | ></a> | ||
| 188 | </li> | ||
| 189 | <li> | ||
| 190 | <a | ||
| 191 | href="javascript:void(0);" | ||
| 192 | id="#DFE7EF" | ||
| 193 | class="catskillWhite" | ||
| 194 | @click="changeColor('#DFE7EF')" | ||
| 195 | ></a> | ||
| 196 | </li> | ||
| 197 | <li> | ||
| 198 | <a | ||
| 199 | href="javascript:void(0);" | ||
| 200 | id="#FFF" | ||
| 201 | class="white" | ||
| 202 | @click="changeColor('#FFF')" | ||
| 203 | ></a> | ||
| 204 | </li> | ||
| 205 | </ul> | ||
| 206 | </div> | ||
| 207 | <div class="col-lg-12 mt-50"> | ||
| 208 | <p class="notifications"> | ||
| 209 | Recieve notifications when you recieve a comment/ Upvote | ||
| 210 | </p> | ||
| 211 | <div class="switch-bt-wrp"> | ||
| 212 | <label class="switch-btn"> | ||
| 213 | <input type="checkbox" class="toggle-btn" /> | ||
| 214 | <span class="rounded-toggle"></span> | ||
| 215 | </label> | ||
| 216 | <span class="onoff">on/off</span> | ||
| 217 | </div> | ||
| 218 | </div> | ||
| 219 | <div class="col-lg-12"> | ||
| 220 | <p class="add-socail-ch"> | ||
| 221 | Add your social Channels <span></span> | ||
| 222 | </p> | ||
| 223 | </div> | ||
| 224 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 225 | <div class="form-group floating-label"> | ||
| 226 | <select class="form-group" > | ||
| 227 | <option value="Facebook">Facebook</option> | ||
| 228 | </select> | ||
| 229 | <span class="select-arrow" | ||
| 230 | ><img src="../assets/images/chevron-down.svg" | ||
| 231 | /></span> | ||
| 232 | </div> | ||
| 233 | </div> | ||
| 234 | <!-- input --> | ||
| 235 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | ||
| 236 | <div class="form-group floating-label"> | ||
| 237 | <input | ||
| 238 | type="text" | ||
| 239 | class="form-control" | ||
| 240 | value="" | ||
| 241 | placeholder="Paste your profile URL here" | ||
| 242 | id="" | ||
| 243 | v-model="userData.socialMediaProfiles.facebook" | ||
| 244 | /> | ||
| 245 | </div> | ||
| 246 | </div> | ||
| 247 | <!-- input --> | ||
| 248 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 249 | <div class="form-group floating-label"> | ||
| 250 | <select class="form-group" > | ||
| 251 | <option value="Linkedin">Linkedin</option> | ||
| 252 | </select> | ||
| 253 | <span class="select-arrow" | ||
| 254 | ><img src="../assets/images/chevron-down.svg" | ||
| 255 | /></span> | ||
| 256 | </div> | ||
| 257 | </div> | ||
| 258 | <!-- input --> | ||
| 259 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | ||
| 260 | <div class="form-group floating-label"> | ||
| 261 | <input | ||
| 262 | type="text" | ||
| 263 | class="form-control" | ||
| 264 | value="" | ||
| 265 | placeholder="Paste your profile URL here" | ||
| 266 | id="" | ||
| 267 | v-model="userData.socialMediaProfiles.linkedin" | ||
| 268 | /> | ||
| 269 | </div> | ||
| 270 | </div> | ||
| 271 | <!-- input --> | ||
| 272 | |||
| 273 | <!-- input --> | ||
| 274 | <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 275 | <div class="form-group floating-label"> | ||
| 276 | <select class="form-group"> | ||
| 277 | <option @click="addSocialLink">Add another</option> | ||
| 278 | </select> | ||
| 279 | <span class="select-arrow" | ||
| 280 | ><img src="../assets/images/chevron-down.svg" | ||
| 281 | /></span> | ||
| 282 | </div> | ||
| 283 | </div> --> | ||
| 284 | <!-- input --> | ||
| 285 | </div> | ||
| 286 | <a href="javascript:void(0);" @click="closeDialog" class="next-bt" | ||
| 287 | >Save</a | ||
| 288 | > | ||
| 289 | </form> | ||
| 290 | </div> | ||
| 291 | <div class="clearfix"></div> | ||
| 292 | </div> | ||
| 293 | <!-- add profile --> | ||
| 294 | </div> | ||
| 295 | <!-- profile --> | ||
| 296 | <div class="container-fluid inner-wrp"> | ||
| 297 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 5 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 298 | <a class="navbar-brand" href="#" | 6 | <a class="navbar-brand" href="#" |
| 299 | ><img src="../assets/images/logo.png" | 7 | ><img src="../assets/images/logo.png" |
| 300 | /></a> | 8 | /></a> |
| 301 | <button | 9 | <button |
| 302 | class="navbar-toggler" | 10 | class="navbar-toggler" |
| 303 | type="button" | 11 | type="button" |
| 304 | data-toggle="collapse" | 12 | data-toggle="collapse" |
| 305 | data-target="#navbarsExample03" | 13 | data-target="#navbarsExample03" |
| 306 | aria-controls="navbarsExample03" | 14 | aria-controls="navbarsExample03" |
| 307 | aria-expanded="false" | 15 | aria-expanded="false" |
| 308 | aria-label="Toggle navigation" | 16 | aria-label="Toggle navigation" |
| 309 | > | 17 | > |
| 310 | <span class="navbar-toggler-icon"></span> | 18 | <span class="navbar-toggler-icon"></span> |
| 311 | <span class="navbar-toggler-icon"></span> | 19 | <span class="navbar-toggler-icon"></span> |
| 312 | <span class="navbar-toggler-icon"></span> | 20 | <span class="navbar-toggler-icon"></span> |
| 313 | </button> | 21 | </button> |
| 314 | 22 | ||
| 315 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 23 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 316 | <ul class="navbar-nav mr-auto"> | 24 | <ul class="navbar-nav mr-auto"> |
| 317 | <li class="nav-item active"> | 25 | <li class="nav-item active"> |
| 318 | <a class="nav-link" href="#">About</a> | 26 | <a class="nav-link">Create Case Study</a> |
| 319 | </li> | ||
| 320 | <li class="nav-item"> | ||
| 321 | <a class="nav-link" href="#">Masterclass</a> | ||
| 322 | </li> | ||
| 323 | <li class="nav-item"> | ||
| 324 | <a class="nav-link" href="#">Stories</a> | ||
| 325 | </li> | ||
| 326 | <li class="nav-item"> | ||
| 327 | <a class="nav-link" href="#">Library</a> | ||
| 328 | </li> | 27 | </li> |
| 329 | </ul> | 28 | </ul> |
| 330 | </div> | 29 | </div> |
| 331 | <div class="user-profile-photo common_color"> | 30 | <div class=""> |
| 332 | <a href="javascript:void(0);" @click="userprofileshowDialog" | 31 | <a href="javascript:void(0);" @click="logout">Log Out </a> |
| 333 | ><img src="../assets/images/m-user.svg" | ||
| 334 | /></a> | ||
| 335 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | ||
| 336 | <ul> | ||
| 337 | <li><a href="javascript:void(0);" @click="addProfileDialog">Edit Profile</a></li> | ||
| 338 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | ||
| 339 | </ul> | ||
| 340 | </div> | ||
| 341 | </div> | 32 | </div> |
| 342 | </nav> | 33 | </nav> |
| 343 | <!-- menu wrapper --> | 34 | <!-- menu wrapper --> |
| 344 | <div class="row profile-tab-spc-top"> | 35 | <div class="row profile-tab-spc-top"> |
| 345 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | 36 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 346 | <div class="inner-profile-ps common_color"> | 37 | <div class="user-profile"> |
| 347 | <img src="../assets/images/m-user.svg" class="" /> | 38 | <div class="form-group floating-label"> |
| 39 | <select | ||
| 40 | class="form-control" | ||
| 41 | v-model="userData" | ||
| 42 | v-on:change="selectUser(userData)" | ||
| 43 | > | ||
| 44 | <option value="null">Select User</option> | ||
| 45 | <option v-for="(user, i) in userList" :key="i" :value="i"> | ||
| 46 | {{ user.name }} ({{ user.email }}) | ||
| 47 | </option> | ||
| 48 | </select> | ||
| 49 | </div> | ||
| 348 | </div> | 50 | </div> |
| 349 | <!-- user profile --> | 51 | </div> |
| 52 | </div> | ||
| 350 | 53 | ||
| 351 | <div class="user-profile"> | 54 | <div class="row"> |
| 352 | <h1> | 55 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 353 | {{ userData.firstName }} {{ userData.lastName }} | 56 | <ul class="navbar-nav mr-auto"> |
| 354 | <a href="#" class="tags">{{ userData.role }}</a> | 57 | <li class="nav-item active"> |
| 355 | </h1> | 58 | <h5 class="nav-link">Intro Screen Record</h5> |
| 356 | <ul class="joined-info"> | 59 | </li> |
| 357 | <li> | 60 | </ul> |
| 358 | <a href="javascript:void(0);" @click="addProfileDialog">Add your work</a> | 61 | </div> |
| 359 | <img src="../assets/images/u-info-icon.png" /> <span></span> | 62 | </div> |
| 360 | </li> | 63 | <!-- 1st row --> |
| 64 | <div class="row"> | ||
| 65 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 66 | <div class="form-group floating-label"> | ||
| 67 | <label for="lname" class="lname">Case Study Name</label> | ||
| 68 | <input | ||
| 69 | type="text" | ||
| 70 | class="form-control" | ||
| 71 | value="" | ||
| 72 | placeholder=" " | ||
| 73 | v-model="caseStudy.caseStudyDetails.intro.name" | ||
| 74 | /> | ||
| 75 | </div> | ||
| 76 | </div> | ||
| 77 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 78 | <div class="form-group floating-label"> | ||
| 79 | <label for="lname" class="lname">App Name</label> | ||
| 80 | <input | ||
| 81 | type="text" | ||
| 82 | class="form-control" | ||
| 83 | value="" | ||
| 84 | placeholder=" " | ||
| 85 | v-model="caseStudy.caseStudyDetails.intro.app" | ||
| 86 | /> | ||
| 87 | </div> | ||
| 88 | </div> | ||
| 89 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 90 | <div class="form-group floating-label"> | ||
| 91 | <label for="lname" class="lname">Focus</label> | ||
| 92 | <input | ||
| 93 | type="text" | ||
| 94 | class="form-control" | ||
| 95 | value="" | ||
| 96 | placeholder=" " | ||
| 97 | v-model="caseStudy.caseStudyDetails.intro.focus" | ||
| 98 | /> | ||
| 99 | </div> | ||
| 100 | </div> | ||
| 101 | </div> | ||
| 102 | <!-- 1st row end --> | ||
| 103 | |||
| 104 | <!-- 2nd row --> | ||
| 105 | <div class="row"> | ||
| 106 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 107 | <div class="form-group floating-label"> | ||
| 108 | <label for="lname" class="lname">Case Study Type</label> | ||
| 109 | <select | ||
| 110 | class="form-control" | ||
| 111 | v-model="caseStudy.caseStudyDetails.intro.type" | ||
| 112 | > | ||
| 113 | <option value="null">Select Case Type</option> | ||
| 114 | <option value="Retake">Retake</option> | ||
| 115 | <option value="Behind-the-scenes">Behind-the-scenes</option> | ||
| 116 | <option value="Critique">Critique</option> | ||
| 117 | <option value="Juxtapose">Juxtapose</option> | ||
| 118 | </select> | ||
| 119 | </div> | ||
| 120 | </div> | ||
| 121 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 122 | <div class="form-group floating-label"> | ||
| 123 | <label for="lname" class="lname">Platform</label> | ||
| 124 | <input | ||
| 125 | type="text" | ||
| 126 | class="form-control" | ||
| 127 | value="" | ||
| 128 | placeholder=" " | ||
| 129 | v-model="caseStudy.caseStudyDetails.intro.platForm" | ||
| 130 | /> | ||
| 131 | </div> | ||
| 132 | </div> | ||
| 133 | |||
| 134 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 135 | <div class="form-group floating-label"> | ||
| 136 | <label for="lname" class="lname"> Insight Logo</label> | ||
| 137 | <input | ||
| 138 | @change="createImage('logo')" | ||
| 139 | type="file" | ||
| 140 | name="photso" | ||
| 141 | id="logo" | ||
| 142 | accept="image/*" | ||
| 143 | /> | ||
| 144 | </div> | ||
| 145 | </div> | ||
| 146 | </div> | ||
| 147 | <!-- 2nd row --> | ||
| 148 | <!-- 3rd row --> | ||
| 149 | <div class="row"> | ||
| 150 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 151 | <div class="form-group floating-label"> | ||
| 152 | <label for="lname" class="lname"></label> | ||
| 153 | <ul class="interests"> | ||
| 361 | <li> | 154 | <li> |
| 362 | <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span> | 155 | <input |
| 156 | class="" | ||
| 157 | placeholder="Add Focus Areas" | ||
| 158 | v-model="focusName" | ||
| 159 | /> | ||
| 160 | <a href="javascript:void(0);" @click="addInsight('focus')" | ||
| 161 | ><img src="../assets/images/plus-circle.svg" | ||
| 162 | /></a> | ||
| 363 | </li> | 163 | </li> |
| 364 | <li> | 164 | |
| 365 | <a href="#" | 165 | <li |
| 366 | >Joined on | 166 | v-for="(interest, i) in caseStudy.caseStudyDetails.focusAreas" |
| 367 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a | 167 | :key="i" |
| 368 | > | 168 | > |
| 169 | <span>{{ interest }}</span> | ||
| 170 | <a | ||
| 171 | href="javascript:void(0);" | ||
| 172 | @click="removeInsight(i, 'focus')" | ||
| 173 | class="cat-minus" | ||
| 174 | ><img src="../assets/images/minus.svg" | ||
| 175 | /></a> | ||
| 369 | </li> | 176 | </li> |
| 370 | </ul> | 177 | </ul> |
| 371 | <p>{{ userData.bio }}</p> | ||
| 372 | </div> | 178 | </div> |
| 373 | </div> | 179 | </div> |
| 374 | <!-- user profile --> | 180 | |
| 375 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | 181 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 376 | <div class="list-style-group" v-if="userData.awards"> | 182 | <div class="form-group floating-label"> |
| 377 | <p>Awards</p> | 183 | <label for="lname" class="lname"></label> |
| 378 | <ul class="list-style"> | 184 | <ul class="interests"> |
| 379 | <li> | 185 | <li> |
| 380 | <a href="javascript:void(0);"><img src="../assets/images/icon-1.png" /></a> | 186 | <input |
| 187 | class="" | ||
| 188 | placeholder="Add Insight Tags" | ||
| 189 | v-model="insightName" | ||
| 190 | /> | ||
| 191 | <a href="javascript:void(0);" @click="addInsight('insight')" | ||
| 192 | ><img src="../assets/images/plus-circle.svg" | ||
| 193 | /></a> | ||
| 194 | </li> | ||
| 195 | |||
| 196 | <li | ||
| 197 | v-for="(interest, i) in caseStudy.caseStudyDetails.insightTags" | ||
| 198 | :key="i" | ||
| 199 | > | ||
| 200 | <span>{{ interest }}</span> | ||
| 201 | <a | ||
| 202 | href="javascript:void(0);" | ||
| 203 | @click="removeInsight(i, 'insight')" | ||
| 204 | class="cat-minus" | ||
| 205 | ><img src="../assets/images/minus.svg" | ||
| 206 | /></a> | ||
| 381 | </li> | 207 | </li> |
| 382 | </ul> | 208 | </ul> |
| 383 | </div> | 209 | </div> |
| 384 | <!-- list style --> | ||
| 385 | </div> | 210 | </div> |
| 386 | </div> | 211 | </div> |
| 387 | <div class="clearfix"></div> | 212 | <!-- 3rd row end --> |
| 388 | <div class="row top-brd profile-tab-spc-top"> | 213 | |
| 389 | <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> | 214 | <!-- outdor --> |
| 390 | <ul class="profile-tab"> | 215 | <div class="row profile-tab-spc-top"> |
| 391 | <li class="active c-0"> | 216 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 392 | <a href="javascript:void(0);" @click="caseDialog" | 217 | <ul class="navbar-nav mr-auto"> |
| 393 | >Case-studies(0)</a | 218 | <li class="nav-item active"> |
| 394 | > | 219 | <h5 class="nav-link">Outro Screen Record</h5> |
| 395 | </li> | ||
| 396 | <li class="rp-all"> | ||
| 397 | <a href="javascript:void(0);" @click="repliesDialog" | ||
| 398 | >Comments/Replies(1)</a | ||
| 399 | > | ||
| 400 | </li> | 220 | </li> |
| 401 | </ul> | 221 | </ul> |
| 402 | </div> | 222 | </div> |
| 223 | </div> | ||
| 224 | |||
| 225 | <!-- 1st row --> | ||
| 226 | <div class="row"> | ||
| 403 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 227 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 404 | <ul class="social-connects"> | 228 | <div class="form-group floating-label"> |
| 405 | <li><span>Follow</span></li> | 229 | <label for="lname" class="lname">Designer Name</label> |
| 406 | <li> | 230 | <input |
| 407 | <a href="javascript:void(0);" @click="addProfileDialog" class="active" | 231 | type="text" |
| 408 | ><img src="../assets/images/plus.png" | 232 | class="form-control" |
| 409 | /></a> | 233 | value="" |
| 410 | <span class="connect-social-channel" | 234 | placeholder=" " |
| 411 | >Connect your social channels</span | 235 | v-model="caseStudy.caseStudyDetails.outro.designer" |
| 412 | > | 236 | /> |
| 237 | </div> | ||
| 238 | </div> | ||
| 239 | |||
| 240 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 241 | <div class="form-group floating-label"> | ||
| 242 | <label for="lname" class="lname">Illustrations Name</label> | ||
| 243 | <input | ||
| 244 | type="text" | ||
| 245 | class="form-control" | ||
| 246 | value="" | ||
| 247 | placeholder=" " | ||
| 248 | v-model="caseStudy.caseStudyDetails.outro.illustrations" | ||
| 249 | /> | ||
| 250 | </div> | ||
| 251 | </div> | ||
| 252 | |||
| 253 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 254 | <div class="form-group floating-label"> | ||
| 255 | <label for="lname" class="lname"> Author Image</label> | ||
| 256 | <input | ||
| 257 | @change="createImage('outdor')" | ||
| 258 | type="file" | ||
| 259 | name="photos" | ||
| 260 | id="outdor" | ||
| 261 | accept="image/*" | ||
| 262 | /> | ||
| 263 | </div> | ||
| 264 | </div> | ||
| 265 | </div> | ||
| 266 | <!-- 1st row --> | ||
| 267 | <!-- outdoor ends --> | ||
| 268 | |||
| 269 | <!-- outdor --> | ||
| 270 | <div class="row profile-tab-spc-top"> | ||
| 271 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 272 | <ul class="navbar-nav mr-auto"> | ||
| 273 | <li class="nav-item active"> | ||
| 274 | <h5 class="nav-link">Add SLides</h5> | ||
| 413 | </li> | 275 | </li> |
| 414 | </ul> | 276 | </ul> |
| 415 | </div> | 277 | </div> |
| 416 | </div> | 278 | </div> |
| 417 | <!-- tab style --> | 279 | |
| 418 | <div class="profile-data-wrp"> | 280 | <!-- 1st row --> |
| 419 | <div class="container-fluid data-wrp" id="case-study-0"> | 281 | <div class="row"> |
| 420 | <div class="row"> | 282 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 421 | <div class="col-lg-12"> | 283 | <div class="form-group floating-label"> |
| 422 | <div class="profile-buttons"> | 284 | <label for="lname" class="lname">Slides Name</label> |
| 285 | <select | ||
| 286 | class="form-control" | ||
| 287 | v-model="slideId" | ||
| 288 | v-on:change="slideSelected(slideId)" | ||
| 289 | > | ||
| 290 | <option value="null">Select Slide</option> | ||
| 291 | <option v-for="(template, i) in templateList" :key="i" :value="i"> | ||
| 292 | {{ template._id }} | ||
| 293 | </option> | ||
| 294 | </select> | ||
| 295 | </div> | ||
| 296 | </div> | ||
| 297 | </div> | ||
| 298 | <!-- 1st row --> | ||
| 299 | |||
| 300 | <!-- case study slides--> | ||
| 301 | <div | ||
| 302 | class="row profile-tab-spc-top" | ||
| 303 | v-for="(slide, i) in caseStudy.slides" | ||
| 304 | :key="i" | ||
| 305 | > | ||
| 306 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 307 | <ul class="navbar-nav mr-auto"> | ||
| 308 | <li class="nav-item active"> | ||
| 309 | <p class="nav-link"> | ||
| 310 | <b>Screen {{ i + 1 }}</b> | ||
| 423 | <a | 311 | <a |
| 424 | href="javascript:void(0);" | 312 | style="cursor: pointer; color: red; font-size: 0.8rem" |
| 425 | class="profile-sm-bt center-and-spc bt-active" | 313 | @click="removeSlide(i)" |
| 426 | @click="addProfileDialog" | ||
| 427 | >Update Profile</a | ||
| 428 | > | 314 | > |
| 429 | <a href="#" class="profile-md-bt center-and-spc" | 315 | Remove</a |
| 430 | >Explore Case-studies</a | ||
| 431 | > | 316 | > |
| 432 | <a href="#" class="profile-lg-bt">Publish Your Case Study</a> | 317 | </p> |
| 433 | </div> | 318 | </li> |
| 319 | </ul> | ||
| 320 | </div> | ||
| 321 | |||
| 322 | <div class="row"> | ||
| 323 | <div | ||
| 324 | class="col-sm-4 col-md-4 col-lg-4 col-xl-4" | ||
| 325 | v-for="(field, j) in slide.metaData.fields" | ||
| 326 | :key="j" | ||
| 327 | > | ||
| 328 | <div | ||
| 329 | class="form-group floating-label" | ||
| 330 | v-if="field.fieldType == 'text'" | ||
| 331 | > | ||
| 332 | <label for="lname" class="lname">{{ field.displayName }}</label> | ||
| 333 | <input | ||
| 334 | type="text" | ||
| 335 | class="form-control" | ||
| 336 | value="" | ||
| 337 | placeholder=" " | ||
| 338 | v-model="field.fieldValue" | ||
| 339 | /> | ||
| 340 | </div> | ||
| 341 | |||
| 342 | <div | ||
| 343 | class="form-group floating-label" | ||
| 344 | v-if="field.fieldType == 'image'" | ||
| 345 | > | ||
| 346 | <label for="lname" class="lname"> {{ field.displayName }}</label> | ||
| 347 | <input | ||
| 348 | @change="fieldcreateImage(i, j)" | ||
| 349 | type="file" | ||
| 350 | name="photo" | ||
| 351 | :id="i + '' + j" | ||
| 352 | accept="image/*" | ||
| 353 | /> | ||
| 434 | </div> | 354 | </div> |
| 435 | </div> | 355 | </div> |
| 436 | </div> | 356 | </div> |
| 437 | <!-- case study 0 --> | 357 | |
| 438 | <div | 358 | <div class="row"> |
| 439 | class="container-fluid data-wrp" | 359 | <div |
| 440 | id="all-replies" | 360 | class="col-sm-4 col-md-4 col-lg-4 col-xl-4" |
| 441 | style="display: none" | 361 | v-for="(cum, j) in slide.metaData.comments" |
| 442 | > | 362 | :key="j" |
| 443 | <div class="row"> | 363 | > |
| 444 | <div class="replies col-md-12"> | 364 | <div class="form-group floating-label"> |
| 445 | <div class="replies-wrp"> | 365 | <label for="lname" class="lname">Comment Box {{ j + 1 }}</label> |
| 446 | <h1>PhonePe vs GooglePay <span>Critique</span></h1> | 366 | <input |
| 447 | <ul class="joined-info"> | 367 | type="text" |
| 448 | <li><a href="#">37D</a> <span></span></li> | 368 | class="form-control" |
| 449 | <li><img src="../assets/images/heart.png" /></li> | 369 | value="" |
| 450 | <li><a href="#"> 4</a></li> | 370 | placeholder=" " |
| 451 | <li class="comment-spc"> | 371 | v-model="cum.comment" |
| 452 | <img src="../assets/images/comment.svg" /> | 372 | /> |
| 453 | </li> | ||
| 454 | <li><a href="#"> 6</a></li> | ||
| 455 | </ul> | ||
| 456 | <p> | ||
| 457 | I wonder what the difference between “<strong> | ||
| 458 | Assistant</strong | ||
| 459 | >” and “<strong>Pickup and Drop</strong>” are. If they are the | ||
| 460 | same, there are two “call to actions” for the same workflow | ||
| 461 | </p> | ||
| 462 | </div> | ||
| 463 | <!-- replies wrapper --> | ||
| 464 | </div> | 373 | </div> |
| 465 | <!-- all card wrpper --> | ||
| 466 | </div> | 374 | </div> |
| 467 | </div> | 375 | </div> |
| 468 | <!-- all Relpies --> | ||
| 469 | </div> | 376 | </div> |
| 377 | |||
| 378 | <!-- 1st row end --> | ||
| 379 | <!-- case study ends --> | ||
| 380 | <div class="clearfix"></div> | ||
| 381 | |||
| 382 | <!-- users land image --> | ||
| 383 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | ||
| 384 | <div class="form-layout signup-frm-spc"> | ||
| 385 | <form> | ||
| 386 | <a | ||
| 387 | href="javascript:void(0);" | ||
| 388 | class="btn btn-lg sb-button" | ||
| 389 | type="submit" | ||
| 390 | @click="submit" | ||
| 391 | > | ||
| 392 | <img src="../assets/images/key.svg" /> submit | ||
| 393 | </a> | ||
| 394 | </form> | ||
| 395 | </div> | ||
| 396 | </div> | ||
| 397 | |||
| 470 | <!-- data wrp --> | 398 | <!-- data wrp --> |
| 471 | <!-- body wrapper --> | 399 | <!-- body wrapper --> |
| 472 | </div> | 400 | </div> |
| 473 | </main> | 401 | </main> |
| 474 | </template> | 402 | </template> |
| 475 | 403 | ||
| 476 | <script> | 404 | <script> |
| 477 | import Vue from "vue"; | 405 | import Vue from "vue"; |
| 478 | import router from "../router"; | 406 | import router from "../router"; |
| 479 | import $ from "jquery"; | 407 | import $ from "jquery"; |
| 480 | import axios from "axios"; | 408 | import axios from "axios"; |
| 481 | 409 | ||
| 482 | export default { | 410 | export default { |
| 483 | name: "Profile", | 411 | name: "Profile", |
| 484 | 412 | ||
| 485 | data() { | 413 | data() { |
| 486 | return { | 414 | return { |
| 487 | loggedinFlag: false, | 415 | loggedinFlag: false, |
| 416 | userData: null, | ||
| 488 | usertoken: null, | 417 | usertoken: null, |
| 489 | userData: {}, | 418 | insightName: null, |
| 490 | interestName: null, | 419 | focusName: null, |
| 491 | oldId: null, | 420 | slideId: null, |
| 492 | socialLink:null, | 421 | userList: [], |
| 493 | currentSocialLinkName:null, | 422 | templateList: [], |
| 423 | caseStudy: { | ||
| 424 | caseStudyDetails: { | ||
| 425 | userId: [], | ||
| 426 | intro: { | ||
| 427 | name: null, | ||
| 428 | logoURL: null, | ||
| 429 | app: null, | ||
| 430 | type: null, | ||
| 431 | focus: null, | ||
| 432 | readTime: null, | ||
| 433 | platForm: null, | ||
| 434 | authors: [], | ||
| 435 | }, | ||
| 436 | outro: { | ||
| 437 | authorImage: [], | ||
| 438 | authors: [], |
src/components/SingleMobileScreenInsightOne.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | 3 | ||
| 4 | <div class="container-fluid episode-intro"> | 4 | <div class="container-fluid episode-intro"> |
| 5 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 5 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 6 | <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> | 6 | <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a> |
| 7 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | 7 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> |
| 8 | <span class="navbar-toggler-icon"></span> | 8 | <span class="navbar-toggler-icon"></span> |
| 9 | <span class="navbar-toggler-icon"></span> | 9 | <span class="navbar-toggler-icon"></span> |
| 10 | <span class="navbar-toggler-icon"></span> | 10 | <span class="navbar-toggler-icon"></span> |
| 11 | </button> | 11 | </button> |
| 12 | <div class="user-profile-photo insights-profile"> | 12 | <div class="user-profile-photo insights-profile"> |
| 13 | <a href="#"><img src="../assets/images/user.png"></a> | 13 | <a href="#"><img src="../assets/images/user.png"></a> |
| 14 | </div> | 14 | </div> |
| 15 | </nav> | 15 | </nav> |
| 16 | <!-- menu wrapper --> | 16 | <!-- menu wrapper --> |
| 17 | <div class="intro-startup"> | 17 | <div class="intro-startup"> |
| 18 | <!-- chat box --> | ||
| 19 | <div class="bounce-board-wrp" id="cht_box_close"> | ||
| 20 | <div class="inner-wrp-bc"> | ||
| 21 | <div class="bc-top-head"> | ||
| 22 | <span class="bc-head"> | ||
| 23 | <img src="../assets/images/bounce-icon.svg" /> Bounce Board | ||
| 24 | </span> | ||
| 25 | <div class="action-sort"> | ||
| 26 | <span class="sort-by">SORT BY</span> <div class="btn-group"> | ||
| 27 | <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||
| 28 | BEST | ||
| 29 | </button> | ||
| 30 | <div class="dropdown-menu short_by"> | ||
| 31 | <a class="dropdown-item" href="#">BEST 1</a> | ||
| 32 | <a class="dropdown-item" href="#">BEST 2</a> | ||
| 33 | <a class="dropdown-item" href="#">BEST 3</a> | ||
| 34 | </div> | ||
| 35 | </div> | ||
| 36 | <a href="javasript:void(0);" @click="chtbox_close" class="close_chat_bx"><img src="../assets/images/close.png" alt="close" /></a><!-- close --> | ||
| 37 | </div><!-- action sort --> | ||
| 38 | </div><!-- top head --> | ||
| 39 | <div class="bounce-board-body"> | ||
| 40 | <ul class="bounced-user-comments"> | ||
| 41 | <li class="bc_border"> | ||
| 42 | <div class="lbord"></div><!-- border --> | ||
| 43 | <div class="parent-full-width parent_bg"> | ||
| 44 | <div class="full-width"> | ||
| 45 | <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | ||
| 46 | <span class="head-content">wanderingirl </span> | ||
| 47 | <ul> | ||
| 48 | <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | ||
| 49 | <li> <span></span>3days ago</li> | ||
| 50 | <li> <span class="au">Author</span></li> | ||
| 51 | </ul> | ||
| 52 | |||
| 53 | |||
| 54 | </div><!-- header --> | ||
| 55 | <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p> | ||
| 56 | <div class="joined_wrapper"> | ||
| 57 | <ul class="joined-info info_bc_spc"> | ||
| 58 | <li> <img src="../assets/images/purple-heart.png"> </li> | ||
| 59 | <li> <a href="#"> 4</a> </li> | ||
| 60 | <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | ||
| 61 | <li> <a href="#"> 6</a> </li> | ||
| 62 | </ul> | ||
| 63 | <div class="add_rply"> | ||
| 64 | <input type="text" placeholder="Add your reply" /> | ||
| 65 | </div><!-- rly form --> | ||
| 66 | </div><!-- joined wrapper --> | ||
| 67 | </div><!-- full width --> | ||
| 68 | </div><!-- parent --> | ||
| 69 | <div class="child-full-width"> | ||
| 70 | <div class="full-width"> | ||
| 71 | <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | ||
| 72 | <span class="head-content">Onenoisyboi </span> | ||
| 73 | <ul> | ||
| 74 | <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | ||
| 75 | <li> <span></span>3days ago</li> | ||
| 76 | <li> <span class="red">Mod</span></li> | ||
| 77 | </ul> | ||
| 78 | |||
| 79 | |||
| 80 | </div><!-- header --> | ||
| 81 | <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | ||
| 82 | <div class="joined_wrapper"> | ||
| 83 | <ul class="joined-info info_bc_spc"> | ||
| 84 | <li> <img src="../assets/images/purple-heart.png"> </li> | ||
| 85 | <li> <a href="#"> 4</a> </li> | ||
| 86 | <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | ||
| 87 | <li> <a href="#"> 6</a> </li> | ||
| 88 | </ul> | ||
| 89 | <div class="add_rply"> | ||
| 90 | <input type="text" placeholder="Add your reply" /> | ||
| 91 | </div><!-- rly form --> | ||
| 92 | </div><!-- joined wrapper --> | ||
| 93 | </div><!-- full width --> | ||
| 94 | </div><!-- child wrapper --> | ||
| 95 | </li> | ||
| 96 | |||
| 97 | </ul><!-- all user comments --> | ||
| 98 | <ul class="bounced-user-comments"> | ||
| 99 | <li class="bc_border"> | ||
| 100 | <div class="bc_brd_l"></div><!-- border --> | ||
| 101 | <div class="parent-full-width "> | ||
| 102 | <div class="full-width"> | ||
| 103 | <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | ||
| 104 | <span class="head-content">wanderingirl </span> | ||
| 105 | <ul> | ||
| 106 | <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | ||
| 107 | <li> <span></span>3days ago</li> | ||
| 108 | |||
| 109 | </ul> | ||
| 110 | |||
| 111 | |||
| 112 | </div><!-- header --> | ||
| 113 | <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p> | ||
| 114 | <div class="joined_wrapper"> | ||
| 115 | <ul class="joined-info info_bc_spc"> | ||
| 116 | <li> <img src="../assets/images/purple-heart.png"> </li> | ||
| 117 | <li> <a href="#"> 4</a> </li> | ||
| 118 | <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | ||
| 119 | <li> <a href="#"> 6</a> </li> | ||
| 120 | </ul> | ||
| 121 | <div class="add_rply"> | ||
| 122 | <input type="text" placeholder="Add your reply" /> | ||
| 123 | </div><!-- rly form --> | ||
| 124 | </div><!-- joined wrapper --> | ||
| 125 | </div><!-- full width --> | ||
| 126 | </div><!-- parent --> | ||
| 127 | <div class="child-full-width"> | ||
| 128 | <div class="full-width"> | ||
| 129 | <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | ||
| 130 | <span class="head-content">Onenoisyboi </span> | ||
| 131 | <ul> | ||
| 132 | <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | ||
| 133 | <li> <span></span>3days ago</li> | ||
| 134 | |||
| 135 | </ul> | ||
| 136 | |||
| 137 | |||
| 138 | </div><!-- header --> | ||
| 139 | <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | ||
| 140 | <div class="joined_wrapper"> | ||
| 141 | <ul class="joined-info info_bc_spc"> | ||
| 142 | <li> <img src="../assets/images/purple-heart.png"> </li> | ||
| 143 | <li> <a href="#"> 4</a> </li> | ||
| 144 | <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | ||
| 145 | <li> <a href="#"> 6</a> </li> | ||
| 146 | </ul> | ||
| 147 | <div class="add_rply"> | ||
| 148 | <input type="text" placeholder="Add your reply" /> | ||
| 149 | </div><!-- rly form --> | ||
| 150 | </div><!-- joined wrapper --> | ||
| 151 | </div><!-- full width --> | ||
| 152 | </div><!-- child wrapper --> | ||
| 153 | <div class="child-full-width"> | ||
| 154 | <div class="full-width"> | ||
| 155 | <div class="b-user-head"><img src="../assets/images/b-user1.png" /> | ||
| 156 | <span class="head-content">Onenoisyboi </span> | ||
| 157 | <ul> | ||
| 158 | <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> | ||
| 159 | <li> <span></span>3days ago</li> | ||
| 160 | |||
| 161 | </ul> | ||
| 162 | |||
| 163 | |||
| 164 | </div><!-- header --> | ||
| 165 | <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> | ||
| 166 | <div class="joined_wrapper"> | ||
| 167 | <ul class="joined-info info_bc_spc"> | ||
| 168 | <li> <img src="../assets/images/purple-heart.png"> </li> | ||
| 169 | <li> <a href="#"> 4</a> </li> | ||
| 170 | <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> | ||
| 171 | <li> <a href="#"> 6</a> </li> | ||
| 172 | </ul> | ||
| 173 | <div class="add_rply"> | ||
| 174 | <input type="text" placeholder="Add your reply" /> | ||
| 175 | </div><!-- rly form --> | ||
| 176 | </div><!-- joined wrapper --> | ||
| 177 | </div><!-- full width --> | ||
| 178 | </div><!-- child wrapper --> | ||
| 179 | </li> | ||
| 180 | |||
| 181 | </ul><!-- all user comments --> | ||
| 182 | </div><!-- bounce board body --> | ||
| 183 | <div class="comments-footer"> | ||
| 184 | <textarea></textarea> | ||
| 185 | <div class="comments-footer-wrp"> | ||
| 186 | <a href="#" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a> | ||
| 187 | </div> | ||
| 188 | </div><!-- comments footer --> | ||
| 189 | </div> | ||
| 190 | </div><!-- bounceboard wrp --> | ||
| 191 | <!-- chat box --> | ||
| 18 | <div class="single-mobileInsight"> | 192 | <div class="single-mobileInsight"> |
| 19 | <img src="../assets/images/slide.png" class="slide-img" /> | 193 | <img src="../assets/images/slide.png" class="slide-img" /> |
| 20 | <div class="single-left-Insight-comments"> | 194 | <div class="single-left-Insight-comments"> |
| 21 | <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> | 195 | <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> |
| 22 | <div class="single-author-li-comments"> | 196 | <div class="single-author-li-comments"> |
| 23 | <div class="a-intro-comments custom-c-style"> | 197 | <div class="a-intro-comments custom-c-style"> |
| 24 | <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> | 198 | <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> |
| 25 | <ul class="rly-comment-set"> | 199 | <ul class="rly-comment-set"> |
| 26 | <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | 200 | <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> |
| 27 | <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | 201 | <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> |
| 28 | </ul> | 202 | </ul> |
| 29 | </div><!-- comments box --> | 203 | </div><!-- comments box --> |
| 30 | </div><!-- single author comments --> | 204 | </div><!-- single author comments --> |
| 31 | <div class="single-author-li-comments"> | 205 | <div class="single-author-li-comments"> |
| 32 | <div class="a-intro-comments custom-c-style"> | 206 | <div class="a-intro-comments custom-c-style"> |
| 33 | <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> | 207 | <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> |
| 34 | <ul class="rly-comment-set"> | 208 | <ul class="rly-comment-set"> |
| 35 | <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> | 209 | <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li> |
| 36 | <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> | 210 | <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li> |
| 37 | </ul> | 211 | </ul> |
| 38 | </div><!-- comments box --> | 212 | </div><!-- comments box --> |
| 39 | </div><!-- single author comments --> | 213 | </div><!-- single author comments --> |
| 40 | </div><!-- single mobile Left insight --> | 214 | </div><!-- single mobile Left insight --> |
| 41 | <div class="c-product-insight-wrp"> | 215 | <div class="c-product-insight-wrp"> |
| 42 | <div class="single-author-li-comments "> | 216 | <div class="single-author-li-comments "> |
| 43 | <div class="a-intro-comments custom-selected-style"> | 217 | <div class="a-intro-comments custom-selected-style"> |
| 44 | <img src="../assets/images/rect.svg" class="rect" /> | 218 | <img src="../assets/images/rect.svg" class="rect" /> |
| 45 | <div class="top-wrp"> | 219 | <div class="top-wrp"> |
| 46 | PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> | 220 | PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a> |
| 47 | </div> | 221 | </div> |
| 48 | <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> | 222 | <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> |
| 49 | <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. | 223 | <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. |
| 50 | <br><br> | 224 | <br><br> |
| 51 | When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> | 225 | When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> |
| 52 | </p> | 226 | </p> |
| 53 | <div class="footer"> | 227 | <div class="footer"> |
| 54 | <a href="#" class="cit-16">16 Citations</a> | 228 | <a href="#" class="cit-16">16 Citations</a> |
| 55 | <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> | 229 | <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> |
| 56 | </div><!-- footer --> | 230 | </div><!-- footer --> |
| 57 | 231 | ||
| 58 | </div><!-- comments box --> | 232 | </div><!-- comments box --> |
| 59 | </div><!-- single author comments --> | 233 | </div><!-- single author comments --> |
| 60 | 234 | ||
| 61 | </div><!-- single mobile Right insight --> | 235 | </div><!-- single mobile Right insight --> |
| 62 | </div><!-- Single Mobile Insight --> | 236 | </div><!-- Single Mobile Insight --> |
| 63 | <div class="footer-nav"> | 237 | <div class="footer-nav"> |
| 64 | <div class="footer-top white-bg"> | 238 | <div class="footer-top white-bg"> |
| 65 | <div class="row"> | 239 | <div class="row"> |
| 66 | <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> | 240 | <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> |
| 67 | <div class="row h-100p"> | 241 | <div class="row h-100p"> |
| 68 | <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> | 242 | <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> |
| 69 | <ul class="top-intro-bt"> | 243 | <ul class="top-intro-bt"> |
| 70 | <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> | 244 | <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li> |
| 71 | <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> | 245 | <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> |
| 72 | </ul> | 246 | </ul> |
| 73 | </div> | 247 | </div> |
| 74 | <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> | 248 | <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r c_hide"> |
| 75 | <div class="ft-comments-group no-comment-count"> | 249 | <div class="ft-comments-group no-comment-count "> |
| 76 | <div class="row"> | 250 | <div class="row"> |
| 77 | 251 | ||
| 78 | <div class="col-12"> | 252 | <div class="col-12"> |
| 79 | <img src="../assets/images/u-comments.svg" class="no-comments-img" /> | 253 | <img src="../assets/images/u-comments.svg" class="no-comments-img" /> |
| 80 | <div class="comments-detail"> | 254 | <div class="comments-detail"> |
| 81 | <span class="no-c-yet">No comments yet</span> | 255 | <span class="no-c-yet">No comments yet</span> |
| 82 | <p>Be the first one to post a comment to start a discussion</p> | 256 | <p>Be the first one to post a comment to start a discussion</p> |
| 83 | </div><!-- comments detail --> | 257 | </div><!-- comments detail --> |
| 84 | </div> </div> | 258 | </div> </div> |
| 85 | </div><!-- comments Group --> | 259 | </div><!-- comments Group --> |
| 86 | </div></div> | 260 | </div></div> |
| 87 | </div> | 261 | </div> |
| 88 | <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> | 262 | <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> |
| 89 | 263 | ||
| 90 | <div class="comment-frm no-c-frm"> | 264 | <div class="comment-frm no-c-frm"> |
| 91 | <div class="row"> | 265 | <div class="row"> |
| 92 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 266 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 93 | <div class="form-group frm-wdth"> | 267 | <div class="form-group frm-wdth"> |
| 94 | <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id=""> | 268 | <input type="text" class="form-control" @click="open_ct_box" placeholder="Kathy, Something on your mind?" id="open_ct_box"> |
| 95 | </div></div> | 269 | </div></div> |
| 96 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 270 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 97 | <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> | 271 | <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> |
| 98 | </div> | 272 | </div> |
| 99 | </div><!-- comment from --> | 273 | </div><!-- comment from --> |
| 100 | </div> </div></div> | 274 | </div> </div></div> |
| 101 | </div><!-- footer top --> | 275 | </div><!-- footer top --> |
| 102 | <div class="footer-bottom"> | 276 | <div class="footer-bottom"> |
| 103 | <ul> | 277 | <ul> |
| 104 | <li class="active"></li> | 278 | <li class="active"></li> |
| 105 | <li></li> | 279 | <li></li> |
| 106 | </ul> | 280 | </ul> |
| 107 | </div><!-- footer top --> | 281 | </div><!-- footer top --> |
| 108 | </div><!-- footer --> | 282 | </div><!-- footer --> |
| 109 | 283 | ||
| 110 | </div> | 284 | </div> |
| 111 | <!-- body wrapper --> | 285 | <!-- body wrapper --> |
| 112 | </div> | 286 | </div> |
| 113 | <!-- main wrapper --> | 287 | <!-- main wrapper --> |
| 114 | </main> | 288 | </main> |
| 115 | </template> | 289 | </template> |
| 116 | 290 | ||
| 117 | <script> | 291 | <script> |
| 118 | import Vue from "vue"; | 292 | import Vue from "vue"; |
| 119 | import router from "../router"; | 293 | import router from "../router"; |
| 120 | 294 | ||
| 121 | export default { | 295 | export default { |
| 122 | name: "SingleMobileScreenInsightOne", | 296 | name: "SingleMobileScreenInsightOne", |
| 123 | 297 | ||
| 124 | data() { | 298 | data() { |
| 125 | return {}; | 299 | return {}; |
| 126 | }, | 300 | }, |
| 127 | mounted() {}, | 301 | mounted() {}, |
| 128 | methods: { | 302 | methods: { |
| 129 | goToLogin() { | 303 | goToLogin() { |
| 130 | this.$router.push("/"); | 304 | this.$router.push("/"); |
| 131 | }, | 305 | }, |
| 132 | goToSignUp() { | 306 | goToSignUp() { |
| 133 | this.$router.push("/signup"); | 307 | this.$router.push("/signup"); |
| 134 | }, | 308 | }, |
| 135 | 309 | chtbox_close(){ | |
| 310 | $("#cht_box_close").removeClass("cht_close"); | ||
| 311 | $("#open_ct_box, .c_hide").show(); | ||
| 312 | $(".footer-top").addClass("white-bg"); | ||
| 313 | }, | ||
| 314 | open_ct_box(){ | ||
| 315 | $("#cht_box_close").addClass("cht_close"); | ||
| 316 | $("#open_ct_box, .c_hide").hide(); | ||
| 317 | $(".footer-top").removeClass("white-bg"); | ||
| 318 | }, | ||
| 136 | }, | 319 | }, |
| 137 | }; | 320 | }; |
| 138 | </script> | 321 | </script> |
| 139 | 322 |