Skip to content

Update playset.html #2

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update playset.html #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
106 changes: 62 additions & 44 deletions playset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Fun Play Set - EasyShop.com</title>
<style>
body {
font-family: 'Arial', sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
Expand All @@ -16,29 +16,30 @@
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
padding: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
}

h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
font-size: 36px;
}

.product-details {
display: flex;
justify-content: space-around;
align-items: flex-start;
align-items: center;
flex-wrap: wrap;
}

.product-image {
width: 100%;
max-width: 500px;
height: 300px; /* Set your preferred height */
max-width: 600px;
height: 400px;
background-size: cover;
background-position: center;
margin-bottom: 20px;
Expand All @@ -48,7 +49,7 @@
}

.product-image:hover {
transform: scale(1.08);
transform: scale(1.1);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}

Expand All @@ -60,6 +61,7 @@
p {
margin-bottom: 20px;
line-height: 1.8;
color: #555;
}

.price {
Expand All @@ -70,28 +72,10 @@
}

.availability {
color: #008000; /* Green color for availability */
color: #008000;
margin-bottom: 25px;
}

.buy-now {
background-color: #ffcc00;
padding: 18px;
text-align: center;
color: #333;
text-decoration: none;
display: block;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}

.buy-now:hover {
background-color: #555;
color: #fff;
}

/* Additional Styling */
.additional-features {
display: flex;
Expand All @@ -103,7 +87,7 @@
.social-icons a {
color: #333;
text-decoration: none;
font-size: 20px;
font-size: 24px;
margin-right: 15px;
transition: color 0.3s;
}
Expand All @@ -115,16 +99,43 @@
.rating {
display: flex;
align-items: center;
}

.star {
color: #ffcc00;
margin-right: 7px;
font-size: 20px;
}

/* Detailed Description */
.detailed-description {
margin-top: 40px;
color: #555;
font-size: 18px;
line-height: 1.6;
}

/* Age Limit */
.age-limit {
margin-top: 20px;
font-size: 18px;
color: #555;
}

/* Buy Now Button */
.buy-now-btn {
display: block;
width: 100%;
padding: 15px;
text-align: center;
background-color: #ffcc00;
color: #333;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}

.buy-now-btn:hover {
background-color: #555;
color: #fff;
}
</style>
</head>
Expand All @@ -139,37 +150,44 @@ <h1>Fun Play Set</h1>
<div class="product-image" style="background-image: url('fun_play_set.jpg');"></div>

<div class="product-info">
<p>Description of the Fun Play Set. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Welcome to the world of imagination and creativity with our Fun Play Set. This set is designed to provide endless fun and learning opportunities for your little ones.</p>

<div class="price">Price: ₹150</div>

<div class="availability">Availability: In Stock (✔)</div>

<a href="payment.html" class="buy-now">Buy Now</a>

<!-- Additional Features -->
<div class="additional-features">
<div class="social-icons">
<a href="#" target="_blank">Share on Facebook</a>
<a href="#" target="_blank">Share</a>
<a href="#" target="_blank">Tweet</a>
<a href="#" target="_blank">Pin it</a>
</div>

<div class="rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">☆</span>
<!-- Add more stars as needed -->
★★★★☆
</div>
</div>

<!-- Detailed Description -->
<div class="detailed-description">
<h2>Detailed Description</h2>
<p>Further details about the Fun Play Set. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Product Features:</h2>
<ul>
<li>Interactive and educational</li>
<li>Durable and safe materials</li>
<li>Encourages creativity and imagination</li>
<li>Perfect for indoor and outdoor play</li>
<li>Easy to clean and maintain</li>
</ul>

<p>Bring joy and excitement to your child's playtime with our Fun Play Set. Order now and let the adventure begin!</p>
</div>

<!-- Age Limit -->
<div class="age-limit">Age Limit: 3-8 years</div>

<!-- Buy Now Button -->
<a href="payment.html" class="buy-now-btn">Buy Now</a>
</div>
</div>
</div>
Expand Down