Scribd
Upload
16 views2 pages

WP 1

The document contains two HTML examples: one demonstrating button functionality with alerts and variable printing, and another showcasing a Bootstrap grid layout with product cards. The button example includes styled buttons and JavaScript functions for interactivity. The grid example features three product cards with images, descriptions, and action buttons.

Uploaded by

k224107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views2 pages

WP 1

The document contains two HTML examples: one demonstrating button functionality with alerts and variable printing, and another showcasing a Bootstrap grid layout with product cards. The button example includes styled buttons and JavaScript functions for interactivity. The grid example features three product cards with images, descriptions, and action buttons.

Uploaded by

k224107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

BUTTON

<html>
<head>
<title>Button Examples</title>
<style>
/* Styling the button */
.styled-btn {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.styled-btn:hover {
background-color: darkblue;
}
</style>
</head>
<body>

<h2>HTML Button Examples</h2>

<!-- Simple Button -->


<button>Click Me</button>

<!-- Styled Button -->


<button class="styled-btn">Styled Button</button>

<!-- Button that triggers an alert -->


<button onclick="sayHello()">Click Me</button>

<!-- Button that prints a variable -->


<button onclick="printVariable()">Show Value</button>
<p id="output"></p>

<script>
// Function to show an alert
function sayHello() {
alert("Hello, World!");
}

// Function to print a variable inside a paragraph


let message = "Hello, this is a variable!";
function printVariable() {
document.getElementById("output").innerHTML = message;
}
</script>

</body>
</html>
GRID
<html lang="en">
<head>
<title>Bootstrap Grid with Data</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">


<h2 class="text-center">Bootstrap Grid Example</h2>

<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300" class="card-img-top" alt="Sample Image">
<div class="card-body">
<h5 class="card-title">Product 1</h5>
<p class="card-text">This is a great product that you will love!</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300" class="card-img-top" alt="Sample Image">
<div class="card-body">
<h5 class="card-title">Product 2</h5>
<p class="card-text">An amazing item with excellent features.</p>
<button class="btn btn-success">Learn More</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300" class="card-img-top" alt="Sample Image">
<div class="card-body">
<h5 class="card-title">Product 3</h5>
<p class="card-text">A must-have item for your collection.</p>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

You might also like