-
- Welcome to {{ title }}!
-
-
+
+
+
+
+
+
PQ-Man
+
+
+
+
+
+
+
+ search
+
+
+
+
+
+
+
-
Here are some links to help you start:
-
diff --git a/src/app/app.component.less b/src/app/app.component.less
index e69de29..9fb75d8 100644
--- a/src/app/app.component.less
+++ b/src/app/app.component.less
@@ -0,0 +1,68 @@
+@text-color: #37474f;
+@border-color: rgba(183, 183, 183, .3);
+
+.main-container {
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ .center-container {
+ margin: auto;
+ width: 100%;
+ max-width: 680px;
+ min-width: 300px;
+ padding: 0 .8em 200px .8em;
+ box-sizing: border-box;
+
+ h1 {
+ text-align: center;
+ font-size: 6em;
+ margin: 0.3em 0;
+ color: @text-color;
+ @media screen and ( max-width: 450px ) {
+ font-size: 3.5em;
+ }
+ }
+
+ .search-bar {
+ width: 100%;
+ display: flex;
+ box-sizing: border-box;
+ padding: 10px 0 10px 20px;
+ border: 1px solid @border-color;
+ -webkit-border-radius: 25px;
+ border-radius: 25px;
+ font: normal 20px/normal Verdana, Geneva, sans-serif;
+ color: @text-color;
+ -o-text-overflow: clip;
+ text-overflow: clip;
+ background: rgba(255, 255, 255, 1);
+ height: 52px;
+
+ input[type=text] {
+ vertical-align: top;
+ width: calc(100% - 30px);
+ height: 28px;
+ border: none;
+ }
+
+ input[type=text]:focus {
+ outline: none;
+ }
+
+ .search-button {
+ border-left: 1px solid @border-color;
+ padding: 0 10px;
+
+ .material-icons {
+ font-size: 30px;
+ color: @text-color;
+ }
+
+ }
+ }
+ }
+
+}
diff --git a/src/index.html b/src/index.html
index 089d050..8939243 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,9 @@
+
+
+
diff --git a/src/main.ts b/src/main.ts
index c7b673c..077cb4b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,9 +4,9 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
-if (environment.production) {
+if ( environment.production ) {
enableProdMode();
}
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err));
+platformBrowserDynamic().bootstrapModule( AppModule )
+ .catch( err => console.error( err ) );
diff --git a/src/styles.less b/src/styles.less
index 90d4ee0..33058ff 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -1 +1,14 @@
/* You can add global styles to this file, and also import other style files */
+
+html {
+ height: 100%;
+ width: 100%;
+ background-color: #f7f7f7;
+ font-family: 'Russo One', sans-serif;
+}
+
+body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+}