FSD Programs Part1
Uploaded by
saipalavi12yFSD Programs Part1
Uploaded by
saipalavi12yALL FSD PROGRAMS – Part-1
1. Html Program with Basic Elements Tags-Heading,Paragraph Tags and Preserve formatting
tags with Phrase Tags and other formatting tags
<!DOCTYPE html>
<html>
<head>
<!--
1.Title Tag - Title of Webpage
2.Meta Tag - Information of Webpage
3.Style Tag- Internal CSS
4.Link Tag - External CSS
5.Script Tag - Javascript
-->
<title>Basic Learning</title>
</head>
<body>
<h1><center>Html Learning</center></h1>
<h3 style="text-align: center;">
Hypertext <span
style="color:blue">Markup</span> Language</h3>
<p>Lorem ipsum <big>dolor</big> sit amet consectetur
<small>adipisicing</small> elit.<br><hr> Ab est praesentium ea
quisquam ipsam <blockquote>beatae voluptates distinctio
</blockquote>
vel enim optio. <q>Tenetur minima voluptate</q>
debitis maiores dolores, optio blanditiis
dicta eius.</p>
<pre>
public void Fun(){
System.out.println("Welcome");
}
</pre>
<p>H<sub>2</sub>O</p>
<p>(a+b)<sup>2</sup></p>
<p>Cost of KitKat=<del>Rs.110</del>Rs.99</p>
<address>110/2,Gohira Chouk,BBSR.</address>
</body>
</html>
-----------------------------------------------------------------------
2. Html Table with all Table Tags and Design with html attributes only.
<!DOCTYPE html>
<html>
<head>
<title>Html Tables</title>
</head>
<body>
<table border="2" height="300" width="400"
cellpadding="5" cellspacing="5"
bordercolor="green" bgcolor="pink"
style="border-collapse:collapse;">
<caption>Employee's List</caption>
<thead>
<tr>
<td colspan="4">
<center>
<b>List of Employee's Salaries</b>
</center>
</td>
</tr>
</thead>
<tr bgcolor="red">
<th>Name</th>
<th>Age</th>
<th>Place</th>
<th>Salary</th>
</tr>
<tr>
<td>John</td>
<td>23</td>
<td>Delhi</td>
<td>10000</td>
</tr>
<tr>
<td>Rahul</td>
<td>24</td>
<td rowspan="2">Mumbai</td>
<td>15000</td>
</tr>
<tr>
<td>Mona</td>
<td>26</td>
<td>20000</td>
</tr>
<tr>
<td colspan="3">Total Amount</td>
<td bgcolor="green">35000</td>
</tr>
<tfoot>
<tr>
<td colspan="4">
<b>Rupees Thirty Five Thousand Only</b
</td>
</tr>
</tfoot>
</table>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------
3.Html Table – All Table Tags and Design the Table with External CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<link rel="stylesheet" href="style03.css">
</head>
<body>
<table >
<caption>Bill Statement</caption>
<thead>
<tr>
<th colspan="5">
Bill for Sports Items
</th>
</tr>
</thead>
<tr id="col_head">
<th>Item No</th>
<th>Item Name</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</tr>
<tr>
<td>101</td>
<td>Cricket Bat</td>
<td>10</td>
<td>1500</td>
<td>15000</td>
</tr>
<tr>
<td>102</td>
<td>Cricket Ball</td>
<td >5</td>
<td rowspan="2">200</td>
<td>1000</td>
</tr>
<tr>
<td>103</td>
<td>Basket Ball</td>
<td >10</td>
<td>2000</td>
</tr>
<tr>
<td></td>
<td colspan="3">Total Amount</td>
<td id="total">18000</td>
</tr>
<tfoot>
<tr>
<th colspan="5">
Rupees Eighteen Thousand Only
</th>
</tr>
</tfoot>
</table>
</body>
</html>
CSS Style File – style03.css
table{
border: 1px solid green;
border-collapse: collapse;
}
td,th{
border:1px solid green;
padding:5px;
background-color: yellow;
}
#col_head > th{
background-color: red;
}
#total{
background-color: green;
}
td:hover{
background-color: black;
color: white;
}
----------------------------------------------------------------------------------------------------------------------------------
4. Html List – All Types of List with attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Tags</title>
</head>
<body>
<!--Unordered List-->
<ul type="circle" style="color:blue;">
<li>Mercedes</li>
<li>Aston Martin</li>
<li>Maserati</li>
<li>Lamborghini</li>
<li>Bugatti</li>
</ul>
<!--Ordered List-->
<ol type="I" start="7" reversed>
<li>Mercedes</li>
<li>Aston Martin</li>
<li>Maserati</li>
<li>Lamborghini</li>
<li>Bugatti</li>
</ol>
<!--Description/Definition List-->
<dl>
<dt>Mercury:</dt>
<dd>It is a Liquid Metal</dd>
</dl>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
5. Horizontal Navigation Bar using Html List – Unordered List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
body{
background-image: url("Bouquet.jpg");
background-repeat: repeat-y;
background-position: center;
}
ul{
list-style-type: none;
}
ul li{
display: inline;
margin-left: 30px;
}
ul li a{
border:2px solid black;
background-color: aquamarine;
color: black;
padding: 10px;
border-radius: 10px;
text-decoration: none;
}
ul li img{
height:50px;
width:50px;
}
ul li a:hover{
background-color: green;
color: white;
box-shadow: 3px 3px 6px black;
}
</style>
</head>
<body>
<ul>
<li>
<img src="logo01.png" alt="Black_Eagle">
</li>
<li>
<a href="http://www.gec.edu.in" target="_blank">
Gandhi Engg. College
</a>
</li>
<li>
<a href="http://www.w3schools.com" target="_parent">
W3Schools
</a>
</li>
<li>
<a href="http://www.google.com" target="_self">
Search Page
</a>
</li>
<li>
<a href="Bas_SecC02.html" target="_blank">
Sports Bill
</a>
</li>
</ul>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
6. Html Forms – Basic form – FirstName and Lastname
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms</title>
</head>
<body>
<form action="#">
<label for="fn">Enter FirstName:</label>
<input type="text" name="fname" id="fname" size="13"
maxlength="8" value="John" readonly>
<br><br>
<label for="fn">Enter LastName:</label>
<input type="text" name="lname" id="lname" size="13"
maxlength="8" value="Cena" disabled>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
--------------------------------------------------------------------------
7.Html Forms – Create a Login Page using Html Form and Design with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms</title>
</head>
<body style="background-color: bisque;">
<div style="background-color: pink;width:250px;padding: 20px;
margin: auto;margin-top: 150px;border-radius: 20px;
box-shadow: 3px 3px 6px black;">
<h3 style="text-align: center;color:red">LOGIN PAGE</h3>
<form action="#">
<label for="fn">Username:</label>
<input type="text" name="user" id="user" size="13"
maxlength="8" placeholder="Enter Username" required
style="height: 20px; background-color: bisque;">
<br><br>
<label for="fn">Password:</label>
<input type="password" name="pass" id="pass" size="13"
maxlength="8" placeholder="Enter Password" required
style="height: 20px; background-color: bisque;">
<br><br>
<input type="submit" value="Submit">
</div>
</body>
</html>
------------------------------------------------------------------------------
8. Html Form – All Form Elements with their Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html Forms Contin......</title>
</head>
<body>
<label for="">Select Subjects:</label>
<input type="checkbox" name="sub1" value="math">Math
<input type="checkbox" name="sub2" value="english"
checked>Eng
<input type="checkbox" name="sub3" value="Comp.Sci.">
Computer Science
<br><br>
<label for="">Select Gender:</label>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female"
checked>Female
<input type="radio" name="gender" value="other">Other
<br><br>
<label for="">Enter Course:</label>
<select name="course" id="course">
<option value=""></option>
<option value="CSE">CSE</option>
<option value="IT" selected>IT</option>
<option value="CSBS">CSBS</option>
<option value="AIML">AIML</option>
</select>
<br><br>
<!--ComboBox-->
<label for="">Enter Course:</label>
<select name="course" id="course" size="3" multiple>
<option value="CSE">CSE</option>
<option value="IT" selected>IT</option>
<option value="CSBS">CSBS</option>
<option value="AIML">AIML</option>
</select>
<br><br>
<label for="">Enter Date of Birth:</label>
<input type="date" name="birthday" min="2000-01-01"
max="2050-12-31">
<br><br>
<label for="">Enter RollNo:</label>
<input type="number" name="rollno" min="112100"
max="112200" value="112110" step="10">
<br><br>
<label for="">Enter Contact Details:</label>
<textarea name="address" id="address"
rows="10" cols="30">Write Contact details..</textarea>
<br><br>
<label for="">Enter Email_id:</label>
<input type="email" name="email_id"
placeholder="[email protected]">
<br><br>
<label for="">Select a Color:</label>
<input type="color" name="fav_color">
<br><br>
<label for="">Enter a Range:</label>
<input type="range" name="range" min="0" max="100"
value="50" step="10">
<br><br>
<label for="">Upload a File:</label>
<input type="file" name="myfile" id="myfile">
<br><br>
<button onclick="alert('hello C Section')">
Click Me!</button>
<br><br><br>
<input type="tel" name="contactno"
placeholder="091 12345 12345"
pattern="[0-9](3) [0-9](5) [0-9](5)">
</body>
</html>
---------------------------------------------------------------------------
8. Html Form – Create a Registration Form using Html div tag, Html Table and Html Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body style="background-color: azure;">
<div style="outline-offset: 5px;outline:5px inset green;margin: auto;
margin-top: 100px; width:500px;padding:20px;
border-radius: 10px;background-color: burlywood;">
<h3 style="text-align: center;">REGISTRATION FORM</h3>
<form action="">
<table>
<tr>
<td><label for="">Enter First Name:</label></td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td><label for="">Enter Last Name:</label></td>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<td><label for="">Enter Date of Birth:</label></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label for="">Enter Gender:</label></td>
<td>
<input type="radio" name="gender" value="male">
Male
<input type="radio" name="gender" value="female">
Female
<input type="radio" name="gender" value="other">
Other
</td>
</tr>
<tr>
<td>
<label for="">Enter Date of Birth:</label>
</td>
<td>
<input type="date" name="birthday" min="2000-01-01"
max="2050-12-31">
</td>
</tr>
<tr>
<td>
<label for="">Contact Address:</label>
</td>
<td>
<textarea name="address" id="address" rows="5"
cols="30">Write Your Address....</textarea>
</td>
</tr>
<tr>
<td>
<label for="">Contact No:</label>
</td>
<td>
<input type="tel" name="contactno." placeholder="+91
12345 12345" pattern="[0-9](5)-[0-9](5)">
</td>
</tr>
<tr>
<td>
<label for="">Enter Email_id:</label>
</td>
<td>
<input type="email" name="email_id" id="email_id"
placeholder="[email protected]">
</td>
</tr>
<tr>
<td>
<label for="">Enter RollNo:</label>
</td>
<td>
<input type="number" name="rollno" min="112100"
max="112200" value="112110" step="10">
</td>
</tr>
<tr>
<td>
<label for="">Courses:</label>
</td>
<td>
<select name="course" id="course">
<option value="CSE">CSE</option>
<option value="AIML">AIML</option>
<option value="IT" selected>IT</option>
<option value="CSBS">CSBS</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="">Subjects:</label>
</td>
<td>
<input type="checkbox" name="sub1" value="math">Math
<input type="checkbox" name="sub2"
value="english"checked>English
<input type="checkbox" name="sub3"
value="CompSci">ComputerScience
</td>
</tr>
<tr>
<td>
<label for="">Upload a File:</label>
</td>
<td>
<input type="file" name="myfile" id="myfile">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Register">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
--------------------------------------------------------------------------
9. CSS Combinators – Types of Combinators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/*Descendent Combinator (space)*/
div p{
color:blue;
}
/*Child Combinator ( > )*/
div > p{
background-color: aqua;
}
/*Sibling Combinator ( + )*/
div + p{
font-size: xx-large;
}
/*Adjascent Sibling Combinator ( ~ )*/
div ~ p{
background-color: red;
}
</style>
<body>
<div>
<p>It is a paragraph1</p>
<p>It is a paragraph2</p>
<section>
<p>It is a paragraph1 in section</p>
<p>It is a paragraph2 in section</p>
</section>
</div>
<p>It is a paragraph1 outside Div</p>
<p>It is a paragraph2 outside Div</p>
</body>
</html>
-----------------------------------------------------------------------------
10. Other Important Html Elements – Marquee, Font and Media Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Other Important Html Elements</title>
</head>
<body>
<!--Marquee Tag-->
<marquee behavior="scroll" direction="left" scrollamount="20"
width="50%" hspace="200">
<h1>Welcome to Gandhi Engg. College</h1>
</marquee>
<marquee behavior="alternate" direction="right" loop="3">
<img src="Bouquet.jpg" alt="Flower Bouquet">
</marquee>
<marquee behavior="slide" direction="up" scrolldelay="200"
height="300" vspace="100" hspace="100">
<div style="background-color: red;
height: 100px;width:100px"></div>
</marquee>
<!--Font Tag-->
<font size="1">Gandhi</font>
<font size="2">Gandhi</font>
<font size="3">Gandhi</font>
<font size="4">Gandhi</font>
<font size="5">Gandhi</font>
<font size="6">Gandhi</font>
<font size="7">Gandhi</font>
<br><br>
<!--Relative Font Size-->
<font size="-1">Gandhi</font>
<font size="+1">Gandhi</font>
<font size="+2">Gandhi</font>
<font size="+4">Gandhi</font><br><br>
<!--Font Face-->
<font size="7" face="Times New Roman,serif">Gandhi</font>
<font size="7" face="sans-serif">Gandhi</font>
<font size="7" face="monospace">Gandhi</font>
<font size="7" face="cursive">Gandhi</font>
<font size="7" face="Jokerman,fantasy">Gandhi</font>
<br><br>
<!--Media Tag-->
<audio controls autoplay muted>
<source src="Coolie Disco.mp3" type="audio/mp3">
<source src="Coolie Disco.ogg" type="audio/ogg">
</audio>
<br><br>
<video src="Beast Mode - Video Song _ Beast _ Thalapathy Vijay _ Nelson _
Anirudh _ Sun Music.mp4"
controls autoplay muted height="300" width="400"></video>
<br><br>
<iframe width="640" height="360"
src="https://www.youtube.com/embed/uQ0LGwPBC2c?
controls=0&autoplay=1&mute=1"
title="Tom & Jerry in italiano | Un po'
di aria fresca! | WB Kids" 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>
----------------------------------------------------------------------------
11. Creating Horizontal and Vertical Navigation Bar using CSS-Flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav Bar using CSS FlexBox</title>
<style>
.navbar1{
display: flex;
justify-content: space-evenly;
padding: 20px;
}
.navbar1 > a{
font-size: x-large;
background-color: bisque;
color:brown;
text-decoration: none;
padding:10px 20px;
border-radius: 10px 30px;
box-shadow: 2px 2px 5px black;
}
.navbar1 > a:hover{
background-color: black;
color:bisque;
}
.navbar2{
display: flex;
flex-direction: column;
height:300px;
justify-content: space-around;
width:150px;
}
.navbar2 > a{
border:3px solid brown;
padding:10px 30px;
background-color: bisque;
color:brown;
text-align: center;
box-shadow: 5px 5px 10px bisque;
font-size: x-large;
text-decoration: none;
}
</style>
</head>
<body style="background-image: url('Images/bg04.jpeg');
background-size: cover;">
<header style="width:400px; margin: auto;margin-top: 20px;">
<h1 style="font-size: 75px;color:brown;
text-shadow: 2px 2px 5px black;">
<img src="Images/lionlogo1.jpg" alt="lion" height="100"
width="100">SMART BLOGGING
</h1>
</header>
<marquee behavior="slide" direction="left" scrollamount="15">
<nav class="navbar1">
<a href="http://www.google.com" target="_blank">Google</a>
<a href="http://www.yahoo.co.in" target="_parent">Yahoo!</a>
<a href="http://www.w3schools.com" target="_self">W3Schools</a>
<a href="http://www.gec.edu.in" target="_blank">GEC</a>
</nav>
</marquee>
<nav class="navbar2">
<a style="order:3" href="http://www.youtube.com">Youtube</a>
<a style="order:1" href="Bas_SecA03.html">File01</a>
<a style="order:0" href="Bas_SecA05.html">File02</a>
<a style="order:2" href="Bas_SecA06.html">File03</a>
</nav>
</body>
</html>
-------------------------------------------------------------------------
12. CSS-Transform and CSS-Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Transform & CSS-Transition</title>
<style>
/*CSS Transform*/
.container1{
height:50px;
width:150px;
padding:10px;
margin-left: 200px;
background-color:blanchedalmond;
border:2px solid black;
/*transform: scale(0.5);*/
/*transform: translateX(-100px);*/
/*transform: translateY(100px);*/
transform:rotate(180deg);
}
.container2{
height:50px;
width:150px;
padding:10px;
margin-top: 200px;
background-color:blanchedalmond;
border:2px solid black;
/*transition-property: width;
transition-duration: 2s;
transition-delay: 2s;
transition-timing-function:ease-in-out ;*/
transition: width 2s,height 2s,transform 2s;
}
.container2:hover{
width:300px;
height:150px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="container1">
<h3>Welcome to CSS Transform</h3>
</div>
<div class="container2">
<h3>Welcome to CSS Transition</h3>
</div>
</body>
</html>
--------------------------------------------------------------------------
13.CSS-Animation – Types of Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
.anime_container{
height: 200px;
width:200px;
background-color: azure;
outline: 2px solid blue;
outline-offset: 3px;
border-radius: 20px;
}
.anime_container:nth-child(odd){
animation-name: odd_child;
animation-duration: 2s;
animation-iteration-count: infinite;
position: relative;
}
@keyframes odd_child {
0%{transform: rotate(0deg);left:0px}
100%{transform: rotate(260deg);left:100px}
}
.anime_container:nth-child(even){
animation-name: even_child;
animation-duration: 2s;
animation-iteration-count: infinite;
position: relative;
}
@keyframes even_child {
0%{transform: scale(0.6);right:0px}
100%{transform: scale(1);right:100px}
}
.pulse{
height:100px;
width:100px;
background-color: red;
border-radius: 10px;
margin: 0 auto 20px;
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes pulse {
0%{transform: scale(0.95);
box-shadow: 0 0 0 0 rgb(255,0,0,0.7);}
70%{transform: scale(1);
box-shadow: 0 0 0 10px rgb(255,0,0,0);}
100%{transform: scale(0.95);
box-shadow: 0 0 0 10px rgb(255,0,0,0);}
}
.spin{
height:100px;
width:100px;
background-color: green;
border-radius: 10px;
margin: 0 auto 20px;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.bounce{
height:100px;
width:100px;
background-color: orange;
border-radius: 50px;
margin: 0 auto 20px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes bounce {
0%{transform: translateY(-20px);}
100%{transform: translateY(40px);}
}
.fade{
height:100px;
width:100px;
background-color: hotpink;
border-radius: 10px;
margin: 0 auto 20px;
animation-name: fade;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes fade {
0%{opacity: 0.2;}
100%{opacity: 1;}
}
.colorshift{
height:100px;
width:100px;
background-color: yellow;
border-radius: 10px;
margin: 0 auto 20px;
animation-name: colorshift;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes colorshift {
0%{background-color: red;}
25%{background-color: blue;}
50%{background-color: orangered;}
75%{background-color: green;}
100%{background-color: cadetblue;}
}
.slide{
height:100px;
width:100px;
background-color: brown;
border-radius: 10px;
margin: 0 auto 20px;
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes slide {
from{transform: translateX(-20px);}
to{transform: translateX(20px);}
}
</style>
</head>
<body>
<div class="anime_container">
<h3 style="text-align: center;">Pulse Effect</h3>
<div class="pulse"></div>
</div>
<div class="anime_container">
<h3 style="text-align: center;">Spin Effect</h3>
<div class="spin"></div>
</div>
<div class="anime_container">
<h3 style="text-align: center;">Bounce Effect</h3>
<div class="bounce"></div>
</div>
<div class="anime_container">
<h3 style="text-align: center;">Fade In/Out Effect</h3>
<div class="fade"></div>
</div>
<div class="anime_container">
<h3 style="text-align: center;">Color Shift</h3>
<div class="colorshift"></div>
</div>
<div class="anime_container">
<h3 style="text-align: center;">Slide In Effect</h3>
<div class="slide"></div>
</div>
</body>
</html>
---------------------------------------------------------------------------
14.Create Responsive WebPage using Media Query
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive WebPage using Media Query</title>
<style>
body{
background-color: beige;
}
@media only screen and (orientation: portrait){
body{
background-color: aqua;
}
div{
display: none;
}
}
</style>
</head>
<body>
<div>
<p style="font-size: 50px;">This paragraph will be hidden
when in portrait</p>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
15. Create Responsive Webpage using Media Query and Design Semantic Html Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive WebPage</title>
<style>
body{
margin: 0;
background-color: beige;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header{
background-color: aqua;
color:blue;
border-radius: 20px;
text-align: center;
padding: 20px;
}
h1{
font-size: 50px;
}
.content{
background-color: burlywood;
color: brown;
border-radius: 20px;
margin-top: 10px;
padding: 20px;
}
p{
font-size: 30px;
}
.navbar{
display: flex;
justify-content: space-evenly;
margin: 10px;
}
.navbar > a{
text-decoration: none;
font-size: x-large;
background-color: bisque;
color: brown;
padding: 10px;
border-radius: 10px 30px;
transition: transform 2s;
}
.navbar > a:hover{
background-color: brown;
color: bisque;
box-shadow: 10px 10px 15px black;
transform: scale(1.5);
}
@media only screen and (max-width:600px){
body{
background-color: azure;
}
.content{
max-width: 600px;
margin: 20px auto;
padding:30px
}
h1{
font-size: 70px;
}
p{
font-size: 50px;
}
.navbar{
flex-direction: column;
height:300px;
max-width: 400px;
justify-content: space-evenly;
margin: auto;
}
.navbar >a{
text-align: center;
}
}
</style>
</head>
<body>
<header>
<h1>Smart Learning Blogs</h1>
</header>
<nav class="navbar">
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo!</a>
<a href="http://www.w3schools.com">w3Schools</a>
<a href="http://www.gec.edu.in">GEC</a>
</nav>
<section class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam, delectus? Non suscipit ea ipsam sint tempore
itaque qui voluptatem, nemo nihil voluptate quos, mollitia
doloribus deleniti quisquam esse ex voluptas?</p>
</section>
</body>
</html>
You might also like
- WT Practical File Harshita Gupta COMPLETENo ratings yetWT Practical File Harshita Gupta COMPLETE84 pages
- Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058No ratings yetInternet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS005822 pages
- Front End Development Assignment 1-20 QNo ratings yetFront End Development Assignment 1-20 Q15 pages
- AdminX: Responsive Bootstrap Admin TemplateNo ratings yetAdminX: Responsive Bootstrap Admin Template26 pages
- White Paper - EDT05 - Value Stream Maps andNo ratings yetWhite Paper - EDT05 - Value Stream Maps and12 pages
- Ug QPP Design Recommendations 683082 666353No ratings yetUg QPP Design Recommendations 683082 666353133 pages
- PPPoE Dialup Fails - AR Router Troubleshooting Guide - HuaweiNo ratings yetPPPoE Dialup Fails - AR Router Troubleshooting Guide - Huawei1 page
