layout

bl4drnnr · May 14, 2024 · b3bd728 · b3bd728
1 parent 1156044
commit b3bd728
Show file tree

Hide file tree

Showing 27 changed files with 1,226 additions and 115 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -4,5 +4,4 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent {
-}
+export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -10,7 +10,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserAnimationsModule, BrowserModule, AppRoutingModule, PagesModule],
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule,
+    AppRoutingModule,
+    PagesModule
+  ],
   providers: [provideClientHydration()],
   bootstrap: [AppComponent]
 })

diff --git a/src/app/components/pages-components/footer/footer.component.html b/src/app/components/pages-components/footer/footer.component.html
@@ -0,0 +1,50 @@
+<section class="footer-subscribe">
+  <div class="footer-container">
+    <div class="footer-form-two w-form">
+      <div class="footer-form-container-two">
+        <div class="footer-form-title">Subscribe To Our Newsletters</div>
+        <div class="footer-form-block-two">
+          <input class="footer-form-input w-input" placeholder="Enter your email" type="email">
+          <button class="button-primary w-button">Subscribe Now</button>
+        </div>
+      </div>
+<!--      <div class="w-form-done">-->
+<!--        <div class="text-block">Thank you! Your submission has been received!</div>-->
+<!--      </div>-->
+<!--      <div class="w-form-fail">-->
+<!--        <div class="text-block-2">Oops! Something went wrong while submitting the form.</div>-->
+<!--      </div>-->
+    </div>
+    <div class="footer-wrapper-three">
+      <div class="footer-block-three">
+        <a
+          class="footer-link-three"
+          *ngFor="let footerLink of footerLinksListLeft"
+          [href]="footerLink.link"
+        >{{ footerLink.value }}</a>
+      </div>
+      <div class="footer-block-three">
+        <a
+          class="footer-link-three"
+          *ngFor="let footerLink of footerLinksListRight"
+          [href]="footerLink.link"
+        >{{ footerLink.value }}</a>
+      </div>
+    </div>
+    <div class="footer-divider-two"></div>
+  </div>
+  <div class="minimal-footer">
+    <div class="footer-content-wrapper-minimal">
+      <div class="footer-content-holder">
+        <a href="http://instagram.com" class="social-link white-heading-highlight">Instagram</a>
+        <a href="http://facebook.com" class="social-link white-heading-highlight">Facebook</a>
+        <a href="http://twitter.com" class="social-link white-heading-highlight">Twitter</a>
+      </div>
+      <div class="footer-content-holder">
+        <h3 class="footer-eyebrow-heading">
+          <span class="span">2024 Maverick.</span> All Rights Reserved.
+        </h3>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/app/components/pages-components/footer/footer.component.scss b/src/app/components/pages-components/footer/footer.component.scss
@@ -0,0 +1,261 @@
+.footer-subscribe {
+  padding: 50px 0 40px;
+  position: relative;
+
+  @media screen and (max-width: 767px) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+.footer-container {
+  margin-left: 5vw;
+  margin-right: 5vw;
+
+  @media screen and (max-width: 479px) {
+    max-width: none;
+  }
+}
+
+.footer-form-two {
+  background-color: #f5f7fa;
+  margin-bottom: 40px;
+  padding: 64px;
+
+  @media screen and (max-width: 991px) {
+    padding: 40px;
+  }
+
+  @media screen and (max-width: 479px) {
+    padding: 20px 5vw;
+  }
+}
+
+.footer-form-container-two {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+}
+
+.footer-form-title {
+  font-family: Montserrat, sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+
+  @media screen and (max-width: 991px) {
+    margin-right: 15px;
+  }
+
+  @media screen and (max-width: 767px) {
+    margin-right: 0;
+  }
+}
+
+.footer-form-input {
+  font-family: Roboto Mono, sans-serif;
+  font-size: var(--standard-subheading);
+  border: 1px #000;
+  width: 460px;
+  height: 48px;
+  margin-bottom: 0;
+  padding: 12px 180px 12px 20px;
+
+  @media screen and (max-width: 991px) {
+    width: 400px;
+    padding-right: 180px;
+  }
+
+  @media screen and (max-width: 767px) {
+    width: 100%;
+  }
+
+  @media screen and (max-width: 479px) {
+    margin-bottom: 10px;
+    padding-right: 20px;
+  }
+}
+
+.footer-form-block-two {
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  @media screen and (max-width: 767px) {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  @media screen and (max-width: 479px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+}
+
+.button-primary {
+  color: #fff;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  background-color: #1a1b1f;
+  line-height: 20px;
+  transition: all .2s;
+  font-family: Roboto Mono, sans-serif;
+  font-size: var(--standard-subheading);
+  padding: 8px 18px;
+  position: absolute;
+  right: 8px;
+}
+
+.footer-wrapper-three {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+
+  @media screen and (max-width: 991px) {
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+    flex-direction: column;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-columns: 1fr;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: grid;
+  }
+
+  @media screen and (max-width: 479px) {
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-columns: 1fr;
+    margin-left: 5vw;
+    margin-right: 5vw;
+    display: grid;
+  }
+}
+
+.footer-block-three {
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: -20px;
+  margin-right: -20px;
+  display: flex;
+
+  @media screen and (max-width: 991px) {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-flow: column wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  @media screen and (max-width: 479px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.footer-link-three {
+  color: #fff;
+  font-size: var(--standard-subheading);
+  border-bottom-style: none;
+  margin-left: 20px;
+  margin-right: 20px;
+  text-decoration: none;
+
+  @media screen and (max-width: 991px) {
+    margin-left: 0;
+  }
+
+  @media screen and (max-width: 767px) {
+    margin-bottom: 10px;
+  }
+
+  @media screen and (max-width: 479px) {
+    margin-left: 0;
+  }
+}
+
+.footer-divider-two {
+  background-color: rgba(255, 255, 255, .07);
+  width: 100%;
+  height: 1px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.minimal-footer {
+  padding: 1vw 5vw;
+  position: relative;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.footer-content-wrapper-minimal {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer-content-holder {
+  @media screen and (max-width: 991px) {
+    display: none;
+  }
+
+  @media screen and (max-width: 479px) {
+    display: block;
+  }
+}
+
+.footer-eyebrow-heading {
+  color: #999;
+  font-size: var(--standard-subheading);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 400;
+  line-height: 1;
+
+  @media screen and (max-width: 991px) {
+    font-size: 1em;
+  }
+
+  @media screen and (max-width: 767px) {
+    font-size: 2vw;
+  }
+
+  @media screen and (max-width: 479px) {
+    font-size: var(--standard-subheading);
+    display: block;
+  }
+}
+
+.w-form-done {
+  padding: 20px;
+  text-align: center;
+  background-color: #dddddd;
+}
+
+.w-form-fail {
+  margin-top: 10px;
+  padding: 10px;
+  text-align: center;
+  background-color: #ffdede;
+}
+
+.text-block, .text-block-2 {
+  font-family: Roboto Mono, sans-serif;
+}
diff --git a/src/app/components/pages-components/footer/footer.component.ts b/src/app/components/pages-components/footer/footer.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { LinksListInterface } from '@interfaces/links-list.interface';
+
+@Component({
+  selector: 'component-footer',
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  footerLinksListLeft: Array<LinksListInterface> = [
+    {
+      link: 'blog',
+      value: 'Blog'
+    },
+    {
+      link: 'about',
+      value: 'About'
+    },
+    {
+      link: 'contact',
+      value: 'Contact'
+    }
+  ];
+
+  footerLinksListRight: Array<LinksListInterface> = [
+    {
+      link: 'privacy-policy',
+      value: 'Privacy Policy'
+    },
+    {
+      link: 'tac',
+      value: 'Terms & Conditions'
+    },
+    {
+      link: 'licensing',
+      value: 'Licensing'
+    }
+  ];
+}