Tuesday, August 31, 2021

Responsive Website Design with CSS Layout Float

Responsive Website Design with CSS Layout Float Code
<!DOCTYPE html>>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="nav.css">
    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>Html websities</title>
</head>

<body>
    <header>
        <h1>Cities</h1>
    </header>
    <section>
        <nav>
            <ul>
                <li>london</li>
                <li>paris</li>
                <li>toyko</li>
            </ul>
        </nav>
        <article>
            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
                metropolitan area of over 13 million inhabitants.</p>
            <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going
                back to its founding by the Romans, who named it Londinium</p>
        </article>
    </section>
    <footer>footer</footer>
</body>

</html>

CSS STYLESHEET CODE
*{
    box-sizing: border-box;
}
body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
header{
    background-color: #666;
    padding:10px;
    text-align: center;
    font-size: 35px;
    color: #fff;
}
nav{
    float: left;
    width: 30%;
    padding:20px;
    height:300px;
    background-color: #ccc;
}
section{
    clear: both;
    content: "";
    display: table;
}
article{
    float: left;
    width:70%;
    padding:20px;
    height:300px;
    background-color: #f1f1f1;
}
footer{
    background-color: gray;
    padding: 10px;
    text-align: center;
}

Monday, August 30, 2021

Responsive Website Design with CSS Layout Flex Box

 Responsive Website Design with CSS Layout Flex Box Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

    <h1>Css layout flexbox</h1>

    <header>

        <h1>Pakistan</h1>

    </header>

    <section>

        <nav>

            <UL>

                <li>London</li>

                <li>Paris</li>

                <li>Tokyo</li>

            </UL>

        </nav>

        <article>

            <h1>London</h1>

            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a

                metropolitan area of over 13 million inhabitants.</p>

                <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

        </article>

    </section>

    <footer>Copright websites</footer>

</body>

</html>


CSS SYLESHEET CODE

*{

    box-sizing: border-box;

}

body{

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

header{

    background-color: gray;

    padding:30px;

    text-align: center;

    font-size: 35px;

    color: #fff;

}

section{

    display: -webkit-flex;

    display: flex;

}

nav{

    -webkit-flex:flex 1 ;

    -ms-flex:flex 1 ;

    flex:flex 1 ;

    background-color: #ccc;

    padding:20px;

}

article{

    -webkit-flex:flex 3 ;

    -ms-flex: flex 3;

    flex:flex 3;

    background-color:#f1f1f1 ;

}

footer{

    background-color: gray;

    text-align: center;

    padding:10px ;

}

Sunday, August 29, 2021

Html Css Search Bar with Button

 Html Css Search Bar with Button Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<div class="main-con">

    <form>

        <input type="text"id="search"placeholder="Search.....">

        <button>Search</button>

    </form>

</div>

</body>

</html>


CSS STYLESHEET CODE

body{

    margin: 0px;

    background-color: aliceblue;

}

.main-con{

    position: absolute;

    top: 50%;

    left:50%;

    transform:translate(-50%,50%) ;

}

Saturday, August 28, 2021

Html Forms with File upload

 Html Forms with File upload Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<h1>html forms with fileupload</h1>

<form>

    <label class="my file">Select a File</label>

    <input type="file"id="my file"name="my file"><br><br>

    <input type="submit">

</form>

</body>

</html>

Friday, August 27, 2021

Html Forms with Message Element

 Html Forms with Message Element Code

<!DOCTYPE html>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<form>

    <label for="fname">You Name</label><br>

    <input type="text"id="fname"placeholder="you are name"><<br>

    <label for="lname">You last name</label><br>

    <input type="text"id="lname"placeholder="you are last-name"><br>

    <label for="message">Massage</label><br>

    <textarea type="message"id="message"placeholder="Massage"row="10"col="10"> you message</textarea><br>

      <input type="submit">

</form>

</body>

</html>

Thursday, August 26, 2021

Html Forms with fieldset

 Html Forms with fieldset Code

<!DOCTYPE html>>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="nav.css">
    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>Html Froms</title>
</head>

<body>
<h1>the fieldset</h1>
<form>
    <fieldset>
        <legend>Html forms</legend>
        <label for="fname">Name</label><br>
        <input type="text"id="fname"name="fname"value="ahmad"><br>
        <label for="lastname">lastname</label><br>
        <input type="text"id="lastname"name="lastname"value="asghar"><br>
        <input type="submit">
    </fieldset>
</form>
</body>
</html>


Html Forms with Select element

 Html Forms with Select element CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<h1> the select elment</h1>

<form>

    <label for="html">html</label>

    <select class="html"name="html">

       <option value="link">link</option>

       <option class="img">img</option>

       <option class="form">form</option>

    </select>

    <input type="submit">

</form>

</body>

</html>

Tuesday, August 24, 2021

Html Forms with Radio Button

 Html Forms with Radio Button CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<h1>Radio Button</h1>

<form>

    <input type="radio"id="html">

    <label for="html">html</label><br>

    <input type="radio"id="css">

    <label for="css">css</label><br>

    <input type="radio"id="php">

    <label for="php">php</label>

</form>

</body>

</html>

HTML FORM

 HTML FORM CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>web design</title>

</head>


<body>

    <h1>html using from</h1>

    <form>

        <label for="fname">fristname</label>

        <input type="text"id="fname"placeholder="you name"><br>

       <label for="lastname">lastname</label>

       <input type="text"id="lastname"placeholder="you last"><br>

        <input type="submit"valua="submit">

</body>

</html>

Saturday, August 21, 2021

Html&CSS Navigation bar

 Html&CSS Navigation bar Code

<!DOCTYPE html>>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="nav.css">
    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>web design</title>
</head>

<body>
    <nav>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Categories</a></li>
            <li><a href="#">Popular</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About-us</a></li>

        </ul>
    </nav>
</body>
</html>

CSS STYLESHEET CODE

body{
    margin:0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav{
    background-color: black;
    overflow: hidden;
    width: 100%;
}
ul{
    list-style-type: none;
    padding:0px;
    margin-right: 15px;
}
li{
    float: left;
}
li a{
    width:100px;
    display: block;
    color: #f1f1f1;
    text-align: center;
    padding:20px 15px;
    text-decoration: none;
}
.active{
    background-color: chartreuse;
    color: #fff;
}
li a:hover:not(.active){
     background-color: crimson;
     color:red;
}

Thursday, August 19, 2021

Html&CSS Navigation bar with icon

 Html&CSS Navigation bar with icon Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>web design</title>

</head>


<body>

  <nav>

      <ul>

          <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>

          <li><a href="#"><i class="fa fa-book" aria-hidden="true"></i>Categories</a></li>

          <li><a href="#"><i class="fa fa-fire" aria-hidden="true"></i>Popular</a></li>

          <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>About-us</a></li>

          <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i>Contact</a></li>


      </ul>

  </nav>

</body>

</html>

CSS STYLESHEET CODE

nav{

    background-color: black;

    overflow: hidden;

    

}

ul{

    list-style-type: none;

    padding:0px;

    margin-right: 15px;

}

li{

    float: left;

}

li a{

    display: block;

    color: #fff;

    text-align: center;

    padding:20px 15px;

    text-decoration: none;

}

li a:hover{

    background-color: white;

    color: #000;

}

Wednesday, August 18, 2021

Create a Navbar with Brand Logo using HTML and CSS

 Create a Navbar with Brand Logo using HTML and CSS CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>web design</title>

</head>


<body>

   <div class="logo">

    <a href="#"><img src="photo.jpg"width="70"></a>

   </div>

   <nav>

       <ul>

           <li><a href="#">HOME</a></li>

           <li><a href="#">HTML</a></li>

           <li><a href="#">CSS</a></li>

           <li><a href="#">ABOUT-US</a></li>


       </ul>

   </nav>

</body>

</html>

CSS STYLESHEET  CODE

nav{

    background-color: black;

    width: 100%;

    overflow: auto;

}

ul{

    list-style-type: none;

    padding:0px;

    margin-right: 16px;

}

li{

    float:left;

}

.logo{

    position: absolute;

    margin-top: 2px;

}

li a{

    width:100px;

    display: block;

    padding:20px 15px;

    text-align: center;

    color: #f2f2f2;

    text-decoration: none;

}

li a:hover{

    background-color: red;

    color: #000;

}

Tuesday, August 17, 2021

Responsive Website Design

 Responsive Website Design code

<!DOCTYPE html>>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="nav.css">
    <title>web design</title>
</head>

<body>
 <div class="header">
   <h1>WebSites layout</h1>
   <p>Resize the browser window to see the responsive effect</p>
 </div>
 <div class="topnav">
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#">About-us</a></li>
     </ul>
 </div>
 <div class="row">
     <div class="col-side">
         <h1>Side</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
     </div>
     <div class="col-mid">
         <h1>Main Content</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis</p>

     </div>
     <div class="col-side">
        <h1>Side</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
 </div>
 <div class="footer">Copyright not websites</div>
</body>

</html>

CSS STYLESHEET CODE
*{ box-sizing: border-box; } body{ margin:0px; } .header{ background-color: #f1f1f1; padding:20px; text-align: center; } .topnav{ overflow: hidden; background-color: black; } .topnav li{ float: left; } .topnav a{ display: block; padding:14px 16px; color: #f2f2f2; text-align: center; text-decoration: none; } .row::after{ display: table; clear: both; content:"" ; } .col{ float: left; padding:10px ; } .col-side{ width:25%; } .col-mid{ width: 50%; }

Sunday, August 15, 2021

Responsive Website Design

Responsive Website Design CODE

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>web design</title>

</head>


<body>

    <div class="header">

        <h1>Weblayout</h1>

        <p>Resize the browser window to see the responsive effect</p>

    </div>

    <div class="nav">

        <ul>

            <li><a href="#">link</a></li>

            <li><a href="#">link</a></li>

            <li><a href="#">link</a></li>

        </ul>

    </div>

    <div class="row">

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

        <div class="column">

            <h1>Column</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus

                venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget

                aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor

                sed accumsan convallis.</p>

        </div>

    </div>

</body>

</html>

CSS STYLESHEET CODE

*{
    box-sizing: border-box;
}
body{
    margin: 0px;
}
.header{
    background-color: gray;
    text-align: center;
    padding:20px;
}
.nav{
    overflow: hidden;
    background-color: #333;
}
.nav li{
    float: left;
}
.nav a{
    display: block;
    color: #fff;
    padding:14px 20px;
    text-align: center;
    text-decoration: none;
}
.row{
    content: "";
    display: table;
    clear: both;
}
.column{
    float: left;
    width:33.33%;
    padding:15px ;
}
@media screen and (max-width:600px;){
    .column{
        width:100% ;
    }
}
nav:hover{
    background-color: red;
    color: #000;
}

Friday, August 13, 2021

Html&Css navigation bar with icon code

Html&Css navigation with icon code

 <!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>CSS Searchbox</title>

</head>

<body>      

    <nav>

        <ul>

            <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>

            <li><a href="#"><i class="fa fa-music" aria-hidden="true"></i>>Music</a></li>

            <li><a href="#"><i class="fa fa-product-hunt" aria-hidden="true"></i>Product</a></li>

            <li><a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>login</a></li>


        </ul>

    </nav>

</body>

</html>

CSS STYLE SHEET CODE

nav{

    width:100%;

    background-color: gray;

    overflow: auto;

}

ul{

    list-style-type: none;

    margin-left:10px;

}

li{

    float: left;

}

li a{

    display: block;

    padding:14px 16px;

    text-decoration: none;

    text-align: center;

    color: #000;

    border:2px solid #e7e7e7;

}

li:last-child{

    float: right;

    border: 3px solid red;

    border-radius:50px;

    outline: none;

}

li a:hover{

    background-color: rosybrown;

    color: #fff;

    border-bottom:3px solid yellow ;

}

Thursday, August 12, 2021

Html Css Search Bar

 Html Css Search Bar

code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>CSS Searchbox</title>

</head>

<body>

     <div class="searchbar">

       <input type="text"name="searchbar"Placeholder="Search anthing to want.....">

       <a href="#"><i class="fa fa-search" aria-hidden="true"></i>

       </a>

     </div>

</body>

</html>

:::CSS STYLESHEET:::

*{

    padding:0px;

    margin:0px;

    font-family: sans-serif;

}

body{

    background-color: gray;

}

.searchbar{

    position: absolute;

    top:50%;

    left:50%;

  

}

input{

    border:3px solid red ;

    width:200px;

    border-radius:50px;

}

   

Tuesday, August 10, 2021

Navbar with Brand logo

Create a Navbar with Brand Logo using HTML and CSS

code

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <title>CSS Navigation Bar with logo</title>

</head>

<body>

<div class="logo"><a href="#" ><img src="logo.jpg"width="70"height="auto"></a></div>

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a class="active" href="#">Muic</a></li>

        <li><a href="#">Product</a></li>

        <li><a href="#">Event</a></li>

        <li><a href="#">Contact</a></li>



    </ul>

</nav>

</body>

</html>

CSS StyleSheet with logo navbar

ul{

    list-style-type: none;

    padding:0px;

     margin:0 0 0 15px ;

}

li{

    float: left;

}

li a{

    display: block;

    text-decoration: none;

    padding:20px 15px;

    text-align: center;

}

nav{

    width:100%;

    background-color: #e7e7e7;

    overflow: auto;

}

.logo{

    position: absolute;

    

}

.active{

    background-color: greenyellow;

    border-right:1px solid black;

}

li a:hover:not(.active){

    background-color: red;

    border-bottom:5px solid gold ;

}

Monday, August 9, 2021

Image Gallery

Image Gallery 

code             

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>


Sunday, August 8, 2021

Dropdown Image

Dropdown Image


code
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
  <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

</body>
</html>

Saturday, August 7, 2021

How to create a Simple Dropdown menu Button using html css

 How to create a Simple Dropdown menu Button using html css


code 

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

  background-color: #4CAF50;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  cursor: pointer;

}


.dropdown {

  position: relative;

  display: inline-block;

}


.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {

  display: block;

}


.dropdown:hover .dropbtn {

  background-color: #3e8e41;

}

</style>

</head>

<body>


<h2>Dropdown Menu</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>


<div class="dropdown">

  <button class="dropbtn">Dropdown</button>

  <div class="dropdown-content">

  <a href="#">Link 1</a>

  <a href="#">Link 2</a>

  <a href="#">Link 3</a>

  </div>

</div>


<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>


</body>

</html>

Friday, August 6, 2021

Create a Navbar with Brand Logo using HTML and CSS

 Create a Navbar with Brand Logo using HTML and CSS

code

    <!Doctype html>

<html>

<head><title></title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="style.css">

<head>

  <body>

<div><a href="#"><img src="logo.png"></a></div>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Music</a></li>

<li><a href="#">download</a></li>

<li><a href="#">Product</a></li>

<li><a href="#">Contack</a></li>

<li><a href="#">About-us</a></li>


</ul>

</nav>

</body>

</html>

CSS Stylesheet

body{
    margin:0px;
    padding:0px;
    background-color: gray;
}
nav{
    width:100%;
    background-color:#e7e7e7;
    overflow: auto;
    border:2px solid black;
}
ul{
    list-style-type: none;
    margin:0px;
    padding:0 0 0 15px;
}
li{
    float: left;
}
.logo{
    width:80%;
    max-width:100%;
    margin-top:15px;
    margin-left:10px ;
}
nav a{
    display: block;
    text-align: center;
    padding:10px 15px ;
    text-decoration: none;
}
li a:hover{
    background-color:yellow;
    color: #000;
    border-bottom:2px solid red ;
}

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...