Program1: Ayush Dhamanda Bvoc Sem-4

Program1
CODING OF CSS WEBPAGE
<!DOCTYPE html>
<html>
<head>
<center>
<style>
h1 {
color:red;
text-shadow: 3px 2px yellow;
}
div.ex1 {
border: 1px solid #ff6666;
outline-style: solid;
outline-color: red;
outline-offset: 10px;
}
img.ex2
{
border: 1px solid #ff0000;
outline-style: dotted;
outline-color:yellow;
outline-width:thick;
}
div {
width: 320px;
padding: 10px;
border: 5px solid pink;
margin: 0;
Ayush Dhamanda
Bvoc Sem-4th
02111418117
text-align: justify;
text-transform: capitalize;
font-family: "Times New Roman", Times, serif;
}
</style>
</center>
</head>
<center>
<body bgcolor="#FFA07A">
<h1><u>MOUNTAIN:</u></h1>
<img class="ex2" src="Mountain_big.jpg" width="350" height="263" alt="Mountain">
<br><br>
<div class="ex1">A mountain is a large landform that rises above the surrounding land in a limited
area, usually in the form of a peak. A mountain is generally steeper than a hill. Mountains are formed
through tectonic forces or volcanism. These forces can locally raise the surface of the earth.</div>
</center>
</body>
</html>
Output
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Program 2
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background: #ffffff url("image.jpg") no-repeat right top;
margin-right: 150px;
}
table {
border-collapse: collapse;
width: 70%;
}
th, td {
text-align: left;
padding: 6px;
}
tr:nth-child(odd){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
ol {
background: #ff9999;
padding: 20px;
}
ul
background: #3399ff;
Ayush Dhamanda
Bvoc Sem-4th
02111418117
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 10px;
margin-left:45 px;
}
ul li {
background: #cce5ff;
margin:5px;
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<h2><u>TABLE</u></h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Salary</th>
</tr>
<tr>
<td>priti</td>
<td>kapoor</td>
<td>11,000</td>
</tr>
<tr>
<td>Mayank</td>
<td>Verma</td>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
<td>10,000</td>
</tr>
<tr>
<td>Ishani</td>
<td>Sharma</td>
<td>8,000</td>
</tr>
<tr>
<td>Aakash</td>
<td> Dixit</td>
<td>10,000</td>
</tr>
</table>
<br><br><br>
<h1><u>Lists With Colors:</h1></u>
<ol>
<li>Realme</li>
<li>oppo</li>
<li>Mi</li>
</ol>
<ul>
<li>Realme</li>
<li>oppo</li>
<li>Mi</li>
</ul>
</body>
</html>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Output
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Program 3
<!DOCTYPE html>
<html>
<head>
<style>
body
background-image: url("pexels-photo2.jpeg");
h2
color:Red;
div.gallery {
border: 1px solid #ccc;
div.gallery:hover {
border: 1px solid #777;
div.gallery img {
width: 100%;
height: auto;
div.desc {
padding: 15px;
text-align: center;
*{
Ayush Dhamanda
Bvoc Sem-4th
02111418117
box-sizing: border-box;
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
.clearfix:after {
content: "";
display: table;
clear: both;
</style>
</head>
<body>
<u><h2>Css Image Gallery</h2></u>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="tiger-tiger-baby.jpeg">
Ayush Dhamanda
Bvoc Sem-4th
02111418117
<img src="tiger-tiger-baby.jpeg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of
dark vertical stripes on reddish-orange fur with a lighter underside.</div>
</div>
</div>
<a target="_blank" href="wolf-torque.jpeg">
<img src="wolf-torque.jpeg" alt="Wolf" width="600" height="400">
</a>
<div class="desc">They are known to roam large distances, perhaps 12 miles in a single day. These social
animals cooperate on their preferred prey—large animals such as deer, elk, and moose. When they are
successful, wolves do not eat in moderation</div>
</div>
</div>
<a target="_blank" href="pexels-photo.jpeg">
<img src="pexels-photo.jpeg" alt="Butterfly" width="600" height="400">
</a>
<div class="desc">Butterflies are beautiful, flying insects with large scaly wings. Like all insects, they have
six jointed legs, 3 body parts, a pair of antennae, compound eyes, and an exoskeleton</div>
</div>
</div>
<a target="_blank" href="pexels-photo1.jpeg">
<img src="pexels-photo1.jpeg" alt="Elephant" width="600" height="400">
</a>
<div class="desc">Elephants are the largest land animals on Earth. They have characteristic long noses, or
trunks; large, floppy ears; and wide, thick legs. There are two species of elephant</div>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
</div>
</div></body></html>
OUTPUT
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Program 4
<html>
<head>
<title>PARAGRAPH</title>
<style>
body
{
color:black;
background-image:url("images.jpg");
}
h1
{
color:Violet;
text-align:left;
}
.cat
{
border:6px solid LightGray ;
}
p
{
text-transform: capitalize;
text-indent:50%;
text-outline:4px;
}
</style>
</head>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
<body>
<fieldset>
<legend> INFORMATION</legend>
<h1>AMAZON</h1>
<img class="cat" src="Amazon-1-770x433.jpg" width="100" height="100" border="10">
<P>At Amazon, we’re able to innovate and delight customers thanks
to our incredible workforce—the more than 250,000 full-time associates
behind our global network of fulfillment centers. Amazon Fulfillment is where
our employees, technology and innovation come together every day to delight customers.Amazon is
the most valuable public company in the world ahead of Apple and Alphabet.[8] It is the largest e-
commerce marketplace and cloud computing platform in the world as measured by revenue and
market capitalization.[9] Amazon.com was founded by Jeff Bezos on July 5, 1994, and started as an
online bookstore but later diversified to sell video downloads/streaming, MP3 downloads/streaming,
audiobook downloads/streaming, software, video games, electronics, apparel, furniture, food, toys,
and jewelry. The company also owns a publishing arm, Amazon Publishing, a film and television
studio, Amazon Studios, produces consumer electronics lines including Kindle e-readers, Fire
tablets, Fire TV, and Echo devices, and is the world's largest provider of cloud infrastructure services
(IaaS and PaaS) through its AWS subsidiary.[10] Amazon has separate retail websites for some
countries and also offers international shipping of some of its products to certain other countries.100
million people subscribe to Amazon Prime.</P>
<h1>FLIPKART</h1>
<img class="cat" src="gettyimages-956327810-612x612.jpg" width="100" height="100"
border="10">
<P>Flipkart Pvt Ltd. is an Indian electronic commerce company based in Bengaluru, India.
Founded by Sachin Bansal and Binny Bansal in 2007, the company initially focused on book sales,
before expanding into other product categories such as consumer electronics, fashion, and lifestyle
products.
Flipkart Pvt Ltd. is an Indian electronic commerce company based in Bengaluru, India. Founded by
Sachin Bansal and Binny Bansal in 2007, the company initially focused on book sales, before
expanding into other product categories such as consumer electronics, fashion, and lifestyle
products.The service competes primarily with Amazon' s Indian subsidiary, and the domestic rival
Snapdeal.[5][6] as of March 2017, Flipkart held a 39.5% market share of India's e-commerce
industry.[7] Flipkart is significantly dominant in the sale of apparel (a position that was bolstered by
its acquisitions of Myntra and Jabong.com), and was described as being "neck and neck" with
Amazon in the sale of electronics and mobile phones.[8] Flipkart also owns PhonePe, a mobile
payments service based on the Unified Payments Interface (UPI).</P>
<h1>MYNTRA</h1>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
<img class="cat" src="myntra-squarelogo-1536411106462.png" width="100" height="100"
border="10">
<P>Established by Mukesh Bansal along with Ashutosh Lawania and Vineet Saxena; Myntra sold
on-demand personalized gift items.
It mainly operated on the B2B (business-to-business) model during its initial years. Between 2007
and 2010,
the site allowed customers to personalize products such as T-shirts, mugs, mouse pads, and
others.Established by Mukesh Bansal along with Ashutosh Lawania and Vineet Saxena; Myntra sold
on-demand personalized gift items. It mainly operated on the B2B (business-to-business) model
during its initial years. Between 2007 and 2010, the site allowed customers to personalize products
such as T-shirts, mugs, mouse pads, and others.In 2011, Myntra began selling fashion and lifestyle
products and moved away from personalisation. By 2012 Myntra offered products from 350 Indian
and International brands. The website launched the brands Fastrack Watches and Being Human.
In 2014 Myntra was acquired by Flipkart in a deal valued at ?2,000 crore (US$280 million). The
purchase was influenced by two large common shareholders, Tiger Global and Accel
Partners.Myntra functions and operates independently.Myntra continues to operate as a standalone
brand under Flipkart ownership, focusing primarily on "fashion-conscious" consumers.
In 2014, Myntra's portfolio included about 1,50,000 products of over 1000 brands, with a distribution
area of around 9000 pincodes in India.In 2015, Ananth Narayanan became the Chief Executive
Officer of Myntra.</P>
</fieldset>
</body>
</html>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
OUTPUT
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Program 5
CODING OF CANVAS
<!DOCTYPE html>
<html>
<body>
<center>
<h1> <u>CANVAS WEBPAGE </u></h1>
<br>
<canvas id="myCanvas" width="800" height="400" style="border:4px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(0,0);
ctx.stroke();
var grd = ctx.createLinearGradient(0, 0, 900, 0);
grd.addColorStop(0,"pink");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 900, 400);
ctx.font = "40px Arial";
ctx.strokeText("HTML(Hyper Link Markup Language)",40,80);
</script>
</center></body></html>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Output
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Program 6
CODING OF CANVAS
<!DOCTYPE html>
<html>
<body bgcolor="pink">
<center>
<h1> <u>CANVAS IMAGE</h1></u>
<p>Image to use:</p>
<img id="Photo" src="img_the_Photo.jpg" alt="The Photo" width="150" height="180">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="150" height="180"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var img = document.getElementById("Photo");
ctx.drawImage(img,0,0);
}
</script>
</center>
</body>
</html>
Ayush Dhamanda
Bvoc Sem-4th
02111418117
Output
Ayush Dhamanda
Bvoc Sem-4th
02111418117

Program1: Ayush Dhamanda Bvoc Sem-4

Uploaded by

Document Information

Original Description:

Original Title

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

Program1: Ayush Dhamanda Bvoc Sem-4

Uploaded by

Copyright:

Available Formats

Program1

CODING OF CSS WEBPAGE

border: 1px solid #ccc;

border: 1px solid #777;

@media only screen and (max-width: 700px) {

@media only screen and (max-width: 500px) {

<u><h2>Css Image Gallery</h2></u>

<a target="_blank" href="tiger-tiger-baby.jpeg">

<a target="_blank" href="wolf-torque.jpeg">

<img src="wolf-torque.jpeg" alt="Wolf" width="600" height="400">

<a target="_blank" href="pexels-photo.jpeg">

<img src="pexels-photo.jpeg" alt="Butterfly" width="600" height="400">

<a target="_blank" href="pexels-photo1.jpeg">

<img src="pexels-photo1.jpeg" alt="Elephant" width="600" height="400">

You might also like