-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
KL Rahul
+
+ Batsman,
Wicket Keeper
+
+
+
+ 
+
- KL Rahul
-
- Batsman / Wicket Keeper
-
-
-
-
-
-
-
-
- -
-
-
26
-
-
- -
-
-
64
-
-
- -
-
-
18
-
-
-
-
-
-
-
- -
-
-
KL Rahul
-
+
-
-
26
+ 26
+
-
-
-
Mangaluru
+
+ 64
+
-
-
-
43.64
+
+ 18
-
+
+
+
+
+
+
+ -
+
+
KL Rahul
+
+ -
+
+
26
+
+ -
+
+
Mangaluru
+
+ -
+
+
43.64
+
+
+
+
diff --git a/src/app/player-stats/player-stats.page.scss b/src/app/player-stats/player-stats.page.scss
index 78eecdd..13df6ad 100644
--- a/src/app/player-stats/player-stats.page.scss
+++ b/src/app/player-stats/player-stats.page.scss
@@ -3,37 +3,15 @@ $blue-grey: #949599;
ion-content {
--background: transparent;
- background-color: white;
-
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- opacity: 0;
- width: 100%;
- height: 100%;
- animation: fadeIn 0.5s forwards;
- background-color: $dark-blue;
- }
-
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
+ background-color: $dark-blue;
}
.action-buttons {
display: flex;
justify-content: space-between;
- align-items: center;
- height: 80px;
- padding-right: 5%;
- padding-left: 3%;
+ align-items: flex-start;
+ padding: 20px 5% 10px 3%;
+ margin-bottom: 20px;
button {
background-color: transparent;
@@ -61,19 +39,19 @@ ion-content {
}
.action button {
- width: 40px;
- height: 40px;
+ width: 35px;
+ height: 35px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
- margin-left: 10px;
+ margin-left: 15px;
ion-icon {
color: $blue-grey;
- font-size: 20px;
+ font-size: 17px;
}
}
@@ -82,35 +60,90 @@ ion-content {
.player-primary-data {
display: flex;
-
+ width: 95%;
+ padding-left: 5%;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url('../../assets/home-team/KXIP-lion-white.svg');
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0.1;
+ }
+
.details {
width: 50%;
+ position: relative;
}
.teams-holder {
- display: flex;
position: relative;
z-index: 0;
+ display: flex;
+ justify-content: flex-start;
- img {
+ figure {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
z-index: 1;
+ margin: 0;
display: block;
+ overflow: hidden;
+ box-shadow: 0px 0px 5px $dark-blue;
&:nth-child(2) {
- margin-left: -10px;
z-index: 0;
- object-fit: cover;
+ transform: translateX(-10px);
}
+
+ img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ transform: scale(1.5);
+ }
+ }
+ }
+
+ .name {
+ font-size: 2rem;
+ font-weight: 700;
+ letter-spacing: 1px;
+ color: white;
+ }
+
+ .role {
+ position: absolute;
+ bottom: 60px;
+ left: 0;
+ color: $blue-grey;
+ font-size: 1rem;
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+ line-height: 1.5;
+
+ ion-icon {
+ margin-right: 10px;
+ font-size: 2rem;
+ vertical-align: middle;
+ color: var(--brand-red);
}
}
- figure {
+ .player-image {
width: 50%;
display: block;
+ height: 40vh;
img {
display: block;
@@ -120,4 +153,214 @@ ion-content {
object-position: bottom;
}
}
+}
+
+.statistics {
+ display: flex;
+ width: 100%;
+ padding: 0 5%;
+ list-style: none;
+ margin: 0 auto -30px auto;
+ justify-content: space-between;
+ transform: translateY(-50px);
+ z-index: 1;
+ position: relative;
+ background-color: rgba($dark-blue, 0.8);
+ box-shadow: 0px -10px 10px rgba($dark-blue, 0.8);
+
+ li {
+ width: 27vw;
+ height: 27vw;
+ background-color: rgba($dark-blue, 0.8);
+ border: 1px solid rgba($blue-grey, 0.3);
+ display: flex;
+ border-radius: 10px;
+ color: white;
+ align-items: flex-end;
+ justify-content: space-between;
+ padding: 10px;
+ overflow: hidden;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-color: rgba($blue-grey, 0.1);
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ label {
+ font-weight: 500;
+ font-size: 0.8rem;
+ align-self: flex-start;
+ width: 50%;
+ overflow: visible;
+ white-space: nowrap;
+ position: relative;
+ }
+
+ h5 {
+ width: 50%;
+ white-space: nowrap;
+ overflow: visible;
+ margin: 0;
+ font-weight: 700;
+ font-size: 1.8rem;
+ align-self: flex-end;
+ text-align: right;
+ position: relative;
+ }
+}
+
+.news {
+ width: 90%;
+ margin: 0 auto 20px auto;
+
+ header {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ h4 {
+ color: #148dfc;
+ font-size: 0.8rem;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ }
+
+ span {
+ margin-right: 10px;
+ border: 7px solid #148dfc;
+ border-radius: 50%;
+ height: 25px;
+ width: 25px;
+ background-color: $dark-blue;
+ }
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ background-color: lighten($dark-blue, 5%);
+ box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+ border-radius: 10px;
+ overflow: hidden;
+
+ li {
+ width: 90%;
+ margin: 0 auto;
+ padding: 15px 0px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba($blue-grey, 0.2);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ label {
+ width: 40px;
+ text-align: center;
+ color: white;
+ font-size: 0.8rem;
+ display: block;
+ line-height: 1.3;
+
+ span {
+ color: $blue-grey;
+ font-size: 0.8rem;
+ display: block;
+ }
+ }
+
+ p {
+ width: calc(100% - 100px);
+ font-size: 0.8rem;
+ color: white;
+ font-weight: 500;
+ line-height: 1.5;
+ margin: 0;
+ }
+
+ .share-button {
+ width: 30px;
+ height: 30px;
+ border: 1px solid $blue-grey;
+ background-color: rgba($blue-grey, 0.1);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 10px;
+
+ ion-icon {
+ color: $blue-grey;
+ font-size: 15px;
+ }
+ }
+ }
+}
+
+.about {
+ background-color: lighten($dark-blue, 5%);
+ box-shadow: 0px 0px 10px darken($dark-blue, 3%);
+ border-radius: 10px;
+ overflow: hidden;
+ width: 90%;
+ margin: 0 auto 40px auto;
+ padding: 0px 0px 5px 0px;
+
+ header {
+ font-size: 1rem;
+ font-weight: 500;
+ color: white;
+ padding: 15px 5%;
+ border-bottom: 1px solid rgba($blue-grey, 0.2);
+ margin: 0;
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0 auto;
+ width: 90%;
+ }
+
+ li {
+ padding: 10px 5px;
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba($blue-grey, 0.2);
+ text-align: left;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ label {
+ color: $blue-grey;
+ font-size: 0.7rem;
+ display: block;
+ line-height: 1.3;
+ width: 100px;
+ }
+
+ p {
+ width: calc(100% - 100px);
+ font-size: 0.9rem;
+ color: white;
+ font-weight: 500;
+ line-height: 1.5;
+ margin: 0;
+ opacity: 0.8;
+ }
}
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 60942b5..c1964ea 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -32,4 +32,24 @@
outline: none;
text-decoration: none;
letter-spacing: 0.5px;
+}
+
+figure {
+ margin: 0;
+}
+
+.content-container {
+ animation: fadeIn 0.4s forwards;
+ opacity: 0;
+
+ @keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(10vh);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0vh);
+ }
+ }
}
\ No newline at end of file
