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

Delivery form UI enhanced #1051

Merged
merged 3 commits into from
Nov 9, 2024
Merged

Delivery form UI enhanced #1051

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
706d0e5
delivery form UI enhanced
charmi2109 Nov 1, 2024
48d3bd8
Remove background image from delivery section form for clarity
charmi2109 Nov 2, 2024
2a9ee40
Merge branch 'master' into branch2
charmi2109 Nov 8, 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
168 changes: 89 additions & 79 deletions delivery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,81 +91,87 @@
</div>
</div>

<section>
<h1 style="margin-top: 100px; padding: 0 40px;">Island-Wide Delivery</h1>
<h2 class="heading">Enter Your Details</h2>

<form class="form-contents">
<div class="indv-text">
<label for="name" class="text">Name</label>
<input type="text" class="form-text" id="name" name="name" placeholder="Enter your Name" required />
<div class="delivery_container">
<section>
<h1 style="margin-top: 100px; padding: 0 40px;">Island-Wide Delivery</h1>
<h2 class="heading">Enter Your Details</h2>
<div class="box">
<form class="form-contents">
<div class="indv-text">
<label for="name" class="text">Name</label>
<input type="text" class="form-text" id="name" name="name" placeholder="Enter your Name"
required />
</div>

<div class="indv-text">
<label for="email" class="text">Email Id</label>
<input type="email" class="form-text" placeholder="[email protected]" required>
</div>

<div class="indv-text">
<label for="contact" class="text">Contact No.</label>
<input type="tel" class="form-text" name="contact" id="contact" placeholder="0123456789"
required>

</div>

<div class="indv-text">
<label for="add1" class="text">Address Line1</label>
<input type="text" class="form-text" name="" id="" placeholder="Street Address" required>
</div>

<div class="indv-text">
<label for="add2" class="text">Address Line2</label>
<input type="text" class="form-text" name="" id="" placeholder="City" required>
</div>

<div class="indv-text">
<label for="pincode" class="text">PIN Code </label>
<input type="text" class="form-text" id="pincode" name="pincode" placeholder="Enter Pin Code"
required pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6">
</div>

<div class="indv-text">
<label for="state" class="text">State</label>
<select class="form-text" id="state" required>
<option value="">Select State</option>
<option value="Andhra Pradesh">Colombo</option>
<option value="Arunachal Pradesh">Gampaha</option>
<option value="Assam">Kalutara</option>
<option value="Bihar">Kandy</option>
<option value="Chhattisgarh">Matale</option>
<option value="Goa">Nuwara Eliya</option>
<option value="Gujarat">Galle</option>
<option value="Haryana">Matara</option>
<option value="Himachal Pradesh">Hambantota</option>
<option value="Jharkhand">Jaffna</option>
<option value="Karnataka">Kilinochchi</option>
<option value="Kerala">Mannar</option>
<option value="Madhya Pradesh">Vavuniya</option>
<option value="Maharashtra">Mullaitivu</option>
<option value="Manipur">Batticaloa</option>
<option value="Meghalaya">Ampara</option>
<option value="Mizoram">Trincomalee</option>
<option value="Nagaland">Kurunegala</option>
<option value="Odisha">Puttalam</option>
<option value="Punjab">Anuradhapura</option>
<option value="Rajasthan">Polonnaruwa</option>
<option value="Sikkim">Badulla</option>
<option value="Tamil Nadu">Moneragala</option>
<option value="Telangana">Ratnapura</option>
<option value="Tripura">Kegalle</option>
</select>
</div>

<div style="display: flex; margin: 20px;" class="btn">
<button type="submit" value="SUMBIT" class="btn-style">Submit</button>
<button type="reset" class="btn-style reset-btn" value="RESET">Clear</button>
</div>
</div>

<div class="indv-text">
<label for="email" class="text">Email Id</label>
<input type="email" class="form-text" placeholder="[email protected]" required>
</div>

<div class="indv-text">
<label for="contact" class="text">Contact No.</label>
<input type="tel" class="form-text" name="contact" id="contact" placeholder="0123456789" required>
</div>

<div class="indv-text">
<label for="add1" class="text">Address Line1</label>
<input type="text" class="form-text" name="" id="" placeholder="Street Address" required>
</div>

<div class="indv-text">
<label for="add2" class="text">Address Line2</label>
<input type="text" class="form-text" name="" id="" placeholder="City" required>
</div>

<div class="indv-text">
<label for="pincode" class="text">PIN Code </label>
<input type="text" class="form-text" id="pincode" name="pincode" placeholder="Enter Pin Code" required
pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6">
</div>

<div class="indv-text">
<label for="state" class="text">State</label>
<select class="form-text" id="state" required>
<option value="">Select State</option>
<option value="Andhra Pradesh">Colombo</option>
<option value="Arunachal Pradesh">Gampaha</option>
<option value="Assam">Kalutara</option>
<option value="Bihar">Kandy</option>
<option value="Chhattisgarh">Matale</option>
<option value="Goa">Nuwara Eliya</option>
<option value="Gujarat">Galle</option>
<option value="Haryana">Matara</option>
<option value="Himachal Pradesh">Hambantota</option>
<option value="Jharkhand">Jaffna</option>
<option value="Karnataka">Kilinochchi</option>
<option value="Kerala">Mannar</option>
<option value="Madhya Pradesh">Vavuniya</option>
<option value="Maharashtra">Mullaitivu</option>
<option value="Manipur">Batticaloa</option>
<option value="Meghalaya">Ampara</option>
<option value="Mizoram">Trincomalee</option>
<option value="Nagaland">Kurunegala</option>
<option value="Odisha">Puttalam</option>
<option value="Punjab">Anuradhapura</option>
<option value="Rajasthan">Polonnaruwa</option>
<option value="Sikkim">Badulla</option>
<option value="Tamil Nadu">Moneragala</option>
<option value="Telangana">Ratnapura</option>
<option value="Tripura">Kegalle</option>
</select>
</div>

<div style="display: flex; margin: 20px;" class="btn">
<button type="submit" value="SUMBIT" class="btn-style">Submit</button>
<button type="reset" class="btn-style reset-btn" value="RESET">Clear</button>
</div>

</form>
</section>
</form>
</section>
</div>

<!-- Cart -->
<div class="cart">
Expand Down Expand Up @@ -242,13 +248,17 @@ <h4>Need Help?</h4>
</ul>
<h4 style="margin-top: 15px;">Follow Us</h4>
<ul class="links">
<li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
<li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
<li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i> Twitter</a></li>
<li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i>
Facebook</a></li>
<li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i>
Instagram</a></li>
<li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
Linkedin</a></li>
<li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
Twitter</a></li>
<!-- Added Whatsapp Logo -->
<li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
Whatsapp</a></li>
Whatsapp</a></li>
</ul>
</div>
<div class="footer-col">
Expand Down Expand Up @@ -285,4 +295,4 @@ <h4>Newsletter</h4>

</body>

</html>
</html>
Binary file added images/icecreams.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added newform.html
View file
Open in desktop
Empty file.
37 changes: 37 additions & 0 deletions styles/delivery-catering.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,38 @@ section h1 {
font-size: 20px;
margin-top: 15px;
font-weight: 400;
}
.delivery_container{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
background: url(/images/icecreams.jpg);
background-size:cover;
}
.box{
/* background: red; */
box-shadow: 0px 0px 10px rgba(0,0, 0, 0.1);
border: 6px solid rgba(255,255 ,255 , 0.1);
border-radius: 10px;
backdrop-filter: blur(1.5px);

padding: 20px 20px;
/* max-width: 900px; */



}
.indv-text .form-text{
background: transparent;
font-weight:500;
/* border: none; */
font-size: 20px;
padding: 20px 20px 20px 20px ;
border-radius: 19px;



}

.form-text {
Expand All @@ -18,8 +50,10 @@ section h1 {
width: 100%;
height: 40px;
background-color: transparent;

}


.indv-text label {
font-weight: bold;
}
Expand All @@ -31,6 +65,7 @@ section h1 {
.text {
display: block;
margin-bottom: 7px;
font-size: 19px;
}

.indv-text {
Expand All @@ -44,6 +79,8 @@ section h1 {
background: transparent;
color: var(--main-color);
}
.btn{
margin: auto 0 ;}
.reset-btn:hover {
background-image: var(--background-image);
background-color: var(--main-color);
Expand Down
Empty file added styles/newform.css
View file
Open in desktop
Empty file.