Skip to main content

Side-war using HTML and CSS

hello student here we will see that how to make side war using html and css i hope that you will like of this tutorial and if you want amazing source code  so dont forget to supporting us through subscribe and share of this bog website among your friends for next topic 


lets break of this topic 

1. Here you can create a header part and set of this on top through position absolute 

#menu {
            background-color: darkred;
            color: white;
            position: absolute;
            top: 0px;
            line-height: 40px;
            height: 40px;
            width: 100%;
            padding-left: 10px;
            text-transform: uppercase;
        }


  in this header part we will take any tag where we will use a javascript function onclick  and you can choose any name of this function i choosed open because  we want to open of this head 

2. and next topic is here we will  take a div or nav tag for  storing 
 <li> tag .
you can take any href link under  <li> tag. we did not take any  link in this li tag because 
 it is a sample. in css of this nav. we will css of this nav tag like this .

 #head {
            padding-top: 40px;
            background-color: black;
            height: 100%;
            width: 0%;
            color: white;
            position: fixed;
            top: 0px;
            z-index: 1;
            overflow-x: hidden; /* don t forget of this*/
            left: 0px;
            transition: width 1s ease-in-out;
        }

3. we set of this 







you can use of  this source code through copy and paste .
according to video . background image will not show in your pc because it is not save in your pc 

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        body {
            background-image: url("domenico-loia-hGV2TfOh0ns-unsplash.jpg");
/* here you can set any other background in from your pc*/
            height: 100vh;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        #head {
            padding-top: 40px;
            background-color: black;
            height: 100%;
            width: 0%;
            color: white;
            position: fixed;
            top: 0px;
            z-index: 1;
            overflow-x: hidden;
            left: 0px;
            transition: width 1s ease-in-out;
        }
        
        ul li {
            line-height: 40px;
            height: 40px;
            text-align: center;
            text-transform: capitalize;
        }
        
        .close {
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 20px;
            color: white;
            font-weight: bolder;
        }
        
        ul li:hover {
            color: green;
        }
        
        .youtube {
            position: absolute;
            top: 5px;
            left: 5px;
        }
        
        #menu {
            background-color: darkred;
            color: white;
            position: absolute;
            top: 0px;
            line-height: 40px;
            height: 40px;
            width: 100%;
            padding-left: 10px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <header id="head">
        <a class="youtube">Easy coding.7</a>
        <!-- here &time is code of icon -->
        <a class="close" onclick="myClose()">&times;</a>
        <nav>
            <ul>
                <li>home</li>
                <li>about</li>
                <li>products</li>
                <li>pricing</li>
                <li>subscribe</li>


            </ul>



        </nav>


    </header>

    <a id="menu" onclick="onOpen()">menu</a>
    <script>
        function onOpen() {
            document.getElementById('head').style.width = "40%";



        }

        function myClose() {
            document.getElementById('head').style.width = "0px";
        }
    </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Top 10 Data Analysis Tools For Your Business with Review Rated

  Top 10 Data Analysis Tools For Your Business with   Review and Rated            Data analysis  is one of the most backbone of the any success business now a days . you can not predict a success business without data analysis.  indirect or direct every business involve in Data analysis.  every business organization  want to make his own approach in the whole market through this Data analysis .  Example : what will demand of any product in Future    according to previous selling product or on demand  products  that why every business organization or business needs Data analysis . Here we will see that top 10 ten Data analysis Tools for your any business and if you are student and you are  interest to learn Data analysis and you need any free data analysis tool for exercise so don't  worry you will get two free tools with download link at the last of this all tools in this web page . There are manly two methods of data analysis: Qualitative Analysis Quantitative Analysis Qualitative
Post a Comment
Read more

Function in Python programming language

  Function in Python? In Python, a function is a group of related statements that performs a specific task. Functions help break our program into smaller and modular chunks. As our program grows larger and larger, functions make it more organized and manageable. Furthermore, it avoids repetition and makes the code reusable. Syntax of Functio n def function_name ( parameters ): """ docstring """ statement(s) Above shown is a function definition that consists of the following components. Keyword  def  that marks the start of the function header. A function name to uniquely identify the function. Function naming follows the same rules of writing identifiers in Python. Parameters (arguments) through which we pass values to a function. They are optional. A colon (:) to mark the end of the function header. Optional documentation string (docstring) to describe what the function does. One or more valid python statements that make up the function body. Stateme
Post a Comment
Read more

Glowing text in css

Glowing text in CSS Hello student in this tutorial we will see that how to make glowing text in css  so let's  break down this topic here . 1 . we taking a div or any tag, class, id for targeting text so here i am taking a id so first  we will center of this element through position absolute like this       #text  {              /* position center through position absolute*/              position :  absolute ;              top :  40 % ;              left :  50 % ;              transform :  translate ( -50 % ,  -50 % ); } 2. Again in this css we coding for text shadow like this through text-shadow carefully see of this code here and try in your code editer.             #text  {              /* position center through position absolute*/              position :  absolute ;              top :  40 % ;              left :  50 % ;              transform :  translate ( -50 % ,  -50 % );              /* text glowing like this pay attention here */              text-shadow :  0   0   4 px  
Post a Comment
Read more