From 1c575dae090b56d434e8a6a6a240db9070fcb9d9 Mon Sep 17 00:00:00 2001 From: digvijay26 Date: Thu, 21 Jan 2021 09:11:40 +0530 Subject: [PATCH] new changes ui --- src/assets/css/custom.css | 35 ++++++++++++++++++++--------------- src/assets/css/media.css | 25 +++++++++++++++++++++---- src/assets/images/calendar-1.svg | 8 ++++++++ src/assets/images/calendar.png | Bin 0 -> 264 bytes src/assets/images/card-bg-1.png | Bin 0 -> 477 bytes src/assets/images/eye-1.svg | 6 ++++++ src/assets/images/eye.png | Bin 0 -> 385 bytes src/assets/images/star-1.svg | 3 +++ src/assets/images/star.png | Bin 0 -> 337 bytes src/assets/images/upload-cloud.svg | 6 ++++++ src/components/Profile.vue | 12 +++++------- 11 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 src/assets/images/calendar-1.svg create mode 100644 src/assets/images/calendar.png create mode 100644 src/assets/images/card-bg-1.png create mode 100644 src/assets/images/eye-1.svg create mode 100644 src/assets/images/eye.png create mode 100644 src/assets/images/star-1.svg create mode 100644 src/assets/images/star.png create mode 100644 src/assets/images/upload-cloud.svg diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index fb82624..3b82a1c 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -144,7 +144,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font border-radius: 100px; padding: 1px;} .user-profile-photo a, img{ width: 100%;} -.inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} +.inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;} .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} .user-profile{ display: block; @@ -175,17 +175,22 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font /* social connects */ .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} -.social-connects li{ float: left; margin-right:0px ;} +.social-connects li{ float: left; margin-right:0px ; margin-left: 6px;} .social-connects li a{ display: block; float: left; padding: 11px;} .social-connects li a img.twitter{ margin-top:3px;} -.social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} +.social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} +.social-connects li a:hover{background: #EF484F;} +.social-connects li a:hover img{ + -webkit-filter: brightness(15); + filter:brightness(15); +} .social-connects li a img{ width: 19px; display: block; float: left;} .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; float: left;} .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;} /* profile tab */ - .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} + .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;} .top-brd{border-top: 1px solid #DFE7EF;} .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} @@ -195,7 +200,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font /* profile data wrp */ .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} -.card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; 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;} +.card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;} .company-detail{ width: 100%; display: block; float: left; @@ -213,7 +218,7 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; 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; } .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} -.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;} +.card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} /* colors */ .cape-honey{ background: #fde2a3;} .rose-bud{ background: #fba29a;} @@ -634,7 +639,7 @@ color: #514DA7;opacity:1; .switch-btn { position: relative; display: inline-block; - width: 60px; + width: 44px; height: 24px; } .switch-btn input { @@ -659,7 +664,7 @@ color: #514DA7;opacity:1; content: ""; height: 14px; width: 13px; - left: 10px; + left: 6px; bottom: 5px; background-color: #514DA7; -webkit-transition: .4s; @@ -675,11 +680,11 @@ color: #514DA7;opacity:1; box-shadow: 0 0 1px #2196F3; } .toggle-btn:checked + .rounded-toggle:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); + -webkit-transform: translateX(19px); + -ms-transform: translateX(19px); + transform: translateX(19px); } -.switch-bt-wrp{margin-top: 15px; width: 111px; +.switch-bt-wrp{margin-top: 15px; width: 100px; float: right; text-align: right; } .switch-btn{float: left ;} @@ -769,10 +774,10 @@ color: #514DA7;opacity:1; width: 49%; background: #fff;} .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} -.intro-startup .footer-top .top-intro-bt{ width: 215px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } +.intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} -.intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 10px; display: block; float: left;} +.intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 12px; display: block; float: left;} .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; @@ -1400,4 +1405,4 @@ input:focus{ outline: none;} .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} .s-l-right-section{ width: 300px; display: block; float: left;} .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;} -.reset-pass{margin-top: 118px;} \ No newline at end of file +.reset-pass{margin-top: 118px;} diff --git a/src/assets/css/media.css b/src/assets/css/media.css index 57ca04f..e4a1641 100644 --- a/src/assets/css/media.css +++ b/src/assets/css/media.css @@ -24,7 +24,17 @@ and (max-device-width: 1280px) and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) { + .ft-comments-group{padding-top: 12px;} + .comment-frm{margin-top: 12px;} + .intro-startup .footer-top .top-intro-bt{margin-top: 12px;} + .intro-startup .footer-top{ height: 61px;} + .intro-startup .footer-nav{ height: 66px;} .intro-startup .footer-top .top-intro-bt{width: 212px; margin-left: -21px;} + .intro-startup .footer-top .top-intro-bt { + width: 237px; + margin-left: -57px; +} + .comment-frm.no-c-frm #open_ct_box{ width: 200px !important;} .bottom-startup{-ms-transform: scale(0.9); /* IE 9 */ transform: scale(0.9); /* Standard syntax */ left: -10px;} .epi-bg{bottom: -159px; left: 8.5% !important;} @@ -37,7 +47,7 @@ and (-webkit-min-device-pixel-ratio: 1) { transform: scale(0.8); /* Standard syntax */ margin-top: 5%; } .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } .form-layout.signup-frm-spc { margin-top: 41px;} - .user-profile{padding-right: 90px;width: 570px;} + .user-profile{padding-right: 90px;width: 570px !important;} .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ transform: scale(0.8); /* Standard syntax */} .ft-comments-group{ width: 100%; } @@ -128,6 +138,13 @@ and (-webkit-min-device-pixel-ratio: 1) { and (min-device-width: 900px) and (max-device-width: 1440px) and (-webkit-min-device-pixel-ratio: 1) { + .comment-frm.no-c-frm #open_ct_box{ width: 244px;} + .comment-frm .add-comment{margin-right: 50px;} + .intro-startup .footer-top .top-intro-bt { + width: 243px; + margin-left: -40px; +} +.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } .form-layout.signup-frm-spc { margin-top: 114px; float:right;} .user-profile{padding-right: 90px; width: 675px;} @@ -142,7 +159,7 @@ and (-webkit-min-device-pixel-ratio: 1) { -.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} +.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 12px;} /* no comments */ .c-with-photos{ margin-left: -70px;} @@ -166,7 +183,7 @@ and (-webkit-min-device-pixel-ratio: 1) { left: 7%; } .ft-comments-group{ margin-left:0px; width: 100%;} -.intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} + .comment-frm .frm-wdth{ padding-right: 20px;} @@ -267,7 +284,7 @@ and (-webkit-min-device-pixel-ratio: 1) { and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { - .main-wrp{background-position: bottom 100px left -100px !important;} + .main-wrp{background-position: bottom -10px left -100px !important;} .replies-wrp{ width: 760px;} .insights-spc { padding: 0 30px; diff --git a/src/assets/images/calendar-1.svg b/src/assets/images/calendar-1.svg new file mode 100644 index 0000000..b3a8698 --- /dev/null +++ b/src/assets/images/calendar-1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/calendar.png b/src/assets/images/calendar.png new file mode 100644 index 0000000000000000000000000000000000000000..dd88631a9de997c8c5b94f84bd4ccf58724641d6 GIT binary patch literal 264 zcmeAS@N?(olHy`uVBq!ia0vp@K+MO%1|+}KPrC%9Sc;uILpXq-h9ji|$lvej;uxY4 zeD=~tFQ-Hi_7C@Yqhg{CvuB(*xpA$kfVjNE^c8_M?8>)lnB*N~?%WY&X&39BbxTN4 zP$nu%hwl#ebyfYXCDZu%?(^>}-dCTrz3oNPwCwT?F8Z%kEsn_g6}E-v6t8IFpJL!- zeStxL#$&l!o97pJ%_1JKOm@hYSw4N%j7PfddLR1OuM|qY;4Tzf$+phuON7eVoR|3HeR*vT`50|;t3QaXT=Q#@T9 zLn`9l-g@iHc$0I=Fd`_r*%cN`~NQwhLs9?@|`NKUsnitSdkXccuOWD{?P0XYJ1ebMdk7`iB`3H zRtVo~`F^Ejwf{x&-$w%&wPHlVb6?x<;IiO@aMr9vYAYB- z7aXc+pAZqlx{fLQ;j7rY|8m!`d)&`d+QXTD==ZiaTp$%pAv?5MEzJMkj?n+_zi7jz zkOI*iTrsUD3;RD8++%p|$O=(3VoqXG O7(8A5T-G@yGywpD!N + + + + + diff --git a/src/assets/images/eye.png b/src/assets/images/eye.png new file mode 100644 index 0000000000000000000000000000000000000000..d962704036084163b05dfea3088c00a37f3d4852 GIT binary patch literal 385 zcmV-{0e=38P)#+SedXO7_1f*WS|U#2LAzZ3yPp3_ya@` z3U{w>DPgDG5;btOqVmN0`quPAK92EO1XV=~FR)H%z~`FR9p ztwMT)6XjGIP7p&-Wmo5skPE{tL#NJ82- z92A`<(Te31Tg3ym3rr~g5If8}`Hn$66`*x=r2lIyRK|%5_2OS9X~I6 + + diff --git a/src/assets/images/star.png b/src/assets/images/star.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4097b7ee61ed60cca96b8e80475d4180805bff GIT binary patch literal 337 zcmV-X0j~auP)9>4avl0LlF!AfKf_Hu`rsHA6b-%ViJQ41`?T! zEEc3p{sM!ABweEgDT7~~dT(*M_m)#zsRqRe9<%G^YX^C#mJHn59DyoXZ*)-ZuN?B`(m jlPSYfg|0S-_LcM>W8g98&M#S~00000NkvXXu0mjf2$_i7 literal 0 HcmV?d00001 diff --git a/src/assets/images/upload-cloud.svg b/src/assets/images/upload-cloud.svg new file mode 100644 index 0000000..0519e3e --- /dev/null +++ b/src/assets/images/upload-cloud.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Profile.vue b/src/components/Profile.vue index 5a68e5e..898a741 100644 --- a/src/components/Profile.vue +++ b/src/components/Profile.vue @@ -13,10 +13,8 @@