PersonalProfile/contactdetails.html at main · IamLuckyT/PersonalProfile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang = "en"> <!-- “This document is written in English, and everything inside the <html> tag should be interpreted as HTML.” -->
<html>
<head> <!--Welcome to MyTube-->
    <meta charset ="UTF-8"> <!-- <meta>: This is an HTML tag used to define metadata—information about the webpage that doesn’t appear on the page itself but helps browsers, search engines, and other systems understand how to handle the content.
                                charset="UTF-8": This attribute specifies the character encoding for the document.
                                "UTF-8" is one of the most widely used character encodings because it supports virtually all characters from different languages, special symbols, and emojis. It ensures that text is displayed correctly, preventing issues like garbled characters or unreadable symbols.
                            -->
    <meta name = "viewport" content ="width=device-width,initial-scale=1.0">
    <title> Letlhogonolo Mothoagae </title>
    <link rel="Stylesheet" href="styles.css">
</head>
<body>
    <header class="top-bar">
        <button id="menu-toggle"> &#9776</button> <!-- This is a button element with an ID of "menu-toggle". The content inside the button is the HTML entity for a hamburger icon (three horizontal lines). -->
        <button id="close-sidebar">&times;</button> <!-- This is a button element with an ID of "close-sidebar". The content inside the button is the HTML entity for a multiplication sign (×), which is often used to represent a close or cancel action. -->
        <div class="logo">My Profile </div>

    </header>
    <div class="sidebar" id="sidebar">
        <nav class="nav-links">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="education.html">Education</a>
            <hr> <!--It is used to create a horizontal line that visually separates sections of content on a webpage.-->
            <a href="projects.html">Projects</a>
            <a href="certifications.html">Certifications</a>
            <a href="contactdetails.html">Contact Details</a>
            <a href="#">Hobbies and Other Activities</a>
            <hr>
            <!--<div class="section-title"> Subscriptions</div>-->
        </nav>

        <!--Moves the theme toggle button to the bottom-->
    <div class="theme-toggle-wrapper">
        <button id="theme-toggle" title="Toggle Dark Mode">🌓</button> <!-- This is used to setup the theme for dark and light mode -->
    </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="main-content">
        <h1>Hey there 👋, Welcome to My Profile</h1>
        <p>


        </p>
    </div>
        <footer>
        <div class="footer-content">
            <p>
                © 2025 Letlhogonolo Mothoagae. All rights reserved.
            </p>
            <div class="social-links">
                <i class="fab fa-github">
                <a href="https://github.com/IamLuckyT">
                </a></i>
                <a href="https://www.linkedin.com/in/letlhogonolo-mothoagae-437b34171/">
                    <i class="fab fa-linkedin"></i>
                </a>
                <a href="https://www.facebook.com/luckyt.mothoagae/">
                    <i class="fab fa-facebook"></i>
                </a>
            </div>
        </div>
    </footer>
<script src="script.js"></script>
</body>
</html>