Scribd
Upload
60 views

Lab 3

The document contains code for an HTML blog website with multiple pages (index.html and blog1.html) and linked CSS stylesheet (style.css). The index.html page contains the website header, navigation menu, and preview sections for 3 blog posts. It also includes social media links and footer. The blog1.html page displays the full blog post content and includes a comment section. The style.css sheet contains styling rules for layout, colors and other design elements across the pages.

Uploaded by

ukbalaji_it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

Lab 3

The document contains code for an HTML blog website with multiple pages (index.html and blog1.html) and linked CSS stylesheet (style.css). The index.html page contains the website header, navigation menu, and preview sections for 3 blog posts. It also includes social media links and footer. The blog1.html page displays the full blog post content and includes a comment section. The style.css sheet contains styling rules for layout, colors and other design elements across the pages.

Uploaded by

ukbalaji_it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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>
<div class="linkPreview" onclick="blog()">
<img src="java.png" class="javaimg" alt="linkPreview" width="250"
height="150">
<h2>ABOUT Advanced 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>
<div class="linkPreview" onclick="blog()">
<img src="java.png" class="javaimg" alt="linkPreview" width="250"
height="150">
<h2>ABOUT JAVASCRIPT</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>

</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"
onclick="contact()"></a>
<a href="#" class="fa fa-pinterest" id="pintrest"
onclick="contact()"></a>
<a href="#" class="fa fa-snapchat-ghost" id="snap"
onclick="contact()"></a>
<a href="#" class="fa fa-skype" id="skype" onclick="contact()"></a>
<a href="#" class="fa fa-android" id="android"
onclick="contact()"></a>
</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> &nbsp; &nbsp; <input type="text"
name="usrname"> <br>
<h4>Emailid: <sup>*</sup></h4> &nbsp;&nbsp; <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%;
border-radius: 30px 40px 60px 80px;
}

.history{
display: block;
color: #FFC300;
padding: 10px;
text-decoration: none;
background-color: #0a0a0a;
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;
text-decoration: none;
}

ul {
list-style-type: none;
margin: 0;
padding: 8px;
overflow: hidden;
background-color: #0a0a0a;
position: sticky;
top: 0;
border-radius: 30px 40px 60px 80px;
}

li {
float: left;
}

li a:hover {
background-color: #FFC300;
border-radius: 30px 40px 60px 80px;
color: black;
}

/*---------------------------------------------------------------------*/

.mainC {
/*background-color: #FFC300; */
background-image: linear-gradient(to right, #00ff87, #60efff);
width: 70%;
height: 150%;
padding: 5px;
margin: 1.5%;
border-radius: 30px 40px 60px 80px;
}

/*-----------------------------------------------------------------------*/

.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%;
border-radius: 30px 40px 60px 80px;
}

.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%;
border-radius: 60px 80px 30px 40px;
}

/*-------------------------------------------------------------------------*/

.footer {
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;
}

/*-------------------------------------------------------------------------*/

.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;
text-decoration: none;
margin: 5px 2px;
border-radius: 60px 80px 30px 40px;
}

/*----------------------------------------------------------------*/

.linkPreview {
position: relative;
padding: 5px;
margin: 25px;
background-color: #FFC300;
color: rgb(0, 0, 0);
border-radius: 60px 80px 30px 40px;
}

.javaimg {
float: left;
margin: 20px;
}
.linkPreview:hover {
opacity: 0.9;
color: #FFC300;
background-color: black;
}

/*--------------------------------------------------------------------*/

Output :
index.html
blog1.html

You might also like