diff --git a/.env b/.env new file mode 100644 index 00000000..fbf22905 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_OPENDB_KEY= 23ace2b0c27910f5cec13f5bdb014044 \ No newline at end of file diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4dcb4390..ee751660 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,20 +1,20 @@ module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:react/jsx-runtime', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, - settings: { react: { version: '18.2' } }, - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, + root: true, + env: { browser: true, es2020: true }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + "plugin:react-hooks/recommended", + ], + ignorePatterns: ["dist", ".eslintrc.cjs"], + parserOptions: { ecmaVersion: "latest", sourceType: "module" }, + settings: { react: { version: "18.2" } }, + plugins: ["react-refresh"], + rules: { + "react-refresh/only-export-components": [ + "warn", + { allowConstantExport: true }, + ], + }, } diff --git a/index.html b/index.html index 1615ccc7..60caed91 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Movie Site Project diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..67560159 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,4 @@ +[[redirects]] +from = "/*" +to = "/index.html" +status = 200 \ No newline at end of file diff --git a/package.json b/package.json index a3bd4ec3..9c536d6b 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,11 @@ "preview": "vite preview" }, "dependencies": { + "prop-types": "^15.8.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-lottie": "^1.2.4", + "react-router-dom": "^6.22.3" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/public/movie.svg b/public/movie.svg new file mode 100644 index 00000000..3e02773b --- /dev/null +++ b/public/movie.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1091d431..b0c8abf0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,22 @@ +import { BrowserRouter, Routes, Route } from "react-router-dom" +import { useParams } from "react-router-dom" +import { Movies } from "./components/FirstPage.jsx" +import { Details } from "./components/SecondPage.jsx" +import { Nav } from "./components/Nav" +import { useEffect, useState } from "react" +import { NotFound } from "./components/NotFound.jsx" + export const App = () => { - return
Find me in src/app.jsx!
; -}; + return ( + +
+ {/*
+ + ) +} diff --git a/src/components/BackImage.jsx b/src/components/BackImage.jsx new file mode 100644 index 00000000..967486c7 --- /dev/null +++ b/src/components/BackImage.jsx @@ -0,0 +1,19 @@ +import Lottie from "react-lottie" +import animationData from "../lotties/backanimation.json" + +export const BackImage = () => { + const defaultOptions = { + loop: true, + autoplay: true, + animationData: animationData, + rendererSettings: { + preserveAspectRatio: "xMidYMid slice", + }, + } + + return ( +
+ +
+ ) +} diff --git a/src/components/DetailList.jsx b/src/components/DetailList.jsx new file mode 100644 index 00000000..9ef5dc3f --- /dev/null +++ b/src/components/DetailList.jsx @@ -0,0 +1,39 @@ +import { Link } from "react-router-dom" +import "../styling/DetailList.css" +import { BackImage } from "./BackImage" + +export const DetailList = ({ detailData }) => { + console.log("check data in DetailList", detailData) + return ( + <> + {/* {detailData && + detailData.results.map((detail) => ( */} +
+
+
+ + + + {`Movie +
+

{detailData.title}

+

⭐ {detailData.vote_average.toFixed(1)}

+

{detailData.overview}

+
+
+
+
+ + ) +} diff --git a/src/components/FirstPage.jsx b/src/components/FirstPage.jsx new file mode 100644 index 00000000..28cbbf51 --- /dev/null +++ b/src/components/FirstPage.jsx @@ -0,0 +1,30 @@ +import { useState, useEffect } from "react" +import { PopularList } from "./PopularList.jsx" +import { Loader } from "./Loader" + +export const Movies = () => { + const [movieData, setMovieData] = useState(null) + const [isLoading, setIsLoading] = useState(true) + + const apiEnv = import.meta.env.VITE_OPENDB_KEY + const testUrl = `https://api.themoviedb.org/3/movie/popular?api_key=${apiEnv}&language=en-US&page=1` + + useEffect(() => { + fetch(testUrl) + .then((result) => result.json()) + .then((json) => { + setMovieData(json) + setIsLoading(false) + }) + .catch((error) => { + console.error(error) + }) + }, [testUrl]) + console.log("moviedata firstpage", movieData) + return ( + <> + {isLoading && } + + + ) +} diff --git a/src/components/Images.jsx b/src/components/Images.jsx new file mode 100644 index 00000000..84d9c103 --- /dev/null +++ b/src/components/Images.jsx @@ -0,0 +1,3 @@ +export const Images = ({ url, altText }) => { + return +} diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx new file mode 100644 index 00000000..03f5edfb --- /dev/null +++ b/src/components/Loader.jsx @@ -0,0 +1,27 @@ +import Lottie from "react-lottie" +import animationData from "../lotties/animation.json" + +export const Loader = () => { + const defaultOptions = { + loop: true, + autoplay: true, + animationData: animationData, + rendererSettings: { + preserveAspectRatio: "xMidYMid slice", + }, + } + + return ( +
+ +
+ ) +} + +//nedan är försök att få animationen att visas längre. + +// useEffect(() => { +// export const DelayLottie = setTimeout(() => { +// setLoading(true) +// }, 3000) +// }) diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx new file mode 100644 index 00000000..cbd5cdd9 --- /dev/null +++ b/src/components/Nav.jsx @@ -0,0 +1,21 @@ +import React from "react" +import { Link, NavLink } from "react-router-dom" +import "../styling/Nav.css" + +export const Nav = () => { + return ( + <> +
+

RomComs

+
+ + + ) +} diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx new file mode 100644 index 00000000..afff0bf3 --- /dev/null +++ b/src/components/NotFound.jsx @@ -0,0 +1,3 @@ +export const NotFound = () => { + return
Page not found
+} diff --git a/src/components/PopularList.jsx b/src/components/PopularList.jsx new file mode 100644 index 00000000..1fe8e2e9 --- /dev/null +++ b/src/components/PopularList.jsx @@ -0,0 +1,43 @@ +import "../styling/PopularList.css" +import { Link } from "react-router-dom" + +//functional component +export const PopularList = ({ movieData }) => { + return ( +
+
+ {movieData && + movieData.results.map((movie) => ( + +
+
+

{movie.title}

+

+ Released {movie.release_date} +

+
+
+ {`Movie +
+
+ + ))} +
+
+ ) +} + +// return ( +// <> +// {jsonMovies.map((movie) => ( +//
+// +//
+// ))} +// +// ) +// } diff --git a/src/components/SecondPage.jsx b/src/components/SecondPage.jsx new file mode 100644 index 00000000..72961bc6 --- /dev/null +++ b/src/components/SecondPage.jsx @@ -0,0 +1,44 @@ +import "../styling/SecondPage.css" +import { useState, useEffect } from "react" +import { Loader } from "./Loader" +import { NotFound } from "./NotFound" +import { Link, useParams } from "react-router-dom" +import { DetailList } from "./DetailList" + +export const Details = () => { + const [detailData, setDetailData] = useState(null) + const [isLoading, setIsLoading] = useState(true) + + const params = useParams() + const movieId = params.slug + const API_KEY = "23ace2b0c27910f5cec13f5bdb014044" + + const listUrl = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}&language=en-US` + + useEffect(() => { + fetch(listUrl) + .then((result) => result.json()) + .then((json) => { + setDetailData(json) + setIsLoading(false) + }) + .catch((error) => { + console.error(error) + }) + }, [listUrl]) + + if (!detailData || detailData === undefined) { + return + } + + if (detailData.success === false) { + return + } + console.log("detailtdata secondpage", detailData) + return ( + <> + {isLoading && } + + + ) +} diff --git a/src/index.css b/src/index.css index 4558f538..0759b9d2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,14 @@ :root { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: rgb(252, 213, 220); } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } diff --git a/src/lotties/animation.json b/src/lotties/animation.json new file mode 100644 index 00000000..bd874b7b --- /dev/null +++ b/src/lotties/animation.json @@ -0,0 +1,443 @@ +{ + "v": "4.6.9", + "fr": 29.9700012207031, + "ip": 0, + "op": 34.0000013848484, + "w": 800, + "h": 600, + "nm": "Loader", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Shape Layer 2", + "ks": { + "o": { + "a": 0, + "k": 100 + }, + "r": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [400, 300, 0] + }, + "a": { + "a": 0, + "k": [0, 0, 0] + }, + "s": { + "a": 0, + "k": [100, 100, 100] + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [36.812, 0], + [0, -19.33], + [-19.33, 0], + [-37.125, 0], + [0, -19.33], + [19.33, 0] + ], + "o": [ + [-19.33, 0], + [0, 19.33], + [36.688, 0], + [19.33, 0], + [0, 19.33], + [-37.25, 0] + ], + "v": [ + [-44.844, -35], + [-79.844, 0], + [-44.844, 35], + [44.844, -35], + [79.844, 0], + [44.844, 35] + ], + "c": true + } + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group" + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.105882, 0.105882, 0.105882, 1] + }, + "o": { + "a": 0, + "k": 100 + }, + "w": { + "a": 0, + "k": 12 + }, + "lc": 1, + "lj": 1, + "ml": 4, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke" + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [0, 0], + "ix": 2 + }, + "a": { + "a": 0, + "k": [0, 0], + "ix": 1 + }, + "s": { + "a": 0, + "k": [100, 100], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Shape 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group" + }, + { + "ty": "tm", + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [0], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0_1_0p167_0p167"], + "t": 5.834, + "s": [0], + "e": [20] + }, + { + "i": { + "x": [0.833], + "y": [0.833] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p833_0p833_0p167_0p167"], + "t": 17.11, + "s": [20], + "e": [20] + }, + { + "i": { + "x": [0.611], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p611_1_0p167_0p167"], + "t": 23.334, + "s": [20], + "e": [40] + }, + { + "t": 35.0000014255792 + } + ], + "ix": 1 + }, + "e": { + "a": 1, + "k": [ + { + "i": { + "x": [0], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0_1_0p167_0p167"], + "t": 0, + "s": [12], + "e": [32] + }, + { + "i": { + "x": [0.833], + "y": [0.833] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p833_0p833_0p167_0p167"], + "t": 11.666, + "s": [32], + "e": [32] + }, + { + "i": { + "x": [0.5], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p5_1_0p167_0p167"], + "t": 17.11, + "s": [32], + "e": [53] + }, + { + "t": 29.1662511879657 + } + ], + "ix": 2 + }, + "o": { + "a": 1, + "k": [ + { + "i": { + "x": [0.667], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p667_1_0p167_0p167"], + "t": 0, + "s": [-22], + "e": [82.925] + }, + { + "i": { + "x": [0.667], + "y": [1] + }, + "o": { + "x": [0.167], + "y": [0.167] + }, + "n": ["0p667_1_0p167_0p167"], + "t": 17.11, + "s": [82.925], + "e": [193] + }, + { + "t": 35.0000014255792 + } + ], + "ix": 3 + }, + "m": 1, + "ix": 2, + "nm": "Trim Paths 1", + "mn": "ADBE Vector Filter - Trim" + } + ], + "ip": 0, + "op": 300.00001221925, + "st": 0, + "bm": 0, + "sr": 1 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Shape Layer 1", + "ks": { + "o": { + "a": 0, + "k": 25 + }, + "r": { + "a": 0, + "k": 0 + }, + "p": { + "a": 0, + "k": [400, 300, 0] + }, + "a": { + "a": 0, + "k": [0, 0, 0] + }, + "s": { + "a": 0, + "k": [100, 100, 100] + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [36.812, 0], + [0, -19.33], + [-19.33, 0], + [-37.125, 0], + [0, -19.33], + [19.33, 0] + ], + "o": [ + [-19.33, 0], + [0, 19.33], + [36.688, 0], + [19.33, 0], + [0, 19.33], + [-37.25, 0] + ], + "v": [ + [-44.844, -35], + [-79.844, 0], + [-44.844, 35], + [44.844, -35], + [79.844, 0], + [44.844, 35] + ], + "c": true + } + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group" + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.105882, 0.105882, 0.105882, 1] + }, + "o": { + "a": 0, + "k": 100 + }, + "w": { + "a": 0, + "k": 12 + }, + "lc": 1, + "lj": 1, + "ml": 4, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke" + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [0, 0], + "ix": 2 + }, + "a": { + "a": 0, + "k": [0, 0], + "ix": 1 + }, + "s": { + "a": 0, + "k": [100, 100], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform" + } + ], + "nm": "Shape 1", + "np": 3, + "cix": 2, + "ix": 1, + "mn": "ADBE Vector Group" + } + ], + "ip": 0, + "op": 300.00001221925, + "st": 0, + "bm": 0, + "sr": 1 + } + ] +} diff --git a/src/lotties/backanimation.json b/src/lotties/backanimation.json new file mode 100644 index 00000000..3b953151 --- /dev/null +++ b/src/lotties/backanimation.json @@ -0,0 +1,388 @@ +{ + "v": "5.7.8", + "fr": 25, + "ip": 0, + "op": 25, + "w": 500, + "h": 500, + "nm": "arrowLeft", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Shape Layer 5", + "sr": 1, + "ks": { + "o": { + "a": 0, + "k": 100, + "ix": 11 + }, + "r": { + "a": 0, + "k": 90, + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { + "x": 0.383, + "y": 0.94 + }, + "o": { + "x": 1, + "y": 0.028 + }, + "t": 0, + "s": [206, 250, 0], + "to": null, + "ti": null + }, + { + "i": { + "x": 0.283, + "y": 0.283 + }, + "o": { + "x": 0.769, + "y": 0.769 + }, + "t": 11, + "s": [157, 250, 0], + "to": null, + "ti": null + }, + { + "i": { + "x": 0.204, + "y": 0.966 + }, + "o": { + "x": 0.422, + "y": 0.543 + }, + "t": 14, + "s": [157, 250, 0], + "to": null, + "ti": null + }, + { + "t": 24, + "s": [206, 250, 0] + } + ], + "ix": 2, + "l": 2 + }, + "a": { + "a": 0, + "k": [121.547, 258.364, 0], + "ix": 1, + "l": 2 + }, + "s": { + "a": 1, + "k": [ + { + "i": { + "x": [0.667, 0.667, 0.667], + "y": [1, 1, 1] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0, 0, 0] + }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 1] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0] + }, + "t": 2, + "s": [100, 100, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 11, + "s": [90, 110, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 14, + "s": [110, 90, 100] + }, + { + "i": { + "x": [0.833, 0.833, 0.833], + "y": [0.833, 0.833, 0.833] + }, + "o": { + "x": [0.167, 0.167, 0.167], + "y": [0.167, 0.167, 0.167] + }, + "t": 20, + "s": [105, 95, 100] + }, + { + "t": 24, + "s": [100, 100, 100] + } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [87.562, 228.5], + [120.624, 257.562], + [152.562, 228.505] + ], + "o": [ + [87.562, 228.5], + [120.624, 257.562], + [152.562, 228.505] + ], + "v": [ + [87.562, 228.5], + [120.624, 257.562], + [152.562, 228.505] + ], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false, + "_render": true + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0, 0, 1], + "ix": 3 + }, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 7, + "ix": 5 + }, + "lc": 2, + "lj": 2, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "_render": true + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [121.013, 258.472], + "ix": 2 + }, + "a": { + "a": 0, + "k": [120.088, 257.812], + "ix": 1 + }, + "s": { + "a": 0, + "k": [100.301, 100], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform", + "_render": true + } + ], + "nm": "Shape 2", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false, + "_render": true + }, + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [120.5, 155.5], + [121.5, 257.5] + ], + "o": [ + [120.5, 155.5], + [121.5, 257.5] + ], + "v": [ + [120.5, 155.5], + [121.5, 257.5] + ], + "c": false + }, + "ix": 2 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false, + "_render": true + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0, 0, 0, 1], + "ix": 3 + }, + "o": { + "a": 0, + "k": 100, + "ix": 4 + }, + "w": { + "a": 0, + "k": 7, + "ix": 5 + }, + "lc": 2, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false, + "_render": true + }, + { + "ty": "tr", + "p": { + "a": 0, + "k": [0, -5], + "ix": 2 + }, + "a": { + "a": 0, + "k": [0, 0], + "ix": 1 + }, + "s": { + "a": 0, + "k": [100, 99.945], + "ix": 3 + }, + "r": { + "a": 0, + "k": 0, + "ix": 6 + }, + "o": { + "a": 0, + "k": 100, + "ix": 7 + }, + "sk": { + "a": 0, + "k": 0, + "ix": 4 + }, + "sa": { + "a": 0, + "k": 0, + "ix": 5 + }, + "nm": "Transform", + "_render": true + } + ], + "nm": "Shape 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 2, + "mn": "ADBE Vector Group", + "hd": false, + "_render": true + } + ], + "ip": 0, + "op": 25, + "st": 0, + "bm": 0, + "completed": true + } + ], + "markers": [], + "__complete": true +} diff --git a/src/main.jsx b/src/main.jsx index 51294f39..24e16104 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import { App } from "./App.jsx"; -import "./index.css"; +import React from "react" +import ReactDOM from "react-dom/client" +import { App } from "./App.jsx" +import "./index.css" ReactDOM.createRoot(document.getElementById("root")).render( - - - -); + + + +) diff --git a/src/styling/DetailList.css b/src/styling/DetailList.css new file mode 100644 index 00000000..93395bab --- /dev/null +++ b/src/styling/DetailList.css @@ -0,0 +1,60 @@ +.detail-background { + display: flex; + margin: 0; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.details-card { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin: 0 20px 50px 20px; +} + +.back-btn { + display: flex; + align-self: flex-start; +} + +.details-card h1 { + font-size: 20px; +} + +.poster-image { + display: flex; + align-items: center; + border: 5px solid pink; + height: 350px; + margin: 10%; +} + +.poster-text { + margin-bottom: 5px; + margin-left: 10%; + margin-right: 15%; + color: white; + font-size: 16px; + font-weight: 600; +} + +.poster-text:hover { + background-color: pink; + opacity: 0.4; + color: black; +} + +/*Media queries*/ +@media (min-width: 668px) { + .poster-image { + height: 500px; + } + + @media (min-width: 1025px) { + .poster-image { + height: 600px; + } + } +} diff --git a/src/styling/Nav.css b/src/styling/Nav.css new file mode 100644 index 00000000..c6877017 --- /dev/null +++ b/src/styling/Nav.css @@ -0,0 +1,29 @@ +a { + text-decoration: none; +} + +a.active { + text-decoration: underline; + color: aquamarine; +} + +.navbar { + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: 20px; + margin-right: 40px; + color: lightblue; + list-style-type: none; +} + +.navbar-title { + display: flex; + flex-direction: row; + justify-content: space-between; + color: lightgreen; +} + +.navbar:hover { + color: plum; +} diff --git a/src/styling/PopularList.css b/src/styling/PopularList.css new file mode 100644 index 00000000..bfe3d56b --- /dev/null +++ b/src/styling/PopularList.css @@ -0,0 +1,66 @@ +.movie-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.hover-text { + display: none; + flex-direction: column; + justify-content: flex-end; + padding: 20px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); + transition: opacity 0.3s ease; +} + +.movie-card:hover .hover-text { + display: flex; +} + +.title { + color: #ffc0cb; +} + +.release-date { + color: #ffc0cb; +} + +.movie-list { + display: grid; + grid-template-columns: 1fr; +} + +.movie-card { + position: relative; +} + +.poster { + width: 100%; +} + +.movie-image { + width: 100%; +} + +@media (min-width: 500px) { + .movie-list { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 690px) { + .movie-list { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 1025px) { + .movie-list { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/src/styling/SecondPage.css b/src/styling/SecondPage.css new file mode 100644 index 00000000..e41c8a09 --- /dev/null +++ b/src/styling/SecondPage.css @@ -0,0 +1,3 @@ +.title2 { + color: yellow; +} diff --git a/vintage-film-camera-svgrepo-com.svg b/vintage-film-camera-svgrepo-com.svg new file mode 100644 index 00000000..3e02773b --- /dev/null +++ b/vintage-film-camera-svgrepo-com.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + \ No newline at end of file