diff --git a/public/assest/images/loading.gif b/public/assest/images/loading.gif index a718bd8..7406e20 100644 Binary files a/public/assest/images/loading.gif and b/public/assest/images/loading.gif differ diff --git a/public/assest/js/dom.js b/public/assest/js/dom.js index 45b6512..641ac23 100644 --- a/public/assest/js/dom.js +++ b/public/assest/js/dom.js @@ -7,7 +7,6 @@ const onLoadPage = (() => { fetch('/popImages') .then((response) => response.json()) .then((data) => { - console.log(data[0]); firstPopularPhoto.src = data[0].thumbnail; secondePopularPhoto.src = data[1].thumbnail; thirdPopularPhoto.src = data[2].thumbnail; diff --git a/public/assest/stylesheet/style.css b/public/assest/stylesheet/style.css index e41c921..57fabc5 100644 --- a/public/assest/stylesheet/style.css +++ b/public/assest/stylesheet/style.css @@ -1,147 +1,217 @@ -@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} -:root{ - font-family: 'Bebas Neue', cursive; - --brandColor: #2DA5FF; - --mainColor: #2A2E33; - --titleColor: #AAAAAA; - --paragraphColor: #999999; - --whiteColor: #FFFFFF; -} -.col-1{ - flex: 1; -} -.col-2{ - flex: 2; -} -.col-3{ - flex: 3; -} -.col-4{ - flex: 4; -} -.col-5{ - flex: 5; -} -.col-6{ - flex: 6; -} -body{ - background: #2a2e33; -} -.container{ - width: 90%; - margin: auto; -} -.header{ - width: 100%; -} -.header-navbar{ - position: sticky; - top: 0; - width: 100%; - z-index: 15; - height: 10vh; - border-bottom: 1px solid rgba(0, 0, 0, 0.13); - background: var(--mainColor); - box-shadow: 0 10px 10px 10px #222; -} -.navbar-container{ - height: 100%; - display:flex; - align-items: center; - justify-content: center; - +@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +:root { + font-family: "Bebas Neue", cursive; + --brandColor: #2da5ff; + --mainColor: #2a2e33; + --titleColor: #aaaaaa; + --paragraphColor: #999999; + --whiteColor: #ffffff; +} +.col-1 { + flex: 1; +} +.col-2 { + flex: 2; +} +.col-3 { + flex: 3; +} +.col-4 { + flex: 4; +} +.col-5 { + flex: 5; +} +.col-6 { + flex: 6; +} +body { + background: #2a2e33; +} +.container { + width: 90%; + margin: auto; +} +.header { + transition: all .8s ease-in-out; + width: 100%; +} +.header-navbar { + position: fixed; + top: 0; + width: 100%; + z-index: 15; + height: 10vh; + border-bottom: 1px solid rgba(0, 0, 0, 0.13); + background: var(--mainColor); + box-shadow: 0 10px 10px 10px #222; +} +.navbar-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; } -.navbar-logo{ - height: 100%; - display:flex; - align-items: center; - justify-content: flex-start; - - -} -.navbar-logo-content{ - color: var(--brandColor); - font-size: 1.5rem; +.navbar-logo { + height: 100%; + display: flex; + align-items: center; + justify-content: flex-start; +} +.navbar-logo-content { + color: var(--brandColor); + font-size: 1.5rem; +} +.navbar-list { + height: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; +} +.navbar-list-item { + list-style-type: none; + text-align: center; +} +.navbar-list-item-link { + text-decoration: none; + color: var(--titleColor); + font-size: 1.3rem; +} +.navbar-cart-box { + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; + font-size: 1.3rem; + color: var(--titleColor); +} +.special-games { + margin-top: 5vh; + height: 85vh; +} +.special-games-container { + height: 100%; + padding: 5rem 0 0 0; + display: flex; + flex-direction: column; +} +.special-games-details { + width: 40%; + height: 30%; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 10%; +} +.special-games-title { + color: var(--titleColor); + font-size: 2.5rem; + letter-spacing: 0.5rem; + line-height: 1.5; +} +.special-games-description { + color: var(--paragraphColor); + letter-spacing: 0.1rem; + font-size: 1.8rem; +} +.popular-games-grid { + width: 100%; + height: 40%; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; +} +.popular-games-grid-box { + padding-right: 1.5rem; + height: 100%; +} +.popular-games-grid-box:last-child { + padding: 0; +} +.popular-games-grid-box-bg { + width: 100%; + height: 100%; + object-fit: contain; +} +.main { + height: 300vh; +} +.games-list { + height: 100vh; +} +.games-list-container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.games-list-card { + align-self: flex-start; + width: 28%; + height: 65vh; + box-shadow: -3px -3px 5px 5px #222; +} +.games-list-card-image { + + width: 100%; + height: 45%; +} +.games-list-card-img { + width: 100%; +} +.games-list-card-details { + height: 45%; + padding: 0 1rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} +.games-list-card-details-content { + height: 50%; + display: flex; + flex-direction: column; + justify-content: flex-start; +} +.games-list-card-details-title { + color: var(--titleColor); + width: 100%; + height: 40%; + overflow: hidden; + font-size: 1.8rem; + letter-spacing: 0.1rem; + line-height: 1.2; +} +.games-list-card-details-description { + color: var(--paragraphColor); + width: 70%; + font-size: 1.2rem; + line-height: 1.4; +} +.games-list-card-details-info { + padding: 0 1rem; + display: flex; + justify-content: space-between; +} +.games-list-card-details-info { + font-size: 1.2rem; +} +.games-list-card-details-info { + display: flex; + align-items: center; + color: var(--titleColor); +} +.games-list-card-details-info-type { + display: flex; + align-items: center; + justify-content: space-between; + height: 52px; + width: 20%; + color: var(--titleColor); } -.navbar-list{ - height: 100%; - display:flex; - align-items: center; - justify-content: space-evenly; -} -.navbar-list-item{ - list-style-type: none; - text-align: center; -} -.navbar-list-item-link{ - text-decoration: none; - color: var(--titleColor); - font-size: 1.3rem; -} -.navbar-cart-box{ - display:flex; - align-items: center; - justify-content: flex-end; - height: 100%; - font-size: 1.3rem; - color: var(--titleColor); - -} -.special-games{ - margin-top: 5vh; - height: 85vh; - -} -.special-games-container{ - height: 100%; - padding: 5rem 0 0 0; - display: flex; - flex-direction: column; -} -.special-games-details{ - width: 40%; - height: 30%; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 10%; -} -.special-games-title{ - color: var(--titleColor); - font-size: 2.5rem; - letter-spacing: 0.5rem; - line-height: 1.5; -} -.special-games-description{ - color: var(--paragraphColor); - letter-spacing: 0.1rem; - font-size:1.8rem -} -.popular-games-grid{ - width: 100%; - height: 40%; - display:flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: space-between; -} -.popular-games-grid-box{ - padding-right: 1.5rem; - height: 100%; -} -.popular-games-grid-box:last-child{ - padding: 0; -} -.popular-games-grid-box-bg{ - width : 100%; - height: 100%; - object-fit: contain; -} \ No newline at end of file diff --git a/public/index.html b/public/index.html index cb62086..dc3f553 100644 --- a/public/index.html +++ b/public/index.html @@ -18,55 +18,169 @@
+ +
+
+
+

+ Best Free Games For PC And Browser Here !! +

+

Top 4 popular Free games

+
+
+
+ loading +
+
+ loading +
+
+ loading +
+
+ loading +
+
+
+
+
+
+
+
+
+
+ loading +
+
+
+

+ Phantasy Star Online 2 New Genesis +

+

+ The legacy of Phantasy Star Online 2 continues a thousand + years later! +

- -
+
+
+
+
+ Shooter + +
- - -
-
-
-

- Best Free Games For PC And Browser Here !! -

-

- Top 4 popular Free games -

+
+
+
+ loading +
+
+
+

+ Phantasy Star Online 2 New Genesis +

+

+ The legacy of Phantasy Star Online 2 continues a thousand + years later! +

+
+
+
+ +
+
+ Shooter + +
+
+
+
+
+
+ loading +
+
+
+

+ Phantasy Star Online 2 New Genesis +

+

+ The legacy of Phantasy Star Online 2 continues a thousand + years later! +

-
-
- -
-
- -
-
- -
-
- -
- +
+
+ +
+
+ Shooter + +
+
+
- +
diff --git a/src/app.js b/src/app.js index 1d5af76..29636a2 100644 --- a/src/app.js +++ b/src/app.js @@ -1,5 +1,6 @@ /* eslint-disable no-console */ const express = require('express'); +const axios = require('axios') const app = express(); const path = require('path');