Skip to content

Commit 147ca58

Browse files
aayush105aayush105
authored
Merge pull request #966 from pranavpanmand/feat/linked-login-page
Add Linked Login Page Website using HTML & CSS (Fixes #359)
2 parents 6c34624 + c26d7c3 commit 147ca58

File tree

4 files changed

+132
-0
lines changed

4 files changed

+132
-0
lines changed

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,9 @@ <h1>You Dont Need JavaScript</h1>
491491
<a href="./Online_Book_Shop/index.html">Online Book Shop</a>
492492
<a href="./Zomato/index.html">Zomato Clone</a>
493493
<a href="./Weather/index.html">Weather App</a>
494+
<a href="./linked-login/index.html">Linked Login</a>
495+
496+
494497
</td>
495498
</tr>
496499

‎linked-login/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Simple Website using HTML & CSS
2+
3+
### 📝 Description
4+
This pull request adds a **simple responsive website** built using only **HTML and CSS**.
5+
It showcases how to design and structure a webpage without using JavaScript.
6+
7+
### ✨ Features
8+
- Responsive and clean design
9+
- Built purely with HTML and CSS
10+
- Properly linked in the main `index.html` file
11+
12+
### 🔗 Issue Reference
13+
Fixes #359
14+
15+
### 📂 Files Updated
16+
- Added a new website folder inside the project
17+
- Updated main `index.html` to include a link to the new webpage
18+
19+
### 📸 Preview
20+
(Attach a screenshot of your website here)
21+
![Website Preview](ui.png)

‎linked-login/index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Linkedin Login</title>
7+
<style>
8+
body {
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
font-family: sans-serif;
13+
line-height: 1.5;
14+
min-height: 100vh;
15+
background:rgb(42, 140, 238);
16+
flex-direction: column;
17+
margin: 0;
18+
}
19+
20+
.main {
21+
border-radius: 8px;
22+
background-color: #fff;
23+
padding: 10px 20px;
24+
width: 500px;
25+
text-align: center;
26+
}
27+
28+
h1 {
29+
color: hsl(0, 0%, 100%);
30+
}
31+
32+
label {
33+
display: block;
34+
width: 100%;
35+
margin-top: 10px;
36+
margin-bottom: 5px;
37+
text-align: left;
38+
color: #555;
39+
font-weight: bold;
40+
}
41+
42+
43+
input {
44+
display: block;
45+
width: 100%;
46+
margin-bottom: 15px;
47+
padding: 10px;
48+
box-sizing: border-box;
49+
border: 1px solid #ddd;
50+
border-radius: 5px;
51+
}
52+
53+
button {
54+
border-radius: 4px;
55+
padding: 15px;
56+
margin-top: 15px;
57+
margin-bottom: 15px;
58+
border: none;
59+
color: white;
60+
cursor: pointer;
61+
background-color: #337bce;
62+
width: 100%;
63+
font-size: 16px;
64+
}
65+
66+
.wrap {
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
</style>
72+
</head>
73+
74+
<body>
75+
<h1 style="color: aliceblue; cursor: pointer;">Linked <span><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
76+
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
77+
</svg></span></h1>
78+
<h1 align="center">Make the most of your professional life</h1>
79+
<div class="main">
80+
<form action="">
81+
<label for="first">First name</label>
82+
<input type="text" id="first" name="first" >
83+
<label for="password">Last name</label>
84+
<input type="password id="Last name" name="Last name" >
85+
<label for="password">Email</label>
86+
<input type="password id="Email" name="Email" >
87+
<label for="password">Password(6 or more characters)</label>
88+
<input type="password id="password" name="password">
89+
<p>You agree to the Linkedin <B>User Agreement, Privacy Policy,</B> and <b>Cookie Policy</b></p>
90+
91+
92+
<div class="wrap">
93+
<button type="submit"
94+
onclick="solve()">
95+
Agree & Join
96+
</button>
97+
</div>
98+
</form>
99+
<p>Already on Linkedin?
100+
<a href="abc"
101+
style="text-decoration: none;">
102+
Sign in
103+
</a>
104+
</p>
105+
</div>
106+
<P style="color: white;">Linkedin Corporation @ 2019</P>
107+
</body>
108+
</html>

‎linked-login/ui.png‎

51.6 KB
Loading

0 commit comments

Comments
 (0)