done with overall home, navigation and footer structure and design

public/css/main.css

@@ -1,16 +1,26 @@
-@import url(https://fonts.cdnfonts.com/css/druk-text-wide-trial);
+@import url(https://db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold);
+@import url(https://fonts.googleapis.com/css?family=Poppins);
 :root{
     --primary-clr: #67EB47;
     --dark-clr: #000;
     --light-clr: #FFF;
 }
 
+*{
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    font-family: 'Poppins'
+}
+
 .text-db{
     color: var(--primary-clr);
 }
 
 .text-highlight{
-    font-family: 'Druk Text Wide Trial', sans-serif !important;
+    font-family: "Druk Wide Bold" !important;
 }
 
 .db-btn {
@@ -39,19 +49,32 @@
     color: var(--primary-clr);
 }
 
-p{
+.db-p{
+    font-size: clamp(0.9rem,1vw,1.2rem);
+    line-height: 2rem;
+}
+
+.db-h5{
     font-size: clamp(18px,1.2vw,23px);
     line-height: 3rem;
 }
 
 .db-h3{
     font-size: clamp(2rem,2.3vw,3.5rem);
-    font-size: 500;
+    font-weight: 500;
+}
+
+.db-h6{
+    font-size: clamp(1.25rem,1vw,1.75rem);
+    font-weight: 500;
 }
 
 .about-paragraph{
     width: 100%;
+}
 
+.feature-paragraph{
+    width: 100%;
 }
 
 .section3-img{
@@ -62,15 +85,413 @@ p{
     border: 1px solid gray;
 }
 
+.db-input{
+    background-color: black;
+    padding: 1.125rem 0;
+    border: none;
+    color: var(--light-clr);
+    border-bottom: 2px solid var(--primary-clr);
+    width: 100%;
+    font-size: 18px;
+
+}
+
+.db-input::-moz-placeholder {
+    color: var(--light-clr);
+    opacity: 1; /* Firefox */
+}
+
+.db-input::placeholder {
+    color: var(--light-clr);
+    opacity: 1; /* Firefox */
+}
+
+.db-input:focus-visible{
+    outline: none;
+}
+
 @media (min-width: 768px) {
 
     .about-paragraph{
         width: 70%;
     }
 
+    .feature-paragraph{
+        width: 80%;
+    }
+
     .section3-img{
         background-position: center;
     }
 
 }
 
+/* UTILS */
+.py-6{
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+}
+
+.py-7{
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+
+.my-7{
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+}
+
+/* NORMALIZE CSS */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+     ========================================================================== */
+
+  /**
+   * Remove the margin in all browsers.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+   * Render the `main` element consistently in IE.
+   */
+
+  main {
+    display: block;
+  }
+
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Add the correct font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+     ========================================================================== */
+
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+  details {
+    display: block;
+  }
+
+  /*
+   * Add the correct display in all browsers.
+   */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+     ========================================================================== */
+
+  /**
+   * Add the correct display in IE 10+.
+   */
+
+  template {
+    display: none;
+  }
+
+  /**
+   * Add the correct display in IE 10.
+   */
+
+  [hidden] {
+    display: none;
+  }
+
+

resources/css/main.css

@@ -1,4 +1,6 @@
-@import url('https://fonts.cdnfonts.com/css/druk-text-wide-trial');
+@import url('https://db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold');
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+
 
 :root{
     --primary-clr: #67EB47;
@@ -6,12 +8,21 @@
     --light-clr: #FFF;
 }
 
+*{
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    font-family: 'Poppins'
+}
+
 .text-db{
     color: var(--primary-clr);
 }
 
 .text-highlight{
-    font-family: 'Druk Text Wide Trial', sans-serif !important;
+    font-family: "Druk Wide Bold" !important;
 }
 
 .db-btn {
@@ -39,19 +50,32 @@
     color: var(--primary-clr);
 }
 
-p{
+.db-p{
+    font-size: clamp(0.9rem,1vw,1.2rem);
+    line-height: 2rem;
+}
+
+.db-h5{
     font-size: clamp(18px,1.2vw,23px);
     line-height: 3rem;
 }
 
 .db-h3{
     font-size: clamp(2rem,2.3vw,3.5rem);
-    font-size: 500;
+    font-weight: 500;
+}
+
+.db-h6{
+    font-size: clamp(1.25rem,1vw,1.75rem);
+    font-weight: 500;
 }
 
 .about-paragraph{
     width: 100%;
+}
 
+.feature-paragraph{
+    width: 100%;
 }
 
 .section3-img{
@@ -62,14 +86,406 @@ p{
     border: 1px solid gray;
 }
 
+.db-input{
+    background-color: black;
+    padding: 1.125rem 0;
+    border: none;
+    color: var(--light-clr);
+    border-bottom: 2px solid var(--primary-clr);
+    width: 100%;
+    font-size: 18px;
+
+}
+
+.db-input::placeholder {
+    color: var(--light-clr);
+    opacity: 1; /* Firefox */
+}
+
+.db-input:focus-visible{
+    outline: none;
+}
+
 @media (min-width: 768px) {
 
     .about-paragraph{
         width: 70%;
     }
 
+    .feature-paragraph{
+        width: 80%;
+    }
+
     .section3-img{
         background-position: center;
     }
 
 }
+
+/* UTILS */
+.py-6{
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+}
+
+.py-7{
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+
+.my-7{
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+}
+
+/* NORMALIZE CSS */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+     ========================================================================== */
+
+  /**
+   * Remove the margin in all browsers.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+   * Render the `main` element consistently in IE.
+   */
+
+  main {
+    display: block;
+  }
+
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Add the correct font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+     ========================================================================== */
+
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+  details {
+    display: block;
+  }
+
+  /*
+   * Add the correct display in all browsers.
+   */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+     ========================================================================== */
+
+  /**
+   * Add the correct display in IE 10+.
+   */
+
+  template {
+    display: none;
+  }
+
+  /**
+   * Add the correct display in IE 10.
+   */
+
+  [hidden] {
+    display: none;
+  }
+

resources/views/home.antlers.html

@@ -1,54 +1,3 @@
-<nav id="main-nav" class="navbar navbar-expand-lg px-4 px-md-5 py-4 fixed-top" style="background-color: black;">
-    <div class="container-fluid d-flex flex-wrap justify-between p-0">
-
-        <div class="d-none d-lg-block mx-auto mx-xxl-0">
-            <img src="assets/logo_1.png" class="img-fluid" style="width:70px;">
-                <span class="text-light text-highlight my-auto" style="font-size:23px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
-            </img>
-        </div>
-        <div class="mx-0 mx-lg-auto mx-xxl-0">
-            <div class="d-flex">
-                <button class="navbar-toggler" type="button" style="background-color: gray;" data-bs-toggle="collapse"
-                    data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
-                    aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="d-inline d-lg-none mx-auto">
-                    <img src="assets/logo_1.png" class="img-fluid" style="width:60px;">
-                        <span class="text-light text-highlight my-auto" style="font-size:20px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
-                    </img>
-                </div>
-            </div>
-
-            <div class="collapse navbar-collapse my-auto" id="navbarNavDropdown">
-                <ul class="navbar-nav">
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link" aria-current="page" href="#">Home</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link" href="#">Booking</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link" href="#">News</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link" href="#">Download</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link" href="#">Contact</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link active" href="#">Register</a>
-                    </li>
-                    <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                        <a class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
-                    </li>
-                </ul>
-            </div>
-
-        </div>
-    </div>
-</nav>
 <section>
     <div class="d-flex" style="min-height: 100vh;background-image: url(./assets/image/2.jpg);background-size: cover;">
         <div class="text-light px-5 text-lg-center m-auto">
@@ -62,14 +11,156 @@
 <section>
     <div class="text-md-center text-light px-4 px-md-5 " style="background-image: url(./assets/image/3.png);background-size: cover;background-color: black;padding-top: 10rem;padding-bottom: 5rem; background-position: top center;">
         <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Your Football Haven Awaits: Embrace the <br/> Game at Our State-of-the-Art Field!</p>
-        <p class="mx-auto my-5 p-0 about-paragraph" style="line-height: clamp(1.7rem,2.5vw,3rem);">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est. Labore adipisci itaque inventore voluptatem pariatur? Quos perferendis sit quo autem praesentium nobis pariatur in! Atque, explicabo magnam! Repellat aliquam dolorem suscipit nam facere assumenda perferendis, provident, ex sapiente ea dolorum! Ipsum voluptate autem dignissimos quo sapiente sequi eius quae! autem dignissimos quo sapiente sequi eius quae autem dignissimos quo sapiente sequi eius quae autem dignissimos quo sapiente sequi eius quae</p>
+        <p class="mx-auto my-5 p-0 about-paragraph db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est. Labore adipisci itaque inventore voluptatem pariatur? Quos perferendis sit quo autem praesentium nobis pariatur in! Atque, explicabo magnam! Repellat aliquam dolorem suscipit nam facere assumenda perferendis, provident, ex sapiente ea dolorum! Ipsum voluptate autem dignissimos quo sapiente sequi eius quae! autem dignissimos quo sapiente sequi eius quae autem dignissimos quo sapiente sequi eius quae autem dignissimos quo sapiente sequi eius quae</p>
         <button class="nav-link db-btn mx-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">Read More</button>
     </div>
 </section>
 <section>
     <div style="background-image: url('./assets/image/4.jpg');" class="section3-img"></div>
 </section>
-<section class="bg-green-900">
-    <div style="min-height: 100vh;"></div>
+<section>
+    <div class="text-center text-light px-4 px-md-5 py-6" style="background-color: rgb(0, 0, 0);">
+        <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Features</p>
+        <p class="mx-auto p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Stay tuned for more latest news and articles brought exclusively by our team</p>
+    </div>
+    <div class="container-fluid p-0">
+        <div class="row text g-0">
+            <div class="col-12 py-5 text-light row g-0" style="background-image: url('./assets/image/Group_6742.jpg');background-size: cover; background-repeat: no-repeat;">
+                <div class="col-2 text-end">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+                </div>
+                <div class="col-8">
+                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
+                    <p class="db-p" style="margin-bottom: 3rem;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto molestiae adipisci distinctio impedit quasi quibusdam accusamus, atque dolorem eum consequuntur assumenda voluptates vitae repellat tempora iste quam, repellendus deserunt quo culpa. Voluptate provident excepturi perferendis omnis maxime, earum eos tempora, a corrupti aspernatur est architecto. Deleniti iste quia voluptatem. Eum culpa mollitia saepe nesciunt laborum id neque nulla adipisci ab.</p>
+                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
+                </div>
+                <div class="col-2">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
+                </div>
+            </div>
+        </div>
+        <div class="row text g-0">
+            <div class="col-md-4 py-5 text-light row g-0" style="background-image: url('./assets/image/Group_6742.jpg');background-size: cover; background-repeat: no-repeat;">
+                <div class="col-2 text-end">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+                </div>
+                <div class="col-8">
+                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
+                    <p class="db-p" style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
+                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
+                </div>
+                <div class="col-2">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
+                </div>
+            </div>
+            <div class="col-md-4 py-5 text-light row g-0" style="background-image: url('./assets/image/Group_6742.jpg');background-size: cover; background-repeat: no-repeat;">
+                <div class="col-2 text-end">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+                </div>
+                <div class="col-8">
+                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
+                    <p class="db-p" style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
+                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
+                </div>
+                <div class="col-2">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
+                </div>
+            </div>
+            <div class="col-md-4 py-5 text-light row g-0" style="background-image: url('./assets/image/Group_6742.jpg');background-size: cover; background-repeat: no-repeat;">
+                <div class="col-2 text-end">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+                </div>
+                <div class="col-8">
+                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
+                    <p class="db-p" style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
+                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
+                </div>
+                <div class="col-2">
+                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light py-5" style="background-color: rgb(0, 0, 0);">
+        <div class="text-center ">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Recent News</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Stay tuned for more latest news and articles brought exclusively by our team</p>
+        </div>
+        <div class="row p-0 px-lg-4 px-lg-5 mb-lg-5 g-0">
+            <div class="col-xl-4 position-relative p-0 p-lg-3">
+                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
+                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
+                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
+                        <div class="mt-auto" style="width: 100%;height: fit-content;">
+                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
+                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
+                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-4 position-relative p-0 p-lg-3">
+                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
+                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
+                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
+                        <div class="mt-auto" style="width: 100%;height: fit-content;">
+                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
+                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
+                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-4 position-relative p-0 p-lg-3">
+                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
+                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
+                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
+                        <div class="mt-auto" style="width: 100%;height: fit-content;">
+                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
+                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
+                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="nav-link db-btn mx-auto d-none d-lg-block" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">See More</button>
+    </div>
 </section>
+<section>
+    <div class="text-light pt-5" style="background-color: rgb(0, 0, 0);">
+        <div class="text-center ">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Contact Us</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">If you have any questios or feedback, drop them <br/> here and we'll get back to you!</p>
+        </div>
+        <div class="row g-0">
+            <div class="col-lg-5 px-5 pb-5 pb-lg-0">
+                <input class="db-input" type="text" style="margin-top: 1.4375rem;" placeholder="Name" />
+                <input class="db-input" type="text" style="margin-top: 1.4375rem;" placeholder="Email" />
+                <input class="db-input" type="text" style="margin-top: 1.4375rem;margin-bottom: 3.21875rem;" placeholder="Message" />
+                <button class="nav-link db-btn" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Submit</button>
+            </div>
+            <div class="col-lg-7 px-5 py-5" style="background-image: url(./assets/image/8.jpg);background-size: cover; background-position: center center;">
+
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">017-978 7358 <br/> hello@thebola.club</p>
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Football Park LGM SUngai Buloh, Jalan Sungai Buloh <br/> PJU4, 47000 Petaling Jaya, Selangor</p>
+
 
+            </div>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light p-5" style="background-color: rgb(0, 0, 0);background-image: url(./assets/image/dbparticle3.png);background-size: cover;background-repeat: no-repeat;background-position: center bottom;">
+        <div class="text-center ">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Coming Soon!</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Soon all of the amazing features that we provide here will be available in<br/> an exclusive app for both android and iOS.</p>
+        </div>
+        <div class="container-fluid d-flex justify-content-center">
+            <img class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
+            <img class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
+        </div>
+    </div>
+</section>

resources/views/layout.antlers.html

@@ -7,14 +7,136 @@
         <title>{{ title ?? site:name }}</title>
         <link rel="stylesheet" href="{{ mix src='css/bootstrap.css' }}">
         <link rel="stylesheet" href="{{ mix src='css/main.css' }}">
+        <script src="https://kit.fontawesome.com/bacccc1477.js" crossorigin="anonymous"></script>
         <script src="{{ mix src='js/bootstrap.bundle.js' }}"></script>
         <script src="{{ mix src='js/main.js' }}" defer></script>
 
     </head>
     <body class="bg-gray-100 font-sans leading-normal text-gray-800">
+        <header>
+            <nav id="main-nav" class="navbar navbar-expand-lg px-4 px-md-5 py-4 fixed-top" style="background-color: black;">
+                <div class="container-fluid d-flex flex-wrap justify-between p-0">
+
+                    <div class="d-none d-lg-block mx-auto mx-xxl-0">
+                        <img src="assets/logo_1.png" class="img-fluid" style="width:70px;">
+                            <span class="text-light text-highlight my-auto" style="font-size:23px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
+                        </img>
+                    </div>
+                    <div class="mx-0 mx-lg-auto mx-xxl-0">
+                        <div class="d-flex">
+                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                                data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
+                                aria-label="Toggle navigation">
+                                <i class="text-light fa-solid fa-bars fa-xl"></i>
+                            </button>
+                            <div class="d-inline d-lg-none mx-auto">
+                                <img src="assets/logo_1.png" class="img-fluid" style="width:60px;">
+                                    <span class="text-light text-highlight my-auto" style="font-size:20px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
+                                </img>
+                            </div>
+                        </div>
+
+                        <div class="collapse navbar-collapse my-auto" id="navbarNavDropdown">
+                            <ul class="navbar-nav">
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link" aria-current="page" href="#">Home</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link" href="#">Booking</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link" href="#">News</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link" href="#">Download</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link" href="#">Contact</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link active" href="#">Register</a>
+                                </li>
+                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
+                                    <a class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                </div>
+            </nav>
+        </header>
         <div class="mx-auto lg:min-h-screen flex flex-col items-center justify-center">
             {{ template_content }}
         </div>
+        <footer>
+            <div class="row g-0 text-light py-5" style="background-color: black;border: none;">
+                <div class="col-lg-3 text-center">
+                    <img src="./assets/image/dblogo.png" style="width: 237px;" />
+                </div>
+                <div class="col-lg-3 px-5 px-lg-0">
+                    <p class="text-db" style="font-size: 1.563rem;">Address</p>
+                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
+                        RRI Football Park LGM Sungai Buloh, <br/>
+                        Jalan Sungai Buloh, PJU4 47000 <br/>
+                        Petaling Jaya, Selangor.<br/>
+                    </p>
+                </div>
+                <div class="col-lg-4  px-5 px-lg-0 row g-0">
+                    <div class="col-lg-6">
+                        <p class="text-db" style="font-size: 1.563rem;">Phones</p>
+                        <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
+                            Customer Service: <br/>
+                            +0122274616 <br/>
+                        </p>
+                    </div>
+                    <div class="col-lg-6">
+                        <p class="text-db" style="font-size: 1.563rem;">Email</p>
+                        <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
+                            Office : help@thebola.club <br/>
+                            Site : thebola.club <br/>
+                        </p>
+                    </div>
 
+                </div>
+                <div class="col-lg-2">
+                    <!-- blank -->
+                </div>
+            </div>
+            <div class="row g-0 text-light py-5 py-lg-2" style="background-color: black;border: none;">
+                <div class="col-lg-3 text-center">
+                     <!-- blank -->
+                </div>
+                <div class="col-lg-3 px-5 px-lg-0">
+                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
+                        All Rights Reserved by thebola.club
+                    </p>
+                </div>
+                <div class="col-lg-4 row g-0  px-5 px-lg-0">
+                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
+                        <a class="text-light"  href="#" style="text-decoration: none;"> Terms of Use </a> |
+                        <a class="text-light"  href="#" style="text-decoration: none;"> Legal Disclaimer </a> |
+                        <a class="text-light"  href="#" style="text-decoration: none;"> Privacy Policy </a>
+                    </p>
+                </div>
+                <div class="col-lg-2 px-5 px-lg-0 text-lg-center my-5 my-lg-0">
+                    <a class="mx-1" href="#" style="text-decoration: none;">
+                        <i class="text-db fa-brands fa-lg fa-facebook-f"></i>
+                    </a>
+                    <a class="mx-1" href="#" style="text-decoration: none;">
+                        <i class="text-db fa-brands fa-lg fa-google"></i>
+                    </a>
+                    <a class="mx-1" href="#" style="text-decoration: none;">
+                        <i class="text-db fa-brands fa-lg fa-twitter"></i>
+                    </a>
+                    <a class="mx-1" href="#" style="text-decoration: none;">
+                        <i class="text-db fa-brands fa-lg fa-youtube"></i>
+                    </a>
+                    <a class="mx-1" href="#" style="text-decoration: none;">
+                        <i class="text-db fa-brands fa-lg fa-instagram"></i>
+                    </a>
+                </div>
+            </div>
+        </footer>
     </body>
 </html>