Scribd
Upload
2 views3 pages

untitled

The document is an HTML webpage titled 'Beautiful Flowers' that showcases different types of flowers including roses, sunflowers, and lilies, along with their meanings. It features a responsive design with a navigation menu, images, and descriptions of each flower. Additionally, there is a button for scrolling back to the top of the page and a footer with creator information.

Uploaded by

georgerubber26
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
2 views3 pages

untitled

The document is an HTML webpage titled 'Beautiful Flowers' that showcases different types of flowers including roses, sunflowers, and lilies, along with their meanings. It features a responsive design with a navigation menu, images, and descriptions of each flower. Additionally, there is a button for scrolling back to the top of the page and a footer with creator information.

Uploaded by

georgerubber26
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">
<title>Beautiful Flowers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
background-color: #fef9f4;
margin: 0;
padding: 0;
}
header {
background-color: #f2e8dc;
text-align: center;
padding: 40px 20px;
}
h1 {
color: #a0522d;
margin: 0;
}
nav {
background-color: #d3bfa6;
display: flex;
justify-content: center;
padding: 10px;
gap: 20px;
flex-wrap: wrap;
}
nav a {
color: #5c3a21;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.flower {
margin: 30px auto;
max-width: 800px;
padding: 20px;
background-color: #fff0f5;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.flower img {
width: 100%;
height: auto;
border-radius: 10px;
}
.flower h2 {
color: #b03060;
}
footer {
text-align: center;
padding: 20px;
background-color: #f2e8dc;
margin-top: 40px;
}
#topBtn {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
background-color: #b03060;
color: white;
border: none;
padding: 10px 15px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
@media (max-width: 600px) {
nav {
flex-direction: column;
gap: 10px;
}
.flower {
margin: 20px;
padding: 15px;
}
}
</style>
</head>
<body>

<header id="top">
<h1>Beautiful Flowers</h1>
<p>Discover the beauty and meaning of different flowers</p>
</header>

<nav>
<a href="#rose">Rose</a>
<a href="#sunflower">Sunflower</a>
<a href="#lily">Lily</a>
</nav>

<div class="flower" id="rose">


<h2>Rose</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/3/35/Rose_Flower.JPG"
alt="Rose">
<p>The rose is a symbol of love and passion. Different colors represent
different emotions. Red roses signify love, white symbolizes purity, and yellow
conveys friendship.</p>
</div>

<div class="flower" id="sunflower">


<h2>Sunflower</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/4/40/Sunflower_sky_backdrop.jpg
" alt="Sunflower">
<p>Sunflowers are cheerful flowers known for following the sun. They
symbolize loyalty, joy, and positivity. Their seeds are also used for food and oil
production.</p>
</div>

<div class="flower" id="lily">


<h2>Lily</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Lilium_candidum1.jpg"
alt="Lily">
<p>Lilies are elegant flowers often associated with purity and rebirth.
White lilies are popular in weddings and funerals for their spiritual meaning.</p>
</div>

<button id="topBtn" onclick="scrollToTop()">↑</button>

<footer>
<p>Created by [Your Name] | 2025</p>
</footer>

<script>
const topBtn = document.getElementById("topBtn");

window.onscroll = function() {
topBtn.style.display = (document.body.scrollTop > 200 ||
document.documentElement.scrollTop > 200) ? "block" : "none";
};

function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>

You might also like