i am unable to add any heading or paragraph to my document
HTML code:
HTML Code:
<!doctype html>
<html>
<head meta charset="UTF-8"><title>homepage</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.sidebarBtn').click(function(){
$('.sidebar') .toggleClass('active');
$('.sidebarBtn') .toggleClass('toggle');
})
})
</script>
</head>
<body>
<div class="header">
<div class="marquee">
<marquee behavior="scroll" direction="left" bgcolor="#1CC6E8" loop="1000" width="1900px" height="35px" scrollamount="20" ><p> 💎⚜️HTML stands for Hyper Text Markup Language⚜️💎
🔶HTML describes the structure of Web pages using markup🔶
🔶HTML elements are the building blocks of HTML pages🔶
🔶HTML elements are represented by tags🔶
🔶HTML tags label pieces of content such as "heading", "paragraph", "table", and so on🔶
🔶Browsers do not display the HTML tags, but use them to render the content of the page🔶
</p></marquee></div>
<h1><font color="#1CC6E8" size="8" face="raceway">HOMEPAGE</font></h1>
<div class="clsVertical"></div>
<img src="ckheader.png" height="148px" width="1250px" alt="logo" />
</div>
<hr style="height:8px;border:none;color:#1CC6E8;background-color:#1CC6E8;" />
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Some css</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button class="sidebarBtn">
<span></span>
</button>
</div>
</body>
</html>
and css code:
Code:
div#logo {
float: right;
padding-left: 4px
}
h1 {
float: left;
padding-right: 5%;
padding-top: 1%;
}
.clsVertical {
border-left: 10px solid #1CC6E8;
height: 159px;
float: left;
padding-left: 2%
}
marquee{
border-top:5px dashed whitesmoke;
border-right:5px dashed whitesmoke;
border-bottom:4px dashed whitesmoke;
border-left:5px dashed whitesmoke;
padding-top: 4px
}
body
{
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: black;
overflow:auto ;
}
.sidebar
{
position: fixed;
top: 216px;
left:-250px;
background: #1CC6E8;
width:250px;
height:100%;
transition: .3;
}
.active
{
left: 0;
}
ul
{
margin: 0px;
padding: 20px 0px;
}
ul li
{
list-style:none;
}
ul li a
{
padding: 10px 20px;
color: #ffffff;
display: block;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.sidebarBtn
{
top: 2px;
position: absolute;
right: -50px;
width: 50px;
height: 50px;
box-sizing: border-box;
cursor:pointer;
background: black;
border: none;
outline:none;
}
.sidebarBtn span
{
display: block;
width: 35px;
height:3px;
background: #1CC6E8;
position: absolute;
top: 24px;
transition: .3s;
}
.sidebarBtn span:before
{
content: '';
position: absolute;
top: -10px;
width: 100%;
left:0;
height:3px;
background: #1CC6E8;
transition: .3s;
}
.sidebarBtn span:after
{
content: '';
position: absolute;
top: 10px;
width: 100%;
left:0;
height:3px;
background: #1CC6E8;
transition: .3s;
}
.sidebarBtn.toggle span
{
background: transparent;
}
.sidebarBtn.toggle span:before
{
top: 0px;
transform: rotate(45deg);
}
.sidebarBtn.toggle span:after
{
top: 0px;
transform: rotate(-45deg);
}
plz help me regarding this its very important... im unable to add anything new but im able to edit the things already there. im using vs code
