test

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

CNAME

@@ -0,0 +1 @@
+www.ary-industries.com

Global/colormode.js

@@ -0,0 +1,54 @@
+const basicColorModeBtn = document.getElementById('color-mode-btn');
+const dropdownColorModeBtn = document.getElementById('dropdown-color-mode-btn');
+const body = document.body;
+let lightText = 'Dark Mode';
+let darkText = 'Light Mode';
+let currentMode = localStorage.getItem('colorMode');
+let originalText;
+
+// Set the initial mode and text content of the color mode button
+if (currentMode === 'light') {
+    body.classList.add('light-mode');
+    originalText = darkText;
+    basicColorModeBtn.textContent = darkText;
+    dropdownColorModeBtn.textContent = darkText;
+} else {
+    originalText = lightText;
+    basicColorModeBtn.textContent = lightText;
+    dropdownColorModeBtn.textContent = lightText;
+}
+
+// Add event listener to color mode buttons
+basicColorModeBtn.addEventListener('click', toggleColorMode);
+dropdownColorModeBtn.addEventListener('click', toggleColorMode);
+
+// Function to toggle the color mode
+function toggleColorMode() {
+    // Toggle the light-mode class on the body element
+    body.classList.toggle('light-mode');
+
+    // Update the text content of the color mode buttons
+    if (body.classList.contains('light-mode')) {
+        basicColorModeBtn.textContent = darkText;
+        dropdownColorModeBtn.textContent = darkText;
+    } else {
+        basicColorModeBtn.textContent = lightText;
+        dropdownColorModeBtn.textContent = lightText;
+    }
+
+    // Save the color mode preference in localStorage
+    if (body.classList.contains('light-mode')) {
+        localStorage.setItem('colorMode', 'light');
+    } else {
+        localStorage.setItem('colorMode', 'dark');
+    }
+}
+
+
+//                    Click
+
+const bars = document.querySelector('#click');
+
+bars.addEventListener('click', () => {
+    body.classList.toggle('show');
+});

Global/footer.css

@@ -0,0 +1,85 @@
+footer {
+    display: flex;
+    padding: 20px 40px 50px 40px;
+    background-color: rgb(0, 0, 0);
+    height: fit-content;
+    width: 100%;
+    flex-direction: column;
+    color: white;
+    gap: 10px;
+    transition: 0.3s;
+}
+.allfoot {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+
+.mainfoot {
+    width: fit-content;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+}
+.secfoot {
+    width: 40%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    right: 0;
+}
+.copyright {
+    text-align: center;
+    font-family: 'Poppins', sans-serif;
+    font-size: 0.75em;
+}
+
+
+
+footer a {
+color: white;
+    text-decoration: none;
+    transition: 0.3s;
+
+}
+footer a:hover {
+    scale: 1.1;
+    transition: 0.3s;
+
+}
+
+
+/*              Text            */
+footer p {
+    padding-top: 0.8rem;
+    font-family: 'Poppins';
+}
+
+
+
+
+
+/*          Media               */
+
+@media (max-width: 950px) {
+    footer {
+        flex-direction: column;
+    }
+
+    .allfoot {
+        flex-direction: column;
+        align-items: center; /* Center horizontally */
+    }
+
+    .mainfoot {
+        flex-direction: column;
+        width: fit-content;
+
+    }
+
+
+    .secfoot {
+        width: 100%;
+    }
+}

Global/main.css

@@ -0,0 +1,156 @@
+/*              IMPORTS             */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+/*              Basics              */
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+}
+/*          Color Mode          */
+
+.light-mode {
+    background-color: rgb(255, 255, 255);
+    color: black;
+    transition: 0.3s;
+}
+
+/*          Body                */
+
+body {
+    font-size: 1rem;
+    font-family: 'Poppins';
+    font-weight: 500;
+    color: rgb(255, 255, 255);
+    background-color: rgb(20, 20, 20);
+    transition: 0.3s;
+}
+main {
+    display: flex;
+    padding-top: 125px;
+    padding-bottom: 125px;
+    background-color: inherit;
+    width: 85%;
+    margin: auto;
+    min-height: 100vh;
+    gap: 3rem;
+
+}
+
+
+/*          Text        */
+hr {
+    display: flex;
+    border: solid 3px rgb(0, 150, 200);
+    border-radius: 1rem;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.company-name{
+    justify-content: center; 
+    font-size: 3rem; 
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
+    font-weight: 200; 
+    letter-spacing: 0.2rem;
+    text-align: center;
+}
+h1{
+    display: flex;
+    justify-content: left;
+    font-family: inherit;
+    font-weight: inherit;
+}
+
+
+p {
+    font-size: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    font-family: 'Bitter';
+    font-weight: 500;
+    letter-spacing: 0.05rem;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+
+a:hover{
+    transition: 0.3s;
+}
+
+
+
+
+
+
+
+/*          Media           */
+
+@media (max-width: 950px) {
+    #navbar{
+        height: 60px;
+    }
+    main{
+        flex-direction: column;
+    }
+    #dropdown ul {
+        padding: 0;
+    }
+
+    #dropdown {
+        display: none;
+        flex-direction: column;
+
+    }
+
+    #bars {
+        display: flex;
+    }
+
+    #basic {
+        display: none;
+    }
+
+    #dropdown li {
+        font-size: 1.35em;
+    }
+
+    #dropdown-color-mode-btn {
+        font-size: 1.35em;
+    }
+}
+
+@media (max-width: 500px) {
+    #dropdown {
+        width: 100%;
+    }
+}
+
+@media (min-width: 950px) {
+    #dropdown, #x, #bars {
+        display: none !important;
+    }
+}
+
+@media (max-height: 500px) {
+    footer {
+        margin-top: 500px;
+    }
+}
+
+
+.show #dropdown, .show #x {
+    display: flex;
+
+}
+
+.show #bars {
+    display: none;
+}