Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Account page form Redesign #1191

Merged
merged 2 commits into from
Jun 15, 2024
Merged

Account page form Redesign #1191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13301c1
fix profile
Gokilp Jun 13, 2024
5f8f470
fix profile
Gokilp Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions account/home_account.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,28 @@
</header>

<section>

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<h1 class="text-center mb-4" style="display: inline-block;"><img src="../img/flipkardLoader.png" alt="Flipkart Logo" class="img-fluid mb-4 mx-auto" style="width: 100%; max-width: 180px;">lipkart Profile</h1>
<h1 class="text-center mb-4" style="display: inline-block;">
<img src="/img/flipkardLoader.png" alt="Flipkart Logo" class="img-fluid mb-4 mx-auto" style="width: 100%; max-width: 180px;">Flipkart Profile
</h1>
<form>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name">
<input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email address">
<input type="email" class="form-control" id="email" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Enter your address">
<input type="text" class="form-control" id="address" placeholder="Enter your address"required>
</div>
<div class="form-group">
<label for="payment">Payment Information</label>
<input type="text" class="form-control" id="payment" placeholder="Enter your payment information">
<input type="text" class="form-control" id="payment" placeholder="Enter your payment information" required>
</div>
<div class="form-group">
<label>Gender</label>
Expand All @@ -58,16 +59,32 @@ <h1 class="text-center mb-4" style="display: inline-block;"><img src="../img/fli
</div>
<div class="form-group">
<label for="orderHistory">Order History</label>
<textarea class="form-control" id="orderHistory" rows="3" placeholder="Enter your order history"></textarea>
<textarea class="form-control" id="orderHistory" rows="3" placeholder="Enter your order history" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
<div id="FAQ">
<h1> FAQ </h1>
<h4 id="heading"> What happens when I update my email address (or mobile number)? </h4>
<p id="para">Your login email id (or mobile number) changes, likewise. You'll receive all your account related communication on your updated email address (or mobile number).</p>
<h4 id="heading"> When will my Flipkart account be updated with the new email address (or mobile number)?</h4>
<p id="para"> It happens as soon as you confirm the verification code sent to your email (or mobile) and save the changes.</p>
<h4 id="heading"> What happens to my existing Flipkart account when I update my email address (or mobile number)?</h4>
<p id="para">Updating your email address (or mobile number) doesn't invalidate your account. Your account remains fully functional. You'll continue seeing your Order history, saved information and personal details.</p>
<h4 id="heading"> Does my Seller account get affected when I update my email address? </h4>
<p id="para">Flipkart has a 'single sign-on' policy. Any changes will reflect in your Seller account also. </p>
</p>

</div>
<div>
<button class="btn-primary2 "> Deactive </button>
</div>
<br>
</section>


<footer id="footer-account" style="background-color: #293649 !important"></footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/account.js"></script>
Expand Down
157 changes: 90 additions & 67 deletions css/account.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,100 @@
section .container {
background-color: #ffffff25;
border: 1px solid #ddd;
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 8px rgba(91, 77, 77, 0.1);
max-width: 100%;
transition: box-shadow 0.3s ease;
}


section .container:hover {
box-shadow: 0 8px 16px rgba(91, 77, 77, 0.2);
}

section h1 {
color: #1149ff;
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

.flipkardLoader {
width: 100%;
max-width: 180px;
margin: 0 auto;
}

h1 {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}

section .form-group label {
color: #343a40;
font-weight: 600;
margin-bottom: 5px;
margin-top: 5px ;
}

section .form-group label:hover {
color: #007bff;
}
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

form {
width: 100%;
max-width: 600px;
margin: 0 auto;
}

.form-group {
margin-bottom: 15px;
}

label {
font-weight: bold;
}

section .form-control {
border: 1px solid #ced4da;
border-radius: 4px;
padding: 10px;
transition: border-color 0.3s ease;
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5em
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}

textarea {
height: 100px;
}

/* Radio buttons */
.form-check {
display: inline-block;
margin-right: 10px;
}

section .form-control:focus {
border-color: #0755ff;
box-shadow: 0 0 0 0.2rem rgba(12, 82, 163, 0.25);
outline: none;
}
#para1{

font-size: 14px;

section .btn-primary {
background-color: #007bff;
border-color: #007bff;
border-radius: 4px;
padding: 10px 20px;
}
#heading{

font-size: 20px;
font-weight: bold;
transition: background-color 0.3s ease;
}

section .btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}

section .btn-primary:focus {
background-color: #0056b3;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
/* Submit button */
.btn-primary {
background-color: #2874f0;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
.btn-primary2 {
display: flex;
justify-content:center;
align-items: center;
background-color: #2874f0;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 15px;
cursor: pointer;
}

section .btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

section .form-check-input {
margin-right: 5px;
}

section #orderHistory {
resize: vertical;
margin-bottom: 15px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 1.8rem;
}

form {
max-width: 100%;
}
}
Loading