diff --git a/src/app/app.component.html b/src/app/app.component.html index 4fb4c3f..4758744 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,3 +3,9 @@
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e955d79..968036c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html', + templateUrl: './app.component.html' }) export class AppComponent { } diff --git a/src/app/components/pages/about/about.component.html b/src/app/components/pages/about/about.component.html index c73f129..9d2398c 100644 --- a/src/app/components/pages/about/about.component.html +++ b/src/app/components/pages/about/about.component.html @@ -2,14 +2,22 @@

Rick and Morty GraphQL Angular

- Angular 11 + Rick and Morty GraphQL API. - Using apollo-angular + Angular 11 + Rick and Morty GraphQL API. Using apollo-angular @nguniversal/express-engine, apollo-angular, express, graphql, ngx-infinite-scroll, ngx-toastr.

- Web dev + Web dev +
Developed by @hectorromerodev
-

- Developed by Meraki Developer -

+
+ + + + + + + + + +
diff --git a/src/app/components/pages/about/about.component.scss b/src/app/components/pages/about/about.component.scss index e6c34a7..e1dbfdb 100644 --- a/src/app/components/pages/about/about.component.scss +++ b/src/app/components/pages/about/about.component.scss @@ -6,9 +6,45 @@ section.about__page{ &__container{ display: flex; margin-top: 2rem; + flex-wrap: wrap; + justify-content: space-between; + } + &__paragraph{ + max-width: 50%; } &__copy{ text-align: end; } } } +.social__media{ + display: flex; + // flex-direction: column; + flex-wrap: wrap; + justify-content: space-evenly; + margin: 25px; + .fa{ + padding: 10px; + font-size: 30px; + width: 50px; + height: 50px; + text-align: center; + text-decoration: none; + margin: 5px 2px; + color: white; + &:hover{ + // opacity: .7; + transition: all .5s ease-in-out; + transform: scale(1.3); + } + &-twitter { + background: #55ACEE; + } + &-linkedin { + background: #007bb5; + } + &-github{ + background: #1f2225; + } + } +} diff --git a/src/assets/imgs/web_dev.svg b/src/assets/imgs/web_dev.svg index 4a6c461..0289a15 100644 --- a/src/assets/imgs/web_dev.svg +++ b/src/assets/imgs/web_dev.svg @@ -1 +1 @@ -developer activity \ No newline at end of file + \ No newline at end of file diff --git a/src/favicon.ico b/src/favicon.ico index 997406a..1e94923 100644 Binary files a/src/favicon.ico and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html index d66b133..049eb14 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,8 @@ - RickandmortyGraphqlApp + + Rick and Morty App diff --git a/src/styles.scss b/src/styles.scss index 973ac89..d4bdbbd 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -33,6 +33,11 @@ html { scroll-behavior:smooth; } +body{ + display: flex; + flex-direction: column; +} + ul { list-style: none; } @@ -41,15 +46,24 @@ a { text-decoration: none; } +footer{ + text-align: center; + padding: 3em 0; + background-color: #8C43E6; + p{ color: rgb(197, 197, 197); } + a{ color: #fffafa; } +} + .container { + flex: 1 0 auto; width: 90%; - height: 500px; + height: auto; + min-height: 100vh; margin: 0 auto; } - section { - height: 100vh; + height: 100%; } /* HEADER */