Skip to content

Commit

Permalink
Merge pull request #599 from suhanigupta23/issue#494
Browse files Browse the repository at this point in the history 
completed issue#494
  • Loading branch information
@khushi-joshi-05
khushi-joshi-05 authored May 30, 2024
2 parents aa73d47 + 6206bdd commit e43d53f
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 1 deletion.
2 changes: 1 addition & 1 deletion Html-files/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h3>Catering Services for Events</h3>
src="https://hips.hearstapps.com/hmg-prod/images/best-meal-delivery-services-territory-foods-1630350085.jpg?crop=0.999866844207723xw:1xh;center,top&resize=980:*">
<h3>Meal Delivery Subscription</h3>
<!-- <p>$10.20</p> -->
<button class="but">Take Subscription</button>
<a href="subscription.html"><button class="but">Take Subscription</button></a>
<!-- <button class="butt">Order Now</button> -->
</div>

Expand Down
181 changes: 181 additions & 0 deletions Html-files/subscription.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
background-image: url(https://bsmedia.business-standard.com/_media/bs/img/article/2023-09/14/full/1694673859-4182.jpeg?im=FeatureCrop);
background-size: cover;

}
.services_page{
color:crimson;
position: relative;
left:20px;
top:2px;
font-size: 40px;
font-weight: bold;
background-color: rgb(244, 242, 240);
width:20px;
border-radius:40%;
display: inline-block;
padding: 8px 25px;
}
.services_page:hover{
color:#fff;
background-color: crimson;
}
a{
text-decoration: none;
}
.container {
display: flex;
height: 90%;
background-color: whitesmoke;
position:absolute;
top:60px;
left:200px;
width:75%;
}


.product {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
height: 87%;
transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.product {
color: black;
margin-bottom: 10px;
}
.product:hover{
transform: translateY(-8px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


.price {
font-size: 18px;
margin: 10px 0;
}


.old-price {
text-decoration: line-through;
color: #888;
margin-right: 10px;
}


.new-price {
color: rgb(211, 52, 52);
font-size: 40px;
font-weight: bold;
}


.savings {
color: black;
font-size: 16px;
margin-bottom: 20px;
background-color: rgb(239, 207, 164);
padding:4px;
}


.buy-now {
background-color:rgb(3, 137, 3);
color: white;
padding: 10px 20px;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
margin-bottom: 20px;
width: 130px;
}
.buy-now:hover {
background-color: rgb(6, 112, 22);
}


.features {
text-align: left;
}


.features h3 {
color: black;
margin-bottom: 10px;
}


.features ul {
list-style-type: none;
padding: 0;
}


.features li {
background-color: #f9f9f9;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
}
.types_membership{
font-size: 35px;
font-weight: bold;
}
hr{
width: 200px;

}
.green-check{
color:green;
}
.gold{
color:goldenrod;
}
.silver{
color:#545454;
}
.regular{
color:rgb(41, 139, 237);
}
.gold_mem{
border-color: goldenrod;
border-width: 4px;
}
.silver_mem{
border-color:#888;
border-width: 4px;
}
.regular_mem{
border-color:rgb(125, 165, 239);
border-width: 4px;
}
.gold_mem:hover{
border-color: rgb(183, 133, 6);
}
.silver_mem:hover{
border-color:#545454;
}
.regular_mem:hover{
border-color:rgb(66, 124, 232);
}

62 changes: 62 additions & 0 deletions Html-files/subscription.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Offers</title>
<link rel="stylesheet" href="subscription.css">
</head>
<body>
<a href="services.html"><p class="services_page"><b>&#8249;</b></p></a>
<div class="container">
<div class="product gold_mem">
<p class="types_membership gold">Gold Membership</p class="types_membership">
<p class="price"><span class="old-price">$200</span> <br> <span class="new-price">$160</span></p>
<p class="savings">You save $40!</p>
<button class="buy-now">Buy Now</button>

<div class="features">
<hr>
<h3>Essential Features</h3>
<ul>
<li> <span class="green-check">&#x2714;</span> 20% off on all dine-in and 15% off on online orders.</li>
<li> <span class="green-check">&#x2714;</span> Priority seating for dine-in and express delivery for online orders.</li>
<li> <span class="green-check">&#x2714;</span> Free dessert or appetizer with dine-in meals and monthly free delivery vouchers.</li>
</ul>
</div>
</div>
<div class="product silver_mem">
<p class="types_membership silver">Silver Membership</p class="types_membership">
<p class="price"><span class="old-price">$150</span> <br><span class="new-price">$120</span></p>
<p class="savings">You save $30!</p>
<button class="buy-now">Buy Now</button>
<div class="features">
<hr>
<h3>Essential Features</h3>
<ul>
<li> <span class="green-check">&#x2714;</span> 10% off on all dine-in and online orders.</li>
<li> <span class="green-check">&#x2714;</span> Preferred seating for dine-in and reduced delivery charges for online orders.</li>
<li> <span class="green-check">&#x2714;</span> Free appetizer with dine-in meals and quarterly free delivery vouchers.</li>
</ul>
</div>
</div>
<div class="product regular_mem">
<p class="types_membership regular">Regular Membership</p class="types_membership">
<p class="price"><span class="old-price">$100</span><br> <span class="new-price">$80</span></p>
<p class="savings">You save $20!</p>
<button class="buy-now">Buy Now</button>
<div class="features">
<hr>
<h3>Essential Features</h3>
<ul>
<li> <span class="green-check">&#x2714;</span> 5% off on all dine-in and online orders.</li>
<li> <span class="green-check">&#x2714;</span> Standard seating for dine-in and standard delivery charges for online orders.</li>
<li> <span class="green-check">&#x2714;</span> Occasional free appetizers with dine-in meals and free delivery vouchers during special promotions.</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Binary file added Images/subscription_page_bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e43d53f

Please sign in to comment.