HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 new tags </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Start of section part -->
<section id="sec1">
<h1>This is simple side created by html5</h1>
</section>
<!-- End of section -->
<!-- start of navigation -->
<nav class="navi1">
<a href="task1.html" target="_blank">Home</a>
<a href="https://www.w3schools.com/html/default.asp">HTML</a>
<a href="https://www.w3schools.com/css/default.asp">CSS3</a>
<a href="https://www.w3schools.com/js/default.asp">JavaScript</a>
<a href="https://www.w3schools.com/bootstrap4/default.asp">Bootstrap-4</a>
</nav><hr />
<!-- End of navigation -->
<!--start of images section-->
<section class="sec2">
<img class="image1"; src="nature.jpg" width="40%" height="400px" />
<img class="image2"; src="java.jpg" width="30%" height="400px" />
<img class="image3"; src="pic1.png" width="30%" height="400px" />
</section>
<hr />
<!--end of image section-->
<section class="paragraph">
<p class="p1">The nature of content is an important consideration when designing the training solution. Ideally,
you should analyze your content thoroughly before deciding on the medium used to deliver the content</p>
<p class="p2">Core Java" is Sun's term, used to refer to Java SE, the standard edition and a set of related technologies,
like the Java VM, CORBA, et cetera. ... Core Java" is Oracle's </p>
<p class="p3">A computer programmer figures out the process of designing, writing, testing, debugging/troubleshooting
and maintaining the source code of computer programs.</p>
</section>
<footer><strong>This is ℝ written by Pramod</strong></footer>
</body>
</html>
CSS Program:
*{padding: 0px; margin: 0px;box-sizing: border-box;}
body{background-color: gray;}
#sec1{background-color: cadetblue; width: 100%; height: 30px; color: rebeccapurple; text-align: center;}
.navi1{background-color: chartreuse;width: 100%; line-height: 30px;}
/* a{width: inherit; height: 30px;} */
nav a{display: inline; padding-top: 15px; margin: 15px;}
.sec2{padding: 0px;margin: 0px;}
section .image1{float: left; border-radius: 20px;}
section .image2{float: left; border-radius: 20px;}
section .image3{float: left; border-radius: 20px;}
.p1{width: 40%; line-height: 30px; padding: 10px;overflow: auto;float: left; }
.p2{width: 30%; line-height: 30px; padding: 10px;overflow: auto;float: left;}
.p3{width: 30%; line-height: 30px; padding: 10px;overflow: auto;float: left;}
section p{color: red; background-color: khaki ; border-right: 2px solid pink}
footer{background-color: black; clear: both;;color: white; width: 100%; line-height: 20px; padding: 10px; text-align: center;}
Output:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 new tags </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Start of section part -->
<section id="sec1">
<h1>This is simple side created by html5</h1>
</section>
<!-- End of section -->
<!-- start of navigation -->
<nav class="navi1">
<a href="task1.html" target="_blank">Home</a>
<a href="https://www.w3schools.com/html/default.asp">HTML</a>
<a href="https://www.w3schools.com/css/default.asp">CSS3</a>
<a href="https://www.w3schools.com/js/default.asp">JavaScript</a>
<a href="https://www.w3schools.com/bootstrap4/default.asp">Bootstrap-4</a>
</nav><hr />
<!-- End of navigation -->
<!--start of images section-->
<section class="sec2">
<img class="image1"; src="nature.jpg" width="40%" height="400px" />
<img class="image2"; src="java.jpg" width="30%" height="400px" />
<img class="image3"; src="pic1.png" width="30%" height="400px" />
</section>
<hr />
<!--end of image section-->
<section class="paragraph">
<p class="p1">The nature of content is an important consideration when designing the training solution. Ideally,
you should analyze your content thoroughly before deciding on the medium used to deliver the content</p>
<p class="p2">Core Java" is Sun's term, used to refer to Java SE, the standard edition and a set of related technologies,
like the Java VM, CORBA, et cetera. ... Core Java" is Oracle's </p>
<p class="p3">A computer programmer figures out the process of designing, writing, testing, debugging/troubleshooting
and maintaining the source code of computer programs.</p>
</section>
<footer><strong>This is ℝ written by Pramod</strong></footer>
</body>
</html>
CSS Program:
*{padding: 0px; margin: 0px;box-sizing: border-box;}
body{background-color: gray;}
#sec1{background-color: cadetblue; width: 100%; height: 30px; color: rebeccapurple; text-align: center;}
.navi1{background-color: chartreuse;width: 100%; line-height: 30px;}
/* a{width: inherit; height: 30px;} */
nav a{display: inline; padding-top: 15px; margin: 15px;}
.sec2{padding: 0px;margin: 0px;}
section .image1{float: left; border-radius: 20px;}
section .image2{float: left; border-radius: 20px;}
section .image3{float: left; border-radius: 20px;}
.p1{width: 40%; line-height: 30px; padding: 10px;overflow: auto;float: left; }
.p2{width: 30%; line-height: 30px; padding: 10px;overflow: auto;float: left;}
.p3{width: 30%; line-height: 30px; padding: 10px;overflow: auto;float: left;}
section p{color: red; background-color: khaki ; border-right: 2px solid pink}
footer{background-color: black; clear: both;;color: white; width: 100%; line-height: 20px; padding: 10px; text-align: center;}
Output:
No comments:
Post a Comment