Commit 988b5d20ac45ea29f2884db14119902fc8b82613

Authored by Digvijay Singh
1 parent db67a6d259
Exists in master and in 1 other branch admin

new changes

Showing 86 changed files with 612 additions and 262 deletions   Show diff stats
... ... @@ -21,6 +21,7 @@ export default {
21 21  
22 22 <style>
23 23 @import "assets/css/custom.css";
  24 +@import "assets/fonts/fonts.css";
24 25  
25 26 #row {
26 27 display: -webkit-box;
... ...
src/assets/css/custom.css
... ... @@ -127,4 +127,140 @@ h1{font-family: &#39;Bebas Neue&#39;, cursive;font-style: normal; font-weight: 600; font
127 127 color: #000000;
128 128 }
129 129 .form-layout .go-back span{ font-weight: 500 !important;}
130   - .reset-pass-spc{ margin-top: 110px;}
131 130 \ No newline at end of file
  131 + .reset-pass-spc{ margin-top: 110px;}
  132 +
  133 + /* profile */
  134 + .inner-wrp {
  135 + height: 100%;
  136 + padding-left: 88px;
  137 + padding-right: 37px;
  138 + background:#fff;;
  139 + font-family: 'Montserrat', sans-serif;
  140 +
  141 +}
  142 +.user-profile-photo{width: 32px; height: 32px;}
  143 +.user-profile-photo a, img{ width: 100%;}
  144 +.inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
  145 +.inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;}
  146 +.tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
  147 +.user-profile{ display: block;
  148 + float: left;
  149 + margin-left:30px;
  150 + position: relative;
  151 + width: 760px;}
  152 +.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;}
  153 +.talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;}
  154 +.talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;}
  155 +.talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;}
  156 +.talk-to-me ul li{ display: block; float: left;margin-right:3px;}
  157 +.talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;}
  158 +.joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; }
  159 +.joined-info li a{ color:#000; opacity: 0.5;}
  160 +.joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;}
  161 +.joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;}
  162 +.joined-info li{ float: left;}
  163 +
  164 +/* list style */
  165 +.list-style-group{ width: 100%; display: block; float: left;}
  166 +.list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;}
  167 +.list-style{list-style-type: none; margin:0px; padding: 0px;}
  168 +.list-style li{ float: left;}
  169 +.list-style li a{ display: block; float: left;}
  170 +.list-style li a img{ width: 48px; display: block; float: left; }
  171 +.list-spc-top{ margin-top:15px ;}
  172 +
  173 +/* social connects */
  174 +.social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
  175 +.social-connects li{ float: left; margin-right:0px ;}
  176 +.social-connects li a{ display: block; float: left; padding: 11px;}
  177 +.social-connects li a img.twitter{ margin-top:3px;}
  178 +.social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
  179 +.social-connects li a img{ width: 19px; display: block; float: left;}
  180 +.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;
  181 + float: left;}
  182 +.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;}
  183 +
  184 + /* profile tab */
  185 + .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
  186 + .top-brd{border-top: 1px solid #DFE7EF;}
  187 +.profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
  188 +.profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
  189 +.profile-tab li.active{ border-bottom: 4px solid #ef484f;}
  190 +.profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; }
  191 +
  192 +/* profile data wrp */
  193 +.profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
  194 +.data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;}
  195 +.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;}
  196 +.company-detail{ width: 100%;
  197 + display: block;
  198 + float: left;
  199 + position: relative;
  200 + margin-top: -63px;
  201 + margin-bottom: 21px;}
  202 +.company-detail .c-logo{ width: 82px; display: block; float: left;}
  203 +.company-detail .c-logo img{ width: 100%;}
  204 +.company-detail .c-tag img{ width: 100%;}
  205 +.company-detail .c-tag { width: 89px; display: block; float: right;}
  206 +.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;}
  207 +.card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;}
  208 +.card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;}
  209 +.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;}
  210 +.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; }
  211 +.card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;}
  212 +.card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
  213 +.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;}
  214 +/* colors */
  215 +.cape-honey{ background: #fde2a3;}
  216 +.rose-bud{ background: #fba29a;}
  217 +.pattens-blue{ background: #ceeced;}
  218 +
  219 +/* add new card */
  220 +.add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
  221 +.add-card-warpper a{ display: block;
  222 + width: 86px;
  223 + margin: 0 auto;
  224 + margin-top: 92px;}
  225 +
  226 + /* New Profile Buttons */
  227 + .profile-buttons{ width: 261px; display: block; margin:0 auto;}
  228 + /* button sm */
  229 + .profile-sm-bt{ width: 180px;
  230 + height: 54px;
  231 + border-radius: 5px;
  232 + border: 1px solid #514DA7;
  233 + color: #514DA7;
  234 + font-size: 16px;
  235 + font-weight: 500;
  236 + display: block;
  237 + line-height: 55px;
  238 + text-align: center;}
  239 + .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
  240 + /* button md */
  241 + .profile-md-bt{ width:233px;
  242 + height: 54px;
  243 + border-radius: 5px;
  244 + border: 1px solid #514DA7;
  245 + color: #514DA7;
  246 + font-size: 16px;
  247 + font-weight: 500;
  248 + display: block;
  249 + line-height: 55px;
  250 + text-align: center;}
  251 + .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
  252 + /* button lg */
  253 + .profile-lg-bt{ width:261px;
  254 + height: 54px;
  255 + border-radius: 5px;
  256 + border: 1px solid #514DA7;
  257 + color: #514DA7;
  258 + font-size: 16px;
  259 + font-weight: 500;
  260 + display: block;
  261 + line-height: 55px;
  262 + text-align: center;}
  263 + .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
  264 + .center-and-spc{ margin:0 auto; margin-bottom:15px;}
  265 + .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;}
  266 +/* Replies */
  267 +.replies{ width: 100%; display: block; float: left;}
132 268 \ No newline at end of file
... ...
src/assets/css/media.css
... ... @@ -6,6 +6,8 @@
6 6 and (max-device-width: 1400px)
7 7 and (-webkit-min-device-pixel-ratio: 1) {
8 8 .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; }
  9 + .user-profile{padding-right: 90px; width: 675px;}
  10 +
9 11  
10 12 }
11 13  
... ... @@ -16,6 +18,7 @@
16 18 and (-webkit-min-device-pixel-ratio: 1) {
17 19 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
18 20 .form-layout.signup-frm-spc { margin-top: 114px; float:right;}
  21 + .user-profile{padding-right: 90px; width: 675px;}
19 22  
20 23 }
21 24  
... ... @@ -25,6 +28,7 @@
25 28 and (-webkit-min-device-pixel-ratio: 1) {
26 29 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
27 30 .form-layout.signup-frm-spc { margin-top: 114px;}
  31 + .user-profile{padding-right: 90px; width: 675px;}
28 32  
29 33 }
30 34 @media screen
... ... @@ -33,6 +37,7 @@
33 37 and (-webkit-min-device-pixel-ratio: 1) {
34 38 .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; }
35 39 .form-layout.signup-frm-spc { margin-top: 41px;}
  40 + .user-profile{padding-right: 90px;width: 570px;}
36 41  
37 42  
38 43 }
... ... @@ -43,6 +48,8 @@
43 48 and (min-device-width: 320px)
44 49 and (max-device-width: 960px)
45 50 and (-webkit-min-device-pixel-ratio: 2) {
  51 +
  52 +
46 53 .main-wrp{ padding-left: 15px; padding-right: 15px;}
47 54 .wc-spc-lf-tp {
48 55 padding-top: 52px;
... ... @@ -62,7 +69,19 @@
62 69 .reset-pass-spc {
63 70 margin-top: 20px;
64 71 }
65   -
  72 +/* profile */
  73 +.inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;}
  74 +.user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;}
  75 +.data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;}
  76 +.card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;}
  77 +.add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;}
  78 + .talk-to-me{ margin-bottom: 30px;}
  79 + .profile-data-wrp{ position: relative;}
  80 + .user-profile-photo {
  81 + position: absolute;
  82 + right: 82px;
  83 + top: 16px;
  84 +}
66 85 }
67 86  
68 87 /* tab */
... ... @@ -71,7 +90,8 @@
71 90 and (min-device-width: 1024px)
72 91 and (max-device-width: 1366px)
73 92 and (-webkit-min-device-pixel-ratio: 2) {
74   - .main-wrp{ background-position: bottom 100px left -100px;}
  93 + .main-wrp{background-position: bottom 100px left -100px;}
  94 +
75 95  
76 96  
77 97 }
... ... @@ -80,7 +100,7 @@
80 100 and (max-device-width: 1024px)
81 101 and (orientation: portrait)
82 102 and (-webkit-min-device-pixel-ratio: 2) {
83   -
  103 +
84 104 }
85 105 /* /
86 106  
... ... @@ -93,6 +113,10 @@
93 113 .col-reverse{
94 114 flex-direction:unset;}
95 115 .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;}
  116 + .card-warpper{ float: left;}
  117 + .add-card-warpper{ float: left; margin-top: 0px;}
  118 + .user-profile{ width: 540px;
  119 + margin-left: 30px; margin-top: 0px;}
96 120  
97 121 }
98 122 /* Portrait and Landscape */
... ... @@ -102,5 +126,8 @@
102 126 and (-webkit-min-device-pixel-ratio: 1) {
103 127 .main-wrp{background-position: bottom -10px left -130px !important;}
104 128 .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;}
  129 + .user-profile{padding-right: 0px; width: 380px;}
  130 + .card-warpper{margin-bottom: 40px; margin-right: 25px;}
  131 +
105 132 }
106 133  
... ...
src/assets/css/style.css
... ... @@ -1,130 +0,0 @@
1   -html,
2   -body {
3   - height: 100%;
4   -}
5   -
6   -body {
7   - display: -ms-flexbox;
8   - display: flex;
9   - -ms-flex-align: center;
10   - align-items: center;
11   - padding-top: 0px;
12   - padding-bottom: 0px;
13   - background-color:#DFE7EF;
14   -}
15   -
16   -/* heading */
17   -h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;}
18   -
19   -/* spaces */
20   -.wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; }
21   -
22   -
23   -.h-100{height: 100%;}
24   -.main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('assets/images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px;
25   - background-size: 45%;}
26   -/* navbar */
27   -.spotLight-nav{ margin-top: 20px;}
28   -.spotLight-nav li a{font-family: 'Montserrat', sans-serif;
29   - font-size: 16px;
30   - font-style: normal;
31   - font-weight: 400;
32   - line-height: 22px;
33   - letter-spacing: -0.7470597624778748px;
34   - text-align: left; color:#000; opacity: 0.6;
35   - }
36   - .spotLight-nav li {margin-right: 14px;}
37   - .spotLight-nav li.active a{font-weight: 600; opacity: 1;}
38   - .spotLight-nav li.spotLight-img a{opacity: 1;}
39   - .navbar-brand{ margin-right: 57px;}
40   -
41   - /* ul list style */
42   - .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif;
43   - font-size: 20px;
44   - font-style: normal;
45   - font-weight: 500;
46   - line-height: 24px; float: left; margin-top: 24px; }
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;}
49   - .sign-in-up-list li span{ float: left;}
50   - /* form */
51   - .form-layout{ width: 100%; display: block; float: left;}
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;}
54   - .form-layout .social-login{ display: block; width: 339px;
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;}
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;}
59   - .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;}
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;
62   -
63   - font-family: 'Montserrat', sans-serif;
64   - font-size: 13px;
65   - font-style: normal;
66   - font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;}
67   - form input:focus{ box-shadow:0px !important; outline: 0px !important;}
68   -
69   - /* placeholder */
70   - form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
71   - line-height: 18px;
72   - color: #000000;
73   - opacity: 0.5;
74   - font-family: 'Montserrat', sans-serif;
75   - font-size: 13px;
76   - font-style: normal;
77   - font-weight: 600;
78   - }
79   -
80   - form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
81   - line-height: 18px;
82   - color: #000000;
83   - opacity: 0.5;
84   - font-family: 'Montserrat', sans-serif;
85   - font-size: 13px;
86   - font-style: normal;
87   - font-weight: 600;
88   - }
89   -
90   - form input::-ms-input-placeholder { /* Microsoft Edge */
91   - line-height: 18px;
92   - color: #000000;
93   - opacity: 0.5;
94   - font-family: 'Montserrat', sans-serif;
95   - font-size: 13px;
96   - font-style: normal;
97   - font-weight: 600;
98   - }
99   - /* placeholder */
100   - .sb-button{ background: #514DA7;
101   - height: 50px;
102   - line-height: 35px;
103   - color: #fff;
104   - font-family: 'Montserrat', sans-serif;
105   - font-size: 13px;
106   - font-style: normal;
107   - font-weight: 600;
108   - width: 100%;}
109   - .sb-button img{ margin-right: 10px;}
110   - .sb-button:hover{ color:#fff;}
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;}
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: 15px; font-style: normal;font-weight: 700;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;
116   - }
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;}
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;}
121   - .welcome-hd-back{
122   - font-family: 'Bebas Neue', cursive;
123   - font-style: normal;
124   - font-weight: 600;
125   - font-size: 106px;
126   - line-height: 106px;
127   - color: #000000;
128   - }
129   - .form-layout .go-back span{ font-weight: 500 !important;}
130   - .reset-pass-spc{ margin-top: 110px;}
131 0 \ No newline at end of file
src/assets/css/tagsinput.css
... ... @@ -1,125 +0,0 @@
1   -/* The input */
2   -.tags-input {
3   - display: flex;
4   - flex-wrap: wrap;
5   - align-items: center;
6   -}
7   -
8   -.tags-input input {
9   - flex: 1;
10   - background: transparent;
11   - border: none;
12   -}
13   -
14   -.tags-input input:focus {
15   - outline: none;
16   -}
17   -
18   -.tags-input input[type="text"] {
19   - color: #495057;
20   -}
21   -
22   -.tags-input-wrapper-default {
23   - padding: .5rem .25rem;
24   -
25   - background: #fff;
26   -
27   - border: 1px solid transparent;
28   - border-radius: .25rem;
29   - border-color: #dbdbdb;
30   -}
31   -
32   -/* The tag badges & the remove icon */
33   -.tags-input span {
34   - margin-right: 0.3rem;
35   -}
36   -
37   -.tags-input-remove {
38   - cursor: pointer;
39   - position: relative;
40   - display: inline-block;
41   - width: 0.5rem;
42   - height: 0.5rem;
43   - overflow: hidden;
44   -}
45   -
46   -.tags-input-remove:before, .tags-input-remove:after {
47   - content: '';
48   - position: absolute;
49   - width: 100%;
50   - top: 50%;
51   - left: 0;
52   - background: #5dc282;
53   -
54   - height: 2px;
55   - margin-top: -1px;
56   -}
57   -
58   -.tags-input-remove:before {
59   - transform: rotate(45deg);
60   -}
61   -.tags-input-remove:after {
62   - transform: rotate(-45deg);
63   -}
64   -
65   -/* Tag badge styles */
66   -.tags-input-badge {
67   - display: inline-block;
68   - padding: 0.25em 0.4em;
69   - font-size: 75%;
70   - font-weight: 700;
71   - line-height: 1;
72   - text-align: center;
73   - white-space: nowrap;
74   - vertical-align: baseline;
75   - border-radius: 0.25rem;
76   -}
77   -
78   -.tags-input-badge-pill {
79   - padding-right: 0.6em;
80   - padding-left: 0.6em;
81   - border-radius: 10rem;
82   -}
83   -
84   -.tags-input-badge-selected-default {
85   - color: #212529;
86   - background-color: #f0f1f2;
87   -}
88   -
89   -/* Typeahead */
90   -.typeahead-hide-btn {
91   - color: #999 !important;
92   - font-style: italic;
93   -}
94   -
95   -/* Typeahead - badges */
96   -.typeahead-badges > span {
97   - cursor: pointer;
98   - margin-right: 0.3rem;
99   -}
100   -
101   -/* Typeahead - dropdown */
102   -.typeahead-dropdown {
103   - list-style-type: none;
104   - padding: 0;
105   - margin: 0;
106   - position: absolute;
107   - width: 100%;
108   - z-index: 1000;
109   -}
110   -
111   -.typeahead-dropdown li {
112   - padding: .25rem 1rem;
113   - cursor: pointer;
114   -}
115   -
116   -/* Typeahead elements style/theme */
117   -.tags-input-typeahead-item-default {
118   - color: #fff;
119   - background-color: #343a40;
120   -}
121   -
122   -.tags-input-typeahead-item-highlighted-default {
123   - color: #fff;
124   - background-color: #007bff;
125   -}
126 0 \ No newline at end of file
src/assets/fonts/BebasNeue.woff
No preview for this file type
src/assets/fonts/BebasNeue.woff2
No preview for this file type
src/assets/fonts/BebasNeueBold.woff
No preview for this file type
src/assets/fonts/BebasNeueBold.woff2
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff2
No preview for this file type
src/assets/fonts/Montserrat-Black.woff
No preview for this file type
src/assets/fonts/Montserrat-Black.woff2
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff2
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Light.woff
No preview for this file type
src/assets/fonts/Montserrat-Light.woff2
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff2
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff2
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff2
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff2
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff2
No preview for this file type
src/assets/fonts/fonts.css
... ... @@ -0,0 +1,190 @@
  1 +@font-face {
  2 + font-family: 'Bebas Neue';
  3 + src: url('BebasNeueRegular.woff2') format('woff2'),
  4 + url('BebasNeueRegular.woff') format('woff');
  5 + font-weight: normal;
  6 + font-style: normal;
  7 + font-display: swap;
  8 +}
  9 +
  10 +@font-face {
  11 + font-family: 'Bebas Neue';
  12 + src: url('BebasNeueBold.woff2') format('woff2'),
  13 + url('BebasNeueBold.woff') format('woff');
  14 + font-weight: bold;
  15 + font-style: normal;
  16 + font-display: swap;
  17 +}
  18 +
  19 +@font-face {
  20 + font-family: 'Bebas Neue';
  21 + src: url('BebasNeue.woff2') format('woff2'),
  22 + url('BebasNeue.woff') format('woff');
  23 + font-weight: normal;
  24 + font-style: normal;
  25 + font-display: swap;
  26 +}
  27 +
  28 +/*== */
  29 +@font-face {
  30 + font-family: 'Montserrat';
  31 + src: url('Montserrat-Black.woff2') format('woff2'),
  32 + url('Montserrat-Black.woff') format('woff');
  33 + font-weight: 900;
  34 + font-style: normal;
  35 + font-display: swap;
  36 +}
  37 +
  38 +@font-face {
  39 + font-family: 'Montserrat';
  40 + src: url('Montserrat-BlackItalic.woff2') format('woff2'),
  41 + url('Montserrat-BlackItalic.woff') format('woff');
  42 + font-weight: 900;
  43 + font-style: italic;
  44 + font-display: swap;
  45 +}
  46 +
  47 +@font-face {
  48 + font-family: 'Montserrat';
  49 + src: url('Montserrat-Bold.woff2') format('woff2'),
  50 + url('Montserrat-Bold.woff') format('woff');
  51 + font-weight: bold;
  52 + font-style: normal;
  53 + font-display: swap;
  54 +}
  55 +
  56 +@font-face {
  57 + font-family: 'Montserrat';
  58 + src: url('Montserrat-BoldItalic.woff2') format('woff2'),
  59 + url('Montserrat-BoldItalic.woff') format('woff');
  60 + font-weight: bold;
  61 + font-style: italic;
  62 + font-display: swap;
  63 +}
  64 +
  65 +@font-face {
  66 + font-family: 'Montserrat';
  67 + src: url('Montserrat-ExtraBold.woff2') format('woff2'),
  68 + url('Montserrat-ExtraBold.woff') format('woff');
  69 + font-weight: 800;
  70 + font-style: normal;
  71 + font-display: swap;
  72 +}
  73 +
  74 +@font-face {
  75 + font-family: 'Montserrat';
  76 + src: url('Montserrat-ExtraBoldItalic.woff2') format('woff2'),
  77 + url('Montserrat-ExtraBoldItalic.woff') format('woff');
  78 + font-weight: 800;
  79 + font-style: italic;
  80 + font-display: swap;
  81 +}
  82 +
  83 +@font-face {
  84 + font-family: 'Montserrat';
  85 + src: url('Montserrat-ExtraLight.woff2') format('woff2'),
  86 + url('Montserrat-ExtraLight.woff') format('woff');
  87 + font-weight: 200;
  88 + font-style: normal;
  89 + font-display: swap;
  90 +}
  91 +
  92 +@font-face {
  93 + font-family: 'Montserrat';
  94 + src: url('Montserrat-ExtraLightItalic.woff2') format('woff2'),
  95 + url('Montserrat-ExtraLightItalic.woff') format('woff');
  96 + font-weight: 200;
  97 + font-style: italic;
  98 + font-display: swap;
  99 +}
  100 +
  101 +@font-face {
  102 + font-family: 'Montserrat';
  103 + src: url('Montserrat-Italic.woff2') format('woff2'),
  104 + url('Montserrat-Italic.woff') format('woff');
  105 + font-weight: normal;
  106 + font-style: italic;
  107 + font-display: swap;
  108 +}
  109 +
  110 +@font-face {
  111 + font-family: 'Montserrat';
  112 + src: url('Montserrat-Light.woff2') format('woff2'),
  113 + url('Montserrat-Light.woff') format('woff');
  114 + font-weight: 300;
  115 + font-style: normal;
  116 + font-display: swap;
  117 +}
  118 +
  119 +@font-face {
  120 + font-family: 'Montserrat';
  121 + src: url('Montserrat-LightItalic.woff2') format('woff2'),
  122 + url('Montserrat-LightItalic.woff') format('woff');
  123 + font-weight: 300;
  124 + font-style: italic;
  125 + font-display: swap;
  126 +}
  127 +
  128 +@font-face {
  129 + font-family: 'Montserrat';
  130 + src: url('Montserrat-Medium.woff2') format('woff2'),
  131 + url('Montserrat-Medium.woff') format('woff');
  132 + font-weight: 500;
  133 + font-style: normal;
  134 + font-display: swap;
  135 +}
  136 +
  137 +@font-face {
  138 + font-family: 'Montserrat';
  139 + src: url('Montserrat-MediumItalic.woff2') format('woff2'),
  140 + url('Montserrat-MediumItalic.woff') format('woff');
  141 + font-weight: 500;
  142 + font-style: italic;
  143 + font-display: swap;
  144 +}
  145 +
  146 +@font-face {
  147 + font-family: 'Montserrat';
  148 + src: url('Montserrat-Regular.woff2') format('woff2'),
  149 + url('Montserrat-Regular.woff') format('woff');
  150 + font-weight: normal;
  151 + font-style: normal;
  152 + font-display: swap;
  153 +}
  154 +
  155 +@font-face {
  156 + font-family: 'Montserrat';
  157 + src: url('Montserrat-SemiBold.woff2') format('woff2'),
  158 + url('Montserrat-SemiBold.woff') format('woff');
  159 + font-weight: 600;
  160 + font-style: normal;
  161 + font-display: swap;
  162 +}
  163 +
  164 +@font-face {
  165 + font-family: 'Montserrat';
  166 + src: url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
  167 + url('Montserrat-SemiBoldItalic.woff') format('woff');
  168 + font-weight: 600;
  169 + font-style: italic;
  170 + font-display: swap;
  171 +}
  172 +
  173 +@font-face {
  174 + font-family: 'Montserrat';
  175 + src: url('Montserrat-Thin.woff2') format('woff2'),
  176 + url('Montserrat-Thin.woff') format('woff');
  177 + font-weight: 100;
  178 + font-style: normal;
  179 + font-display: swap;
  180 +}
  181 +
  182 +@font-face {
  183 + font-family: 'Montserrat';
  184 + src: url('Montserrat-ThinItalic.woff2') format('woff2'),
  185 + url('Montserrat-ThinItalic.woff') format('woff');
  186 + font-weight: 100;
  187 + font-style: italic;
  188 + font-display: swap;
  189 +}
  190 +
... ...
src/assets/fonts/montserrat-bold-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-bold-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff2
No preview for this file type
src/assets/images/add-new.png

1.82 KB

src/assets/images/behance1.png

649 Bytes

src/assets/images/c-tag.png

3.46 KB

src/assets/images/card-bg.png

214 Bytes

src/assets/images/icon-1.png

3.75 KB

src/assets/images/icon-2.png

3.78 KB

src/assets/images/icon-3.png

3.91 KB

src/assets/images/icon-4.png

3.62 KB

src/assets/images/icon-5.png

3.84 KB

src/assets/images/icon-6.png

1.85 KB

src/assets/images/image 46.png

2.26 KB

src/assets/images/linkedin.png

363 Bytes

src/assets/images/medium1.png

468 Bytes

src/assets/images/phone-pay.png

1.61 KB

src/assets/images/plus.png

267 Bytes

src/assets/images/twitter.png

462 Bytes

src/assets/images/u-info-icon.png

3.45 KB

src/assets/images/user-2.png

1.6 KB

src/assets/images/user.png

11.2 KB

src/components/LandingPage.vue
... ... @@ -93,9 +93,9 @@
93 93 <img src="../assets/images/key.svg" /> Log In to your account
94 94 </button>
95 95 <p class="forget-pass">
96   - Forgot Password? <a href="#">Reset</a>
  96 + Forgot Password? <a @click="goToReset">Reset</a>
97 97 </p>
98   - <h3>Donโ€™t have an account? <a href="#">SignUp</a></h3>
  98 + <h3>Donโ€™t have an account? <a @click="goToSignUp">SignUp</a></h3>
99 99 </div>
100 100 </form>
101 101 </div>
... ... @@ -124,6 +124,12 @@ export default {
124 124 mounted() {},
125 125 methods: {
126 126 login() {},
  127 + goToSignUp(){
  128 + this.$router.push("/signup");
  129 + },
  130 + goToReset() {
  131 + this.$router.push("/reset");
  132 + },
127 133 },
128 134 };
129 135 </script>
... ...
src/components/Reset.vue
... ... @@ -0,0 +1,131 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid main-wrp">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
  17 + <span class="navbar-toggler-icon"></span>
  18 + <span class="navbar-toggler-icon"></span>
  19 + <span class="navbar-toggler-icon"></span>
  20 + </button>
  21 +
  22 + <div class="collapse navbar-collapse" id="navbarsExample03">
  23 + <ul class="navbar-nav mr-auto">
  24 + <li class="nav-item active">
  25 + <a class="nav-link" href="#">About</a>
  26 + </li>
  27 + <li class="nav-item">
  28 + <a class="nav-link" href="#">Masterclass</a>
  29 + </li>
  30 + <li class="nav-item">
  31 + <a class="nav-link" href="#">Stories</a>
  32 + </li>
  33 + <li class="nav-item spotLight-img">
  34 + <a class="nav-link" href="#"
  35 + ><img src="../assets/images/SPOTLight.svg"
  36 + /></a>
  37 + </li>
  38 + <li class="nav-item">
  39 + <a class="nav-link" href="#">Library</a>
  40 + </li>
  41 + </ul>
  42 + </div>
  43 + </nav>
  44 + <!-- menu wrapper -->
  45 + <div class="row col-reverse">
  46 + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
  47 + <!-- users land image -->
  48 + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
  49 + <h1>
  50 + Welcome to <br />
  51 + Productgrowth
  52 + </h1>
  53 + <ul class="sign-in-up-list">
  54 + <li>
  55 + <img src="../assets/images/check.svg" /><span
  56 + >Connect & learn from fellow product enthusiasts</span
  57 + >
  58 + </li>
  59 + <li>
  60 + <img src="../assets/images/check.svg" /><span
  61 + >Share & pickup deeper insights from real world products</span
  62 + >
  63 + </li>
  64 + <li>
  65 + <img src="../assets/images/check.svg" /><span
  66 + >Access to XX Casestudies</span
  67 + >
  68 + </li>
  69 + </ul>
  70 + </div>
  71 + <!-- users land image -->
  72 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  73 + <div class="form-layout signup-frm-spc">
  74 + <form class="reset-pass-spc">
  75 + <h5>
  76 + Forgot password? Enter your e-Mail ID<br />
  77 + to retrive
  78 + </h5>
  79 + <div class="fill-form">
  80 + <label for="inputEmail" class="sr-only">Email address</label>
  81 + <input
  82 + type="email"
  83 + id="inputEmail"
  84 + class="form-control"
  85 + placeholder="Your Email ID"
  86 + required
  87 + autofocus
  88 + />
  89 +
  90 + <button class="btn btn-lg sb-button" type="submit">
  91 + <img src="../assets/images/key.svg" /> Reset Password
  92 + </button>
  93 +
  94 + <h3 class="go-back">
  95 + <span>Go back to </span><a @click="goToLogin">Login</a><span> / </span
  96 + ><a @click="goToSignUp">SignUp</a>
  97 + </h3>
  98 + </div>
  99 + </form>
  100 + </div>
  101 + </div>
  102 + <!-- sign up -->
  103 + </div>
  104 + <!-- body wrapper -->
  105 + </div>
  106 + <!-- main wrapper -->
  107 + </main>
  108 +</template>
  109 +
  110 +<script>
  111 +import Vue from "vue";
  112 +import router from "../router";
  113 +
  114 +export default {
  115 + name: "Reset",
  116 +
  117 + data() {
  118 + return {};
  119 + },
  120 + mounted() {},
  121 + methods: {
  122 + goToLogin() {
  123 + this.$router.push("/");
  124 + },
  125 + goToSignUp() {
  126 + this.$router.push("/signup");
  127 + },
  128 +
  129 + },
  130 +};
  131 +</script>
... ...
src/components/SignUp.vue
... ... @@ -0,0 +1,102 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid main-wrp">
  4 +
  5 +
  6 + <nav class="navbar navbar-expand-sm spotLight-nav">
  7 + <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a>
  8 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
  9 + <span class="navbar-toggler-icon"></span>
  10 + <span class="navbar-toggler-icon"></span>
  11 + <span class="navbar-toggler-icon"></span>
  12 + </button>
  13 +
  14 + <div class="collapse navbar-collapse" id="navbarsExample03">
  15 + <ul class="navbar-nav mr-auto">
  16 + <li class="nav-item active">
  17 + <a class="nav-link" href="#">About</a>
  18 + </li>
  19 + <li class="nav-item">
  20 + <a class="nav-link" href="#">Masterclass</a>
  21 + </li>
  22 + <li class="nav-item">
  23 + <a class="nav-link" href="#">Stories</a>
  24 + </li>
  25 + <li class="nav-item spotLight-img">
  26 + <a class="nav-link" href="#"><img src="../assets/images/SPOTLight.svg" /></a>
  27 + </li>
  28 + <li class="nav-item">
  29 + <a class="nav-link" href="#">Library</a>
  30 + </li>
  31 + </ul>
  32 + </div>
  33 + </nav><!-- menu wrapper -->
  34 + <div class="row col-reverse">
  35 + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3">
  36 +
  37 + </div><!-- users land image -->
  38 + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
  39 + <h1>Welcome to <br />
  40 + Productgrowth</h1>
  41 + <ul class="sign-in-up-list">
  42 + <li><img src="../assets/images/check.svg" /><span>Connect & learn from fellow product enthusiasts</span></li>
  43 + <li><img src="../assets/images/check.svg" /><span>Share & pickup deeper insights from real world products</span></li>
  44 + <li><img src="../assets/images/check.svg" /><span>Access to XX Casestudies</span></li>
  45 + </ul>
  46 + </div><!-- users land image -->
  47 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  48 +<div class="form-layout signup-frm-spc">
  49 + <form>
  50 +
  51 + <h5>SignUp Using</h5>
  52 + <div class="social-login">
  53 + <ul>
  54 + <li><a href="#"><img src="../assets/images/google.svg" /></a></li>
  55 + <li><a href="#"><img src="../assets/images/linkdin.svg" /></a></li>
  56 + <li><a href="#"><img src="../assets/images/twitter.svg" /></a></li>
  57 + </ul>
  58 + </div>
  59 + <h5>or Signup with email</h5>
  60 + <div class="fill-form">
  61 + <label for="inputEmail" class="sr-only">Email address</label>
  62 + <input type="email" id="inputEmail" class="form-control" placeholder="Your Email ID" required autofocus>
  63 + <label for="inputPassword" class="sr-only">Password</label>
  64 + <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
  65 +
  66 + <button class="btn btn-lg sb-button" type="submit"><img src="../assets/images/user-plus.svg" /> Create Account</button>
  67 + <p class="">
  68 + By signing up I agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>
  69 + </p>
  70 + <h3>Have an account? <a @click="goToLogin">Login</a></h3>
  71 + </div>
  72 + </form>
  73 +</div>
  74 +
  75 + </div><!-- sign up -->
  76 + </div>
  77 + <!-- body wrapper -->
  78 + </div>
  79 + </main>
  80 +</template>
  81 +
  82 +<script>
  83 +
  84 +import Vue from "vue";
  85 +import router from "../router";
  86 +
  87 +export default {
  88 + name: "SignUp",
  89 +
  90 + data() {
  91 + return {
  92 + };
  93 + },
  94 + mounted() {},
  95 + methods: {
  96 + goToLogin(){
  97 + this.$router.push("/");
  98 +
  99 + }
  100 + },
  101 +};
  102 +</script>
... ...
src/components/welcome.vue
... ... @@ -9,7 +9,7 @@
9 9 </p>
10 10 <router-link class="yellow-btn btn-large" to="/profileWizard">
11 11 Get Started
12   - <img src="@/assets/img/onboarding/arrow.svg" width="20" />
  12 + <!-- <img src="@/assets/img/onboarding/arrow.svg" width="20" /> -->
13 13 </router-link>
14 14 </div>
15 15 </div>
... ...
src/router/index.js
... ... @@ -2,6 +2,8 @@ import Vue from &#39;vue&#39;
2 2 import Router from 'vue-router'
3 3 import { authGuard } from "../auth/authGuard"
4 4 import LandingPage from '@/components/LandingPage'
  5 +import SignUp from '@/components/SignUp'
  6 +import Reset from '@/components/Reset'
5 7 import welcome from '@/components/welcome'
6 8  
7 9 import router from '../router'
... ... @@ -21,6 +23,16 @@ export default new Router({
21 23 next()
22 24 }
23 25 },
  26 + {
  27 + path: '/signup',
  28 + name: 'SignUp',
  29 + component: SignUp,
  30 + },
  31 + {
  32 + path: '/reset',
  33 + name: 'Reset',
  34 + component: Reset,
  35 + }
24 36  
25 37 ],
26 38 scrollBehavior(to, from, savedPosition) {
... ...