Scribd
Upload
3 views10 pages

Tuan3 Bai2

The document is an HTML template for a website titled 'FlowerBox 360', which offers luxury roses and flower services. It includes a header with a logo and search bar, navigation links, a contact form, an information section about operating hours and contact details, and a discounts section. The footer contains copyright information and is styled with CSS for a visually appealing layout.

Uploaded by

Bảo Trần
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views10 pages

Tuan3 Bai2

The document is an HTML template for a website titled 'FlowerBox 360', which offers luxury roses and flower services. It includes a header with a logo and search bar, navigation links, a contact form, an information section about operating hours and contact details, and a discounts section. The footer contains copyright information and is styled with CSS for a visually appealing layout.

Uploaded by

Bảo Trần
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

https://github.com/trannguyenhoangbao13/HK1_2024-2025-HTCNW.

git

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FlowerBox 360</title>

<link rel="stylesheet" href="styles.css">

</head>

<style>

/* Reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

color: #333;

background-color: #f9f9f9;

/* Header */

header {

display: flex;

justify-content: space-between;
align-items: center;

background-color: #2b4e7e;

color: white;

padding: 10px 20px;

header .logo h1 {

font-size: 28px;

font-weight: bold;

header p {

font-size: 14px;

header .search-bar {

display: flex;

align-items: center;

header .search-bar input {

padding: 5px;

border: 1px solid #ccc;

border-radius: 3px;

header .search-bar button {

background-color: #3e72b4;

color: white;
border: none;

padding: 5px 10px;

margin-left: 5px;

cursor: pointer;

/* Navigation */

nav {

background-color: #3e72b4;

text-align: center;

padding: 10px;

nav a {

color: white;

text-decoration: none;

padding: 10px 20px;

display: inline-block;

nav a:hover {

background-color: #2b4e7e;

/* Main Content */

.container {

display: flex;

justify-content: space-between;

margin: 20px;
}

.contact-form,

.info-section,

.discounts {

background-color: white;

padding: 20px;

border: 1px solid #ddd;

border-radius: 5px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

.contact-form {

flex: 2;

margin-right: 10px;

.contact-form h2,

.info-section h2,

.discounts h2 {

color: #2b4e7e;

margin-bottom: 10px;

.contact-form .highlight {

color: red;

margin-bottom: 15px;

}
form .form-group {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

form label {

display: block;

font-weight: bold;

margin-bottom: 5px;

form input,

form textarea {

width: 100%;

padding: 8px;

margin-right: 10px;

border: 1px solid #ccc;

border-radius: 3px;

form button {

padding: 8px 12px;

background-color: #3e72b4;

color: white;

border: none;

cursor: pointer;

}
form button:hover {

background-color: #2b4e7e;

.info-section {

flex: 1;

margin-right: 10px;

.discounts {

flex: 1;

text-align: center;

.discounts img {

width: 100%;

border: 1px solid #ccc;

margin-bottom: 10px;

.discounts a {

text-decoration: none;

color: #2b4e7e;

font-weight: bold;

#fl {

float: left;

height: 100px;
width: 100px;

/* Footer */

footer {

background-color: #2b4e7e;

color: white;

text-align: center;

padding: 10px 20px;

font-size: 14px;

footer span {

font-style: italic;

</style>

<body>

<!-- Header -->

<header>

<div class="logo">

<img id="fl" src="../img/flower.png" alt="" srcset="">

<h1>FlowerBox 360</h1>

<p>...to get your daily dose of luxury roses!</p>

</div>

<div class="search-bar">

<input type="text" placeholder="Search the site...">

<button>GO</button>

</div>
</header>

<!-- Navigation -->

<nav>

<a href="#">Home</a>

<a href="#">Promotion</a>

<a href="#">Gift Baskets</a>

<a href="#">Flower Services</a>

<a href="#">About</a>

</nav>

<!-- Main Content -->

<div class="container">

<!-- Left Section -->

<section class="contact-form">

<h2>Why Not Contact Us Today!</h2>

<p class="highlight">

<em>For FlowerBox 360 shoppers, that means not only can you send your friends and loved
ones the highest quality flowers found online, but that you can do so at a great value.</em>

</p>

<form>

<div class="form-group">

<label for="name">Name:</label>

<input type="text" id="name">

<label for="email">Email:</label>

<input type="text" id="email">

</div>

<div class="form-group">

<label for="phone">Telephone:</label>
<input type="text" id="phone">

<label for="subject">Subject:</label>

<input type="text" id="subject">

</div>

<div class="form-group">

<label for="message">Message:</label>

<textarea id="message" rows="5"></textarea>

</div>

<button type="submit">Submit</button>

<button type="reset">Reset</button>

</form>

</section>

<!-- Right Section -->

<aside class="info-section">

<h2>FlowerBox 360 Info!</h2>

<p>

Operating Hours:<br> Monday-Friday: 9.00am-5.00pm.<br> Saturday: 9.00am-1.00pm.<br>


Sunday: Closed (No Deliveries)<br> ORDER ONLINE 24/7

</p>

<p>

Software Engineering Dept.<br> Information Technology Faculty<br> First Floor, H


Building<br><br> 12 Nguyen Van Bao St., Ward 4<br> Go Vap District<br> Ho Chi Minh City<br> Tel: 0283
8940 390<br> Fax: 0283.9940 954

</p>

</aside>

<!-- Discounts Section -->

<aside class="discounts">

<h2>Discounts & Specials</h2>


<img src="../img/rose.png" alt="Flower Image">

<p>

FlowerBox 360 offers many great discounts throughout the year, from coupons and coupon
codes, to promo codes and other savings. We also offer military flower discounts to our wonderful
troops!

</p>

<a href="#">Read More »</a>

</aside>

</div>

<!-- Footer -->

<footer>

<p>Copyright © 2017 - All Rights Reserved - <span>Software Engineering Department - Industrial


University of Ho Chi Minh City</span></p>

</footer>

</body>

</html>

You might also like