forked from YadavAkhileshh/Alien-Invasion-Defense
-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile.html
147 lines (115 loc) · 5.31 KB
/
profile.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="testp.css"> <!-- Link to your CSS file -->
<script src="testp.js" defer></script>
<title>Profile Page</title>
</head>
<body>
<div class="profile-container">
<div class="content-section">
<h2>Your Profile</h2>
<a href="index.html">
<i class="fas fa-home"></i>
</a>
<div class="profile-card">
<div class="profile-header">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
<div class="profile-info">
<h3 class="profile-name">Skylar Reed</h3>
<p class="profile-email">Email: [email protected]</p>
<p class="profile-phone">Phone: +987 654 3210</p>
<p class="profile-bio">Joined: October 31, 2024</p>
<p class="profile-bio">About Me: Hello!🙋🏻♂️ my current Goals is Unlock all Achievements. 😎</p>
<p id="last-active">Last active: 31/10/2024, 11:12 PM</p>
<button class="edit-profile-btn edit_profiled">Edit Profile</button>
</div>
</div>
</a>
</div>
</div>
<div class="content-section">
<h2>Account Details</h2>
<div class="profile-details">
<div class="profile-detail-card" id="profileCard">
<h3>Friends List</h3>
<p id="addressText" contenteditable="false">16 friends online</p>
<a href="#"><button class="edit-profile-btn">View</button></a>
</div>
<div class="profile-detail-card">
<h3>Change Password</h3>
<p>*********63</p>
<button class="edit-profile-btn">Change</button></a>
</div>
<div class="profile-detail-card">
<h3>Privacy Settings</h3>
<p>Visibility Status: Public</p>
<a href="#">
<button class="edit-profile-btn">Edit</button></a>
</div>
<div class="profile-detail-card">
<h3>Recent Activity</h3>
<p>Updated profile information</p>
<a href="#">
<button class="edit-profile-btn">View</button></a>
</div>
</div>
</div>
<section class="content-section">
<h2>Notifications</h2>
<div class="card">
<p>Your profile has been updated successfully!</p>
<button class="edit-profile-btn">View Notification</button>
</div>
<div class="card">
<p>Joshef Roy has sent you a friend request. Accept or decline?</p>
<button class="edit-profile-btn">View Notification</button>
</div>
</section>
<footer class="bg-body-tertiary text-center">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Github -->
<a data-mdb-ripple-init class="btn btn-outline btn-floating m-1" href="#!"style="margin:15px" role="button"
><i class="fab fa-github"></i
></a>
</section>
<section class="mx-4 mb-4">
<p>
Welcome to Alien Invasion Defense, a fast-paced space shooting game! Defend your base from waves of alien invaders and become the ultimate space defender. 🌌 With simple controls, sleek graphics, and exciting gameplay, get ready for an epic battle. Use your weapons to destroy alien ships, survive multiple waves, and protect your base with 3 lives. 👾
</p>
</section>
</div>
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2024 Alien-Invasion-Defense. All rights reserved.
</div>
<!-- Copyright -->
</footer>
</body>
</html>