OneCompiler

If I say Lines made it thats me im lines

143


I AM LINES OK=

Following is my html only website temp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>LinesTemplate</title><!-- The name of the website -->
</head>
<body>
    <div class="Sidebar"><!-- SideBar -->
        <ul>
            <li><a href="#" id="Homebutton">Home</a></li>
            <li><a href="#" id="ContactButton">Contacts</a></li>
            <li><a href="#" >Your Button</a></li>
            <li><a href="#" >Your Button</a></li>
            <li><a href="#" >Your Button</a></li>
            <li><a href="#" >Your Button</a></li>
            <li><a href="#" >Your Button</a></li>
            <li><a href="#" >Your Button</a></li>
        </ul>
    </div>
    <div class="HS"id="HomeSection">
        <menu>
            <p>
                Blah blah blah this is the home section <br>
                this is too the home section <br>
            </p>
            <p>
                <br>
                this too is the home
            </p>
        </menu>
    </div>
    <div class="CS"id="ContactSection">
        <menu>
            <p>
                you can message me on (blah blah blah.twitter) <br>
                follow linesarecool on tiktok
            </p>
        </menu>
    </div>
    <style>
        .Sidebar{
    position: fixed;
    background-color: rgb(53, 53, 53);
    left: 0px;
    top: 0px;
    width: 230px;
    height: 650px;
}
.Sidebar ul{
    position: fixed;
    background-color: white;
    border-radius: 50px;
    padding: 15px;
    padding-right: 40px;
    padding-left: 30px;
    padding-bottom: 540px;
    left: 20px;
    top: -15px;
}
.Sidebar ul li{
    margin-bottom: 35px;
    display: block;
}
.Sidebar ul li a{
    background-color: rgb(114, 189, 255);
    padding: 15px;
    border-radius: 20px;
    color: white;
    transition: background-color .5s ease-in;
}
.Sidebar ul li a:hover{
    background-color: rgb(0, 110, 255);
}
.HS {
    position: fixed;
    width: 400px;
    height: 200px;
    top: 30%;
    right: 25%;
    border-radius: 25px;
    display: none;
    background-color: rgb(26, 26, 26);
}
.HS menu p{
    color: white;
}
.CS {
    position: fixed;
    width: 400px;
    height: 200px;
    top: 30%;
    right: 25%;
    border-radius: 25px;
    display: none;
    background-color: rgb(26, 26, 26);
}
.CS menu p h3{
    color: white;
}
.CS menu p h2{
    color: white;
}
.CS menu p h1{
    color: white;
}
.CS menu p{
    color: white;
}
    </style>
    <script>
        document.getElementById("Homebutton").addEventListener("click", function(){
        document.getElementById("HomeSection").style.display = (document.getElementById("HomeSection").style.display === "block")? "none" : "block";
    })
        document.getElementById("ContactButton").addEventListener("click", function(){
        document.getElementById("ContactSection").style.display = (document.getElementById("ContactSection").style.display === "block")? "none" : "block";
    })
    </script>
</body>
</html>