Practical 12

IMAGES AND LINKS
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/logo.jpg">
<title>Modern Website with Visuals and Links</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
.navbar {
background-color: #3b5998;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.navbar a {
float: right; /* Float items to the right */
display: block;
color: #f4f4f9;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-weight: bold;
.navbar a:hover {
background-color: #2b3d69;
.section {
padding: 80px 20px;
text-align: center;
margin-top: 60px;
.section img {
max-width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
.section h1 {
color: #3b5998;
font-size: 36px;
margin-bottom: 20px;
.section p {
font-size: 18px;
line-height: 1.8;
max-width: 800px;
margin: 20px auto;
color: #555;
.btn {
display: inline-block;
padding: 12px 30px;
background-color: #bed638;
color: #fff;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s ease;
.btn:hover {
background-color: #a5c82b;
.content-section {
display: flex;
justify-content: space-around;
align-items: center;
padding: 60px 20px;
background-color: #fff;
.content-section img {
max-width: 400px;
.content-section div {
max-width: 500px;
text-align: left;
.content-section h2 {
font-size: 28px;
color: #3b5998;
.content-section p {
font-size: 18px;
color: #666;
line-height: 1.7;
}
footer {
background-color: #282828;
color: #f4f4f9;
padding: 60px 20px;
text-align: center;
margin-top: 40px;
footer .footer-content {
display: flex;
flex-direction: column;
gap: 25px;
footer h3 {
font-size: 28px;
color: #bed638;
footer p {
font-size: 16px;
max-width: 800px;
text-align: center;
line-height: 1.6;
.contact-info {
font-size: 18px;
margin-top: 30px;
iframe {
width: 100%;
max-width: 600px;
height: 300px;
border: none;
margin-top: 20px;
</style>
</head>
<body>
<h2> SUGATHI </h2>
<h2>RCAS2023BIT025</h2>
<div class="navbar">
<a href="contactus.html">Contact Us</a>
<a href="gallery.html">Gallery</a>
<a href="services.html">Services</a>
<a href="aboutus.html">About Us</a>
<a href="home.html">Home</a>
</div>
<centre><h1>Sachin Immanuel Leo.S</h1>
<h2>RCAS2023BIT007</h2></centre>
<div class="section">
<h1>Welcome to Our Modern Website</h1>
<p>Explore a world of premium services and high-quality products. We are committed to delivering
exceptional experiences tailored to your needs.</p>
<img src="bg1.jpg" alt="Website Image">
<br><br>
<a href="services.html" class="btn">Learn More</a>
</div>
<div class="content-section">
<img src="services.png" alt="Our Services">
<div>
<h2>Our Services</h2>
<p>We offer a wide range of services including custom solutions, professional consulting, and
product delivery. Our team is dedicated to providing the highest level of quality in everything we do.
Whether you’re looking for a personalized experience or ready-to-go products, we’ve got you
covered.</p>
<a href="services.html" class="btn">Explore Services</a>
</div>
</div>
<footer>
<div class="footer-content">
<h3>About Us</h3>
<p>We are passionate about creating experiences that leave a lasting impact. Our mission is to
offer products and services that enhance your life and make your journey unforgettable.</p>
<p>Location: 1234 Example Street, City Name, Country</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3151.8354345095563!2d144.9630579159044!3d-37.81410797975171!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf0727c2d8aa93e0b!2sFederation%20Square!5e0!
3m2!1sen!2sau!4v1634613557643!5m2!1sen!2sau"
allowfullscreen=""
loading="lazy">
</iframe>
<div class="contact-info">
<p><strong>Contact Us:</strong></p>
<p>Email: [email protected]</p>
<p>Phone: +123-456-7890</p>
</div>
</div>
</footer>
</body>
</html>
Calender
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calendar</title>
<style>
table {
margin: 0 auto;
border-collapse: collapse;
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
th {
caption {
font-size: 25px;
font-weight: bold;
}
.sunday{
color: #ff0000;
</style>
</head>
<body>
<center>
<h2>SUGATHI<br>RCAS2023BIT025</h2></center>
<table>
<caption>October 2024</caption>
<thead>
<tr>
<th class="sunday">Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="sunday">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
List of five flowers

<!DOCTYPE html>
<html>
<head>
<title>flowers</title>
</head>
<body>
<h2> SUGATHI </h2>
<h2> RCAS2023BIT025 </h2>
<ol>
<li><a href="ghost orchid.html">ghost orchid</a></li>
<li><a href="flame lily.html">flame lily</a></li>
<li><a href="Hydrangea.html">Hydrangea</a></li>
<li><a href="jade vine.html">jade vine</a></li>
<li><a href="Boganvilla.html">boganvilla</a></li>
</ol>
</body>
</html>
GHOST ORCHID
<!DOCTYPE html>
<html>
<head>
<title>ghost orchid</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<p><h3>GHOST ORCHID</h3></p>
<img src="C:\Users\santh\OneDrive\Desktop\ghost orgid.jpeg">
<p><h2>GHOST ORCHID</h2></p>
<p> the ghost orchid is a rare perennial<br> epiphyte from the orchid family.<br>
It is native to Florida, the Bahamas, and Cuba.<br> Other common names include palm polly<br>
and white frog orchid.</p>
</body>
</html>
FLAME LILY
<!DOCTYPE html>
<html>
<head>
<title>Flame lily</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<p><h2>FLAME lily</h2></p>
<img src="C:\Users\santh\OneDrive\Desktop\flame lily.jpeg">
<p><h2>BENIFITS OF FLAME LILY</h2></p>
<p>Gloriosa is a genus of 12 species in the plant family Colchicaceae, <br>and includes the formerly
recognised genus Littonia.<br> They are native in tropical and southern Africa to Asia,<br> and
naturalised in Australia and the Pacific <br>as well as being widely cultivated</p>
</body>
</html>
HYDRANGEA
<!DOCTYPE html>
<html>
<head> `
<title>Hydrangea</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<p><h2>Hydrangea</h2></p>
<img src="C:\Users\santh\OneDrive\Desktop\hydrangea.jpeg">
<p><h2>BENIFITS OF HYDRANGEA</h2></p>
<p>You know summer is here when big, showy hydrangea bushes<br> begin gracing gardens across
the country. This perennial,<br> a native of East Asia and the Americas, <br>comprises more than 75
species and 600 cultivated varieties, <br>of which mophead, lacecap, oakleaf, and peegee are the most
common.<br> Some hydrangea flowers can turn a pretty<br> pink or blue depending on the acidity or
alkalinity of the soil, while others will remain white. Mopheads, lacecaps<br>, and oakleafs bloom on
the previous year's wood and can be pruned in the summer after flowering; peegees<br> bloom on this
year's wood and can be pruned in the late winter, before the new spring growth.</p>
</body>
</html>
JADE VINE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<p><h2>jade vine</h2></p>
<img src="C:\Users\santh\OneDrive\Desktop\jade vine.jpeg">
<p><h2>BENIFITS OF JADE VINE</h2></p>
<p>Strongylodon macrobotrys, commonly known as the jade vine, emerald vine, <br>or turquoise
jade vine, is a leguminous vine endemic to the Philippines.<br> It is a popular ornamental plant known
for its cascading clusters <br>of vibrant turquoise or greenish-blue claw-shaped flowers.</p>
</body>
</html>
BOGANVILLA
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<p><h2>Boganvilla</h2></p>
<img src="C:\Users\santh\OneDrive\Desktop\Boganvilla.jpeg">
<p><h2>BENIFITS OF BOGANVILLA</h2></p>
<p>boganvilla are one of the most popular flower types and are best known for<br> their dazzling
yellow color and large size. They generally<br> symbolize adoration, loyalty, and longevity in the
language of flowers.<br> Native Americans view boganvilla as a symbol <br>of harvest and bounty since
the flower provides seeds and pigments,<br> in addition to being visually beautiful.<br> boganvilla need
direct sunlight for six to eight hours per day and <br>require hot conditions to flower well. boganvilla
<br>also have long roots that require plenty of room to spread out, so soil should be well dug and not
too dense for growth.</p>
</body>
</html>
FRAME SET
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cars List with Iframe</title>
<style>
#carList {
width: 30%;
float: left;
#carDisplay, #carDisplay2 {
width: 35%;
float: left;
text-align: center;
iframe {
border: 1px solid #ccc;
width: 500px;
height: 500px;
iframe img {
width: 10px;
height: 5px;
</style>
<script>
function displayCar(imageUrl, descriptionUrl) {
document.getElementById('carFrame').src = imageUrl;
document.getElementById('carFramedes').src = descriptionUrl;
</script>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BITO25</h2>
<div id="carList">
<h2>Car List</h2>
<ul>
<li><a href="#" onclick="displayCar('toyota.jpg', 'toyota-des.html')">Toyota</a></li>
<li><a href="#" onclick="displayCar('mustang.jpg', 'mustang- des.html')">Ford

Mustang</a></li>
<li><a href="#" onclick="displayCar('bmw-i8.jpg', 'bmw- des.html')">BMW i8</a></li>
<li><a href="#" onclick="displayCar('audi-r8.jpg', 'audi- des.html')">Audi R8</a></li>
<li><a href="#" onclick="displayCar('corvette.jpg', 'corvette- des.html')">Chevrolet

Corvette</a></li>
</ul>
</div>
<div id="carDisplay">
<h2>Car Image</h2>
<iframe id="carFrame" src="" frameborder="0"></iframe>
</div>
<div id="carDisplay2">
<h2>Car Description</h2>
<iframe id="carFramedes" src="" frameborder="0"></iframe>
</div>
</body>
</html>
TOYOTA
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toyota Camry</title>
</head>
<body>
<h2> SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<h1>Toyota Camry</h1>
<img src="C:\Users\santh\OneDrive\Desktop\download 1 C.jpeg">
<p>The Toyota Camry is a mid-size sedan known for its reliability, <br>comfort, and fuel efficiency. It's a
popular choice for daily commuting and family travel.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.<br> Doloremque vero deserunt vitae qui
ullam laudantium sequi<br> autem sapiente asperiores! Vel quasi fuga ipsa pariatur, tempore,
exercitati</p>
</body>
</html>
MUSTANG
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toyota Camry</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<h3>Ford Mustang</h3>
<img src="C:\Users\santh\OneDrive\Desktop\download 2 c.jpeg">
<p>The Ford Mustang is a mid-size sedan known for its reliability,<BR> comfort, and racing. It's a
popular choice for daily commuting </p>
<p>Lorem, ipsum dolor sit amet consectetur elit.<BR> Doloremque vero deserunt vitae qui ullam
laudantium sequi <br>autem sapiente asperiores! Vel quasi fuga ipsa pariatur, tempore, exercitati</p>
</body>
</html>
BMW
<!DOCTYPE html>
<html lang="en">
<head>
<title>BMW</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BITO25</h2>
<h3>bmw-i8</h3>
<img src="C:\Users\santh\OneDrive\Desktop\BMW.jpeg">
<p>The BMW is a mid-size sedan known for its reliability,<BR> comfort, and fuel efficiency. It's a
popular choice <br>sfor daily commuting and family travel.</p>
</body>
</html>
AUDI
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audi</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<h3>Audi R8</h3>
<img src="C:\Users\santh\OneDrive\Desktop\download 3 c.jpeg">
<p>The Audi R8is a mid-size sedan known for its reliability, <br>comfort, and fuel
efficiency.<br> It's a popular choice for daily commuting and family travel.</p>
</body>
</html>
CHEVROLET
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chevrolet Corvette</title>
</head>
<body>
<h2>SUGATHI.A</h2>
<h2>RCAS2023BIT025</h2>
<h3>Chevrolet Corvette</h3>
<img src="C:\Users\santh\OneDrive\Desktop\download4 c.jpeg">
<p>The Chevrolet Corvette is a mid-size sedan known for its reliability, <br>comfort, and fuel
efficiency.<br> It's a popular choice for daily commuting and family travel.</p>
</body>
</html>
FORM
<!DOCTYPE html>
<html>
<head>
<title>anbu</title>
<style>
.bg{
color:white;
background-color:black;
</style>
</head>
<body>
<h2> SUGATHI</h2>
<h2> RCAS2023BIT025</h2>
<form>
<center>
<div class="bg">
<h2>SUGATHI<br>RCAS2023BIT025</h2>
<lable>username</lable>
<input type="text" id="ds" name="jack" placeholder="user name"><br></br>
<lable>password</lable>
<input type="password"><br></br>
<lable>email</lable>
<input type="email" id="ss" name="nila"><br></br>
<lable>phone.no</lable>
<input type="number" ><br></br>
<lable>age</age>
<input type="number"><br></br>
<label>gender</label>
<input type="radio"name="radio">
<label>Male</label>
<input type="radio"name="radio">
<label>Female</label><br></br>
<p id="demo"></p>
<button type="button" onclick='document.getElementById()'></button>
<label>singing</label>
<input type="checkbox" name="checkbox"><br></br>
<label>reading</label>
<input type="checkbox" name="checkbox"><br></br>
<label>choose a department</label>
<select>
<option value="gg"></option>
<option value="dd">CSE</option>
<option value="ss">EEE</option>
<option value="cc">IT</option>
</select><br></br>
<label>file</label>
<input type="file"><br></br>
<label>address</label>
<textarea>
</textarea>
<p id="demo"></p>
<button type="button" onclick='document.getElementById("demo").innerHTML="you have

submited"'>submit</button>
<p id="hi"></p>
<button type="button" onclick='document.getElementById("hi").innerHTML="your form has

beeen cancelled"'>cancel</button>
</div>
</center>
</form>
</body>
</html>
EMBED MEDIA
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embed Audio and Video</title>
</head>
<body>
<h2> SUGATHI </h2>
<h2> RCAS2023BIT025 </h2>
<h1>Embedded Audio and Video</h1>

<h2>Audio Example</h2>
<audio controls>
<source src="Badass Leo 128 .mp3.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

<h2>Video Example</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/73QmOb3L0fU?

si=1SVOnDl5YOWqJnBx" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body></html>
CSS
<!DOCTYPE html>
<html>
<head>
<title>Rotate Element</title>
<style>
body {
background: linear-gradient(135deg, #a2d2ff, #cdb4db);
display: flex;
justify-content: center;
height: 100vh;
margin: 0;
.rotate-box { width: 200px; height: 200px;
background: linear-gradient(135deg, #ffafbd, #ffc3a0); border-radius: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); text-align: center;
line-height: 200px; font-size: 24px; font-weight: bold; color: white;
transition: transform 0.6s ease, box-shadow 0.6s ease, background 0.6s ease; transform:
rotate(45deg) scale(1);
.rotate-box:hover {
transform: rotate(360deg) scale(1.1);
background: linear-gradient(135deg, #6dd5ed, #2193b0);
}
h1 {
color: #333;
text-align: center;
</style>
</head>
<body>
<div class="rotate-box"> Hover Me!
</div>
</body>
</html>
SIMPLE QUIZZ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
.quiz-container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
button {
margin-top: 20px;
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
</style>
</head>
<body>
<H2>SUGATHI.A</H2>
<H2> RCAS2023BIT025</H2>
<div class="quiz-container">
<h1>Simple Quiz</h1>
<form id="quizForm">
<div>
<h3>1. What is the capital of France?</h3>
<label><input type="radio" name="q1" value="a"> A) Paris</label><br>
<label><input type="radio" name="q1" value="b"> B) London</label><br>
<label><input type="radio" name="q1" value="c"> C) Berlin</label><br>
</div>
<div>
<h3>2. Who wrote 'Romeo and Juliet'?</h3>
<label><input type="radio" name="q2" value="a"> A) Charles Dickens</label><br>
<label><input type="radio" name="q2" value="b"> B) William Shakespeare</label><br>
<label><input type="radio" name="q2" value="c"> C) Mark Twain</label><br>
</div>
<div>
<h3>3. What is the largest planet in our solar system?</h3>
<label><input type="radio" name="q3" value="a"> A) Earth</label><br>
<label><input type="radio" name="q3" value="b"> B) Jupiter</label><br>
<label><input type="radio" name="q3" value="c"> C) Mars</label><br>
</div>
<button type="button" onclick="submitQuiz()">Submit</button>
</form>
<div id="result" style="margin-top: 20px;"></div>
</div>
<script>
function submitQuiz() {
const answers = {
q1: 'a',
q2: 'b',
q3: 'b'
};
let score = 0;
const form = document.forms['quizForm'];
for (const question in answers) {
const userAnswer = form[question].value;
if (userAnswer === answers[question]) {
score++;
}
}
const totalQuestions = Object.keys(answers).length;
document.getElementById('result').innerText = `You scored ${score} out of ${totalQuestions}.`;
</script>
</body>
</html>

Practical 12

Uploaded by

Copyright:

Available Formats

Practical 12

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical 12

Uploaded by

Copyright:

Available Formats

IMAGES AND LINKS

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

<link rel="icon" href="images/logo.jpg">

<title>Modern Website with Visuals and Links</title>

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

float: right; /* Float items to the right */

padding: 14px 20px;

padding: 80px 20px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

margin: 20px auto;

padding: 12px 30px;

transition: background-color 0.3s ease;

padding: 60px 20px;

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

padding: 60px 20px;

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

<h2> SUGATHI </h2>

<a href="contactus.html">Contact Us</a>

<a href="aboutus.html">About Us</a>

<h1>Welcome to Our Modern Website</h1>

<img src="bg1.jpg" alt="Website Image">

<a href="services.html" class="btn">Learn More</a>

<img src="services.png" alt="Our Services">

<a href="services.html" class="btn">Explore Services</a>

<p>Location: 1234 Example Street, City Name, Country</p>

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

border: 1px solid #ccc;

List of five flowers

<h2> SUGATHI </h2>

<h2> RCAS2023BIT025 </h2>

<li><a href="ghost orchid.html">ghost orchid</a></li>

<li><a href="flame lily.html">flame lily</a></li>

<li><a href="jade vine.html">jade vine</a></li>

<img src="C:\Users\santh\OneDrive\Desktop\ghost orgid.jpeg">

<img src="C:\Users\santh\OneDrive\Desktop\flame lily.jpeg">

<p><h2>BENIFITS OF FLAME LILY</h2></p>

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

<img src="C:\Users\santh\OneDrive\Desktop\jade vine.jpeg">

<p><h2>BENIFITS OF JADE VINE</h2></p>

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

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

<title>Cars List with Iframe</title>

border: 1px solid #ccc;

function displayCar(imageUrl, descriptionUrl) {

<li><a href="#" onclick="displayCar('toyota.jpg', 'toyota-des.html')">Toyota</a></li>

<li><a href="#" onclick="displayCar('mustang.jpg', 'mustang- des.html')">Ford

<li><a href="#" onclick="displayCar('bmw-i8.jpg', 'bmw- des.html')">BMW i8</a></li>

<li><a href="#" onclick="displayCar('audi-r8.jpg', 'audi- des.html')">Audi R8</a></li>

<li><a href="#" onclick="displayCar('corvette.jpg', 'corvette- des.html')">Chevrolet

<iframe id="carFrame" src="" frameborder="0"></iframe>

<iframe id="carFramedes" src="" frameborder="0"></iframe>

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

<img src="C:\Users\santh\OneDrive\Desktop\download 1 C.jpeg">

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

<img src="C:\Users\santh\OneDrive\Desktop\download 2 c.jpeg">

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

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

<img src="C:\Users\santh\OneDrive\Desktop\download 3 c.jpeg">

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

<img src="C:\Users\santh\OneDrive\Desktop\download4 c.jpeg">