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