Skip to main content

HTML/CSS LOGIN With Monoton Font

TODAY WE HAVE FOR YOU A LOGIN  WITH A CUSTOM FONT(MONOTON)



STEP 1: FIRST CREATE A PAGE CALLED LOGIN.HTML

AND THEN PASTE THIS CODE.

[<html> 
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Monoton');
</style>
<link rel="stylesheet" href="css.css"> 
</head>
<body style ="background-color: POWDERBLUE;"> 
<h1> LOGIN </h1> 
<form action="" method="post">
USERNAME*:<input type="form" name="USERNAME*"><br/><br/> 
PASSWORD*:<input type="form" name="PASSWORD*"><br/><br/>
<input type="submit" name="submit"  value="ENTER"> 
</form>
</body>
</html>]
P.S REMOVE [ ] WHEN YOU COPY THE HTML


STEP 2: CREATE A PAGE CALLED CSS.CSS AND PASTE THE FOLLOWING CODE.

  1. h1{
  3. color:hotpink;
  4. font-family: 'Monoton', cursive;;
  5. }
  6. body{
  7. border-style: solid;
  8.     border-width: 20px;
  9. border-color: black;
  10. text-align:center;
  11. color;black;
  12. background:black;
  13. padding:52px;
  14. font-family: 'Monoton', cursive;;
  15. font-size:62px;
  16. margin-top:83px;
  18. }

NOW SAVE THIS FILE IN THE FOLDER AND SAVE IT AS CSS.CSS AND NOW OPEN THE FOLDER AND OPEN LOGIN.HTML AND THAT'S PRETTY MUCH IT!

cites:
https://fonts.google.com/specimen/Monoton?selection.family=Monoton

license:

Disclaimer:
We do not own the font used in this project such rights belong to the party mentioned in the (cites section above), the font used in this project is licensed under OPEN FONT LICENSE. The owners/ organizations mentioned above that are not us do not endorse us in any way.

Comments

Post a Comment

Popular posts from this blog

HOW TO MAKE ARTIFICIAL INTELLIGENCE WITH NOTEPAD++

OK so when you hear artificial intelligence you automatically think a super high-tech robot; well today i'm gonna show just how simple artificial intelligence actually is.

STEP 1: open notepad++ and copy the following code.
fname=inputbox ("komichiwa")
fname=inputbox ("i am ASUNA")
fname=inputbox ("whats your name")
fname=inputbox ("thats a good name")
fname=inputbox ("do you like anime or manga?")
fname=inputbox ("thats cool")
fname=inputbox ("pi=3.14")
fname=inputbox ("4*8=?")
fname=inputbox ("32")
fname=inputbox ("what is the capital of RUSSIA")
fname=inputbox ("MOSCOW")
fname=inputbox ("what is BERLIN")
fname=inputbox ("the capital of GERMANY")
fname=inputbox (" i^5=?")
fname=inputbox ("i")
fname=inputbox ("what is your favorite anime?")
fname=inputbox ("cool!!")
fname=inputbox ("what is your favorite manga")
fname=inp…
2 comments
Read more

How to make cool HTML animations

today we"ll be doing html animations. although animation is considered quite difficult its actually fairly simple. And as always just copy the code and if you have any issues or concerns just comment and we"ll get right back to you.image as backgroundAWESOME!!AWESOME!!AWESOME!!AWESOME!!ALWAYS LEARN AT WIRED2TECH!!ALWAYS LEARN AT WIRED2TECH!!ALWAYS LEARN AT WIRED2TECH!!ALWAYS LEARN AT WIRED2TECH!! check out wired2tech where youll always learn something new and usefull:) AWESOME!!AWESOME!!AWESOME!!









<!DOCTYPE html> <html> <head> <title>image as background</title>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">ALWAYS LEARN AT WIRED2TECH!!</marquee>  <marquee beha…
Post a Comment
Read more

Animated HTML Dialog

CODE:

"HTML"


<html>
<body>

<h1>ANIMATED TEXT JS</h1>

<button onclick="typeWriter()">ACTIVATE</button>

<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
</style>
<link rel="stylesheet" href="css13.css">
<body style ="background-color: orange;">

<p id="OPEN"></p>

<script>
var a = 0;
var text = 'VISIT WIRED2TECH.ORG TO LEARN TO CODE.This project was made by: Mohammed Ibrahim Mirza Beig.This project used the font "Press Start 2P" which is licensed under the open font license and was obtained from google fonts.';
var frameSD = 60;
function typeWriter() {
  if (a < text.length) {
    document.getElementById("OPEN").innerHTML += text.charAt(a);
    a++;
    setTimeout(typeWriter, frameSD);
  }
}
</script>
</body>
</html>


"CSS"

h1{ color:gold; -webkit-text-fill-…
Post a Comment
Read more