Scribd
Upload
19 views3 pages

P 2

This document contains the code for a stylo page promoting a collection of beauty products. The page has a header, section, and uses CSS styling to display product images and information in interactive boxes. Product images and titles and prices are displayed for three sample products with descriptions. The CSS styles the overall light pink and white background, formats text and images, and adds interactive hover effects to product boxes.

Uploaded by

nosheennaseer026
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views3 pages

P 2

This document contains the code for a stylo page promoting a collection of beauty products. The page has a header, section, and uses CSS styling to display product images and information in interactive boxes. Product images and titles and prices are displayed for three sample products with descriptions. The CSS styles the overall light pink and white background, formats text and images, and adds interactive hover effects to product boxes.

Uploaded by

nosheennaseer026
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kids Stylo Page</title>
<style>
body {
background-color: #fdfdfd; /* Light Gray */
color: #333;
font-family: 'Comic Sans MS', cursive;
margin: 0;
padding: 0;
text-align: center;
}

header {
background-color: #ff69b4; /* Hot purple */
padding: 1em;
color: #fff;
font-size: 24px;
}

section {
padding: 20px;
}

h2 {
color: #ff69b4;
}

.toy {
width: 200px;
height: 200px;
…
[11:49 PM, 12/20/2023] 🙃: <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beauty Products Stylo Page</title>
<style>
body {
background-color: #fff5ee; /* Seashell */
color: #333;
font-family: 'Verdana', sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

header {
background-color: #ff6347; /* Tomato */
padding: 1em;
color: #fff;
font-size: 24px;
}
section {
padding: 20px;
}

h2 {
color: #ff6347;
}

.beauty-product {
width: 300px;
height: 400px;
background-color: #ffb6c1; /* Light Pink */
margin: 20px;
display: inline-block;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}

.beauty-product:hover {
transform: scale(1.05);
}

.beauty-product img {
width: 100%;
height: 70%;
object-fit: cover;
border-radius: 10px 10px 0 0;
}

.product-info {
padding: 10px;
}
</style>
</head>

<body>
<header>
Stylish Beauty Products Collection
</header>

<section>
<h2>Discover Our Exclusive Beauty Products</h2>
<div class="beauty-product">
<img src="product1.jpg" alt="Beauty Product 1">
<div class="product-info">
<h3>Product Title 1</h3>
<p>Description of the beauty product.</p>
<p>$29.99</p>
</div>
</div>
<div class="beauty-product">
<img src="product2.jpg" alt="Beauty Product 2">
<div class="product-info">
<h3>Product Title 2</h3>
<p>Description of the beauty product.</p>
<p>$39.99</p>
</div>
</div>
<div class="beauty-product">
<img src="product3.jpg" alt="Beauty Product 3">
<div class="product-info">
<h3>Product Title 3</h3>
<p>Description of the beauty product.</p>
<p>$49.99</p>
</div>
</div>
</section>

<!-- Add more content or elements as needed -->

</body>

</html>

You might also like