Scribd
Upload
3 views45 pages

Ex(1-4)

The document outlines basic HTML tags and CSS properties, providing examples and explanations for each. It includes HTML elements such as <html>, <head>, <body>, and various tags for formatting text, images, and links, as well as CSS selectors and properties for styling web pages. Additionally, it presents a code example for designing a responsive blog using HTML and CSS.

Uploaded by

manikandantms23
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
3 views45 pages

Ex(1-4)

The document outlines basic HTML tags and CSS properties, providing examples and explanations for each. It includes HTML elements such as <html>, <head>, <body>, and various tags for formatting text, images, and links, as well as CSS selectors and properties for styling web pages. Additionally, it presents a code example for designing a responsive blog using HTML and CSS.

Uploaded by

manikandantms23
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/ 45

Ex.No.

: 1 (a)

Date :

Aim:

Procedure:
Study of Basic HTML Tags

1. <!DOCTYPE html> - declaration defines that this document is an


HTML5 document
2. <html> - element is the root element of an HTML page
3. <head> - element contains meta information about the HTML page
4. <title> - element specifies a title for the HTML page
5. <body> - element defines container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc
6. HTML Headings:
defined with the <h1> to <h6> tags.
<h1> defines the most important heading
<h6> defines the least important heading

7. <p> - defines a paragraph


Ex:
<p>This is a
paragraph.</p> Output:

8. <link> - defines the relationship between the current document and an


external resource
Ex:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Attributes:
1. Charset(char_encoding) - defines the character encoding’
2. Hreflang(URL)- Specifies the text language
3. rel - describes the relationship between the current
document and linked document
4. rev(reversed relationship) - describes the relationship
between the current document and linked document
5. sizes(Height* weight) - pecifies the size, hould be only
used with rel="icon.”
6. Target(_blank, _self, _top, _parent) – determines where to
load the linked document
Output:

9. <href> - attribute specifies the URL of the page the link goes to
Ex:
<h2>The href Attribute</h2>
<a href="https://www.w3schools.com">Visit W3Schools</a>
Output:

10. <img> - is used to embed an image


Ex:
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104"
height="142">
<Src> - attribute specifies the path to the image to be displayed
Absolute URL - Links to an external image that is hosted on
another website
Example: src=https://www.w3schools.com/images/img_girl.jpg
Relative URL - Links to an image that is hosted within the website
Example: src="/images/img_girl.jpg"
width and height attributes, which specify the width and height
of the image
<alt> - specifies an alternate text for an image, if the image for
some reason cannot be displayed

11. <a> - tag defines a hyperlink, which is used to link from one page to
another
Ex:
<html>
<body>
<h1>The a target attribute</h1>
<a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
</body>
</html>
Output:
12. <b> - tag specifies bold text without any extra importance
Ex:
<h1>Use CSS to Set Bold Text</h1>
<p>Welcome To <b> Sona College of Technology</b> </p>
Output:

13. <br> - tag inserts a single line break, it has no end tag.
Ex:
<h1>A Poem</h1>
<p>Be not afraid of greatness.<br>
Some are born great,<br>
some achieve greatness,<br>
and others have greatness thrust upon them.</p>
Output:

14. <div> - tag defines a division or a section, used as a container for


HTML elements
Ex:
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>


<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Output:

15. <i> - displayed in italic.


Ex:
<body>
<p>Welcome to <i> Sona </i> </p>
</body>
Output:

16. <li> - tag defines a list item


<ol> - create the ordered list, which will be numbered automatically
Ex:
<h1>The li value attribute</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Output:

<ul> - we can create the unordered list, It lists the item intended with a
bullet
Ex:
<h1>A list inside another list</h1>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Output:
17. <style> - attribute is used to add styles to an element, such as color,
font, size, and more
Ex:
<html>
<body>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
Output:

18. <lang> - to declare the language of the Web page Ex:


<html lang="en">
<body>
...
</body>
</html>
19. <pre> - element defines preformatted text
<html>
<body>
<pre>
My Bonnie lies over the ocean.
</pre>
</body>
</html>
20. background-color - property defines the background color for an
HTML element
Ex:
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

21. <strong> - element defines text with strong importance


Ex:
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
Output:

22. <em> - element defines emphasized text


Ex:
<p><em>This text is
emphasized.</em></p> Output:

23. <sub> - element defines subscript text


Ex:
<p>This is <sub>subscripted</sub> text.</p>
Output:

24. <table> - consists of table cells inside rows and columns


<tr> - stands for row
<td> - stands for column
<th> - table header
Ex:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Output:

25. Class - attribute is often used to point to a class name in a style sheet
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
26. <iframe> - tag specifies an inline frame
Ex:
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>
27. <form> - element is used to create an HTML form for user input
i. <input> element is the most used form element.
<input type="text"> defines a single-line input field
<label> tag defines a label for many form elements
<input type="radio"> defines a radio button
<input type="checkbox"> defines a checkbox
<input type="submit"> defines a button for submitting the form
data

Result:
Ex.No. : 1 (b)

Date :

Aim:

Procedure:
Study of Basic CSS Properties
1. Universal Selector (*)
Description: Selects all elements on the page.
Example:
* { color: red; }
2. Type Selector (Element Selector)
Description: Selects all elements of a specific type.
Example:
p { color: blue; }
3. Class Selector (.)
Description: Selects all elements with a specific class.
Example:
.box { background-color: yellow; }
4. ID Selector (#)
Description: Selects an element with a specific ID.
Example:
#header { font-size: 20px; }
5. Descendant Selector (Space)
Description: Selects elements that are descendants of another element.
Example:
div p { color: green; }
6. Child Selector (>)
Description: Selects direct child elements of a specified element.
Example:
div > p { color: orange; }
7. Attribute Selector ([attribute])
Description: Selects elements with a specific attribute.
Example:
input[type="text"] { border: 2px solid black; }
8. Pseudo-classes (:)
Description: Selects elements in a specific state.
Example:
a:hover { color: red; }
9. Pseudo-elements (::)
Description: Selects part of an element, like the first letter or first line.
Example:
p::first-letter { font-weight: bold; }
10. Grouping Selector (,)
Description: Selects multiple elements at once.
Example:
h1, h2, h3 { font-family: Arial, sans-serif; }
11. Adjacent Sibling Selector (+)
Description: Selects an element that is immediately preceded by a specified
element.
Example:
h1 + p { color: blue; }
12. General Sibling Selector (~)
Description: Selects all elements that are siblings of a specified element.
Example:
h1 ~ p { color: green; }

Basic CSS Properties


1. Color
Description: Sets the text color of an element.
Example:
p { color: red; }
2. background-color
Description: Sets the background color of an element.
Example:
body { background-color: lightblue; }
3. font-size
Description: Sets the size of the font.
Example:
h1 { font-size: 24px; }
4. font-family
Description: Specifies the font family for text.
Example:
p { font-family: "Arial", sans-serif; }
5. margin
Description: Sets the margin space around an element.
Example:
div { margin: 20px; }
6. padding
Description: Sets the padding space inside an element.
Example:
div { padding: 10px; }
7. border
Description: Sets the border around an element.
Example:
p { border: 2px solid black; }
8. text-align
Description: Aligns the text inside an element.
Example:
h1 { text-align: center; }
9. display
Description: Controls the display behavior of an element.
Example:
span { display: block; }
10. width
Description: Sets the width of an element.
Example:
img { width: 100%; }
11. height
Description: Sets the height of an element.
Example:
div { height: 200px; }
12. position
Description: Specifies the positioning method for an element.
Example:
.box { position: absolute; top: 50px; left: 100px; }
13. float
Description: Specifies how an element should float.
Example:
img { float: left; }
14. box-shadow
Description: Adds a shadow effect to an element.
Example:
div { box-shadow: 5px 5px 10px gray; }
15. opacity
Description: Sets the transparency level of an element.
Example:
img { opacity: 0.5; }
16. z-index
Description: Controls the stacking order of elements.
Example:
.top { z-index: 1; }
17. transition
Description: Adds a smooth transition effect to changes in properties.
Example:
button { transition: background-color 0.5s ease; }
18. transform
Description: Applies transformations like rotation, scaling, or skewing.
Example:
div { transform: rotate(45deg); }
19. flexbox
Description: A layout model for arranging items in a flexible container.
Example:
.container { display: flex; justify-content: space-between; }
20. grid
Description: A layout model for creating grid-based designs.
Example:
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
21. cursor
Description: Specifies the type of cursor to display when hovering over an
element.
Example:
button { cursor: pointer; }
22. overflow
Description: Controls what happens to content that overflows an element.
Example:
div { overflow: scroll; }
23. visibility
Description: Controls whether an element is visible or hidden.
Example:
.hidden { visibility: hidden; }
24. border-radius
Description: Rounds the corners of an element.
Example:
button { border-radius: 10px; }
25. box-sizing
Description: Controls how the total width and height of an element are calculated.
Example:
div { box-sizing: border-box; }

Result:
Ex.No. : 2 (a)

Date :

Aim:

Procedure:
Program:

Code to design a responsive blog using html and css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dhoni's Cricket Blog</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

nav {
background-color: #0a3d62;
color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}

main {
padding: 20px;
}

.welcome-section {
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}

.welcome-section img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto 20px;
border-radius: 8px;
}

#sections {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}

.section {
flex: 1 1 300px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.section img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 15px;
border-radius: 8px;
}

.section h3 {
margin-top: 0;
color: #333;
}

@media (max-width: 768px) {


nav a {
display: block;
margin: 10px 0;
}

#sections {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#sections">Highlights</a>
<a href="#career">Career</a>
<a href="#contact">Contact</a>
</nav>

<main>
<section class="welcome-section">
<h2>Welcome to Dhoni's Cricket Blog</h2>
<img src="ms1.jpg" alt="MS Dhoni Image">
<p>Explore the legendary journey of Mahendra Singh Dhoni — the Captain Cool of
Indian cricket. From humble beginnings to World Cup triumphs, witness it all here.</p>
</section>

<h2>Dhoni Highlights</h2>
<section id="sections">
<div class="section">
<img src="ms2.jpg" alt="Dhoni World Cup">
<h3>2011 World Cup Glory</h3>
<p>Dhoni's unforgettable six sealed the deal for India in the 2011 ICC Cricket
World Cup final. A moment etched in history.</p>
</div>

<div class="section">
<img src="ms3.jpg" alt="Dhoni Captaincy">
<h3>Captaincy Legacy</h3>
<p>Known for his calm demeanor, Dhoni led India to multiple ICC trophies and
transformed the team into world-beaters.</p>
</div>

<div class="section">
<img src="ms4.avif" alt="Dhoni in IPL">
<h3>IPL Legend</h3>
<p>As the captain of Chennai Super Kings, Dhoni has guided the team to numerous
IPL titles with his brilliant leadership.</p>
</div>
</section>

<section id="career">
<h2>Dhoni's Career Stats</h2>
<p>Over 10,000 ODI runs, numerous match-winning knocks, and leadership records
— Dhoni’s career remains inspirational for generations.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Have questions or want to contribute? Reach out and be part of Dhoni’s fan
community!</p>
</section>
</main>
</body>
</html>
Output:

Result:
Ex.No. : 2 (b)

Date :

Aim:

Procedure:
Program:
Code to design a responsive blog using html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MS Dhoni Fan Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
line-height: 1.6;
}

nav {
background: #003366;
color: #fff;
text-align: center;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
.welcome-section {
text-align: center;
background: #fff;
padding: 20px;
margin: 20px auto;
max-width: 1200px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.welcome-section img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
}

#services {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 20px auto;
max-width: 1200px;
padding: 0 10px;
}

.service {
flex: 1;
min-width: 300px;
background: #fff;
padding: 20px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}

#projects, #contact {
max-width: 1200px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
background: #003366;
color: #fff;
text-align: center;
padding: 15px 0;
}

@media (max-width: 768px) {


nav {
font-size: 14px;
}
#services {
flex-direction: column;
padding: 0;
}
}

@media (max-width: 480px) {


.welcome-section, #projects, #contact {
padding: 10px;
}
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#services">Highlights</a>
<a href="#projects">Milestones</a>
<a href="#contact">Contact</a>
</nav>

<section class="welcome-section">
<h1>Welcome to the MS Dhoni Fan Blog</h1>
<img src="dhoni1.jpg" alt="MS Dhoni in action" />
<p>Celebrate the legacy of Captain Cool — Mahendra Singh Dhoni. From stunning
finishes to iconic leadership moments, relive Dhoni’s cricketing journey with us.</p>
</section>

<h2 style="text-align:center;">Cricketing Highlights</h2>


<section id="services">
<div class="service">
<img src="dhoni2.jpg" alt="Dhoni finishing a match">
<h3>Iconic Finishes</h3>
<p>Dhoni's match-winning six in the 2011 World Cup final still echoes in every
cricket fan's heart. Watch and remember his coolest finishes.</p>
</div>
<div class="service">
<img src="dhoni3.jpg" alt="Dhoni as captain">
<h3>Captaincy Brilliance</h3>
<p>Under Dhoni's leadership, India won all major ICC trophies. He redefined
calmness and smart decision-making on the field.</p>
</div>
<div class="service">
<img src="dhoni4.jpg" alt="Dhoni wicketkeeping">
<h3>Wicketkeeping Magic</h3>
<p>Quickest hands behind the stumps! Dhoni's lightning stumpings and sharp
catches turned matches in India's favor multiple times.</p>
</div>
</section>

<section id="projects">
<h2>Career Milestones</h2>
<p>From his debut in 2004 to his retirement, explore major milestones like his double
century, IPL wins with CSK, and more.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Are you a Dhoni fan too? Share your thoughts or contribute to this blog!</p>
</section>

<footer>
<p>&copy; 2025 Dhoni Fan Club. All rights reserved.</p>
</footer>
</body>
</html>

Output

Result:
Ex.No. : 3

Date :

Aim:

Procedure:
Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Responsive Construction Blog with Bootstrap</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">

<a class="navbar-brand" href="#">Construction Blog</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ms-auto">

<li class="nav-item"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>

<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>

<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>

</ul>
</div>

</div>

</nav>

<!-- Welcome Section -->

<section class="container my-5 text-center">

<h1 class="mb-4">Welcome to Our Construction Blog</h1>

<img src="ms1.jpg" class="img-fluid rounded mb-4" alt="Welcome image">

<p>Discover the latest innovations, updates, and methods in construction. Join us in


exploring the world of building and designing!</p>

</section>

<!-- Services Section -->

<section id="services" class="container my-5">

<h2 class="text-center mb-4">Our Services</h2>

<div class="row g-4">

<div class="col-md-4">

<div class="card h-100">

<img src="ms2.jpg" class="card-img-top" alt="Residential construction">

<div class="card-body text-center">

<h5 class="card-title">Residential Construction</h5>

<p class="card-text">We specialize in building homes tailored to your needs and


style. From design to completion, we ensure high-quality craftsmanship.</p>

</div>

</div>

</div>

<div class="col-md-4">
<div class="card h-100">

<img src="ms3.jpg" class="card-img-top" alt="Commercial construction">

<div class="card-body text-center">

<h5 class="card-title">Commercial Construction</h5>

<p class="card-text">Our team handles commercial projects such as offices, retail


spaces, and warehouses, delivering durable and functional designs.</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card h-100">

<img src="ms4.jpg" class="card-img-top" alt="Renovation services">

<div class="card-body text-center">

<h5 class="card-title">Renovation</h5>

<p class="card-text">We offer expert renovation services to revitalize and


upgrade existing spaces with high-quality finishes and modern designs.</p>

</div>

</div>

</div>

</div>

</section>

<!-- Projects Section -->

<section id="projects" class="container my-5">

<h2 class="text-center mb-4">Our Projects</h2>

<p class="text-center">Explore our latest and upcoming construction endeavors.</p>

</section>
<!-- Contact Section -->

<section id="contact" class="container my-5">

<h2 class="text-center mb-4">Contact Us</h2>

<p class="text-center">Feel free to reach out to us for inquiries or assistance with your
construction needs!</p>

</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Output:
Result
Ex.No. : 4

Date :

Aim:

Procedure:
Program:

Adding functionality to blog

Code to design a responsive blog using html and css

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>MS Dhoni Blog</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>

body {

font-family: Arial, sans-serif;

.welcome-section {

background: url('dhoni-banner.jpg') no-repeat center center;

background-size: cover;

color: white;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

text-align: center;
flex-direction: column;

.welcome-section h1 {

font-size: 4rem;

margin-bottom: 20px;

.welcome-section p {

font-size: 1.2rem;

.btn-welcome {

margin-top: 20px;

.service-desc {

display: none;

margin-top: 10px;

</style>

</head>

<body>

<!-- Welcome Section -->

<section class="welcome-section">
<h1>Welcome to MS Dhoni Blog</h1>

<p>Explore the legacy, mindset, and masterclass moments of Captain Cool.</p>

<a href="#services" class="btn btn-warning btn-welcome">Explore Highlights</a>

</section>

<!-- Navigation Bar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">

<div class="container">

<a class="navbar-brand" href="#">MS Dhoni</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ms-auto">

<li class="nav-item"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" href="#services">Highlights</a></li>

<li class="nav-item"><a class="nav-link"


href="#projects">Achievements</a></li>

<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>

</ul>

</div>

</div>

</nav>

<!-- Highlights Section -->

<div class="container my-5">


<h2 class="text-center" id="services">MS Dhoni's Iconic Highlights</h2>

<div class="row g-4 mt-4">

<!-- Card 1 -->

<div class="col-md-4">

<div class="card text-center h-100">

<img src="2007.jpg" class="card-img-top" alt="T20 World Cup 2007">

<div class="card-body">

<h5 class="card-title">2007 T20 World Cup</h5>

<button class="btn btn-warning toggle-btn">View Description</button>

<p class="service-desc">As a young captain, Dhoni led India to its first T20
World Cup victory, setting the tone for a new era of Indian cricket.</p>

</div>

</div>

</div>

<!-- Card 2 -->

<div class="col-md-4">

<div class="card text-center h-100">

<img src="2011.jpg" class="card-img-top" alt="2011 World Cup Final">

<div class="card-body">

<h5 class="card-title">2011 World Cup Final</h5>

<button class="btn btn-warning toggle-btn">View Description</button>

<p class="service-desc">Dhoni finished the game with a legendary six at


Wankhede, giving India its second ODI World Cup after 28 years.</p>

</div>

</div>
</div>

<!-- Card 3 -->

<div class="col-md-4">

<div class="card text-center h-100">

<img src="ms-six.jpg" class="card-img-top" alt="Finisher Moments">

<div class="card-body">

<h5 class="card-title">Master Finisher</h5>

<button class="btn btn-warning toggle-btn">View Description</button>

<p class="service-desc">With unmatched calmness and precision, Dhoni has


finished countless games for India and CSK under pressure.</p>

</div>

</div>

</div>

</div>

</div>

<!-- Toggle Description Script -->

<script>

$(document).ready(function () {

$(".toggle-btn").click(function () {

$(this).siblings(".service-desc").slideToggle();

const newText = $(this).text() === "View Description" ? "Hide Description" :


"View Description";

$(this).text(newText);

});
});

</script>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

OUTPUT :

Result:

You might also like