Scribd
Upload
22 views7 pages

Exp8 10

Uploaded by

prakharrajchaurasia12
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
22 views7 pages

Exp8 10

Uploaded by

prakharrajchaurasia12
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/ 7

Experiment No: 8

Aim: CSS: Design a web page using CSS(Cascading Style Sheets) which includes
the following:
1) Use different font, styles:
In the style definition you define how each selector should work(font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page.
Software Required: Notepad,SDK

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exp_8</title>
<style>
h1{
font-family: 'Times New Roman', Times, serif;
color: white;
text-align: center;
}
.content{
font-size: 40px;
font-family: 'Courier New', Courier, monospace;
color:black;
text-align:center;
font-weight: bold;
width:100%;
height:400px;
}
body{
background-image: url('temp1.png');
background-size: cover;
background-repeat: no-repeat;
}
h1{
background-image: url('temp2.png');
background-size: cover;
background-repeat: no-repeat;
height: 100px;
}

</style>
</head>
<body>
<h1>Welcome to the world of nature!</h1>
<p class="content">Save the nature unless it will get destroy.</p>
</body>
</html>
Output:
Experiment No: 10

Aim: CSS: Design a web page using CSS(Cascading Style Sheets) which includes
the following:
3) Use different font, styles:
In the style definition you define how each selector should work(font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
4) Set a background image for both the page and single elements on the page.
Software Required: Notepad,SDK

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exp_9</title>
<style>
h1{
text-align: center;
font-size: 90px;
background-color: rgb(147, 147, 214);
}
form{
background-color: white;
max-width: 500px;
margin-left: 450px;
padding: 25px;
height:1200px;
}
.formlayout{
background-image: url('temp3.png');
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 1400px;
}
.details{
text-align: left;
margin-bottom: 25px;
}
.details label{
display: block;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.details input, .details textarea, .details select{
border: 1px solid black;
border-radius: 2px;
padding: 10px;
display: block;
width:95%;
}
.details input[type='radio'], .details input[type='checkbox']
{
display: inline-block;
width:auto

}
button
{
border: 1px solid black;
border-radius: 20px;
background-color:rgb(147, 147, 214);
font-size: 21;
display: block;
width: 100%;
height:40px;
margin-top: 50px;
margin-bottom: 20px;
}

</style>
</head>
<body>
<h1>GL Bajaj Survey Form</h1>
<div class="formlayout">
<form>
<div class="details">
<label for="name">
Name
</label>
<input type="text" id="name" placeholder="Enter your name">
</div>
<div class="details">
<label for="email">
Email
</label>
<input type="email" id="email" placeholder="Enter your email">
</div>
<div class="details">
<label for="age">
Age
</label>
<input type="text" id="age" placeholder="Enter your age">
<div class="details">
<label for="role">
Which option describes you the best?
</label>
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">Professional</option>
<option value="other">Other</option>
</select>
</div>
<div class="details">
<label>
Would you recommend GL Bajaj to someone else?
</label>
<label for="recommend1">
<input type="radio" id="y" name="y">Yes</input>
</label>
<label for="recommend2">
<input type="radio" id="n" name="n">No</input>
</label>
<label for="recommend3">
<input type="radio" id="m" name="m">Maybe</input>
</label>
</div>
<div class="details">
<label for="lang">
Languages known
<small>(tick what ever applied)</small>
</label>
<label for="i1">
<input type="checkbox" name="in">C</input>
</label>
<label for="i2">
<input type="checkbox" name="in">C++</input>
</label>
<label for="i3">
<input type="checkbox" name="in">C#</input>
</label>
<label for="i4">
<input type="checkbox" name="in">Python</input>
</label>
<label for="i5">
<input type="checkbox" name="in">Java</input>
</label>
<label for="i6">
<input type="checkbox" name="in">Javascript</input>
</label>
<label for="i7">
<input type="checkbox" name="in">HTML</input>
</label>
<label for="i8">
<input type="checkbox" name="in">CSS</input>
</label>
<label for="i9">
<input type="checkbox" name="in">R</input>
</label>
<label for="i10">
<input type="checkbox" name="in">API</input>
</label>
</div>
<div class="details">
<label for="comment">
Any comments or suggestions
</label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Enter your
comment here"></textarea>
</div>
<button type="submit" value="submit">
Submit
</button>
</form>
</div>
</body>
</html>
Output:

You might also like