Modify src/styles.css:
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://MyCompany.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--heading-font: "Raleway", sans-serif;
--nav-font: "Poppins", sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
--default-color: #666666; /* Default color used for the majority of the text content across the entire website */
--heading-color: #333333; /* Color for headings, subheadings and title throughout the website */
--accent-color: #FF4081; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
--swiper-pagination-color: var(--accent-color) /* Change bullet color */
}
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
--nav-color: #ffffff; /* The default color of the main navmenu links */
--nav-hover-color: #EC407A; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #666666; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: #F06292; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
body {
color: var(--default-color);
background-color: var(--background-color);
font-family: var(--default-font);
}
<app-hero></app-hero>
<app-featured-services></app-featured-services>
<app-about></app-about>
<app-happy-clients></app-happy-clients>
<app-why-choose-us></app-why-choose-us>
<app-services></app-services>
<app-pricing></app-pricing>
<app-faq></app-faq>
<app-portfolio></app-portfolio>
<app-testimonials></app-testimonials>
<app-team></app-team>
<app-clients></app-clients>
<app-blogs></app-blogs>
<app-contact></app-contact>
<header id="header" class="header fixed-top">
<div class="container-fluid">
<a href="/" class="logo">
<h1 class="sitename">MyCompany</h1>
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</div>
</header><footer id="footer" class="footer dark-background"><footer>: Defines the footer section of the webpage.id="footer": Assigns an ID for styling and scripting purposes.class="footer dark-background": Applies predefined styles.<div class="container footer-top">
<div class="row gy-4"><div class="col-lg-4 col-md-6 footer-about">
<a href="#" class="logo d-flex align-items-center">
<span class="sitename">MyCompany</span>
</a>
<div class="footer-contact pt-3">
<p><a href="https://www.google.com/maps?q=A108+Adam+Street" target="_blank">A108 Adam Street</a></p>
<p>New York, NY 535022</p>
<p><strong>Phone:</strong> <a href="tel:+155895548855">+1 5589 55488 55</a></p>
</div><div class="social-links d-flex mt-4">
<a href="#"><i class="bi bi-twitter-x"></i></a>
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
</div><div class="col-lg-2 col-md-3 footer-links">
<h4>Useful Links</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Terms of service</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div><div class="col-lg-2 col-md-3 footer-links">
<h4>Our Services</h4>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
</ul>
</div><div class="col-lg-4 col-md-12 footer-newsletter">
<h4>Our Newsletter</h4>
<p>Subscribe to our newsletter!</p>
<form action="forms/newsletter.php" method="post" class="php-email-form">
<div class="newsletter-form">
<input type="email" name="email" placeholder="Your Email">
<input type="submit" value="Subscribe">
</div>
</form>
</div><div class="container copyright text-center mt-4">
<p>© MyCompany All Rights Reserved</p>
<div class="credits">Designed by MyCompany</div>
</div><a href="#" id="scroll-top" class="scroll-top">
<i class="bi bi-arrow-up-short"></i>
</a><div id="preloader"></div>Find the file at src/assets/manifest.webmanifest and replace its content:
{
"name": "MyCompany",
"short_name": "MyCompany",
"theme_color": "#FF4081",
"background_color": "#ffffff",
"description": "A modern Progressive Web App (PWA).",
"display": "standalone",
"orientation": "portrait",
"scope": "./",
"start_url": "/index.html",
"icons": [
{ "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Place new icons in src/assets/icons/. Required sizes:
Modify src/ngsw-config.json to include icons:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/assets/icons/**"
]
}
}
]
}
Edit angular.json and set serviceWorker to true:
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
}
}
}
}
Open Developer Tools (F12) → Application → Clear Storage → Click "Clear site data".
Go to Application → Manifest to verify icons and configurations.
Run the following command to generate the production build:
ng build --configuration=production