Scribd
Upload
9 views6 pages

Flowerwebsite

The document is an HTML template for an online flower shop, featuring a navigation bar, a hero section, and a main content area displaying various flower bouquets. It includes functionality for user login and signup, as well as options to add items to a cart or wishlist. The design is responsive, ensuring a good user experience on both desktop and mobile devices.

Uploaded by

helloiioo949
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
9 views6 pages

Flowerwebsite

The document is an HTML template for an online flower shop, featuring a navigation bar, a hero section, and a main content area displaying various flower bouquets. It includes functionality for user login and signup, as well as options to add items to a cart or wishlist. The design is responsive, ensuring a good user experience on both desktop and mobile devices.

Uploaded by

helloiioo949
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/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Flower Shop</title>
<meta name="description" content="Order fresh flowers for any occasion at our
online flower shop.">
<meta name="keywords" content="flowers, online shop, bouquets, roses, lilies,
tulips">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
nav {
background-color: #4CAF50;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul li a:hover {
color: #333;
}
.hero {
text-align: center;
padding: 100px 20px;
background-image: url('flower-shop-banner.jpg');
background-size: cover;
background-position: center;
color: white;
height: 400px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 10px;
}
.hero p {
font-size: 24px;
}
.main-content {
padding: 50px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.flower-item {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
margin-bottom: 20px;
width: 300px;
}
.flower-item img {
max-width: 100%;
border-radius: 10px;
}
.flower-item h3 {
margin: 20px 0;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.wishlist-icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #ff6b6b;
cursor: pointer;
}
.wishlist-icon:hover {
color: #ff1e1e;
}
.login-page, .signup-page {
display: none;
text-align: center;
padding: 100px 20px;
}
.login-box, .signup-box {
background-color: white;
padding: 40px;
margin: 0 auto;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.login-box h2, .signup-box h2 {
margin-bottom: 20px;
}
.login-box input[type="text"], .login-box input[type="password"],
.signup-box input[type="text"], .signup-box input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-box button, .signup-box button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.login-box button:hover, .signup-box button:hover {
background-color: #45a049;
}
.forgot-password {
display: block;
margin-top: 10px;
color: #4CAF50;
text-decoration: none;
}
.forgot-password:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
align-items: center;
}
.flower-item {
width: 90%;
}
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div class="logo">
<h2 style="color: white;">Flower Shop</h2>
</div>
<ul>
<li><a href="#" id="login-link">Login</a></li>
<li><a href="#" id="signup-link">Sign Up</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Add to Cart</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">My Orders</a></li>
<li><a href="#">Payment</a></li>
</ul>
</nav>

<!-- Hero Section -->


<section class="hero" id="home">
<h1>Welcome to the Flower Shop</h1>
<p>Order fresh flowers for any occasion</p>
</section>

<!-- Main Content Section -->


<div class="main-content" id="home-content">
<div class="flower-item">
<span class="wishlist-icon" onclick="addToWishlist('Rose
Bouquet')">&hearts;</span>
<img src="rose.jpg" alt="Rose Bouquet">
<h3>Rose Bouquet</h3>
<button class="btn" onclick="addToCart('Rose Bouquet')">Add to
Cart</button>
</div>
<div class="flower-item">
<span class="wishlist-icon" onclick="addToWishlist('Lily
Bouquet')">&hearts;</span>
<img src="lily.jpg" alt="Lily Bouquet">
<h3>Lily Bouquet</h3>
<button class="btn" onclick="addToCart('Lily Bouquet')">Add to
Cart</button>
</div>
<div class="flower-item">
<span class="wishlist-icon" onclick="addToWishlist('Tulip
Bouquet')">&hearts;</span>
<img src="tulip.jpg" alt="Tulip Bouquet">
<h3>Tulip Bouquet</h3>
<button class="btn" onclick="addToCart('Tulip Bouquet')">Add to
Cart</button>
</div>
</div>

<!-- Login Page -->


<div class="login-page" id="login-page">
<div class="login-box">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<a href="#" class="forgot-password">Forgot Password?</a>
<button type="button" onclick="login()">Login</button>
</div>
</div>

<!-- Sign Up Page -->


<div class="signup-page" id="signup-page">
<div class="signup-box">
<h2>Sign Up</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="password" placeholder="Confirm Password">
<button type="button" onclick="signup()">Sign Up</button>
</div>
</div>

<!-- Footer -->


<footer style="text-align: center; padding: 20px; background-color: #4CAF50;
color: white;">
<p>&copy; 2024 Online Flower Shop | All Rights Reserved</p>
</footer>

<script>
function addToCart(flower) {
alert(flower + " has been added to your cart.");
}

function addToWishlist(flower) {
alert(flower + " has been added to your wishlist.");
}

function showLogin() {
document.getElementById('home').style.display = 'none';
document.getElementById('home-content').style.display = 'none';
document.getElementById('signup-page').style.display = 'none';
document.getElementById('login-page').style.display = 'block';
}

function showSignup() {
document.getElementById('home').style.display = 'none';
document.getElementById('home-content').style.display = 'none';
document.getElementById('login-page').style.display = 'none';
document.getElementById('signup-page').style.display = 'block';
}

function login() {
const username = document.querySelector('.login-box
input[type="text"]').value;
const password = document.querySelector('.login-box
input[type="password"]').value;
if (username === '' || password === '') {
alert('Please fill in all fields.');
} else {
alert('Login successful!');
// Proceed with login
}
}

function signup() {
const username = document.querySelector('.signup-box
input[type="text"]').value;
const password = document.querySelector('.signup-box
input[type="password"]').value;
const confirmPassword = document.querySelector('.signup-box
input[type="password"]:nth-of-type(2)').value;
if (username === '' || password === '' || confirmPassword === '') {
alert('Please fill in all fields.');
} else if (password !== confirmPassword) {
alert('Passwords do not match.');
} else {
alert('Sign up successful!');
// Proceed with sign up
}
}

document.getElementById('login-link').addEventListener('click', showLogin);
document.getElementById('signup-link').addEventListener('click',
showSignup);
</script>
</body>
</html>

You might also like