Skip to content

Commit

Permalink
Merge pull request #1191 from Gokilp/fixprofile
Browse files Browse the repository at this point in the history
Account page form Redesign
  • Loading branch information
arghadipmanna101 authored Jun 15, 2024
2 parents 2cb6039 + 5f8f470 commit ec7ca27
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 75 deletions.
33 changes: 25 additions & 8 deletions account/home_account.html
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
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%;
}
}

0 comments on commit ec7ca27

Please sign in to comment.