+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+ {{ title }}
+
+
+
+
+ {{ release }}
+
+
+ {{ tempTitle }}
+
+
+ {{ overview }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/movie-details/movie-details.page.scss b/src/app/pages/movie-details/movie-details.page.scss
new file mode 100644
index 0000000..4da82b1
--- /dev/null
+++ b/src/app/pages/movie-details/movie-details.page.scss
@@ -0,0 +1,109 @@
+.movie-trailer {}
+
+.movie-trailer::after {
+ display: block;
+ position: relative;
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, var(--ion-color-dark-shade) 100%);
+ margin-top: -200px;
+ height: 200px;
+ width: 100%;
+ content: '';
+}
+
+.movie {
+ width: 100vw;
+ object-fit: cover;
+ height: 300px;
+ object-position: top;
+}
+
+.back {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ font-size: 32px;
+ z-index: 999;
+}
+
+.title {
+ font-size: 32px;
+ font-weight: bold;
+ position: relative;
+ margin-top: -50px;
+}
+
+.release {
+ display: inline-block;
+ color: var(--ion-color-medium);
+ margin-top: 16px;
+}
+
+.overview {
+ line-height: 22px;
+}
+
+.buttons {
+ position: relative;
+ text-align: center;
+ margin: 10px 0;
+
+ ion-icon {
+ font-size: 26px;
+ }
+
+ p {
+ margin: 0;
+ font-size: 12px;
+ color: var(--ion-color-medium-tint);
+ }
+}
+
+.thumb-up {
+ margin-left: -70px;
+ margin-bottom: 50px;
+}
+
+.thumb-down {
+ margin-left: 30px;
+ margin-bottom: 50px;
+}
+
+.backdrop-fab {
+ position: absolute;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ background: var(--ion-color-black-alfa);
+ z-index: 999;
+}
+
+.fab-button-in-list,
+ion-fab-button {
+ --background: var(--ion-color-medium-alfa);
+ --background-activated: var(--ion-color-light-tint);
+ --background-focused: var(--background-activated);
+ --color: var(--ion-color-light-tint);
+ --color-activated: var(--ion-color-light-contrast, var(--ion-color-black););
+ --color-focused: var(--color-activated);
+ --transition: transform 200ms ease 10ms, opacity 200ms ease 10ms;
+}
+
+.fab-button-in-list {
+ width: 80px;
+ height: 80px;
+
+ ion-icon {
+ font-size: 40px;
+ }
+}
+
+ion-fab-button {
+ width: 40px;
+ height: 40px;
+}
+
+.info-rate {
+ padding-right: 10px;
+ color: var(--ion-color-medium);
+ font-size: 15px;
+}
\ No newline at end of file
diff --git a/src/app/pages/movie-details/movie-details.page.spec.ts b/src/app/pages/movie-details/movie-details.page.spec.ts
new file mode 100644
index 0000000..396caeb
--- /dev/null
+++ b/src/app/pages/movie-details/movie-details.page.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MovieDetailsPage } from './movie-details.page';
+
+describe('MovieDetailsPage', () => {
+ let component: MovieDetailsPage;
+ let fixture: ComponentFixture