-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathextension.html
153 lines (136 loc) · 4.62 KB
/
extension.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
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Extension</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background: url('images/background.png') no-repeat center center/cover;
color: #fff;
}
header {
background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
color: #fff;
padding: 1rem 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.logo a {
color: #fff;
text-decoration: none;
font-size: 1.5rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 1rem;
}
.nav-links li a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
transition: background 0.3s;
}
.nav-links li a:hover {
background-color: #575757;
border-radius: 5px;
}
section {
padding: 2rem 1rem;
max-width: 1200px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
border-radius: 10px;
}
#home {
text-align: center;
padding: 4rem 1rem;
}
#features, #contact {
margin-top: 1rem;
}
footer {
background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
color: #fff;
text-align: center;
padding: 1rem 0;
margin-top: 2rem;
}
.download-button {
display: inline-block;
padding: 1rem 2rem;
margin-top: 2rem;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.download-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="#">p2p Extension</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Welcome to My Extension</h1>
<p>Discover the amazing features of our extension.</p>
<a href="path/to/your/extension.zip" class="download-button" download>Download Extension</a>
</section>
<section id="about">
<h2>About Our Extension</h2>
<p>Our extension simplifies the process of establishing direct connections. Here's how it works:</p>
<ul>
<li>Open the extension popup menu.</li>
<li>Enter the code provided in the popup menu.</li>
<li>Once the code is entered, a direct connection is initiated seamlessly.</li>
</ul>
<p>This makes it incredibly easy to connect and communicate without any hassle. Whether you're sharing files, chatting, or video calling, our extension ensures a smooth and efficient experience.</p>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>Feature 1: Easy-to-use popup menu for quick access.</li>
<li>Feature 2: Secure code entry to establish direct connections.</li>
<li>Feature 3: Seamless integration with your existing workflow.</li>
<li>Feature 4: High-quality video and audio communication.</li>
<li>Feature 5: Fast and reliable file sharing capabilities.</li>
<li>Feature 6: User-friendly interface with intuitive controls.</li>
<li>Feature 7: Cross-platform compatibility for maximum reach.</li>
<li>Feature 8: Regular updates and improvements based on user feedback.</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us.</p>
</section>
<footer>
<p>© 2023 My Extension. All rights reserved.</p>
</footer>
</body>
</html>