HTML AND CSS code for making a sidebar in our website.

 HTML:- 

Html is not a programming language. it is a markup language that is use for making web pages. Html is easy to use and understand also we can write code in html is a simple way.

There are two ways to write out html code:-

1 Notepad
2 Editors

  • Notepad :-  Notepad is free to use tool that is built in our windows Operating System. In windows Operating System we have notepad where we can write our Html code. And after save this file as .html extension we can see the preview of our file in our system Browers like:_Crome ,Bing ,Firefox etc.
  • Editors:-  Editors are software that are use for coding purpose. Editors have many features for coding. We are using these features in our coding time.
Editors Example:-
  1.     VS Code.
  2.     PyCharm.

CSS:-

Certainly! CSS (Cascading Style Sheets) is the language used to style HTML documents. It describes how HTML elements should be displayed. Whether you want to change font styles, colors, layout, or add animations, CSS is the key.

Website sidebar Code:-

 Click here to download file :-  Sidebar

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
        rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .logo img {
            margin: 50px;
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }
        p {
            display: inline-block;
            display: none;
        }
        i ,.fa{
            width: 30px;
            height: 30px;
            font-size: 25px;
        }
        .menu{
            margin: 25px 15px;

        }
        .w3-sidebar:hover p{
            display:inline-block;
            font-size: 20px;
            width: 70%;
            position: fixed;
            margin-left: 10px;
        }
        .menu:hover{
            font-size: 30px;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <div class="w3-sidebar">
        <div class="logo">
            <img src="sample/CODE.png" alt="">
        </div>
        <div class="menu" >
            <i class="fa fa-home"></i>
            <p>Home</p>
        </div>
        <div class="menu" >
            <i class="fa fa-instagram"></i>
            <p>Instagram</p>
        </div>
        <div class="menu" >
            <i class="fa fa-facebook"></i>
            <p>Facebook</p>
        </div>
        <div class="menu" >
            <i class="fa fa-twitter"></i>
            <p>Twitter</p>
        </div>
        <div class="menu" >
            <i class="fa fa-whatsapp"></i>
            <p>Whatsapp</p>
        </div>
        <div class="menu" >
            <i class="fa fa-phone"></i>
            <p>Contact us</p>
        </div>
    </div>
    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

MP POLYTECHNIC PREVIOUS YEAR QUESTION PAPER 2022-2023.

Image
Code Without Dount POLYTECHNIC HELP MP POLYTECTNIC PREVIOUS YEAR PAPER: Introduction: Rajiv Gandhi Proudyogiki Vishwavidyalaya (RGPV) is a renowned technical university in Madhya Pradesh, India, offering various diploma programs through its polytechnic colleges. Aspiring students often seek previous year papers to enhance their exam preparation. This article aims to provide a comprehensive guide to accessing and utilizing RGPV Polytechnic previous year papers to excel in the exams. Title: RGPV Polytechnic Previous Year Papers: A Comprehensive Guide for Exam Preparation Introduction: Rajiv Gandhi Proudyogiki Vishwavidyalaya (RGPV) is a renowned technical university in Madhya Pradesh, India, offering various diploma programs through its polytechnic colleges. Aspiring students often seek previous year papers to enhance their exam preparation. This article aims to provide a comprehensive guide to accessing and utilizing RGPV Polytechn...
Read more

Script language Practical Cse Diploma 3rd sem

Image
  Scripting language practical File Rgpv Cse Diploma 3rd sem. Scripting language :- A scripting language is a type of programming language that is interpreted by another program at runtime, rather than compiled by the computer before execution. Scripting languages are often used for writing short and simple programs, such as automating tasks, creating dynamic web pages, or adding interactivity to games. Some examples of scripting languages are JavaScript, Python, Ruby, Perl, and PHP¹²³⁴⁵. Advantage of Scripting language :-   They are easier to learn and use, as they have simpler syntax and less strict rules.  They are more portable, as they can run on different platforms without requiring recompilation.  They are more flexible, as they can interact with other programs and languages, and modify themselves at runtime.  They are faster to develop and debug, as they do not need a separate compilation step and can show errors immediately. Disadvantages of Script...
Read more