Posted on

How Build video-player in html And css ?

<head><title>navigation</title>
<link rel="stylesheet" href="../css/nav.css">
<link rel="stylesheet" href="../css/tutorial.css">
<link rel="stylesheet" href="../css/vedio.css">
<link rel="stylesheet" href="../../ionicons-2.0.1/css/ionicons.min.css">
</head>
<body>
    <div class="container">
        <button onclick="unb()" id="but">&#9776</button>
            <ul>
                <li><a href="#">MyList</a></li>
                <li><a href="#">KitHub</a></li>
                <li><a href="#">Comment</a></li>
                <li><a href="#">Image</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Help</a></li>

                <input type="search" name="search" placeholder="SEARCH TUTORIAL VIDEO" id="search">
            </ul><br>
            <!-- <button>&#8998</button> close -->
            <i style="font-size: 49px; color: white;margin-right: 10px;" onclick="img()" class="ion-ios-contact-outline"></i>
    </div>
    <div class="s">
        <div class="sidebar" id="side">
            <ul id="na">
                <li onmousemove="ule()" style="background: #0004;"><a href="paint.html" id="li"  title="paint" ><i class="ion-android-home"></i><span id="text0"  title="welcome page">Welcome Page</span></a></li>
                <li onmousemove="ule1()"><a><i class="ion-android-folder"></i><span id="text1"  title="Quiz">Klearning quiz</span></a></li>
                <li onmousemove="ule2()"><a><i class="ion-ios-videocam"></i><span id="text2" title="Tutorial">Tutorials</span></a></li>
                <li onmousemove="ule3()"><a>&#3948<span id="text3" title="Shola package">Shola package</span></a></li>
            </ul>

        </div>




        <div class="body2">
            <div class="d">
            <input type="button" id="in" value="see icon name"></br>

            <div class="contain" id="contain">
                <ul id="ul">
                    <li> <a href="#">Profile</a></li>
                    <li><a href="#">Kirubel689@gmail.com</a></li>
                    <li><a href="#">ETHIOPIA</a></li>
                    <li><a href="#">Kirubel689</a></li>
                </ul>
            </div>
        </div>
            <div class="dis">
            <video src="../img/The.Originals.S01E01.480p.mkv" controls style="border: 1px solid #1245;" height="100%" width="100%"></video>

            <div class="dis-box">
                <div class="title">
                    <h1>The Originals S01E01</h1>
                </div>
                <div class="icon">
                    <span id="span1" onmouseover="un()">&#5684<sub class="like" id="like">like</sub></span>
                    <span id="span2" onmouseover="un1()">&#6626<sub class="like" id="share">Share</sub></span>
                    <span id="span3" onmouseover="un2()">&#8878<sub class="like" id="follow">Follow</sub></span>
                </div>
                <div class="obexser">
                    <div class="profile" width="100%">
                        <img src="../img/luca.png" height="30px" width="30px" style="border-radius: 50%; border: 1px soild #0003;">
                    </div>
                    <div class="obexser-name" width="100%">
                        <span>Kira For Ever</span>
                    </div>
                </div>
                <div class="discr">
                    <details>
                        <summary>Discription list</summary>
                        <span><a href="#">https//home.html</a></span>
                    </details>
                </div>
            </div>
        </div>
        <hr style="color: aqua;">
            <div class="grid">

                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/game.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Game</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/arcane.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Education tutorials</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/luca.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Coding tutuorials</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/w11.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>University Education </h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/w12.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Short</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/Screenshot (6).png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>best obexser</h2>
                    </div></a>
                </div>
            </div>
            <h2 style="display: block;color: transparent;">AWTAR</h2>
        </div>

</div>
<script>
    function un(){
        x=document.getElementById("like").style.display;
        if(x!="none"){
            x=document.getElementById("like").style.display="none";
        }
        else{
            x=document.getElementById("like").style.display="initial";
        }
    }
    function un1(){
        x=document.getElementById("share").style.display;
        if(x!="none"){
            x=document.getElementById("share").style.display="none";
        }
        else{
            x=document.getElementById("share").style.display="initial";
        }
    }
    function un2(){
        x=document.getElementById("follow").style.display;
        if(x!="none"){
            x=document.getElementById("follow").style.display="none";
        }
        else{
            x=document.getElementById("follow").style.display="initial";
        }
    }
</script>
<script src="../js/script.js"></script>
<script src="../js/img.js"></script>
</body>

</html:5>

Posted on

How Build Html form ?

<!DOCTYPE html>
<html style="font-size: 16px;" lang="en"><head>

    <title>Comment</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="sign.css">
   </head>
  <body class="u-body u-overlap u-xl-mode" style="background: url(img/arcane.png);" data-lang="en">

<div class="container" style="text-align:left;margin-top: 10px;margin-bottom:30px;  margin-left: auto;
  margin-right: auto;background: #fff;" >
    <div class="title">Registration</div>

    <form action="#"  enctype="multipart/form-data" method="POST" >
    <div class="user-info">
        <div class="input-box">
            <span class="text">First name</span>
            <input type="text" name="firstname" placeholder="Enter Your firstname">
        </div>
        <div class="input-box">
            <span class="text">Last name</span>
            <input type="text" name="lastname" placeholder="Enter Your lastname">
        </div>
        <div class="input-box">
            <span class="text">PhoneNumber</span>
            <input type="text" name="phone" placeholder="Enter Your phonenumber">
        </div>
        <div class="input-box">
            <span class="text">Country</span>
            <input type="text" name="city" placeholder="Enter Your city">
        </div>
        <div class="input-box">
            <span class="text">Email</span>
            <input type="text" name="country" placeholder="Enter Your country">
        </div>
        <div class="input-box">
            <span class="text">Password</span>
            <input type="text" name="emergencyperson" placeholder="Enter Your Respondent's name">
        </div>
        <div class="input-box">
            <span class="text">Confirm Password</span>
            <input type="text" name="grade" id="ge" placeholder="Enter Your grade">
        </div>
        <div class="input-box">
            <span class="text">Username</span>
            <input type="text" name="wereda" placeholder="Enter Your wereda">
        </div>
        <div class="input-box">
            <span class="text">Age</span>
            <input type="date" name="age" placeholder="Enter Your age">
        </div>
        <div class="input-box">
            <span class="text">Image-Upload</span>
            <input type="file" name="image">
        </div>
    </div>
    <div class="gender-info">
<input type="radio" name="gender" id="dot-1" value="male">
<input type="radio" name="gender" id="dot-2" value="female">
<input type="radio" name="gender" id="dot-3" value="Not to say">

        <span class="gender-info">Gender</span>
        <div class="cat">
            <label for="dot-1">
                <span class="dot one"></span>
                <span class="gender">Male</span>
            </label>
           <label for="dot-2">
                <span class="dot two"></span>
                <span class="gender">female</span>
            </label>
            <label for="dot-3">
                <span class="dot three"></span>
                <span class="gender">Prefer not to say</span>
            </label>
        </div>
    </div>

    <div class="payment">

    <!-- div containing the popup -->
    <div class="content" onsubmit="togglePopup()">
        <div class="close-btn" onclick="togglePopup()">
            
        </div>
        <h3 style="color: black;" id="te"></h3>
    <div class="input-box">
      <input type="text" name="age" placeholder="Enter secret number of Berhan bank" style="margin-top: 40px;">
    </div>
      <div class="input-box">

      <input type="text" name="image" placeholder="Enter Your account number(Berhan Bank) " >
    </div>
          <div class="input-box">

      <input type="text" name="image" placeholder="Enter Your age" value="1234567">
    </div>
              <div class="input-box">
      <input type="text" name="image" placeholder="Enter Your age" value="Payment">
    </div>
    <div class="input-box">
      <input type="text" name="image" value="1100 birr" >
    </div>
      <div class="button">
  <input type="submit" name="k" value="Register" style="background: rgb(5, 44, 92);height: 70px;text-align: center;font-size: 25px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">

</div>

        <center><img src="img/logo.png" style="height: 70px;"></center> 

    </div>


    <script type="text/javascript">

        // Function to show and hide the popup
        function togglePopup() {
            $(".content").toggle();
        }
    </script>
</div>

        </form>
    <div class="button">
<button type="submit" onclick="togglePopup()" style="background: #7399;border: 1px solid transparent;">Payment</button>
</div>
</div>

        <style type="text/css">
       .content {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    transition: 2s all ease-in;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #0009;
    box-shadow: 3px 10px 10px 0px rgba(0,0,0,0.9);
    box-sizing: border-box;
    border-top: 2px solid #0009;
    padding: 10px;
    z-index: 100;
        display: none;
    /*to hide popup initially*/
transition: 3s all ease;
/* cubic-bezier(0.175, 0.885, 0.32, 1.275) */
animation: 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) shadow-mercury ;
            }
 .payment .input-box input{
border: 1px solid transparent;
background: #fff9.4;
margin-top: 10px;
height: 50px;
width: 50%;
border-radius: 5px;
color: black;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
border-bottom: 2px solid #fff;

  }
  .payment .input-box input::placeholder{

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 16px;
  }
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    background-color: #ae4732fe;
    font-size: 15px;
    color: white;
    border-radius: 50%;
    padding: 7px 14px;
    cursor:pointer;
    font-style: arial;
    font-weight: bold;
}

.image{
width: 100%;

}
.image img{
width: 100%;
}
@keyframes shadow-mercury {
    0% {
        transform: scale(1.2);
        opacity: 0.2;
        /* TOP */
      }

      25% {

        opacity: 0.4;
        /* LEFT */
      }

      50% {

        opacity: 0.6;
        /* BOTTOM */
      }

      50.01% {


        opacity: 0.7;
        /* BOTTOM */
      }

      75% {

        opacity: 0.8;
        /* RIGHT */
      }

      100% {

        opacity: 1;
        /* TOP */
      }
}
    </style>
  </body>
  </html>