-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
146 lines (127 loc) · 4.26 KB
/
intro.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill Share</title>
<style>
/* Global Styling */
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif; /* Apply Poppins font */
background-color: #212121; /* Dark Grey Background */
color: #fff; /* White text */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Header Styling */
.header {
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 4em;
font-weight: 600;
letter-spacing: 2px;
color: #00c1c7c5; /* Yellow */
margin-bottom: 40px;
}
/* Styled Paragraph for Description */
p {
font-size: 1.2em; /* Slightly larger text */
text-align: center;
color: #81C784; /* Lighter Green */
line-height: 1.6; /* Better line spacing */
max-width: 600px; /* Restrict paragraph width for better readability */
margin-bottom: 30px; /* Space below paragraph */
padding: 0 20px; /* Add padding for responsiveness */
}
/* Button Container */
.button-container {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
/* Button Styles */
.btn {
padding: 15px 40px;
font-size: 1.3em;
font-weight: 500;
text-decoration: none;
text-align: center;
border-radius: 5px;
color: #fff;
background-color: #388E3C; /* Dark Green */
transition: all 0.3s ease;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
}
/* Hover Effect for Buttons */
.btn:hover {
font-size: 1.3rem;
color: black;
background-color: #66BB6A; /* Lighter Green */
cursor: pointer;
transform: translateY(-5px);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5);
}
.btn:active {
transform: translateY(1px);
box-shadow: none;
}
/* Register Button Specific Styling */
.register-btn {
background-color: #FFEB3B; /* Yellow background for Register */
}
.register-btn:hover {
background-color: #FDD835;
}
/* Footer Styling */
.footer {
text-align: center;
color: #81C784; /* Lighter Green */
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #388E3C;
}
.footer p {
margin: 0;
}
.footer a {
text-decoration: none;
color: #FFEB3B; /* Yellow */
font-weight: 600;
}
#cont{
color: #FFEB3B; /* Yellow */
}
</style>
</head>
<body>
<!-- Full-Width Header with App Name -->
<div class="header">
SkillSwap
</div>
<!-- Styled Description -->
<p id="cont">"Skill Swap connects learners and experts to share knowledge and enhance skills collaboratively."</p>
<!-- Button Container with Login and Register Buttons -->
<div class="button-container">
<a href="/register.html" class="btn register-btn">Register</a>
<a href="/login.html" class="btn">Login</a>
</div>
<!-- Footer with App Info and Links -->
<div class="footer">
<p>Join the community and unlock your learning potential with Skill Share!</p>
<p>© 2024 Skill Share. All Rights Reserved.</p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</body>
</html>