Skip to content

Commit

Permalink
Updated UI with new design and color scheme (#361)
Browse files Browse the repository at this point in the history 
## Related Issue

[Cite any related issue(s) this pull request addresses. If none, simply
state "None”]
write issue no. here




## Description

[Please include a brief description of the changes or features added]

## Type of PR

- [x] Feature enhancement
- [x] Updated UI with new design and color scheme

![Screenshot
(23)](https://github.com/user-attachments/assets/cb2aea10-0ef0-4582-b3dc-e868cd9443bd)


check in issue by entering [X] in boxes

## Screenshots / Videos (if applicable)

[Attach any relevant screenshots or videos demonstrating the changes]

## Checklist
- [x] I have performed a self-review of my code.
- [x] I have read and followed the Contribution Guidelines.
- [x] I have tested the changes thoroughly before submitting this pull
request.
- [x] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [x] I have commented my code, particularly in hard-to-understand
areas.
- [x] I have followed the code style guidelines of this project.
- [x] I have checked for any existing open issues that my pull request
may address.
- [x] I have ensured that my changes do not break any existing
functionality.
- [x] Each contributor is allowed to create a maximum of 4 issues per
day. This helps us manage and address issues efficiently.
- [x] I have read the resources for guidance listed below.
- [x] I have followed security best practices in my code changes.

check in issue by entering [X] in boxes
## Additional Context

[Include any additional information or context that might be helpful for
reviewers.]




## Contribution Guidelines

Thank you for considering contributing to our project! To ensure smooth
collaboration and effective contribution management, please adhere to
the following guidelines:

### Issue Creation

1. **Limit on Issues:**
- Each contributor is allowed to create a maximum of **4 issues per
day**. This helps us manage and address issues efficiently.

### Contribution Levels

2. **Basic Contributions:**
- This project is primarily focused on documentation. Most of the setup
has been completed, so contributors will generally need to work on basic
code tasks, such as writing tests.
   - For these tasks, issues will be assigned the **Easy** label.

3. **Acknowledging Hard Work:**
- If a contributor puts in significant effort on a task, the issue will
be upgraded to **Medium**. This is our way of recognizing and
appreciating extra effort.

4. **Feature Additions and Component Work:**
- Contributors working on new features or components using JSX/TSX will
be assigned a level based on the complexity and quality of their work.
- The more complex and valuable the contribution, the higher the level
assigned.

### Level Definitions

- **Easy:**
- Tasks are straightforward, such as fixing minor bugs, writing tests,
or making simple documentation updates.
- **Medium:**
- Tasks require more effort, such as addressing complex bugs, improving
existing features, or making substantial documentation improvements.
- **Hard:**
- Tasks are highly complex and involve significant new feature
development, major refactoring, or extensive contributions to the
project’s core components.

We look forward to your contributions and appreciate your effort in
helping us improve the project!
  • Loading branch information
@dhairyagothi
dhairyagothi authored Jan 6, 2025
2 parents b0e1d21 + dd31372 commit ef82253
Showing 1 changed file with 181 additions and 49 deletions.
230 changes: 181 additions & 49 deletions public/password manager/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,225 @@
<style>@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,400&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-family: 'Poppins', sans-serif;
}

body {
background-color: rgb(108, 60, 60);
color: #333;
line-height: 1.6;
}

nav {
background-color: black;
color: white;
padding: 2px 3px;
background-color: #572b2b;
color: rgb(236, 231, 207);
padding: 15px 25px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
margin: 0 23px;
font-weight: 800;
font-size: 25px;
font-size: 30px;
letter-spacing: 1px;
cursor: pointer;
transition: color 0.3s;
}

.logo:hover {
color: #000000;
}

ul {
display: flex;
margin: 0 23px;
align-items: center;

list-style: none;
}

ul>li {
list-style: none;
margin: 0 13px;
ul > li {
margin: 0 20px;
cursor: pointer;
font-weight: 600;
position: relative;
transition: color 0.3s;
}

ul > li:hover {
color: #000000;
}

ul>li:hover {
color: white;
ul > li::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #000000;
bottom: -5px;
left: 0;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}

ul > li:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}

table,
td,
tr {
border: 2px solid black;
border-collapse: collapse;
padding: 3px 13px;
.container {
max-width: 90vw;
margin: 40px auto;
padding: 25px;
background-color:rgb(236, 231, 207);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1, h2 {
margin: 20px 0;
font-size: 28px;
color: #4e2626;
}


button {
background: none;
border: none;
cursor: pointer;
outline: none;
margin-left: 10px;
}
h2 {
font-size: 24px;
color: #632a2a;
}

.container {
max-width: 80vw;
margin: 23px auto;
p {
font-size: 16px;
color: #000000;
margin-bottom: 20px;
}

h1,h2,h3 {
margin: 23px 0;
#alert {
font-weight: bold;
color: green;
font-size: 16px;
display: none;
}

.btn{
padding: 8px 17px;
background: black;
color: white;
font-weight: 900;
border: 2px solid grey;
table {
width: 100%;
margin-top: 20px;
border: 1px solid #602a2a;
border-radius: 8px;
margin: 25px 0;
cursor: pointer;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.btnsm{
padding: 8px 17px;
background: black;

table th, table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #532424;
}

table th {
background-color: #bbba9c;
font-weight: bold;
}

table tr:hover {
background-color: #f1f1f1;
}

button {
padding: 8px 18px;
background-color: #5e2929;
color: white;
font-weight: 900;
border: 2px solid grey;
font-weight: 600;
border: 2px solid #000000;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
}

button:hover {
background-color: #258907;
}

input[type="text"], input[type="password"] {
padding: 10px;
margin: 10px 0 20px 0;
width: 100%;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s;
}

input[type="text"]:focus, input[type="password"]:focus {
border-color: #ff6347;
outline: none;
}

.btnsm {
padding: 6px 12px;
background-color: #333;
color: white;
font-weight: 600;
border: 2px solid #555;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
img{

.btnsm:hover {
background-color: #a70d0d;
}

img {
cursor: pointer;
margin-left: 10px;
transition: transform 0.3s;
}

img:hover {
transform: scale(1.1);
}

form {
margin-top: 20px;
text-align: left;
}

form label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}

form input {
margin-bottom: 20px;
}

@media (max-width: 768px) {
.container {
width: 95%;
}

nav {
flex-direction: column;
align-items: flex-start;
}

ul {
flex-direction: column;
margin-top: 10px;
}

ul > li {
margin-bottom: 10px;
}

h1, h2 {
font-size: 26px;
}
}

0 comments on commit ef82253

Please sign in to comment.