Scribd
Upload
24 views4 pages

P 1

The document is a styled HTML page for a kids toy collection. It includes a pink header, sections to explore toys and display toy images wrapped in styled divs. The toys are displayed inline with shadows and hover effects applied through CSS.

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
24 views4 pages

P 1

The document is a styled HTML page for a kids toy collection. It includes a pink header, sections to explore toys and display toy images wrapped in styled divs. The toys are displayed inline with shadows and hover effects applied through CSS.

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/ 4

<!

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 Pink */
padding: 1em;
color: #fff;
font-size: 24px;
}

section {
padding: 20px;
}

h2 {
color: #ff69b4;
}

.toy {
width: 200px;
height: 200px;
background-color: #87cefa; /* Light Sky Blue */
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;
}

.toy:hover {
transform: scale(1.05);
}

.toy img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
</style>
</head>

<body>
<header>
Stylish Fun for Kids
</header>

<section>
<h2>Explore Our Colorful Toys Collection</h2>
<div class="toy">
<img src="[11:35 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>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 Pink */
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>">
</div>
<div class="toy">
<img src="car.jpg" align="right" width="200" height="200">
</div>
<div class="toy">
<img src="toy3.jpg" alt="Kids Toy 3">
</div>
</section>

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

</body>

</html>

You might also like