Surface plating solution (S.P.S shop) is the content that discusses material final processing services in various ways, especially special treatment of materials whose main ingredient is iron. The aim that the resulting material will be strong and corrosion resistant.
Heading contains darkmode switcher, the shop logo, menu navigation in desktop (width : 1024 px and up), tablet (width : 780 px - 1024 px) and mobile (width : 390 px - 780 px) modes, and shop front display.
The screen shot uses mode @media screen and (min-width: 1024px) {}
Main Display is divided into 6 contents, including 6 sections
1. section class="service", 2. section class="produk", 3. section class="banner1 container", 4. section class="statistik", 5. section class="testi", 6. section class="banner2"
The screen shot uses mode @media screen and (min-width: 1024px) {}
The footer contains information about company information and there are also input messages in the form of criticism or suggestions and others.
The screen shot uses mode @media screen and (min-width: 1024px) {}
Helps improve the performance of the website created later.
Helps add unique external logos with unpkg.com. Adding this coding in the head section of the HTML to access the logo library,
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link Imoticon for Symbols -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
Helps add unique external JS with unpkg.com. Adding this coding in the body section of the HTML to access the logo library,
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>Dekstop mode use Dimension value from 1024 px and up
@media screen and (min-width: 1024px) {}
Dekstop result of generate a lighthouse report :
Tablet mode use dimension size resposivity in max-width 1024px.
@media screen and (max-width: 1024px) {}
@media screen and (min-width: 780px) {}
Mobile result of generate a lighthouse report :
Mobile mode use Dimension from Samsung Galaxy with size resposivity in max-width: 780px.
@media screen and (max-width: 780px) {}
@media screen and (min-width: 390px) {}
Mobile result of generate a lighthouse report :
Netlify Sign up process & connect Netlify to your Github project.
-
Register Netlify with Github
-
Open Netlify.com
-
Register first, If you don't have an account, you can choose one of several types of entry access.
-
This time I will register using the email that is registered as a GitHub account, so I chose log in.
-
You can also choose to register directly using the GitHub option.
- Netlify can now be accessed.
-
Auto Deployment on Github with Netlify.
-
Login to Netlify has been successful,
-
To deploy a new project select site, than add new site, and select import an existing project.
-
Select Deploy with Github
-
Go to the repository selection you want to connect.
-
Select account Github name to accses
-
Select main folder repository
-
fill in some of the required ones, then select Deploy folder repository and wait for the deploy process
-
Accessing the web address deployed using Netlify has been successful.
(https://resonant-cuchufli-f8924d.netlify.app/)
How to Connect Your Custom Domain and Domain Name System (Used Subdomain to Connect DNS).
-
Domain Name Sytem Settings
We chose Cloudflare as the intermediary connecting Netlify to the custom domain service that has been purchased, and here are the steps :
-
Open [Cloudflare.com](https://cloudflare.com/). Register first, If you don't have an account, you can register first. This time I already had a registered account, so I choose sign in with google account. -
Cloudflare services can now be accessed. The initial display can now be seen, then select "add a website or application"
-
The initial display can now be seen, then Register your custom domain name and select "continue"
-
Choose a service that suits your website needs and select continue.
-
The initial display can now be seen, then Register your custom domain name and select "continue". -
The initial display can now be seen, then Register your custom domain name and select "continue"
-
Open your custom domain service, select the domain menu, then select ringkasan domain. Look for the nameservers menu, then select ubah
-
The initial display can now be seen, then choose "ganti nama server" in the "pilih nameaserver" menu.
-
Copy Cloudflare nameserver. -
Paste Cloudflare nameserver to nameserver your custom domain (Niagahoster) and select "simpan".
-
Open and sign in your account in netlify. Select "site overview" and copy url netlify subdomain ( example : resonant-cuchufli-f8924d.netlify.app ). -
Open and sign in your account in cloudflare. Select "DNS -> Records".
-
Select "Add Records" and and complete some of the contents, among others: Type = CNAME ; Name (Required) = milestone1 ; Target (Required) = paste url netlify subdomain (example : resonant-cuchufli-f8924d.netlify.app) and select "save". Wait for domain name system access until it is approved.
-
Enter the custom domain name (example : milestone1.imanmaris.tech) that has been purchased to register on Netlify. Select "*verify*". -
Check production domain status and SSL/TLS certificate. Domain production awaits verification.
-
Domain production has been "*verified*" and is ready to be published.
-
Result custom domain with DNS
| Tool | Tool Website | My Link Website with Custom Domain |
|---|---|---|
  |
Hostinger Niagahoster | www.milestone1.imanmaris.tech & milestone1.imanmaris.tech |
copyright © 2023