<body>
<div class="update-notification">
<p><strong>Important Notice:</strong> My website is still under development,Some features may not be available-DEV[kissi]</p>
</div>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/cart">Cart</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</nav>
</header>
<h1>KISSI'S CLOTHING LINE</h1>
<h2><em><marquee>HOME FOR YOUR QUALITY OUTFITS</marquee></em></h2>
<div class="products">
<div class="product">
<img src="OIP.jpeg" alt="Stylish Shirt">
<h3>Stylish Shirt</h3>
<p>₵29.99</p>
<a href="/product/1" class="btn">View Product</a>
</div>
<div class="product">
<img src="cool hoodie.jpeg" alt="Cool Hoodie">
<h3>Cool Hoodie</h3>
<p>₵49.99</p>
<a href="/product/2" class="btn">View Product</a>
</div>
</div>
<div class="product-detail">
<img src="stylish shirt.jpeg" alt="Stylish Shirt">
<h3>Stylish Shirt</h3>
<p>₵29.99</p>
<button>Add to Cart</button>
</div>
<div class="cart">
<h2>Your Cart</h2>
<ul>
<li>
<span>Stylish Shirt - ₵29.99</span>
</li>
<li>
<span>Cool Hoodie - ₵49.99</span>
</li>
</ul>
<a href="/checkout" class="btn">Proceed to Checkout</a>
</div>
<div class="checkout">
<h2>Checkout</h2>
<form action="/submit-order" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<label for="address">Shipping Address</label>
<input type="text" id="address" name="address" required>
<label for="payment">Payment Information</label>
<input type="text" id="payment" name="payment" required>
<button type="submit">Place Order</button>
</form>
</div>
<div class="signature">
<h3>Website Developed By:</h3>
<p><strong>Kissi Dev ©2024</strong></p>
</div>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7;
color: #333;
line-height: 1.6;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li {
margin-right: 30px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: #ff6347;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 2.5em;
color: #333;
}
h2 {
text-align: center;
font-size: 1.3em;
margin-top: 20px;
font-style: italic;
color: #444;
}
.products {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
flex-wrap: wrap;
}
.product {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
transform: translateY(-10px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.product img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 10px;
}
.product h3 {
font-size: 1.5em;
margin: 10px 0;
color: #333;
}
.product p {
font-size: 1.1em;
margin-bottom: 10px;
color: #555;
}
.btn {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #ff6347;
}
.product-detail {
text-align: center;
padding: 50px 20px;
background-color: #fff;
margin: 30px auto;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
max-width: 600px;
}
.product-detail img {
max-width: 400px;
margin-bottom: 20px;
border-radius: 8px;
}
.product-detail h3 {
font-size: 2em;
margin: 20px 0;
color: #333;
}
.product-detail button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s;
}
.product-detail button:hover {
background-color: #ff6347;
}
.cart ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
.cart ul li {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.remove-btn {
background-color: #ff6347;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.remove-btn:hover {
background-color: #cc4e2b;
}
.checkout form {
width: 100%;
max-width: 500px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.checkout label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.checkout input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1em;
}
.checkout button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
width: 100%;
transition: background-color 0.3s;
}
.checkout button:hover {
background-color: #ff6347;
}
.signature {
text-align: center;
padding: 20px;
background-color: #fff;
margin: 50px auto;
max-width: 600px;
font-style: italic;
}
.signature h3 {
font-size: 1.5em;
color: #333;
}
.signature p {
font-size: 1.2em;
color: #555;
}
@media (max-width: 768px) {
.products {
flex-direction: column;
align-items: center;
}
header {
padding: 10px;
}
h1 {
font-size: 2em;
}
.product-detail {
padding: 30px;
width: 90%;
}
.cart ul li {
flex-direction: column;
align-items: flex-start;
}
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.