Header Ads

ads header

HTML , CSS , JS Code Blogs

March 12, 2022

                   How To Make A Calculator



HTML / CSS / JAVASCRIPT
       

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<title> Simple Calculator using HTML, CSS and JavaScript </title>
<style type=”text/css”>
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: ‘Orbitron’, sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
.button {
font-family: ‘Orbitron’, sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
.button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
</style>
</head>
<body>
<table class = “calculator” >
<tr>
<td colspan = “3”> <input class = “display-box” type = “text” id = “result” disabled /> </td>

<td> <input class = “button” type = “button” value = “C” onclick = “clearScreen()” style = “background-color: #fb0066;” /> </td>
</tr>
<tr>
<td> <input class = “button” type = “button” value = “1” onclick = “display(‘1’)” /> </td>
<td> <input class = “button” type = “button” value = “2” onclick = “display(‘2’)” /> </td>
<td> <input class = “button” type = “button” value = “3” onclick = “display(‘3’)” /> </td>
<td> <input class = “button” type = “button” value = “/” onclick = “display(‘/’)” /> </td>
</tr>
<tr>
<td> <input class = “button” type = “button” value = “4” onclick = “display(‘4’)” /> </td>
<td> <input class = “button” type = “button” value = “5” onclick = “display(‘5’)” /> </td>
<td> <input class = “button” type = “button” value = “6” onclick = “display(‘6’)” /> </td>
<td> <input class = “button” type = “button” value = “-” onclick = “display(‘-‘)” /> </td>
</tr>
<tr>
<td> <input class = “button” type = “button” value = “7” onclick = “display(‘7’)” /> </td>
<td> <input class = “button” type = “button” value = “8” onclick = “display(‘8’)” /> </td>
<td> <input class = “button” type = “button” value = “9” onclick = “display(‘9’)” /> </td>
<td> <input class = “button” type = “button” value = “+” onclick = “display(‘+’)” /> </td>
</tr>
<tr>
<td> <input class = “button” type = “button” value = “.” onclick = “display(‘.’)” /> </td>
<td> <input class = “button” type = “button” value = “0” onclick = “display(‘0’)” /> </td>

<td> <input class = “button” type = “button” value = “=” onclick = “calculate()” style = “background-color: #fb0066;”> </td>
<td> <input class = “button” type = “button” value = “” onclick = “display(”)” /> </td>
</tr>
</table>
<script type=”text/javascript”>

function clearScreen() {
document.getElementById(“result”).value = “”;
}
function display(value) {
document.getElementById(“result”).value += value;
}
function calculate() {
var p = document.getElementById(“result”).value;
var q = eval(p);
document.getElementById(“result”).value = q;
}

</script>
</body>
</html>




How To Make A Price Table


HTML / CSS 

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
<style type=”text/css”>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}


.price .grey {
background-color: #eee;
font-size: 20px;
}

.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}


@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}


h1{
font-size: 60px;
background-color: black;
text-align: center;
color: red;
font-family: chiller;
}


</style>
</head>
<body>

<h1>MUJEEB KHAN ROYALZ</h1>

<div class=”columns”>
<ul class=”price”>
<li class=”header”>Basic</li>
<li class=”grey”>$ 9.99 / year</li>
<li>10GB Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class=”grey”><a href=”#” class=”button”>Sign Up</a></li>
</ul>
</div>

<div class=”columns”>
<ul class=”price”>
<li class=”header”>Pro</li>
<li class=”grey”>$ 24.99 / year</li>
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
<li class=”grey”><a href=”#” class=”button”>Sign Up</a></li>
</ul>
</div>

<div class=”columns”>
<ul class=”price”>
<li class=”header”>Basic</li>
<li class=”grey”>$ 49.99 / year</li>
<li>50GB Storage</li>
<li>50 Emails</li>
<li>50 Domains</li>
<li>5GB Bandwidth</li>
<li class=”grey”><a href=”#” class=”button”>Sign Up</a></li>
</ul>
</div>

</body>
</html>

How To Make A Login Page




HTML / CSS 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        form {
  border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

  h1{
    font-size: 66px;
    background-color: black;
    color: red;
    font-family: chiller;
    text-align: center;
  }
    </style>
</head>
<body>

<h1>MUJEEB KHAN ROYALZ</h1>

<form action="action_page.php" method="post">
  

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>


</body>
</html>


How To Make A Create Account Page



HTML / CSS 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        * {box-sizing: border-box}

  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}


.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}


.container {
  padding: 16px;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}
 .a1{
    font-size:66px;
    background-color: black;
    color:red;
    text-align: center;
    font-family: chiller;

 }


    </style>
</head>
<body>

    <h1 class="a1">MUJEEB KHAN ROYALZ</h1>

    <form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Sign Up</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

</body>
</html>

How To Make A Facebook Page 


HTML / CSS
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

    <html>
<head>
    <link href="Style.css" rel="stylesheet" />
    <title></title>
    <style type="text/css">
          body {
    text-align: center;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    background: linear-gradient(white, #D3D8E8);
}

#header_wrapper {
    width: 100%;
    min-width: 980px;
    background-color: #4c66a4;
}

#header {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    height: 85px;
}

    #header li {
        list-style-type: none;
        float: left;
        text-align: left;
        color: white;
    }

    #header #sitename {
        margin-top: 25px;
    }

        #header #sitename a {
            color: white;
            text-decoration: none;
            font-size: 30px;
            font-weight: 900;
        }

    #header form {
        margin-top: 15px;
        float: right;
    }

        #header form li {
            font-size: 13px;
            margin-left: 15px;
        }

            #header form li a {
                color: #A9BCF5;
                text-decoration: none;
            }

        #header form input[type="text"] {
            margin-top: 3px;
            margin-bottom: 3px;
            width: 150px;
            border: 1px solid #08298A;
            height: 25px;
            padding-left: 3px;
        }

        #header form input[type="password"] {
            margin-top: 3px;
            margin-bottom: 3px;
            width: 150px;
            border: 1px solid #08298A;
            height: 25px;
            padding-left: 3px;
        }

        #header form input[type="submit"] {
            height: 25px;
            margin-top: 20px;
            background-color: #084B8A;
            color: white;
            border: 1px solid #08298A;
        }

#wrapper {
    margin: 0 auto;
    padding: 0px;
    text-align: center;
    width: 980px;
}

    #wrapper div {
        float: left;
        font-family: helvetica, arial, sans-serif;
    }

    #wrapper #div1 {
        margin-top: 30px;
        width: 590px;
        text-align: left;
    }

        #wrapper #div1 p {
            font-size: 20px;
            font-family: arial;
            font-weight: bold;
            margin: 0px;
            color: #0e385f;
        }

    #wrapper #div2 {
        margin-top: 10px;
        width: 390px;
        text-align: left;
    }

        #wrapper #div2 h1 {
            margin: 0px;
            font-size: 37px;
            color: #2E2E2E;
        }

        #wrapper #div2 p {
            font-size: 18px;
            color: #2E2E2E;
        }

        #wrapper #div2 li {
            list-style-type: none;
            margin-top: 10px;
        }

            #wrapper #div2 li #firstname {
                width: 49%;
            }

            #wrapper #div2 li #surname {
                margin-left: 2%;
                width: 49%;
            }

            #wrapper #div2 li input[type="text"] {
                width: 100%;
                height: 40px;
                border-radius: 5px;
                padding-left: 10px;
                font-size: 18px;
                border: 1px solid #BDBDBD;
            }

            #wrapper #div2 li input[type="password"] {
                width: 100%;
                height: 40px;
                border-radius: 5px;
                padding-left: 10px;
                font-size: 18px;
                border: 1px solid #BDBDBD;
            }

            #wrapper #div2 li select {
                padding: 4px;
                float: left;
            }

            #wrapper #div2 li a {
                margin-left: 10px;
                width: 150px;
                color: #045FB4;
                text-decoration: none;
                font-size: 11px;
                display: inline-block;
                vertical-align: middle;
                line-height: 15px;
            }

                #wrapper #div2 li a:hover {
                    text-decoration: underline;
                }

        #wrapper #div2 li {
            color: #2E2E2E;
            font-size: 18px;
        }

        #wrapper #div2 #terms {
            color: #424242;
            font-size: 11px;
        }

            #wrapper #div2 #terms a {
                display: inline;
                margin: 0px;
            }

        #wrapper #div2 li input[type="submit"] {
            width: 205px;
            height: 45px;
            text-align: center;
            font-size: 19px;
            margin-top: 10px;
            margin-bottom: 10px;
            font-family: 'Freight Sans Bold', helvetica, arial, sans-serif !important;
            font-weight: bold !important;
            background: linear-gradient(#67ae55, #578843);
            background-color: #69a74e;
            box-shadow: inset 0 1px 1px #a4e388;
            border-color: #3b6e22 #3b6e22 #2c5115;
            border: 1px solid;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            position: relative;
            text-shadow: 0 1px 2px rgba(0,0,0,.5);
        }

        #wrapper #div2 #create_page {
            color: #424242;
            font-size: 13px;
            font-weight: bold;
        }

            #wrapper #div2 #create_page a {
                display: inline;
                margin: 0px;
                font-size: 13px;
            }

#footer_wrapper {
    width: 100%;
    clear: both;
    float: left;
    margin-top: 30px;
    min-width: 995px;
    background-color: white;
    text-align: left;
}

#footer1 {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    border-bottom: 1px solid #E6E6E6;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #848484;
}

    #footer1 a {
        color: #365899;
        display: inline;
        margin-left: 10px;
        text-decoration: none;
    }

        #footer1 a:hover {
            text-decoration: underline;
        }

#footer2 {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    font-size: 12px;
    color: #848484;
}

    #footer2 a {
        color: #365899;
        display: inline-block;
        margin: 5px;
        margin-left: 0px;
        min-width: 80px;
        text-decoration: none;
    }

        #footer2 a:hover {
            text-decoration: underline;
        }

   .a1{
    font-size:66px;
    background-color: black;
    color:red;
    text-align: center;
    font-family: chiller;

 }

   *{
    margin: 0;
    padding: 0;
   }

    </style>
</head>
<body>
    
    <h1 class="a1">MUJEEB KHAN ROYALZ</h1>

    <div id="header_wrapper">
        <div id="header">

            <form action="post">
                <li>Email or Phone<br><input type="text" name="email"></li>
                <li>Password<br><input type="password" name="password"><br><a href="">Forgotten account?</a></li>
                <li><input type="submit" name="login" value="Log In"></li>
            </form>

        </div>
    </div>

    <div id="wrapper">

        <div id="div1">

        </div>

        <div id="div2">
            <h1>Create an account</h1>

            <p>It's free and always will be.</p>
            <li><input type="text" placeholder="First Name" id="Firstname"><input type="text" placeholder="Surname" id="surname"></li>
            <li><input type="text" placeholder="Mobile number or email"></li>
            <li><input type="password" placeholder="New password"></li>

            <p>Birthday</p>

            <li>
                <select><option>Day</option></select>
                <select><option>Month</option></select>
                <select><option>Year</option></select>
                <a href="">Why do I need to provide my date of birth?</a>
            </li>

            <li><input type="radio">Female <input type="radio">Male</li>
            <li id="terms">By clicking Create an account, you agree to our <a href="">Terms</a> and that <br>you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</li>
            <li><input type="submit" value="Create an account"></li>
            <li id="create_page"><a href="">Create a Page</a> for a celebrity, band or business.</li>
        </div>

    </div>

    <div id="footer_wrapper">

        <div id="footer1">
            English (UK) <a href="">हिन्दी</a><a href="">ਪੰਜਾਬੀ</a><a href=""> اردو</a><a href="">தமிழ்</a><a href="">বাংলা</a><a href="">मराठी</a><a href="">తెలుగు</a><a href="">ગુજરાતી</a><a href="">ಕನ್ನಡ</a><a href="">മലയാളം</a>
        </div>
        <div id="footer2">

            <a href="#">Sign Up</a><a href="#">Log In</a><a href="#">Messenger</a><a href="#">DotNetTec</a><a href="#">Mobile</a><a href="#">Find Friends</a>
            <a href="#">Badges</a><a href="#">People</a><a href="#">Pages</a><a href="#">Places</a><a href="#">Games</a><a href="#">Locations</a>
            <a href="">Celebrities</a><a href="">Groups</a><a href="">Moments</a><a href="">About</a>
            <a href="">Create Advert</a><a href="">Create Page</a><a href="">Developers</a>
            <a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a href="">Ads</a><a href="">Terms</a><a href="">Help</a>

        </div>
    </div>
</body>
</html>

</body>
</html>

SIGMA RULE 





 1. Rule No =1

Never Reply To Unknown Guy !!!

2. Rule No =2

Never Judge A Person By Their Appearance !!!

3. Rule No =3

don't try to find love !!!

4. Rule No =4

Every Person Are Not Your's You Die Single Nobody Die With You !!!

5. Rule No =5

Be Honest !!!

6. Rule No =6

Never Go With The Crowd !!!

7. Rule No =7

Always Tell The Truth !!!

8. Rule No =8

Never Trust Anyone !!!

9. Rule No =9

Love For Love Slap For Slap

10. Rule No =10

They Are Born To Rebel

11. Rule No =11

They Get A Lot Of Attention With Out Even Trying

12. Rule No =12

They Have A Unique Way Of Doing Things

13. Rule No =13

They Know What They Want

14. Rule No =14

They Don't Have To Close Your Friend

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.