SpaceX/profile1.html at main · Mathew-code01/SpaceX · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Responsive Webpage</title>
    <style>
        :root {
            --light-bg: #f4f4f9;
            --light-text: #333;
            --dark-bg: #333;
            --dark-text: #f4f4f9;
            --primary-color: #4a90e2;
            --secondary-color: #e94e77;
        }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: var(--light-bg);
            color: var(--light-text);
            transition: background-color 0.3s, color 0.3s;
        }
        .dark-mode {
            background-color: var(--dark-bg);
            color: var(--dark-text);
        }
        header {
            background-color: var(--primary-color);
            padding: 1rem;
            text-align: center;
            color: white;
        }
        nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        nav a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }

        nav ul li a:hover {
          border-bottom: 2px solid #fff;
        }

        main {
            padding: 2rem;
            max-width: 800px;
            margin: 2rem auto;
            box-shadow: 0 2px 10px #4a90e2; /* Subtle shadow effect */
            border-radius: 8px; /* Rounded corners */
        }
        section {
            margin-bottom: 2rem;
        }
        footer {
            background-color: var(--primary-color);
            padding: 1rem;
            text-align: center;
            color: white;
        }
        .form-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        input, textarea {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
        }
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #4a90f9;
        }
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        .social-icons a {
            color: white;
        }
        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                gap: 0.5rem;
            }
            main {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>SpaceX</h1>
        <nav>
            <ul>
              <li><a href="/index.html">Home</a></li>
              <li><a href="/SignIn.html" >Logout</a></li>
              <li><a href="/SignUp.html">Register</a></li>
              <li>
                <a href="/profile1.html">Profile</a>
              </li>
            </ul>
        </nav>
    </header>
    <main id="mainProfile">
        <section id="about">
            <h2>About Us</h2>
            <p>We are dedicated to advancing communications in space exploration.</p>
        </section>
        <section id="services">
            <h2>Our Services</h2>
            <p>We offer a range of services to meet your needs, including Live Coverage, Space News, and Space Guide etc.</p>
        </section>
        <section id="contact">
            <h2>Contact Us</h2>
            <form class="form-container">
                <input type="text" placeholder="Name" required>
                <input type="email" placeholder="Email" required>
                <textarea placeholder="Your Message" rows="5" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Earth-Space Communication App</p>
        <div class="social-icons">
            <a href="#"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"> <path d="M22.46 6c-.77.35-1.6.58-2.46.68a4.29 4.29 0 001.88-2.36 8.58 8.58 0 01-2.73 1.04 4.29 4.29 0 00-7.3 3.91 12.16 12.16 0 01-8.84-4.48c-.33.57-.52 1.23-.52 1.93 0 1.34.68 2.52 1.71 3.21a4.28 4.28 0 01-1.94-.54v.05c0 1.85 1.32 3.4 3.07 3.76-.32.09-.66.14-1.01.14-.24 0-.47-.02-.7-.06.48 1.48 1.88 2.56 3.54 2.59a8.59 8.59 0 01-5.31 1.83c-.35 0-.69-.02-1.03-.06a12.12 12.12 0 006.57 1.93c7.88 0 12.2-6.54 12.2-12.2 0-.18 0-.37-.01-.55A8.76 8.76 0 0024 6.3a8.63 8.63 0 01-2.54.7 4.32 4.32 0 001.8-2.4z"></path> </svg></a>
            <a href="#"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"> <path d="M22.68 0H1.32C.593 0 0 .593 0 1.32v21.36C0 23.407.593 24 1.32 24h11.5v-9.293H9.297V11.25h3.513V8.825c0-3.375 1.964-5.25 4.898-5.25 1.5 0 2.784.111 3.153.162v3.637l-2.156.001c-1.688 0-2.007.802-2.007 1.976v2.586h4.016l-.524 3.457h-3.492V24h6.854c.727 0 1.32-.593 1.32-1.32V1.32C24 .593 23.407 0 22.68 0z"></path> </svg></a>
            <a href="#"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 0v24H0V0h24zm-6 20h-3.5v-5.5c0-1.3-.025-3-1.825-3-1.835 0-2.125 1.43-2.125 2.903V20h-3.5V9h3.5v1.5h.05c.49-.934 1.695-1.917 3.5-1.917 3.13 0 4.125 2.272 4.125 5.27V20zM5 8H3.5V20H5V8zm-1.25-6.5C2.41 1.5 1 2.91 1 4.5S2.4 7 4.25 7c1.84 0 3.25-1.5 3.25-2.5S6.09 1.5 4.25 1.5z"></path></svg></a>
            <a href="#"><svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"> <path d="M23.498 6.186a3.004 3.004 0 0 0-2.11-2.11C19.338 3.998 12 3.998 12 3.998s-7.338 0-9.388.078a3.004 3.004 0 0 0-2.11 2.11C0 8.237 0 12 0 12s0 3.763.502 5.814a3.004 3.004 0 0 0 2.11 2.11C4.662 20.002 12 20.002 12 20.002s7.338 0 9.388-.078a3.004 3.004 0 0 0 2.11-2.11C24 15.763 24 12 24 12s0-3.763-.502-5.814zm-13.998 8.578V9.236l6.716 3.264-6.716 3.264z"></path> </svg></a>
        </div>
    </footer>
</body>
</html>