Scribd
Upload
2 views

BAHAY'

The document is an HTML template for a webpage titled 'Tech Hub', featuring a header with navigation links, a product section showcasing an Intel setup, and a footer. The page is styled with CSS for layout and responsiveness, including hover effects on buttons and products. It includes a background image and is designed to adapt to smaller screens by hiding the navigation and adjusting product width.

Uploaded by

Stephen Marquez
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 views

BAHAY'

The document is an HTML template for a webpage titled 'Tech Hub', featuring a header with navigation links, a product section showcasing an Intel setup, and a footer. The page is styled with CSS for layout and responsiveness, including hover effects on buttons and products. It includes a background image and is designed to adapt to smaller screens by hiding the navigation and adjusting product width.

Uploaded by

Stephen Marquez
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>Tech Hub</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">

<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-image: url('images/Alien.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

header {
background-image: url('images/BODY.gif');
background-color: Blue;
color: white;
text-align: center;
padding: 1em;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

nav {
display: flex;
flex-direction: row;
}

nav a {
color: white;
text-decoration: none;
padding: 0.5em;
text-align: center;
display: block;
margin-right: 10px;
transition: background-color 0.3s ease-in-out;
}

nav a:hover {
background-color: #555;
}

section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 1em;
}

.product {

border: 1px solid #ddd;


padding: 1em;
margin: 1em;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
background-color: white;
text-align: center;
}

.product img {
width: 100%;
height: 150px;
object-fit: cover;
margin-bottom: 0.5em;
}

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

.product h2 {
margin-bottom: 0.5em;
}

.product button {
background-color: #333;
color: white;
border: none;
padding: 0.5em 1em;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

.product button:hover {
background-color: #555;
}

footer {
background-image: url('images/BODY.gif');
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}

@media (max-width: 600px) {


.product {
width: 100%;
}
nav {
display: none;
}

header {
flex-direction: column;
}
}
</style>
</head>

<body>

<header>
<h1>Your Product Name</h1>

<nav>
<a href="Home.html"><i class="fas fa-home"></i> Home</a>
<a href="Services.html"><i class="fas fa-cogs"></i> Services</a>
<a href="Registration.html"><i class="fas fa-user-plus"></i>
Sign-Up</a>
<a href="About.html"><i class="fas fa-info-circle"></i> About Us</a>
<a href="References.html"><i class="fas fa-book"></i> References</a>
<a href="References.html"><i class="fas fa-book"></i> STEM1p</a>
</nav>

</header>

<section>

<div class="product">
<img src="images/Intel.jpg" alt="Product 2">
<h2>Intel Setup</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

</section>

<footer>
<p>&copy; 2023 Your Product Name. All rights reserved.</p>
</footer>

</body>
</html>

You might also like