Lab 3

Program :
index.html
<html>
<head>
<title>My Blog!</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#blogs">Blogs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="mainC">
<h1>Welcome to the BLOG!</h1>
<h2>Blogs Below!</h2>
<div class="linkPreview" onclick="blog()">
<img src="java.png" class="javaimg" alt="linkPreview" width="250"
height="150">
<h2>ABOUT JAVA</h2>
<h3> All the things you that need to know about java</h3>
<p>Java | News, how-tos, features, reviews, and videos</p>
<h4> Blogs by me!</h4>
</div>
height="150">
<h2>ABOUT Advanced JAVA</h2>
</div>
height="150">
<h2>ABOUT JAVASCRIPT</h2>
</div>
</div>
<div class="sideBar">
<h1>Follow Me</h1>
<a href="#" class="fa fa-google" id="Gmail" onclick="contact()"></a>
<a href="#" class="fa fa-twitter" id="tweet" onclick="contact()"></a>
<a href="#" class="fa fa-linkedin" id="linked"
onclick="contact()"></a>
<a href="#" class="fa fa-youtube" id="utube" onclick="contact()"></a>
<a href="#" class="fa fa-instagram" id="insta"
<a href="#" class="fa fa-pinterest" id="pintrest"
<a href="#" class="fa fa-snapchat-ghost" id="snap"
<a href="#" class="fa fa-skype" id="skype" onclick="contact()"></a>
<a href="#" class="fa fa-android" id="android"
</div>
<div class="side2">
<h3>For more good blogs follow us!</h3>
<h3>We keep writing you keep reading!</h3>
</div>
<div class="footer">
<a name="footer"></a>
<p>All Rights are reserved to @me</p>
</div>
</body>
<script>
function blog() {
let quiz = window.open("http://127.0.0.1:5500/blog1.html", "_top",
"location=no");
}
</script>
</html>
blog.html
<html>
<head>
<title>Blog</title>
</head>
<body>
<div class="header">
<h1 >JAVA</h1>
<h5>Java | News, how-tos, features, reviews, and videos</h5>
</div>
<div class="main">
<h1>Overview and Criteria</h1>
<pre>
There are several “Top Java Blogs” pages out there – but also a lot of
noise.
Some of these blogs are abandoned with the last post a few years old,
some have simply switched focused from Java to something else. Others are gone
altogether.
This page is meant to an up to date view of the Java ecosystem.
In order for a blog/site to be listed, it needs to fit ALL of the following
criteria:
# Is Mostly About Java
# Domain Authority > 35 (using the Open Site Explorer from Moz)
# Alexa Rank < 500.000
# Has Recent Activity (at least 10 relevant – Java – articles in the last 3
months)
# More text than Ads on the page
# Actually useful (in my view)
</pre>
<h2>If any Queries kindly comment below!</h2>
</div>
<div class="commentbox">
<h1>Kindly make an comment below!</h1>
<form id="usrform" name="usrform" method="post">

<h4>Name: <sup>*</sup></h4> <input type="text"
name="usrname"> <br>
<h4>Emailid: <sup>*</sup></h4> <input type="email"
name="email"> <br> <br>
<br>
<textarea rows="10" cols="60" name="comment" form="usrform">
Enter the comment text here...
</textarea> <br> <br>
<input type="button" value="POST COMMENT" onclick="c()">
</form>
</div>
<div id="response" class="history">
<h1> Comment History!</h1><br>
</div>
</body>
<script type="text/javascript">
function c()
{
if(usrform.usrname.value==="" || usrform.email.value==="" ||
usrform.comment.value==="")
{
alert("Kindly fill the mandatory details! and try again posting
comment");
}
else
{
let name = usrform.usrname.value;
let mail = usrform.email.value;
let commt = usrform.comment.value;
var result = document.getElementById("response");

result.innerHTML += "<h4>Name : "+name+"</h4>"+"<h4>Comment
:</h4><p>"+commt+"<p><br><hr>";
}
console.log();
}
</script>
<style>
input,textarea{
background-color: #FFC300;
color:black;
font-size: larger;
padding: 10px;
}
.commentbox{
background-image: linear-gradient(to right,#00ff87, #60efff);
border-radius: 30px 40px 60px 80px;
padding: 25px;
}
sup{
color:red;
font-size: larger;
}
.header{
display: block;
color: #FFC300;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #0a0a0a;
margin:0.5%;
border-radius: 60px 80px 30px 40px ;
}
*{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
pre{
font-size: x-large;
}
.main{
background-image: linear-gradient(to right,#e7008a, #60efff);
width: 100%;
height: 100%;
padding: 5px;
margin:0.5%;
}
.history{
display: block;
color: #FFC300;
padding: 10px;
margin:0.5%;
border-radius: 60px 80px 30px 40px ;
}
</style>
</html>
Style.css
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 8px;
overflow: hidden;
position: sticky;
top: 0;
}
li {
float: left;
}
li a:hover {
color: black;
}
/*---------------------------------------------------------------------*/
.mainC {
/*background-color: #FFC300; */
background-image: linear-gradient(to right, #00ff87, #60efff);
width: 70%;
height: 150%;
padding: 5px;
margin: 1.5%;
}
/*-----------------------------------------------------------------------*/
.sideBar {
background-image: linear-gradient(to right, #00ff87, #60efff);
width: 20%;
position: absolute;
top: 72.5px;
left: 75.5%;
/*height: 92.8%; */
height: 42.8%;
padding: 5px;
margin-top: 1.5%;
}
.side2 {
background-image: linear-gradient(to right, #60efff, #00ff87);
width: 20%;
position: absolute;
top: 350px;
left: 75.5%;
height: 45%;
padding: 5px;
margin-top: 3.5%;
}
/*-------------------------------------------------------------------------*/
.footer {
display: block;
color: #FFC300;
text-align: center;
padding: 14px 16px;
margin: 0.5%;
}
/*-------------------------------------------------------------------------*/
.fa:hover {
opacity: 0.7;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #0c0c0c;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa {
padding: 13px;
font-size: 30px;
width: 50px;
text-align: center;
margin: 5px 2px;
}
/*----------------------------------------------------------------*/
.linkPreview {
position: relative;
padding: 5px;
margin: 25px;
color: rgb(0, 0, 0);
}
.javaimg {
float: left;
margin: 20px;
}
.linkPreview:hover {
opacity: 0.9;
color: #FFC300;
background-color: black;
}
/*--------------------------------------------------------------------*/
Output :
index.html
blog1.html

Lab 3

Uploaded by

Document Information

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

Lab 3

Uploaded by

Copyright:

Available Formats

Program :

<form id="usrform" name="usrform" method="post">

var result = document.getElementById("response");

You might also like