From 8e103ed60996786c75c76936e5f6d039223e1fbf Mon Sep 17 00:00:00 2001 From: VivianeOliveira Date: Mon, 16 Oct 2023 19:03:40 -0300 Subject: [PATCH] feat: add vivianeoliveirah profile --- angular.json | 198 +++++++++--------- package-lock.json | 41 ++++ package.json | 1 + .../menu-bar/menu-bar.component.css | 24 +-- .../menu-bar/menu-bar.component.html | 28 ++- src/app/pages/home/home.component.css | 3 +- src/styles.css | 17 +- 7 files changed, 182 insertions(+), 130 deletions(-) diff --git a/angular.json b/angular.json index 3961f08..7ab031d 100644 --- a/angular.json +++ b/angular.json @@ -1,104 +1,98 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "store": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/store", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "browserTarget": "store:build:production" - }, - "development": { - "browserTarget": "store:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "store:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - } - } - } - }, - "cli": { - "analytics": false - } + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "store": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/store", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["src/styles.css"], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "store:build:production" + }, + "development": { + "browserTarget": "store:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "store:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": ["src/favicon.ico", "src/assets"], + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css" + ], + + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": false + } } diff --git a/package-lock.json b/package-lock.json index c20ccde..27895db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "bootstrap": "^5.3.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -2903,6 +2904,16 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@schematics/angular": { "version": "14.1.3", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz", @@ -3871,6 +3882,24 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -13947,6 +13976,12 @@ } } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true + }, "@schematics/angular": { "version": "14.1.3", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-14.1.3.tgz", @@ -14761,6 +14796,12 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "requires": {} + }, "brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/package.json b/package.json index e89fdea..09c75c8 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "bootstrap": "^5.3.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css index b90bbc7..6ecf21a 100644 --- a/src/app/components/menu-bar/menu-bar.component.css +++ b/src/app/components/menu-bar/menu-bar.component.css @@ -1,4 +1,4 @@ -.menu-bar__container{ +.menu-bar__container { display: flex; flex-direction: row; position: fixed; @@ -6,22 +6,22 @@ background-color: #ffffff; width: 100%; height: 40px; - box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); } -.menu-bar__logo{ - margin-left: 30px; - display: flex; - align-items: center; +.menu-bar__logo { + margin-left: 30px; + display: flex; + align-items: center; } -.menu-bar__item{ - display: flex; - margin:auto; - align-items: center; +.menu-bar__item { + display: flex; + margin: auto; + align-items: center; } -.menu-bar__item > ul{ +.menu-bar__item > ul { display: flex; list-style-type: none; } @@ -35,7 +35,7 @@ text-decoration: none; padding: 5px; color: rgb(7, 7, 7); - font-family: 'Segoe UI'; + font-family: "Segoe UI"; } .menu-bar__item > ul > li > a:hover { diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index 44067d8..d6a55a0 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -1,18 +1,26 @@
diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css index d04b0ce..e42723f 100644 --- a/src/app/pages/home/home.component.css +++ b/src/app/pages/home/home.component.css @@ -1,4 +1,4 @@ -.home__container{ +.home__container { width: 90%; margin: auto; padding-top: 50px; @@ -7,4 +7,5 @@ justify-content: space-around; align-items: baseline; flex-wrap: wrap; + height: 100vh; /* Ajusta a altura para 100% da altura da tela */ } diff --git a/src/styles.css b/src/styles.css index 64880fb..574534a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,12 +1,19 @@ -/* You can add global styles to this file, and also import other style files */ -*{ +* { padding: 0; margin: 0; border: 0; box-sizing: border-box; } -body{ - background: rgb(2,0,36); - background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(9,9,121,1) 100%); +body { + background: url("https://gamexran.com/wp-content/uploads/2019/10/ps6-ps7-ps8-ps9-ps10.jpg") + no-repeat center center fixed; + background-size: cover; /* A imagem cobrirá todo o elemento pai */ +} + +/* Media query para ajustar o tamanho da imagem em dispositivos menores */ +@media (max-width: 768px) { + body { + background-size: contain; /* A imagem será redimensionada para caber na tela em dispositivos menores */ + } }