Make a blog webpage using HTML/CSS/JQUERY(beginner's level)
Hey guys once again welcome to the Decoders blog, I hope you all are doing well and today I'm present with a blog website framework. The given code will help you to built it, so just follow the codes and make webpage easily, and enjoy it with your friends
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decoderzz | Learn Programming</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<link rel="stylesheet" href="style1.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&display=
swap'>
<a href="Google Blogger (1).html"></a>
<style>
.container{
width: 30px;
height: 30px;
display: flex;
/* border: 2px solid black; */
position: absolute;
left: 20px;
top: 7px;
justify-content: space-around;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.bar{
height: 0px;
width: 20px;
border: 2px solid rgb(255, 255, 255);
}
#normalNav{
background: rgb(49, 49, 49);
/* border: 2px solid red; */
height: 40px;
width: 1660px;
border-radius: 8px;
margin: auto;
/* margin-top: -5px; */
position: relative;
top: 3px;
/* padding-bottom: 3px; */
left: 1px;
margin-left: 0px;
margin-right: 0px;
z-index: index -1;
}
#loginBox{
display: inline-flex;
align-items: center;
justify-content: space-between;
position: relative;
left: 1466px;
top: 3px;
text-decoration: none;
color: white;
font-size: 20px;
cursor: pointer;
}
#loginIcon{
height: 30px;
width: 30px;
position: relative;
right: 10px;
top: 2px;
}
#follow{
display: inline-flex;
align-items: center;
justify-content: space-between;
position: relative;
left: 1169px;
top: -2px;
color: white;
font-size: 20px;
cursor: pointer;
}
#dropdownIcon{
position: relative;
left: 5px;
}
#followLinks{
/* border: 2px solid red; */
/* display: inline-flex;
flex-direction: column; */
display: none;
position: absolute;
right: 215px;
width: 120px;
background-color: rgb(49, 49, 49);
}
.followLink{
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
#twitter{
position: relative;
top: 3px;
right: 5px;
}
#instagram{
position: relative;
top: 2px;
right: 5px;
}
#facebook{
position: relative;
top: 2px;
}
#websiteName{
display: inline;
color: rgb(255, 255, 255);
position: relative;
/* top: -67px;
left: 450px; */
top: -39px;
left: 621px;
font-size: 30px;
font-weight: bold;
}
#sidebar{
height: 100%;
width: 0;
background-color: rgb(41, 41, 41);
position: fixed;
left: 0px;
top: 0px;
z-index: 1;
overflow-x: hidden;
}
#closeButton{
filter: invert(100%);
/* display: inline-block; */
height: 30px;
width: 30px;
position: relative;
top: 0px;
left: 250px;
cursor: pointer;
}
#navHead{
color: white;
font-size: 30px;
display: inline-block;
position: relative;
top: -7px;
left: 5px;
cursor: default;
}
/* #navHeader{ */
/* visibility: hidden; */
/* border: 2px solid red; */
/* } */
/* #navContent{ */
/* display: flex; */
/* border: 2px solid rgb(0, 26, 255); */
/* margin-top: 5px; */
/* visibility: hidden; */
/* } */
#homeBar, #contactBar, #categoryBar, #donateBar{
/* border: 2px solid red; */
/* margin-top: 20px; */
padding: 10px 0px;
}
#homeIcon, #contactIcon, #categoryIcon, #donateIcon{
filter: invert(100%);
height: 25px;
width: 25px;
position: relative;
left: 85px;
}
#homeLink, #contactLink, #categoryLink, #donateLink{
font-size: 25px;
text-decoration: none;
color: white;
position: relative;
left: 90px;
bottom: 2px;
cursor: pointer;
}
#categoryIcon{
position: relative;
left: 60px;
}
#categoryLink{
position: relative;
left: 65px;
bottom: 2px;
}
#contactIcon{
position: relative;
left: 75px;
}
#contactLink{
position: relative;
left: 80px;
bottom: 2px;
}
#donateIcon{
position: relative;
left: 80px;
}
#donateLink{
position: relative;
left: 80px;
top: -4px;
}
#searchBox{
/* border: 2px solid green; */
padding: 10px 0px;
}
#searchButton{
display: inline-flex;
background-color: rgb(80, 205, 255);
height: 32px;
width: 32px;
justify-content: center;
align-items: center;
position: relative;
top: 6px;
left: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
cursor: pointer;
}
#searchIcon{
filter: invert(100%);
height: 20px;
width: 20px;
}
#searchForm{
display: inline-block;
padding-bottom: 5px;
}
#search{
height: 30px;
width: 250px;
border-right: none;
border-bottom: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#contactInfo{
display: none;
}
.sivam{
text-align: center;
display: block;
text-decoration: none;
color: white;
font-size: 17px;
cursor: pointer;
padding: 10px 0px;
}
#categoryInfo{
display: none;
}
.category{
text-align: center;
display: block;
text-decoration: none;
color: white;
font-size: 17px;
cursor: pointer;
padding: 10px 0px;
}
@media screen and ( max-width:320px) {
#websiteName{
left: 466px;
}
#follow{
left: 1027px;
}
#loginBox{
left: 1098px;
}
}
@media screen and ( max-width:400px) {
#websiteName{
left: 571px;
}
#follow{
left: 1119px;
}
#loginBox{
left: 1416px;
}
#followLink{
right:215px;
}
}
@media screen and (max-width:1642px){
#followLink{
right: 215px;
}
}
</style>
</head>
<body>
<!-- SideBar button -->
<nav id="normalNav">
<div class="container">
<div class="bar" id="bar1"></div>
<div class="bar" id="bar2"></div>
<div class="bar" id="bar3"></div>
</div>
<!-- <h3 id="websiteName">The Decoderzz</h3> -->
<a href="#" id="loginBox">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill=
"currentColor" class="bi bi-person-circle" viewBox="0 0 16 16"
id="loginIcon">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7
7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.
37A7 7 0 0 0 8 1z"/>
</svg>
Login/Sign up
</a>
<div id="follow">
Follow Us
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"
id="dropdownIcon">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1
1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</div>
</nav>
<div id="followLinks">
<a href="#" class="followLink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16"
id="twitter">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.
422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0
0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.
03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.
323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.
865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.
588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>Twitter</a>
<hr>
<a href="#" class="followLink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"
id="instagram">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917
3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048
4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.
372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.
333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.
434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.
417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.
048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.
911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172
0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.
166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.
275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.
166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.
28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.
047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48
0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.
233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.
64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.
024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.
92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.
441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>Instagram</a>
<hr>
<a href="#" class="followLink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"
id="facebook">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.
05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.
017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.
993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604
6.75-3.934 6.75-7.951z"/>
</svg>
Facebook</a>
<hr>
<a href="#" class="followLink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"
id="linkedin">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.
146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.
854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.
358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-
1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.
216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.
216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.
845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.
03.678 0 7.225 0 7.225h2.4z"/>
</svg>
LinkedIn</a>
</div>
<!-- SideBar itself -->
<!-- <h3 id="websiteName">The Decoderzz</h3> -->
<div id="sidebar">
<!-- sidebar navigation header with close button -->
<div id="navHeader">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"
id="closeButton">
<path d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.
414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.
293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"/>
</svg>
<h3 id="navHead">The Decoderzz</h3>
</div>
<!-- contents of navigation sidebar -->
<div id="navContent">
<div id="searchBox">
<form action="" id="searchForm">
<span id="searchButton">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" class="bi bi-search"
viewBox="0 0 16 16" id="searchIcon">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.
04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.
85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5
5.5 0 0 1 11 0z"/>
</svg>
</span>
<!-- <input type="submit" id="searchButton"> -->
<input type="text" id="search" placeholder="Search the website">
</form>
</div>
<!-- Home button and homepage link -->
<div id="homeBar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16"
id="homeIcon">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.
5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.
354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354
1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.
5h4a.5.5 0 0 0 .5-.5z"/>
</svg>
<a href="#" id="homeLink">Home</a>
</div>
<div id="contactBar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16"
id="contactIcon">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.
163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0
0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745
1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-
1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.
01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-
2.877L1.885.511z"/>
</svg>
<a id="contactLink">Contact</a>
<div id="contactInfo">
<a href="tel:+919101948641" class="sivam">Call: +919101948641</a>
<!-- <a href="tel:+919435417412" class="sivam">Call:
+919435417412</a>
<a href="tel:+919435145136" class="sivam">Call: +919435145136</a>
-->
<a href="mailto:sivamkarmakar764@gmail.com" class="sivam">Mail:
sivamkarmakar764@gmail.com</a>
</div>
</div>
<div id="categoryBar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-tags" viewBox="0 0 16 16"
id="categoryIcon">
<path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.
586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0
0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/>
<path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0
0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.
043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-
1v5.086z"/>
</svg>
<a id="categoryLink">Categories</a>
<div id="categoryInfo">
<a href="#" class="category">Web Dev</a>
<a href="#" class="category">Python</a>
<a href="#" class="category">Django</a>
<a href="#" class="category">Node.js</a>
<a href="#" class="category">jQuery</a>
</div>
</div>
<div id="donateBar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-currency-euro" viewBox="0 0 16 16"
id="donateIcon">
<path d="M4 9.42h1.063C5.4 12.323 7.317 14 10.34 14c.622 0 1.167
-.068 1.659-.185v-1.3c-.484.119-1.045.17-1.659.17-2.1 0-3.455-1.
198-3.775-3.264h4.017v-.928H6.497v-.936c0-.11 0-.219.008-.329h4.
078v-.927H6.618c.388-1.898 1.719-2.985 3.723-2.985.614 0 1.175.
05 1.659.177V2.194A6.617 6.617 0 0 0 10.341 2c-2.928 0-4.82 1.
569-5.244 4.3H4v.928h1.01v1.265H4v.928z"/>
</svg>
<a href="#" id="donateLink">Donate</a>
</div>
</div>
</div>
<script>
$(document).ready(function () {
let sivamSlideId = 0;
let categorySlideId = 0;
$(".container").click(function openSidebar() {
$("#sidebar").animate({width: "300px"}, 100);
// $("#navHeader").css("visibility", "visible");
// $("#navContent").css("visibility", "visible");
});
$("#closeButton").click(function closeSidebar() {
$("#sidebar").animate({width: "0"}, 100);
$("#contactInfo").slideUp();
sivamSlideId = 0;
$("#categoryInfo").slideUp();
categorySlideId = 0;
// $("#navHeader").css("visibility", "hidden");
// $("#navContent").css("visibility", "hidden");
});
$("#searchButton").click(function formSubmit() {
$("#search").submit();
});
$("#searchBox").hover(function mouseEnter() {
$(this).css("backgroundColor", "rgb(53, 53, 53)");
},
function mouseLeave() {
$(this).css("backgroundColor", "rgb(41, 41, 41)");
}
);
$("#homeBar").hover(function mouseEnter() {
$(this).css("backgroundColor", "rgb(53, 53, 53)");
},
function mouseLeave() {
$(this).css("backgroundColor", "rgb(41, 41, 41)");
}
);
$("#contactBar").hover(function mouseEnter() {
$(this).css("backgroundColor", "rgb(53, 53, 53)");
},
function mouseLeave() {
$(this).css("backgroundColor", "rgb(41, 41, 41)");
}
);
$("#categoryBar").hover(function mouseEnter() {
$(this).css("backgroundColor", "rgb(53, 53, 53)");
},
function mouseLeave() {
$(this).css("backgroundColor", "rgb(41, 41, 41)");
}
);
$("#donateBar").hover(function mouseEnter() {
$(this).css("backgroundColor", "rgb(53, 53, 53)");
},
function mouseLeave() {
$(this).css("backgroundColor", "rgb(41, 41, 41)");
}
);
$("#contactLink").click(function contactSlideToggle() {
if (sivamSlideId==0) {
$("#contactInfo").slideDown();
$("#contactInfo").css("display", "block");
sivamSlideId = 1;
} else {
$("#contactInfo").slideUp();
sivamSlideId = 0;
}
});
$("#categoryLink").click(function contactSlideToggle() {
if (categorySlideId==0) {
$("#categoryInfo").slideDown();
$("#categoryInfo").css("display", "block");
categorySlideId = 1;
} else {
$("#categoryInfo").slideUp();
categorySlideId = 0;
}
});
$("#follow").click(function () {
$("#followLinks").slideToggle();
});
});
</script>
<div class="about">
<h1 id="about">MORE ABOUT DECODERZZ BLOG</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem error
molestiae tenetur fuga ea incidunt soluta ratione maxime veritatis nihil.
</p>
</div>
<div class="main">
<p id="recent1">RECENT BLOGS</p>
<div class="box1"><p id="one">TITLE <br>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Sed dolore officiis tempore molestias iusto expedita eius
placeat. Numquam, quibusdam fuga.</p></div>
<div class="box2"><p id="two">TITLE <br>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nulla error ipsam hic veritatis sint porro facilis impedit
unde repellendus optio.</p></div>
<div class="box3"><p id="three">TITLE <br>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Id dicta distinctio totam porro consequuntur
ullam, exercitationem ipsa dolor illo nam!</p></div>
<div class="box4"><p id="four">TITLE <br>Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Laudantium blanditiis itaque aspernatur?
Commodi tempore sit, officia ipsum nemo consequatur quidem.</p></div>
<div class="box5"><p id="five">TITLE <br>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Sed dolore officiis tempore molestias iusto
expedita eius placeat. Numquam, quibusdam fuga.</p></div>
<div class="box6"><p id="six">TITLE <br>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nulla error ipsam hic veritatis sint porro facilis impedit
unde repellendus optio.</p></div>
<div class="box7"><p id="seven">TITLE <br>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Id dicta distinctio totam porro consequuntur
ullam, exercitationem ipsa dolor illo nam!</p></div>
<div class="box8"><p id="eight">TITLE <br>Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Laudantium blanditiis itaque aspernatur?
Commodi tempore sit, officia ipsum nemo consequatur quidem.</p></div>
</div>
<div class="more">
<p>MORE ON</p>
<div class="html"></div>
<div class="css"></div>
<div class="js"></div>
<div class="django"></div>
<div class="python"></div>
</div>
<div class="faq">
<div class="questions"></div>
</div>
<div class="footer">
<span class="material-icons" id="location1">
location_on
</span>
<div id="location">Lorem ipsum dolor sit amet <br> consectetur adipisicing
elit. Nostrum, quas?</div>
<span class="material-icons" id="call1">
call
</span>
<div id="call">Lorem ipsum dolor sit amet <br> consectetur adipisicing
elit. Nostrum, quas?</div>
<span class="material-icons" id="mail1">
mail
</span>
<div id="mail">Lorem ipsum dolor sit amet <br> consectetur adipisicing
elit. Nostrum, quas?</div>
<div id="aboutus">
<h3 id="aboutus1">About us</h3> <p id="aboutus2">Lorem ipsum dolor sit
amet consectetur adipisicing elit. Facere excepturi accusantium hic
obcaecati totam,<br> officia amet rerum dolorum laboru
Lorem ipsum dolor <br> sit amet consectetur adipisicing elit. Quod
impedit sit enim sunt, quis illo <br> quam odit debitis tenetur vel.
</p>
</div>
</div>
</body>
</html>
below here is the style (css) code:
*{
background-image: url(https://unsplash.com/photos/qWZLhAMC3Pw);
margin: 0px;
padding: 0px;
}
.navbar{
/* border: 1px solid red; */
background-color:grey;
position:sticky;
background-size: cover;
}
.home{
position: relative;
left: 47px;
/* border: 1px solid black; */
bottom: 24px;
font-size: 21px;
}
.home:hover{
background-color:grey;
color:white;
cursor:pointer;
}
.info{
position: relative;
left: 817%;
/* padding: 2px; */
/* border: 1px solid black; */
bottom: 27px;
font-size: 21px
}
.info:hover{
background-color:grey;
color:white;
cursor:pointer;
}
.account{
position: relative;
left: 695%;
/* padding: 2px; */
/* border: 1px solid black; */
font-size: 21px;
bottom: 26px;
}
.account:hover{
background-color:grey;
color:white;
cursor:pointer;
}
#home{
position: relative;
font-size: 38px;
top: 13px;
left: -298px;
}
#info{
position: relative;
left: 74%;
font-size: 37px;
top: 10px;
}
#account{
position: relative;
left: 60%;
font-size: 37px;
top: 13px;
}
#home:hover{
cursor: pointer;
font: size 40px;
}
#info:hover{
cursor: pointer;
font: size 40px;
}
#account:hover{
cursor: pointer;
font: size 40px;
}
.box1{
background-image: url(/home/sivam/Downloads/wallpaper3.jpg);
/* border: 1px solid black; */
background-size: cover;
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: -140px;
text-align: center;
}
.box1:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box2{
background-image: url(/home/sivam/Downloads/wallpaper6.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 341px;
width: 329px;
height: 229px;
left: -64px;
text-align: center;
}
.box2:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box3{
background-image: url(/home/sivam/Downloads/wallpaper9.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: 55px;
text-align: center;
}
.box3:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box4{
background-image: url(/home/sivam/Downloads/wallpaper14.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: 158px;
text-align: center;
}
.box4:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
#one{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
}
#two{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
}
#three{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
color:white;
}
#four{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
color: white;
}
#find{
position: relative;
left: 64%;
width: 17%;
}
#recent1{
text-align: center;
position: relative;
font-size: 22px;
top: 260px;
left: 45%;
display: inline-block;
}
.about{
border: 1px solid black;
background-image: url(/home/sivam/Downloads/wallpaper4.jpg);
background-position: center;
height: 452px;
background-size: cover;
position: relative;
top: 7px;
z-index: -1;
}
.main{
/* border: 2px solid red; */
/* width: 402px; */
/* heigth: 37px; */
position: relative;
/* top: -269px; */
height: 257px;
bottom: 269px;
}
.footer{
position: relative;
top: 329px;
/* border: 1px solid black; */
height: 198px;
background-color: rgb(90, 77, 77);
}
#call1{
position: relative;
top: 99px;
left: -239px;
}
#mail1{
position: relative;
top: 139px;
left: -552px;
}
#location1{
position: relative;
left: 72px;
top: 54px;
}
#location{
display: inline-block;
position: relative;
top: 56px;
left: 77px;
}
#call{
display: inline-block;
left: -235px;
top: 97px;
position: relative;
}
#mail{
display: inline-block;
position: relative;
top: 143px;
left: -547px;
}
#aboutus{
position: relative;
left: 53%;
display: inline-block;
}
#aboutus1{
display: inline-block;
position: relative;
left: 11%;
bottom: 49px;
}
#aboutus2{
display: inline-block;
position: relative;
top: 36px;
}
.about{
font-family: 'Baloo Thambi 2', cursive;;
}
.more{
/* border: 1px solid red; */
position: relative;
top: 323px;
}
.html{
position: relative;
/* border: 1px solid black; */
background-image: url(html.png);
background-repeat: no-repeat;
background-position: cover;
display: inline-block;
padding-bottom: 191px;
width: 227px;
left: 45px;
background-position-x: center;
background-size: cover;
}
.css{
position: relative;
/* border: 1px solid black; */
display: inline-block;
width: 227px;
/* border: 20px; */
padding-bottom: 191px;
left: 145px;
background-image: url(css.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.js{
position: relative;
/* border: 1px solid black; */
display: inline-block;
left: 267px;
width: 225px;
padding-bottom: 191px;
background-image: url(js.jpg);
background-position:center;
background-size: cover;
}
.django{
position: relative;
/* border: 1px solid black; */
display: inline-block;
left: 384px;
width: 225px;
padding-bottom: 191px;
background-image: url(django.png);
background-position: center;
background-size: cover;
}
.python{
position: relative;
/* border: 1px solid black; */
display: inline-block;
left: 486px;
width: 225px;
padding-bottom: 191px;
background-image: url(python.png);
background-position: center;
background-size: cover;
}
.box5{
background-image: url(blog_image.jpg);
/* border: 1px solid black; */
background-size: cover;
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: 25px;
text-align: center;
background-position: center;
}
.box5:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box6{
background-image: url(blog_image1.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 341px;
width: 329px;
height: 229px;
left: 102px;
text-align: center;
}
.box6:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box7{
background-image: url(blog_image2.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: 221px;
text-align: center;
}
.box7:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
.box8{
background-image: url(blog_image3.jpg);
background-size: cover;
/* border: 1px solid black; */
border-radius: 3px;
display: inline-block;
position: relative;
top: 354px;
width: 329px;
height: 229px;
left: 324px;
text-align: center;
}
.box8:hover{
cursor: pointer;
width: 333px;
height: 233px;
box-shadow: 0px 6px 5px black;
}
#five{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
}
#six{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
}
#seven{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
color:white;
}
#eight{
text-align: center;
position: relative;
top: 60px;
font-size: 12px;
color: white;
}
@media screen and (max-width:360px) {
.navbar{
width: 1425px;
}
#home{
left: -241px;
}
.info{
left: 676%;
}
}
Comments
Post a Comment